@import url('/assets/vendor/fonts/outfit/outfit.css');

:root {
  --brand-primary: #B7C9F2;
  --brand-secondary: #E3ECFB;
  --brand-coral: #FF8B73;
  --brand-warm: #FFF6F1;
  --brand-soft: #F3F6FA;
  --brand-ink: #2F3440;
}

/* Voice Studio admin */
.voices-catalog-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 26px 0 38px;
}

.voices-catalog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.voices-catalog-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0e7490;
}

.voices-catalog-hero h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 54px);
  line-height: .92;
  letter-spacing: 0;
  color: #0f172a;
}

.voices-catalog-hero p:not(.voices-catalog-kicker) {
  max-width: 680px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}

.voices-catalog-admin-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-weight: 760;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}

.voices-catalog-admin-link:hover {
  opacity: .92;
  transform: translateY(-1px);
}

.voices-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.voices-catalog-card,
.voices-catalog-empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .42);
}

.voices-catalog-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 14px;
  color: inherit;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s ease, box-shadow .2s ease;
}

.voices-catalog-card:hover {
  transform: translateY(-3px);
  border-color: #bae6fd;
  box-shadow: 0 22px 48px -28px rgba(8, 145, 178, .42);
}

.voices-catalog-card-head,
.voices-catalog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voices-catalog-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-size: 16px;
  font-weight: 850;
}

.voices-catalog-avatar[data-color="rose"] { background: #be123c; }
.voices-catalog-avatar[data-color="cyan"] { background: #0e7490; }
.voices-catalog-avatar[data-color="emerald"] { background: #047857; }
.voices-catalog-avatar[data-color="amber"] { background: #b45309; }

.voices-catalog-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 850;
}

.voices-catalog-card h2 {
  margin: 14px 0 3px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 850;
}

.voices-catalog-role {
  margin: 0;
  color: #0e7490;
  font-size: 13px;
  font-weight: 760;
}

.voices-catalog-description {
  flex: 1;
  margin: 9px 0 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.voices-catalog-foot {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.voices-catalog-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.voices-catalog-empty {
  padding: 58px 26px;
  text-align: center;
}

.voices-catalog-empty i {
  font-size: 38px;
  color: #94a3b8;
}

.voices-catalog-empty h2 {
  margin: 16px 0 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 850;
}

.voices-catalog-empty p {
  margin: 0;
  color: #64748b;
}

.voice-chat-input {
  min-height: 40px;
  max-height: 120px;
}

.voice-admin-shell {
  width: min(100% - 32px, 1440px);
  margin: 0 auto;
  padding: 24px 0 40px;
}

.voice-admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.voice-admin-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0e7490;
}

.voice-admin-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .95;
  letter-spacing: 0;
  color: #0f172a;
}

.voice-admin-hero p:not(.voice-admin-kicker) {
  max-width: 760px;
  margin: 12px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}

.voice-admin-grid {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.voice-list-panel,
.voice-editor-panel,
.voice-test-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .38);
  overflow: hidden;
}

.voice-list-panel,
.voice-test-panel {
  position: sticky;
  top: 78px;
}

.voice-panel-head,
.voice-editor-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.voice-panel-head h2,
.voice-editor-top h2 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
}

.voice-panel-head p,
.voice-editor-top p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.voice-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* One voice, three things you can do to it ----------------------------------- */
.voice-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 18px 0;
  border-bottom: 1px solid #e2e8f0;
}

.voice-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  /* The border it will gain when active, reserved now, so selecting a tab does
     not nudge the row by a pixel. */
  margin-bottom: -1px;
}

.voice-tab:hover {
  color: #0f172a;
  background: #f8fafc;
}

.voice-tab.is-active {
  background: #ffffff;
  border-color: #e2e8f0;
  border-bottom: 1px solid #ffffff;
  color: #0f172a;
}

.voice-tab:focus-visible {
  outline: 2px solid #2f3440;
  outline-offset: -2px;
}

.voice-tab i {
  font-size: 15px;
}

/* `hidden` on a flex or grid child is overridden by its own display, and every
   panel in here is one. */
.voice-tabpanel[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .voice-tabs {
    padding: 10px 10px 0;
  }
  /* The label stays, under its icon: three bare icons told someone who is not
     technical nothing about where their documents or permissions were. */
  .voice-tab {
    position: relative;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 11px;
  }
  /* The count sits on the icon's corner, still seen from any tab while
     indexing runs. */
  .voice-tab .voice-tab-badge:not([hidden]) {
    position: absolute;
    top: 4px;
    right: calc(50% - 26px);
    margin-left: 0;
  }
  /* Trash and "Process all" move under the heading instead of running off the
     right edge. */
  .voice-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  .voice-panel-head-actions {
    display: flex;
    flex-wrap: wrap;
  }
  .voice-panel-head-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.voice-primary-btn,
.voice-secondary-btn,
.voice-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  font-weight: 750;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s ease, opacity .18s ease;
}

.voice-primary-btn {
  padding: 0 15px;
  background: #0f172a;
  color: #ffffff;
}

.voice-secondary-btn {
  padding: 0 14px;
  background: #f1f5f9;
  color: #334155;
}

.voice-icon-btn {
  width: 40px;
  background: #f8fafc;
  color: #64748b;
}

.voice-primary-btn:hover,
.voice-secondary-btn:hover,
.voice-icon-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.voice-primary-btn:active,
.voice-secondary-btn:active,
.voice-icon-btn:active {
  transform: scale(.98);
}

.voice-primary-btn:disabled,
.voice-secondary-btn:disabled,
.voice-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

.voice-alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #075985;
  font-size: 13px;
  font-weight: 650;
}

.voice-alert[data-tone="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.voice-skeleton-list {
  padding: 12px;
}

.voice-skeleton-list div {
  height: 72px;
  border-radius: 14px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
  background-size: 220% 100%;
  animation: voiceShimmer 1.4s ease-in-out infinite;
}

@keyframes voiceShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.voice-empty,
.voice-test-empty {
  padding: 40px 22px;
  text-align: center;
  color: #64748b;
}

.voice-empty i,
.voice-test-empty i {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 30px;
  color: #94a3b8;
}

.voice-empty h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #0f172a;
}

.voice-empty p,
.voice-test-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.voice-list {
  padding: 10px;
}

.voice-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s ease, border-color .18s ease;
}

.voice-list-item:hover {
  background: #f8fafc;
  transform: translateY(-1px);
}

.voice-list-item.is-active {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.voice-list-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 850;
}

.voice-list-copy {
  min-width: 0;
}

.voice-list-copy strong,
.voice-list-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-list-copy strong {
  color: #0f172a;
  font-size: 14px;
}

.voice-list-copy small {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

/* Health count and status together at the end of a voice's row. The count is
   as calm as the Health tab's own badge (.voice-tab-badge.is-calm). */
.voice-list-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.voice-list-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.voice-list-status,
.voice-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

.voice-list-status[data-status="published"],
.voice-status-pill[data-status="published"] {
  background: #ecfdf5;
  color: #047857;
}

.voice-list-status[data-status="archived"],
.voice-status-pill[data-status="archived"] {
  background: #fef2f2;
  color: #b91c1c;
}

.voice-form {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.voice-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.voice-form label {
  display: grid;
  gap: 7px;
}

.voice-form label span {
  color: #334155;
  font-size: 13px;
  font-weight: 760;
}

.voice-form input,
.voice-form select,
.voice-form textarea,
.voice-test-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.voice-form input:focus,
.voice-form select:focus,
.voice-form textarea:focus,
.voice-test-form textarea:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, .12);
}

.voice-form input:disabled {
  color: #64748b;
  background: #f8fafc;
}

.voice-form small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.voice-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.voice-knowledge-panel {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Adding documents: every source in one place, grouped by where it comes
   from, all the same kind of button. */
.voice-add {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.voice-add-title {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}

.voice-add-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 14px;
}

.voice-add-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.voice-add-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

.voice-add-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.voice-add-buttons .voice-secondary-btn {
  min-width: 0;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.voice-add-buttons .voice-secondary-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-add-description {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  font-size: 13px;
}

.voice-documents-list {
  display: grid;
  gap: 8px;
  padding: 14px 18px 18px;
}

.voice-documents-empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
  background: #fff;
}

/* Looking through a library rather than a handful of files ------------------- */
.voice-documents-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 10px;
}

.voice-documents-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.voice-documents-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  pointer-events: none;
}

.voice-documents-search input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  padding: 7px 10px 7px 30px;
}

.voice-documents-search input:focus {
  outline: none;
  border-color: #94a3b8;
}

.voice-documents-sort {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  padding: 7px 8px;
}

.voice-documents-count {
  color: #64748b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voice-documents-more {
  width: 100%;
  justify-content: center;
  border-style: dashed;
}

/* Where a document is in the indexing pipeline, told at a glance rather than
   buried in a line it shared with the extension and the file size. */
.voice-doc-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.voice-doc-status i {
  font-size: 12px;
}

/* Waiting for its turn: calmer than "processing", clearly not "done". */
.voice-doc-status.is-queued {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.voice-doc-status.is-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.voice-doc-status.is-busy {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.voice-doc-status.is-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.voice-doc-status.is-idle {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

/* The folder picker, which exists only while it is being used. */
.voice-document-move-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.voice-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

/* Nothing in the trash is being indexed, so it carries no status pill. */
.voice-document-row.is-trashed {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.voice-document-row strong,
.voice-document-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-document-row strong {
  color: #0f172a;
  font-size: 13px;
}

.voice-document-row small {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.voice-document-row p {
  margin: 6px 0 0;
  color: #b91c1c;
  font-size: 12px;
}

/* Knowledge: folders + documents layout */
.voice-knowledge-body {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 0;
}

.voice-folders-col {
  border-right: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.voice-folders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

.voice-folder-tree {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
}

.voice-folder-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  cursor: pointer;
  color: #334155;
  font-size: 13px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}

.voice-folder-node:hover {
  background: #f1f5f9;
}

.voice-folder-node.is-selected {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #0e7490;
}

.voice-folder-node.is-drop-target {
  background: #cffafe;
  border-color: #22d3ee;
}

.voice-folder-node > i {
  color: #94a3b8;
  font-size: 16px;
  flex-shrink: 0;
}

.voice-folder-node.is-selected > i {
  color: #0891b2;
}

.voice-folder-node .voice-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-folder-node .voice-folder-count {
  font-size: 11px;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.voice-folder-node .voice-folder-menu {
  opacity: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  flex-shrink: 0;
}

.voice-folder-node:hover .voice-folder-menu {
  opacity: 1;
}

.voice-folder-node .voice-folder-menu:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.voice-docs-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Rows adapt to the column, not the window: the column is narrow on a
     laptop even though the window is not. */
  container-type: inline-size;
}

/* A row of five controls leaves no room for the name in a narrow column --
   at 1024px the name was zero pixels wide. Below this width the actions move
   to a line of their own, under the name and its status. */
@container (max-width: 640px) {
  .voice-document-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .voice-document-row .voice-document-actions {
    grid-column: 1 / -1;
    gap: 6px;
    flex-wrap: wrap;
    order: 2;
  }

  /* The Drive line stays under the name, above the actions' own line. */
  .voice-document-row .voice-document-drive {
    margin-top: -4px;
  }

  /* The search gets a line of its own; the sort and status filters share the
     next. Squeezed between them it was two letters wide. */
  .voice-documents-toolbar {
    flex-wrap: wrap;
  }

  .voice-documents-search {
    flex: 1 1 100%;
  }
}

.voice-folder-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
  font-size: 12px;
  color: #64748b;
}

.voice-folder-breadcrumb .crumb {
  color: #475569;
}

.voice-folder-breadcrumb .crumb.current {
  color: #0f172a;
  font-weight: 600;
}

.voice-folder-breadcrumb .sep {
  color: #cbd5e1;
}

.voice-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #475569;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.voice-ghost-btn:hover {
  border-color: #22d3ee;
  color: #0e7490;
  background: #ecfeff;
}

.voice-folder-hint {
  font-size: 12px;
  color: #94a3b8;
}

.voice-folder-hint:empty {
  display: none;
}

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

.voice-document-move {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  padding: 5px 8px;
  max-width: 150px;
}

@media (max-width: 900px) {
  .voice-knowledge-body {
    grid-template-columns: 1fr;
  }
  .voice-folders-col {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    max-height: 220px;
  }
}

/* Knowledge: access (profiles + folder matrix + people) */
.voice-access-panel {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.voice-access-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 18px 18px;
}

/* Access mode switch (level / list) */
.voice-access-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 6px;
}

.voice-mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease;
}

.voice-mode-opt:hover { background: #f8fafc; }

.voice-mode-opt input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: #0891b2;
  cursor: pointer;
}

.voice-mode-text { display: flex; flex-direction: column; gap: 1px; }
.voice-mode-text strong { font-size: 13px; color: #0f172a; font-weight: 700; }
.voice-mode-text small { font-size: 11px; color: #94a3b8; }

.voice-min-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 4px 34px;
  font-size: 12px;
  color: #64748b;
}

.voice-min-level-row.is-hidden { display: none; }

.voice-access-people {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid #eef2f6;
}

.voice-access-people .voice-people-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s ease;
}

.voice-access-people .voice-people-option:last-child { border-bottom: none; }
.voice-access-people .voice-people-option:hover { background: #f8fafc; }
.voice-access-people .voice-people-option.is-checked { background: #ecfeff; }

.voice-access-people .voice-people-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #0891b2;
  cursor: pointer;
}

.voice-access-people .voice-people-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.voice-access-people .voice-people-name { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.25; }
.voice-access-people .voice-people-meta { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.voice-access-people .voice-people-option.is-static {
  justify-content: space-between;
  cursor: default;
}

.voice-access-people .voice-people-option.is-static:hover { background: transparent; }

.voice-access-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.voice-access-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px 7px 14px;
  border-bottom: 1px solid #eef2f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

/* Compact action that lives inside a card head (e.g. "New level"),
   placing the control next to the list it acts on. */
.voice-subhead-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: #0891b2;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(8, 145, 178, .25);
  transition: background .15s ease, transform .15s ease;
}

.voice-subhead-btn:hover { background: #0e7490; transform: translateY(-1px); }
.voice-subhead-btn:active { transform: scale(.98); }
.voice-subhead-btn i { font-size: 15px; line-height: 0; }

.voice-access-matrix-wrap { overflow: auto; }

.voice-access-hint {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 12px;
  color: #94a3b8;
}

table.voice-access-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.voice-access-matrix th,
table.voice-access-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: center;
}

table.voice-access-matrix thead th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
  color: #334155;
  font-weight: 600;
}

table.voice-access-matrix th.corner,
table.voice-access-matrix tbody th[scope="row"] {
  text-align: left;
  white-space: nowrap;
  color: #475569;
  font-weight: 500;
}

table.voice-access-matrix tbody th[scope="row"] i {
  color: #94a3b8;
  margin-right: 4px;
}

.voice-access-col {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.voice-access-col span {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.voice-access-matrix thead small {
  color: #94a3b8;
  font-weight: 500;
  font-size: 11px;
}

.voice-grant-box {
  width: 16px;
  height: 16px;
  accent-color: #0891b2;
  cursor: pointer;
}

.voice-access-user-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: auto;
}

.voice-access-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
}

.voice-access-user strong { display: block; font-size: 13px; color: #0f172a; }
.voice-access-user small { display: block; font-size: 11px; color: #94a3b8; }

.voice-access-select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  padding: 5px 8px;
  max-width: 150px;
}

.voice-access-badge {
  font-size: 11px;
  font-weight: 600;
  color: #0e7490;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  padding: 3px 9px;
}

/* People picker (responsible users) — replaces the native multi-select.
   Selectors are scoped under the picker so they win over the generic
   .voice-form input / label / label span rules. */
.voice-form-field {
  display: grid;
  gap: 7px;
}

.voice-form-field > span {
  color: #334155;
  font-size: 13px;
  font-weight: 760;
}

.voice-people-picker {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.voice-people-picker .voice-people-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eef2f6;
  border-radius: 0;
  background: #fff;
  padding: 10px 12px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
}

.voice-people-picker .voice-people-search:focus {
  /* This rule used to set box-shadow: none and move the border to #eef2f6 —
     near-white — on an input whose outline was already removed. Focus landed
     with nothing at all to show it: WCAG 2.4.7, and a keyboard user simply lost
     their place. Same ring the other focused inputs on this page use. */
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .18);
}

.voice-people-picker .voice-people-search::placeholder { color: #94a3b8; }

.voice-people-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}

.voice-people-list .voice-people-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s ease;
}

.voice-people-list .voice-people-option:last-child { border-bottom: none; }
.voice-people-list .voice-people-option:hover { background: #f8fafc; }
.voice-people-list .voice-people-option.is-checked { background: #ecfeff; }

.voice-people-list .voice-people-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #0891b2;
  cursor: pointer;
}

.voice-people-list .voice-people-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.voice-people-list .voice-people-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.voice-people-list .voice-people-meta {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-people-empty {
  padding: 14px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* Access — levels + folder level + people */
.voice-access-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.voice-levels-list,
.voice-folder-levels {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}

.voice-level-row,
.voice-folder-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.voice-level-row:last-child,
.voice-folder-level-row:last-child { border-bottom: none; }

.voice-level-rank {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecfeff;
  color: #0e7490;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.voice-level-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-level-users {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}

.voice-level-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.voice-level-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  line-height: 0;
}

.voice-level-btn:hover { background: #e2e8f0; color: #0f172a; }
.voice-level-btn:disabled { opacity: .35; cursor: default; }

.voice-folder-level-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-folder-level-name i { color: #94a3b8; margin-right: 6px; }

.voice-level-select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  padding: 5px 8px;
  max-width: 160px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .voice-access-body { grid-template-columns: 1fr; }
}

.voice-form-footer p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.voice-test-panel {
  display: flex;
  flex-direction: column;
  min-height: 640px;
}

.voice-test-log {
  flex: 1;
  min-height: 360px;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  background: #f8fafc;
}

.voice-test-message {
  max-width: 92%;
  margin-bottom: 12px;
  padding: 12px 13px;
  border-radius: 15px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.voice-test-message[data-role="user"] {
  margin-left: auto;
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.voice-test-message strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 850;
  opacity: .72;
}

.voice-test-message p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
}

.voice-test-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.voice-test-form textarea {
  resize: vertical;
  min-height: 72px;
}

@media (max-width: 1180px) {
  .voice-admin-grid {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .voice-test-panel {
    grid-column: 1 / -1;
    position: static;
    min-height: 520px;
  }
}

@media (max-width: 760px) {
  .voices-catalog-shell {
    width: min(100% - 24px, 1240px);
    padding-top: 22px;
  }

  .voices-catalog-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .voices-catalog-admin-link {
    width: 100%;
  }

  .voice-admin-shell {
    width: min(100% - 24px, 1440px);
    padding-top: 18px;
  }

  .voice-admin-hero,
  .voice-admin-grid,
  .voice-form-row,
  .voice-document-row,
  .voice-test-form {
    grid-template-columns: 1fr;
  }

  /* One column: the Drive line must not ask for a second one, or it squeezes
     the whole row into a narrow strip beside it. */
  .voice-document-row .voice-document-drive {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .voice-document-row .voice-document-actions {
    order: 2;
  }

  .voice-admin-hero {
    align-items: start;
  }

  .voice-list-panel,
  .voice-test-panel {
    position: static;
  }

  .voice-editor-top,
  .voice-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .voice-editor-actions {
    justify-content: stretch;
  }

  .voice-primary-btn,
  .voice-secondary-btn {
    width: 100%;
  }
}

.capability-actions {
  margin: 10px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.capability-actions-inline + br {
  display: none;
}

.capability-action {
  display: inline-grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  max-width: min(100%, 360px);
  padding: 6px 10px 6px 6px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #f8fafc;
  color: #243041;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, background-color 0.18s ease;
}

.capability-action:hover {
  border-color: #b7c9f2;
  background: #ffffff;
  transform: translateY(-1px);
}

.capability-action:active {
  transform: translateY(0) scale(0.99);
}

.capability-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef3ff;
  color: #2f3440;
  font-size: 18px;
}

.capability-action-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.capability-action-label,
.capability-action-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-action-label {
  color: #172033;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.capability-action-meta {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.capability-action-arrow {
  color: #94a3b8;
  font-size: 15px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
}

.capability-action:hover .capability-action-arrow {
  color: #2f3440;
  transform: translateX(2px);
}

.capability-action.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

.capability-action.is-loading .capability-action-icon i {
  animation: capabilitySpin 0.9s linear infinite;
}

@keyframes capabilitySpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .capability-action {
    width: 100%;
    max-width: 100%;
  }
}

.tab-btn {
  position: relative;
}

.tab-btn.tab-active {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  border-bottom-color: #2f3440 !important;
  color: #1f2937 !important;
  font-weight: 800;
  box-shadow: inset 0 -1px 0 #2f3440;
}

.tab-btn.tab-active i {
  color: #2f3440;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-ink);
}

.brand-logo {
  object-fit: contain;
  object-position: left center;
}

.brand-logo-compact {
  object-fit: contain;
}

.claara-login-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(183, 201, 242, .22), transparent 28%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--brand-coral) 13%, transparent), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #F3F6FA 52%, #FFF6F1 100%);
}

.claara-login-hero {
  background:
    radial-gradient(circle at 24% 25%, rgba(183, 201, 242, .42), transparent 28%),
    radial-gradient(circle at 76% 72%, color-mix(in srgb, var(--brand-coral) 22%, transparent), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #F3F6FA 54%, #FFF6F1 100%);
  border-right: 1px solid rgba(183, 201, 242, .32);
}

.claara-logo-on-hero {
  filter: drop-shadow(0 18px 34px rgba(47, 52, 64, .08));
}

.claara-kicker {
  /* Was #6f86bc: 3.33:1 against the hero gradient at 12px, where WCAG 1.4.3 AA
     asks for 4.5:1. Darkened within the same blue rather than restyled. */
  color: #516592;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gradient-bg {
  background: linear-gradient(135deg, #F3F6FA 0%, #FFF6F1 100%);
}

.btn-gradient,
.gradient-brand-btn {
  background: linear-gradient(90deg, #B7C9F2 0%, var(--brand-coral) 100%);
  color: #2F3440;
}

.gradient-brand {
  background: linear-gradient(135deg, #B7C9F2 0%, var(--brand-coral) 100%);
}

.claara-account-page .gradient-brand {
  background: linear-gradient(135deg, #B7C9F2 0%, #2F3440 100%);
}

.claara-account-page ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.claara-account-page ::-webkit-scrollbar-track {
  background: transparent;
}

.claara-account-page ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.claara-account-page ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  accent-color: var(--brand-coral);
}

.claara-login-page input[type="text"],
.claara-login-page input[type="password"] {
  border: 2px solid #E3ECFB;
  border-radius: 999px;
  padding: 12px 24px;
  transition: border-color .24s ease, box-shadow .24s ease;
}

.claara-login-page input[type="text"]:focus,
.claara-login-page input[type="password"]:focus {
  outline: none;
  border-color: #B7C9F2;
  box-shadow: 0 0 0 4px rgba(183, 201, 242, .26);
}

/* Room for Show/Hide inside the password field, as on set-password.php. */
.claara-login-page .claara-password-link__input input {
  padding-right: 5.5rem;
}

.claara-login-page .claara-password-link__reveal {
  right: .6rem;
  border-radius: 999px;
}

/* Lead Finder gesture */
.lead-finder-accent {
  --lf-accent: #0f9f7a;
  --lf-accent-dark: #08745c;
  --lf-ink: #16211f;
  --lf-line: rgba(15, 118, 110, 0.14);
}

.lead-finder-shell {
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.72), rgba(255, 255, 255, 0.88) 42%, rgba(236, 253, 245, 0.74)),
    radial-gradient(circle at 12% 8%, rgba(15, 159, 122, 0.12), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(20, 184, 166, 0.10), transparent 24%);
}

.lead-finder-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 118, 110, 0.12);
  box-shadow: 0 24px 60px -38px rgba(15, 118, 110, 0.38);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.lead-finder-command {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9)),
    radial-gradient(circle at 0% 0%, rgba(15, 159, 122, 0.08), transparent 28%);
  border: 1px solid rgba(15, 118, 110, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 42px -36px rgba(15, 118, 110, 0.45);
}

.lead-finder-input {
  resize: none;
  min-height: 88px;
  color: #16211f;
}

.lead-finder-input:focus {
  outline: none;
}

.lead-finder-primary {
  background: linear-gradient(135deg, #0f9f7a, #08745c);
  color: #fff;
  box-shadow: 0 16px 36px -24px rgba(8, 116, 92, 0.72);
}

.lead-finder-primary:hover {
  filter: brightness(0.98);
}

.lead-finder-primary:active,
.lead-finder-icon-btn:active,
.lead-finder-chip:active {
  transform: translateY(1px) scale(0.99);
}

.lead-finder-chip {
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #31534b;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, background-color .22s ease;
}

.lead-finder-chip:hover {
  border-color: rgba(15, 159, 122, 0.34);
  background: rgba(240, 253, 250, 0.9);
}

.lead-finder-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #64748b;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), color .2s ease, background-color .2s ease;
}

.lead-finder-icon-btn:hover {
  background: rgba(15, 159, 122, 0.08);
  color: #08745c;
}

.lead-finder-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0f9f7a;
  animation: leadFinderBreathe 1.8s ease-in-out infinite;
}

@keyframes leadFinderBreathe {
  0%, 100% { opacity: .48; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.14); }
}

.lead-finder-table-wrap {
  overflow: auto;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
}

.lead-finder-table {
  min-width: 1120px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.lead-finder-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 250, 252, 0.96);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  text-align: left;
}

.lead-finder-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.95);
  vertical-align: top;
}

.lead-finder-cell-input,
.lead-finder-cell-select {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  padding: 7px 8px;
  color: #243631;
  transition: border-color .18s ease, background-color .18s ease;
}

.lead-finder-cell-input:focus,
.lead-finder-cell-select:focus {
  outline: none;
  border-color: rgba(15, 159, 122, 0.35);
  background: #fff;
}

.lead-finder-cell-input-empty {
  color: #94a3b8;
  font-style: italic;
}

.lead-finder-cell-input::placeholder {
  color: #94a3b8;
}

.lead-finder-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.lead-finder-status-pending {
  color: #64748b;
  background: #f1f5f9;
}

.lead-finder-status-validated {
  color: #06714f;
  background: #dcfce7;
}

.lead-finder-status-rejected {
  color: #b42318;
  background: #fee2e2;
}

.lead-finder-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #ffffff 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: leadFinderShimmer 1.25s ease-in-out infinite;
}

.lead-finder-accent .history-item.active {
  background-color: rgba(15, 159, 122, 0.08);
  border-left: 3px solid #0f9f7a;
}

.lead-finder-accent .history-item.active p {
  color: #08745c;
  font-weight: 700;
}

@keyframes leadFinderShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Connector workspace */
.connectors-accent {
  --connector-accent: #0f8f83;
  --connector-ink: #102522;
  --connector-muted: #64748b;
}

.connectors-hero,
.connectors-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 20px;
  align-items: stretch;
  margin: 18px 0 22px;
}

.connectors-hero-copy,
.connectors-admin-copy {
  min-height: 220px;
  border: 1px solid rgba(203, 213, 225, .7);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.84)),
    radial-gradient(circle at 20% 0%, rgba(15,143,131,.14), transparent 34%);
  box-shadow: 0 22px 48px -32px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255,255,255,.86);
  padding: 30px;
}

.connectors-kicker {
  margin: 0 0 12px;
  color: #0f8f83;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.connectors-hero h1,
.connectors-admin-copy h1 {
  max-width: 720px;
  margin: 0;
  color: var(--connector-ink);
  font-size: clamp(28px, 4vw, 52px);
  line-height: .98;
  letter-spacing: 0;
  font-weight: 800;
}

.connectors-hero p,
.connectors-admin-copy p {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--connector-muted);
  font-size: 15px;
  line-height: 1.65;
}

.connectors-hero-panel,
.connectors-admin-metrics {
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px -34px rgba(15, 23, 42, .42), inset 0 1px 0 rgba(255,255,255,.92);
}

.connectors-hero-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
}

.connectors-panel-label,
.connectors-admin-metrics label {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.connectors-hero-panel strong {
  display: block;
  max-width: 220px;
  margin-top: 8px;
  color: var(--connector-ink);
  font-size: 22px;
  line-height: 1.1;
}

.connectors-pulse {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #0f8f83;
  box-shadow: 0 0 0 0 rgba(15,143,131,.25);
  animation: connectorsPulse 2.2s ease-out infinite;
}

.connectors-admin-metrics {
  display: grid;
  grid-template-columns: 1fr;
  padding: 18px;
  gap: 10px;
}

.connectors-admin-metrics > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(226, 232, 240, .86);
  padding: 10px 2px 14px;
}

.connectors-admin-metrics > div:last-child {
  border-bottom: 0;
}

.connectors-admin-metrics span {
  color: var(--connector-ink);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.connectors-grid-shell {
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 44px -34px rgba(15, 23, 42, .38);
  overflow: hidden;
}

.connectors-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(226, 232, 240, .86);
  padding: 18px 20px;
}

.connectors-section-head h2 {
  margin: 0;
  color: var(--connector-ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

.connectors-section-head p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 12px;
}

.connectors-icon-btn,
.connectors-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(203, 213, 225, .72);
  background: #fff;
  color: #334155;
  transition: transform .2s cubic-bezier(.16,1,.3,1), background-color .2s ease, border-color .2s ease;
}

.connectors-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.connectors-icon-btn:hover,
.connectors-primary-btn:hover:not(:disabled) {
  border-color: rgba(15,143,131,.28);
  background: #f0fdfa;
  color: #0f766e;
}

.connectors-icon-btn:active,
.connectors-primary-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
}

.connectors-loading-grid,
.connectors-provider-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 16px;
  padding: 18px;
}

.connectors-skeleton {
  min-height: 250px;
  border-radius: 22px;
  background: linear-gradient(90deg, #f1f5f9 25%, #ffffff 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: connectorsShimmer 1.25s ease-in-out infinite;
}

.connectors-provider-card {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 22px;
  background: #fff;
  padding: 20px;
  animation: connectorsReveal .42s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--index) * 70ms);
}

.connectors-provider-topline,
.connectors-provider-meta,
.connectors-admin-provider {
  display: flex;
  align-items: center;
}

.connectors-provider-topline {
  justify-content: space-between;
  gap: 12px;
}

.connectors-provider-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid rgba(15,143,131,.12);
}

.connectors-provider-icon i {
  font-size: 22px;
}

.connectors-provider-body h3,
.connectors-admin-provider h3 {
  margin: 0;
  color: var(--connector-ink);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
}

.connectors-provider-body p,
.connectors-admin-provider p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.connectors-provider-body span {
  display: inline-flex;
  margin-top: 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.connectors-provider-meta {
  justify-content: space-between;
  border-top: 1px solid rgba(226, 232, 240, .9);
  border-bottom: 1px solid rgba(226, 232, 240, .9);
  padding: 14px 0;
}

.connectors-provider-meta strong,
.connectors-admin-stat strong {
  display: block;
  color: var(--connector-ink);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.connectors-provider-meta span,
.connectors-admin-stat span {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.connectors-primary-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}

.connectors-primary-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.connectors-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
}

.connectors-status-connected,
.connectors-status-not_connected {
  color: #0f766e;
  background: #ccfbf1;
}

.connectors-status-error,
.connectors-status-needs_attention {
  color: #b42318;
  background: #fee2e2;
}

.connectors-status-planned {
  color: #64748b;
  background: #f1f5f9;
}

.connectors-error {
  margin: 18px;
  border: 1px solid #fecaca;
  border-radius: 16px;
  background: #fef2f2;
  color: #b42318;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
}

/* Claara file picker modal (OneDrive and future cloud sources) */
.cfp-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: min(78vh, 640px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(47, 52, 64, 0.45);
  overflow: hidden;
  animation: attachMenuRise 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.cfp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
}

.cfp-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(183, 201, 242, 0.18);
  color: #2f3440;
  font-size: 19px;
  flex-shrink: 0;
}

.cfp-header h3 {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #94a3b8;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cfp-close:hover {
  background: #f1f5f9;
  color: #334155;
}

.cfp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 20px 10px;
  font-size: 13px;
  min-height: 24px;
}

.cfp-crumb {
  color: #64748b;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cfp-crumb:hover {
  background: rgba(183, 201, 242, 0.16);
  color: #2f3440;
}

.cfp-crumb-current {
  color: #0f172a;
  font-weight: 700;
  padding: 2px 6px;
}

.cfp-crumb-sep {
  color: #cbd5e1;
  font-size: 12px;
}

.cfp-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 12px;
  border-top: 1px solid #f1f5f9;
  min-height: 220px;
}

.cfp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  user-select: none;
}

.cfp-item:hover {
  background: #f8fafc;
}

.cfp-item-selected,
.cfp-item-selected:hover {
  background: rgba(183, 201, 242, 0.18);
}

.cfp-item-disabled {
  opacity: 0.4;
  cursor: default;
}

.cfp-item > i:first-child {
  font-size: 19px;
  flex-shrink: 0;
}

.cfp-icon-folder { color: #b7c9f2; }
.cfp-icon-pdf { color: #ef4444; }
.cfp-icon-image { color: #b7c9f2; }
.cfp-icon-sheet { color: #059669; }
.cfp-icon-doc { color: #3b82f6; }
.cfp-icon-slides { color: #f59e0b; }
.cfp-icon-generic { color: #94a3b8; }

.cfp-item-name {
  flex: 1;
  font-size: 14px;
  color: #1e293b;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfp-item-meta {
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
}

.cfp-item-arrow,
.cfp-item-check {
  color: #94a3b8;
  font-size: 15px;
  flex-shrink: 0;
}

.cfp-item-check {
  color: #2f3440;
}

.cfp-skeleton {
  height: 40px;
  margin: 6px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 42%, #f1f5f9 60%);
  background-size: 200% 100%;
  animation: cfpShimmer 1.2s ease-in-out infinite;
}

@keyframes cfpShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.cfp-empty,
.cfp-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 42px 20px;
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}

.cfp-empty i,
.cfp-error i {
  font-size: 28px;
}

.cfp-error {
  color: #b42318;
}

.cfp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
}

.cfp-selection {
  flex: 1;
  font-size: 13px;
  color: #64748b;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfp-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cfp-btn-ghost {
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  transition: background-color 0.15s ease;
}

.cfp-btn-ghost:hover {
  background: #f1f5f9;
}

.cfp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #0f172a;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cfp-btn-primary:hover:not(:disabled) {
  background: #1e293b;
}

.cfp-btn-primary:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Attach source menu (chat composer: device / Google Drive) */
.attach-menu {
  position: fixed;
  z-index: 90;
  min-width: 250px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -18px rgba(47, 52, 64, 0.35);
  animation: attachMenuRise 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes attachMenuRise {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  transition: background-color 0.15s ease;
}

.attach-menu-item:hover,
.attach-menu-item:focus-visible {
  background: rgba(183, 201, 242, 0.16);
  outline: none;
}

.attach-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(183, 201, 242, 0.18);
  color: #2f3440;
  font-size: 18px;
  flex-shrink: 0;
}

.attach-menu-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.attach-menu-copy span {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.attach-menu-copy small {
  font-size: 12px;
  color: #64748b;
}

/* Spinner for the "importing from Drive" file chip */
.file-chip-spin {
  animation: fileChipSpin 1s linear infinite;
  display: inline-block;
}

@keyframes fileChipSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.connectors-notice {
  margin: 0 0 16px;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
}

.connectors-notice-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.connectors-notice-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.connectors-admin-list {
  padding: 10px 18px 18px;
}

.connectors-admin-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 120px 120px 120px 120px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(226, 232, 240, .86);
  padding: 16px 0;
  animation: connectorsReveal .42s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--index) * 60ms);
}

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

.connectors-admin-provider {
  gap: 12px;
  min-width: 0;
}

.connectors-admin-stat {
  text-align: left;
}

@media (max-width: 1023px) {
  .connectors-hero,
  .connectors-admin-layout,
  .connectors-loading-grid,
  .connectors-provider-grid {
    grid-template-columns: 1fr;
  }

  .connectors-hero-copy,
  .connectors-admin-copy {
    min-height: auto;
    padding: 24px;
  }

  .connectors-admin-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .connectors-admin-row {
    grid-template-columns: 1fr;
  }
}

@keyframes connectorsPulse {
  0% { box-shadow: 0 0 0 0 rgba(15,143,131,.26); }
  70% { box-shadow: 0 0 0 14px rgba(15,143,131,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,143,131,0); }
}

@keyframes connectorsShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes connectorsReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Public pages: the landing (index.php) and Platform (platform.php).
 * Copy and colours come from the September 2026 sales deck: dark headings with
 * a periwinkle second line, and one colour per pillar (Find, Create, Improve,
 * Govern). Text colours are a shade darker than the deck's where the deck's own
 * would fall under 3:1 on white. */
.landing-page {
  --lp-width: min(100% - 32px, 1240px);
  --lp-ink: #1f2430;
  --lp-text: #566074;
  --lp-muted: #7a8394;
  --lp-accent: #6C88F8;
  --lp-line: rgba(226, 232, 240, .9);
  --lp-card: rgba(255, 255, 255, .78);
  --lp-coral-text: #E5533F;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--lp-ink);
  background:
    radial-gradient(circle at 96% 4%, rgba(183, 201, 242, .55), transparent 26%),
    radial-gradient(circle at 0% 48%, rgba(183, 201, 242, .32), transparent 28%),
    linear-gradient(135deg, #F3F6FA 0%, #fff 46%, #FFF6F1 100%);
}

/* The deck's corner rings, drawn inside the page so nothing scrolls sideways. */
.landing-page::before,
.landing-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.landing-page::before {
  top: 0;
  right: 0;
  width: min(620px, 70vw);
  height: 440px;
  background:
    radial-gradient(circle at 100% 0, transparent 318px, rgba(255, 255, 255, .95) 319px, rgba(255, 255, 255, .95) 321px, transparent 322px),
    radial-gradient(circle at 100% 0, rgba(183, 201, 242, .3), rgba(227, 236, 251, .14) 300px, transparent 320px);
}

.landing-page::after {
  top: 1100px;
  left: 0;
  width: min(300px, 50vw);
  height: 600px;
  background:
    radial-gradient(circle at 0 50%, transparent 268px, rgba(255, 255, 255, .95) 269px, rgba(255, 255, 255, .95) 271px, transparent 272px),
    radial-gradient(circle at 0 50%, rgba(183, 201, 242, .3), rgba(227, 236, 251, .12) 250px, transparent 270px);
}

.landing-page > * {
  position: relative;
  z-index: 1;
}

.landing-page .is-find {
  --pillar: #5470FC;
  --pillar-text: #3F5BE8;
  --pillar-soft: rgba(84, 112, 252, .09);
}

.landing-page .is-create {
  --pillar: #FC6C60;
  --pillar-text: var(--lp-coral-text);
  --pillar-soft: rgba(252, 108, 96, .09);
}

.landing-page .is-improve {
  --pillar: #18B89C;
  --pillar-text: #0B8370;
  --pillar-soft: rgba(24, 184, 156, .1);
}

.landing-page .is-govern {
  --pillar: #6C5CE4;
  --pillar-text: #5A49D6;
  --pillar-soft: rgba(108, 92, 228, .09);
}

.landing-skip {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  background: var(--lp-ink);
  transform: translateY(-160%);
}

.landing-skip:focus {
  transform: none;
}

/* Navigation */
.landing-nav {
  width: var(--lp-width);
  margin: 0 auto;
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.landing-brand img {
  width: auto;
  height: 52px;
}

.landing-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--lp-line);
}

.landing-links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: #5d6676;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}

.landing-links a:hover,
.landing-links a[aria-current="page"] {
  color: var(--lp-ink);
  background: #fff;
}

.landing-nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-login,
.landing-ghost,
.landing-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, box-shadow .24s ease;
}

.landing-login,
.landing-ghost {
  color: #485264;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(47, 52, 64, .1);
}

.landing-login:hover,
.landing-ghost:hover {
  border-color: rgba(47, 52, 64, .24);
}

.landing-demo {
  color: #252a34;
  background: linear-gradient(90deg, #B7C9F2 0%, var(--brand-coral) 100%);
  box-shadow: 0 22px 48px -34px rgba(47, 52, 64, .58);
}

.landing-demo:hover {
  box-shadow: 0 26px 52px -30px rgba(47, 52, 64, .62);
}

.landing-demo i {
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

.landing-demo:hover i {
  transform: translateX(3px);
}

.landing-login:active,
.landing-ghost:active,
.landing-demo:active {
  transform: translateY(1px) scale(.99);
}

.landing-demo-lg,
.landing-actions .landing-ghost {
  min-height: 52px;
  padding: 0 24px;
}

/* Shared type */
.landing-title {
  color: var(--lp-ink);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
}

.landing-title span {
  display: block;
  color: var(--lp-accent);
}

.landing-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--pillar-text, #5d6676);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--pillar-soft, rgba(255, 255, 255, .7));
  border: 1px solid color-mix(in srgb, var(--pillar, #94a3b8) 22%, transparent);
}

.landing-lede {
  max-width: 56ch;
  margin-top: 20px;
  color: var(--lp-text);
  font-size: 18px;
  line-height: 1.65;
}

.landing-section {
  width: var(--lp-width);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 0;
}

/* Hero */
.landing-hero {
  width: var(--lp-width);
  min-height: calc(100dvh - 92px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: 24px 0 72px;
}

.landing-motto {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.landing-motto .is-find { color: #1462F8; }
.landing-motto .is-create { color: #8193F7; }
.landing-motto .is-improve { color: var(--lp-coral-text); }

.landing-hero h1 {
  margin-top: 18px;
  color: var(--lp-ink);
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.landing-hero h1 em,
.landing-cta-tagline em {
  font-style: normal;
  color: var(--lp-coral-text);
  white-space: nowrap;
}

.landing-hero-sub {
  margin-top: 22px;
  color: var(--lp-ink);
  font-size: 20px;
  font-weight: 600;
}

.landing-hero .landing-lede {
  margin-top: 12px;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* The challenge */
.landing-challenge {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.landing-challenge-list {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.landing-challenge-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #394150;
  font-size: 18px;
  line-height: 1.45;
}

.landing-challenge-list i {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #3F5BE8;
  font-size: 20px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--lp-line);
}

.landing-scatter {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 420px);
  justify-self: center;
}

.landing-scatter-ring {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 2px dashed rgba(108, 136, 248, .35);
  animation: landingSpin 60s linear infinite;
}

.landing-scatter-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3F5BE8;
  font-size: 64px;
  font-weight: 700;
  background: radial-gradient(circle at 35% 30%, #fff, #E3ECFB 70%);
  box-shadow: 0 30px 60px -36px rgba(63, 91, 232, .6);
  transform: translate(-50%, -50%);
}

.landing-scatter-tile {
  position: absolute;
  width: 72px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #6C88F8;
  font-size: 26px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--lp-line);
  box-shadow: 0 20px 40px -30px rgba(47, 52, 64, .5);
  animation: landingDrift 7s ease-in-out infinite;
}

.landing-scatter-tile.t1 { top: 4%; left: 30%; transform: rotate(-6deg); }
.landing-scatter-tile.t2 { top: 22%; right: 0; animation-delay: -2s; }
.landing-scatter-tile.t3 { bottom: 14%; right: 6%; transform: rotate(5deg); animation-delay: -4s; }
.landing-scatter-tile.t4 { bottom: 2%; left: 30%; animation-delay: -1s; }
.landing-scatter-tile.t5 { top: 40%; left: 0; transform: rotate(-4deg); animation-delay: -3s; }

.landing-scatter-spark {
  position: absolute;
  color: var(--brand-coral);
  font-size: 24px;
}

.landing-scatter-spark.s1 { top: 10%; right: 12%; }
.landing-scatter-spark.s2 { bottom: 26%; left: 10%; font-size: 18px; }

/* Numbers */
.landing-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.landing-stat {
  padding: 30px;
  border-radius: 28px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  box-shadow: 0 30px 70px -60px rgba(47, 52, 64, .6);
}

.landing-stat i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3F5BE8;
  font-size: 24px;
  background: rgba(84, 112, 252, .1);
}

.landing-stat strong {
  display: block;
  margin-top: 22px;
  color: var(--lp-accent);
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.landing-stat p {
  margin-top: 12px;
  color: #394150;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.landing-stat.is-coral i {
  color: var(--lp-coral-text);
  background: rgba(252, 108, 96, .1);
}

.landing-sources {
  margin-top: 22px;
  color: var(--lp-muted);
  font-size: 13px;
  font-style: italic;
}

/* Where companies start */
.landing-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.landing-journey-card {
  padding: 32px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--lp-line);
}

.landing-journey-card h3 {
  color: var(--lp-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.landing-journey-card > p {
  margin-top: 8px;
  color: var(--lp-text);
  font-size: 16px;
}

.landing-journey-card ul {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.landing-journey-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #394150;
  line-height: 1.45;
}

.landing-journey-card li i {
  flex: none;
  margin-top: 1px;
  color: var(--lp-coral-text);
  font-size: 20px;
}

.landing-journey-goal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 999px;
  color: #3F5BE8;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  text-align: center;
  background: rgba(84, 112, 252, .08);
  border: 1px solid rgba(84, 112, 252, .18);
}

/* Four pillars */
.landing-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.landing-pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--pillar-soft), rgba(255, 255, 255, .72));
  border: 1px solid color-mix(in srgb, var(--pillar) 18%, transparent);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.landing-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -44px color-mix(in srgb, var(--pillar) 70%, transparent);
}

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

.landing-pillar-head b {
  color: var(--pillar-text);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.landing-pillar-head i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--pillar-text);
  font-size: 24px;
  background: color-mix(in srgb, var(--pillar) 14%, #fff);
}

.landing-pillar strong {
  color: var(--lp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.landing-pillar p {
  color: var(--lp-text);
  line-height: 1.6;
}

.landing-pillar.is-govern {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 40px;
  row-gap: 6px;
}

.landing-pillar.is-govern .landing-pillar-head {
  grid-row: 1 / 3;
  justify-content: flex-start;
}

/* Feature sections */
.landing-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.landing-feature-lead {
  margin-top: 20px;
  color: #394150;
  font-size: 19px;
  line-height: 1.55;
}

.landing-benefits {
  margin-top: 28px;
  padding-top: 20px;
  color: var(--lp-ink);
  font-size: 17px;
  font-weight: 700;
  border-top: 1px solid var(--lp-line);
}

.landing-points {
  display: grid;
  gap: 14px;
}

.landing-points article {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
}

.landing-points i {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--pillar-text);
  font-size: 22px;
  background: var(--pillar-soft);
}

.landing-points h3 {
  color: var(--pillar-text);
  font-size: 19px;
  font-weight: 700;
}

.landing-points p {
  margin-top: 6px;
  color: var(--lp-text);
  line-height: 1.55;
}

.landing-points.is-plain {
  margin-top: 30px;
  gap: 4px;
}

.landing-points.is-plain article {
  padding: 12px 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.landing-deliverables {
  margin-top: 26px;
}

.landing-deliverables h3 {
  margin-top: 20px;
  color: var(--pillar-text);
  font-size: 19px;
  font-weight: 700;
}

.landing-deliverables h3:first-child {
  margin-top: 0;
}

.landing-deliverables ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.landing-deliverables li {
  padding: 7px 12px;
  border-radius: 999px;
  color: #394150;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--lp-line);
}

.landing-deliverables p {
  margin-top: 6px;
  color: var(--lp-text);
  line-height: 1.55;
}

/* Product screens drawn in HTML, with the screens' real copy */
.landing-screen {
  min-width: 0;
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 34px 82px -58px rgba(47, 52, 64, .62);
}

.landing-screen-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.landing-screen-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, #2BA59A, #1D7F86);
}

.landing-screen-head strong {
  color: var(--lp-ink);
  font-size: 22px;
}

.landing-screen-head small {
  max-width: 44ch;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.landing-gesture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.landing-gesture-grid span {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--lp-line);
}

.landing-gesture-grid i {
  margin-bottom: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #1D7F86;
  font-size: 17px;
  background: rgba(43, 165, 154, .12);
}

.landing-gesture-grid b {
  color: var(--lp-ink);
  font-size: 13px;
  line-height: 1.3;
}

.landing-gesture-grid small {
  color: var(--lp-muted);
  font-size: 11px;
  line-height: 1.35;
}

.landing-org {
  display: grid;
  gap: 6px;
  align-self: start;
}

.landing-org-eyebrow {
  color: #36707a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.landing-org-title {
  color: var(--lp-ink);
  font-size: 30px;
  line-height: 1.1;
}

.landing-org > small {
  color: var(--lp-muted);
  font-size: 13px;
}

.landing-org-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin-top: 14px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
}

.landing-org-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--lp-muted);
  font-size: 13px;
  font-weight: 600;
}

.landing-org-tabs .is-active {
  color: var(--lp-ink);
  background: #E3ECFB;
}

.landing-org-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #9aa3b2;
  font-size: 13px;
  border: 1px solid var(--lp-line);
}

.landing-org-levels {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--lp-line);
}

.landing-org-levels b {
  color: var(--lp-ink);
  font-size: 14px;
}

.landing-org-levels small {
  margin-bottom: 4px;
  color: var(--lp-muted);
  font-size: 12px;
  line-height: 1.45;
}

.landing-org-levels span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #394150;
  font-size: 13px;
  background: #F8FAFC;
  border: 1px solid var(--lp-line);
}

.landing-org-levels em {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--lp-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  border: 1px solid var(--lp-line);
}

.landing-loop {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--lp-line);
}

.landing-loop li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-ink);
  font-size: 16px;
  font-weight: 700;
}

.landing-loop li + li::before {
  content: "→";
  color: var(--lp-accent);
}

.landing-loop li:last-child {
  color: #3F5BE8;
}

/* Closing call to action and footer */
.landing-cta {
  width: var(--lp-width);
  margin: clamp(32px, 6vw, 72px) auto 0;
  padding: clamp(40px, 6vw, 72px) 28px;
  display: grid;
  justify-items: center;
  gap: 18px;
  border-radius: 36px;
  text-align: center;
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--brand-coral) 22%, transparent), transparent 40%),
    radial-gradient(circle at 10% 100%, rgba(183, 201, 242, .2), transparent 45%),
    #2F3440;
}

.landing-cta-tagline {
  color: rgba(255, 255, 255, .78);
  font-size: 18px;
  font-weight: 600;
}

.landing-cta-tagline em {
  color: #FFB39F;
}

.landing-cta h2 {
  color: #fff;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.landing-cta .landing-demo {
  margin-top: 8px;
}

.landing-cta-contact {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: rgba(255, 255, 255, .7);
}

.landing-cta-contact strong {
  color: #fff;
  font-weight: 600;
}

.landing-cta-contact a {
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-footer {
  width: var(--lp-width);
  margin: 0 auto;
  padding: 32px 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.landing-footer img {
  width: auto;
  height: 40px;
}

.landing-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--lp-text);
  font-size: 14px;
  font-weight: 600;
}

.landing-footer a:hover {
  color: var(--lp-ink);
}

/* Platform page */
.landing-page-hero {
  width: var(--lp-width);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 0 8px;
}

.landing-page-hero .landing-title {
  max-width: 18ch;
  font-size: clamp(40px, 5.2vw, 68px);
}

.landing-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.landing-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--pillar-text);
  font-weight: 700;
  background: var(--pillar-soft);
  border: 1px solid color-mix(in srgb, var(--pillar) 22%, transparent);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

.landing-jump a:hover {
  transform: translateY(-2px);
}

.landing-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.landing-step-grid article {
  padding: 28px;
  border-radius: 26px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
}

.landing-step-grid span {
  color: var(--lp-accent);
  font-size: 15px;
  font-weight: 700;
}

.landing-step-grid h3 {
  margin-top: 14px;
  color: var(--lp-ink);
  font-size: 22px;
  font-weight: 700;
}

.landing-step-grid p {
  margin-top: 10px;
  color: var(--lp-text);
  line-height: 1.6;
}

.landing-detail-head {
  max-width: 760px;
}

.landing-detail-head > p:not(.landing-tag) {
  margin-top: 18px;
  color: var(--lp-text);
  font-size: 18px;
  line-height: 1.6;
}

.landing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.landing-card-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-card {
  padding: 28px;
  border-radius: 26px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
}

.landing-card i,
.landing-library i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--pillar-text);
  font-size: 22px;
  background: var(--pillar-soft);
}

.landing-card h3 {
  margin-top: 18px;
  color: var(--lp-ink);
  font-size: 20px;
  font-weight: 700;
}

.landing-card p {
  margin-top: 8px;
  color: var(--lp-text);
  line-height: 1.6;
}

.landing-library {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.landing-library article {
  padding: 22px;
  border-radius: 22px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}

.landing-library article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pillar) 40%, transparent);
}

.landing-library h3 {
  margin-top: 16px;
  color: var(--lp-ink);
  font-size: 17px;
  font-weight: 700;
}

.landing-library p {
  margin-top: 6px;
  color: var(--lp-text);
  font-size: 14px;
  line-height: 1.55;
}

/* The workspace preview, shared with the deck's "Access knowledge" slide */
.claara-product-frame {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 180px;
  min-height: 540px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 34px 82px -58px rgba(47, 52, 64, .62);
  overflow: hidden;
  animation: claaraLandingFloat 8s ease-in-out infinite;
}

.claara-product-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px;
  background: linear-gradient(180deg, #2F3440 0%, #242935 100%);
}

.claara-product-rail span {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .62);
}

.claara-product-rail .is-active {
  color: #fff;
  background: rgba(183, 201, 242, .22);
}

.claara-product-main {
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.claara-product-topbar,
.claara-product-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.claara-product-eyebrow,
.claara-product-side span {
  display: block;
  color: #8791a1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.claara-product-status {
  padding: 7px 10px;
  border-radius: 999px;
  color: #25685b;
  font-size: 12px;
  font-weight: 700;
  background: rgba(232, 249, 244, .92);
}

.claara-product-chat {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 18px;
}

.claara-product-bubble {
  max-width: 78%;
  padding: 18px 20px;
  border-radius: 24px;
  color: #394150;
  line-height: 1.55;
}

.claara-product-bubble.user {
  justify-self: end;
  color: #252a34;
  background: #E3ECFB;
  border-bottom-right-radius: 8px;
}

.claara-product-bubble.assistant {
  justify-self: start;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .9);
  border-bottom-left-radius: 8px;
}

.claara-product-lines {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.claara-product-lines span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183, 201, 242, .78), color-mix(in srgb, var(--brand-coral) 38%, transparent), rgba(226, 232, 240, .82));
  background-size: 220% 100%;
  animation: claaraLandingShimmer 2.8s ease-in-out infinite;
}

.claara-product-lines span:nth-child(2) {
  width: 78%;
}

.claara-product-lines span:nth-child(3) {
  width: 52%;
}

.claara-product-dock {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.claara-product-dock span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 12px;
  color: #6b7484;
  font-size: 13px;
  font-weight: 700;
  background: rgba(248, 250, 252, .92);
  border: 1px solid rgba(226, 232, 240, .9);
}

.claara-product-side {
  padding: 24px 18px;
  display: grid;
  align-content: center;
  gap: 14px;
  background: rgba(248, 250, 252, .72);
  border-left: 1px solid rgba(226, 232, 240, .86);
}

.claara-product-side div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(226, 232, 240, .8);
}

.claara-product-side strong {
  display: block;
  margin-top: 8px;
  color: #252a34;
}

.claara-product-side small {
  display: block;
  margin-top: 4px;
  color: #687385;
}

@keyframes claaraLandingFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes claaraLandingShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes landingSpin {
  to { transform: rotate(360deg); }
}

@keyframes landingDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes landingReveal {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

/* Sections rise in as they scroll into view, where the browser can do it
 * without script; elsewhere they are simply there. */
@supports (animation-timeline: view()) {
  .landing-section > * {
    animation: landingReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 36%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1100px) {
  .landing-nav {
    grid-template-columns: 1fr auto;
  }

  .landing-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
  }

  .landing-hero,
  .landing-challenge,
  .landing-feature {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
    padding-top: 24px;
  }

  .landing-hero-copy {
    max-width: 760px;
  }

  .claara-product-frame {
    min-height: 500px;
  }

  .landing-scatter {
    width: min(100%, 360px);
  }

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

  .landing-org {
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .landing-page::before,
  .landing-page::after {
    display: none;
  }

  .landing-nav {
    gap: 14px;
    padding: 14px 0;
  }

  .landing-brand img {
    height: 40px;
  }

  .landing-nav-actions .landing-demo {
    display: none;
  }

  .landing-login {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .landing-links a {
    padding: 7px 11px;
    font-size: 13px;
  }

  .landing-hero h1 {
    font-size: 44px;
  }

  .landing-lede,
  .landing-detail-head > p:not(.landing-tag) {
    font-size: 16px;
  }

  .landing-actions,
  .landing-actions a {
    width: 100%;
  }

  .claara-product-frame {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 460px;
    border-radius: 24px;
  }

  .claara-product-side {
    display: none;
  }

  .claara-product-main {
    padding: 18px;
  }

  .claara-product-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .claara-product-bubble {
    max-width: 100%;
  }

  .landing-challenge-list li {
    font-size: 16px;
  }

  .landing-stat-grid,
  .landing-journey-grid,
  .landing-pillar-grid,
  .landing-step-grid,
  .landing-card-grid,
  .landing-card-grid.is-two,
  .landing-library {
    grid-template-columns: 1fr;
  }

  .landing-journey-goal {
    border-radius: 24px;
  }

  .landing-pillar.is-govern {
    display: flex;
  }

  .landing-pillar.is-govern .landing-pillar-head {
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .landing-screen {
    padding: 20px;
    border-radius: 24px;
  }

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

  .landing-gesture-grid span:nth-child(n + 7) {
    display: none;
  }

  .landing-loop {
    justify-content: flex-start;
  }

  .landing-cta {
    border-radius: 28px;
  }

  .landing-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.organization-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 14px;
}

.organization-titleblock {
  min-width: 0;
}

.organization-titleblock p {
  margin: 0 0 8px;
  color: #36707a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.organization-titleblock h1 {
  margin: 0;
  color: #1f2937;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.05;
}

.organization-titleblock span {
  display: block;
  max-width: 68ch;
  margin-top: 8px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.5;
}

.organization-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 22px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 28px -24px rgba(47, 52, 64, .45);
}

.organization-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 10px;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.organization-tab:hover {
  color: #2f3440;
  background: #f8fafc;
}

.organization-tab:active {
  transform: translateY(1px);
}

.organization-tab.is-active {
  color: #1f2937;
  background: #eaf1ff;
  box-shadow: inset 0 0 0 1px rgba(183, 201, 242, .7);
}

/* Sidebar rail (left-tabs) — compartido por todas las páginas con layout completo */
.sidebar-rail {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(183,201,242,0.22), transparent 60%),
    radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--brand-coral) 10%, transparent), transparent 65%),
    linear-gradient(180deg, #2F3440 0%, #202531 100%);
  position: relative;
  isolation: isolate;
}
.sidebar-rail::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(183,201,242,0.36) 50%, transparent 100%);
  pointer-events: none;
}
.tab-item {
  position: relative;
  color: rgba(255,255,255,0.6);
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.tab-item i { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.tab-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
}
.tab-item:hover i { transform: translateY(-1px); }
.tab-item:active { transform: scale(0.97); }
.tab-item.active {
  background: rgba(183,201,242,0.22);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 26px -12px rgba(183,201,242,0.65);
}
.tab-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--brand-coral);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-coral) 52%, transparent);
}

/* Shared conversation rows */
.shared-conversation-section {
  margin-top: 14px;
  padding: 0 8px 4px;
}

.shared-conversation-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.shared-conversation-section-title span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 10px;
}

.shared-conversation-row {
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.shared-conversation-row:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.shared-conversation-row.is-active {
  border-color: rgba(183, 201, 242, 0.65);
  background: linear-gradient(90deg, rgba(183, 201, 242, 0.16), rgba(47, 52, 64, 0.06));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.shared-conversation-row-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px;
}

.shared-conversation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  color: #94a3b8;
}

.shared-conversation-text {
  min-width: 0;
  flex: 1 1 auto;
}

/* Up to two lines, like the other rows: a fixed width cut titles short. */
.shared-conversation-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #334155;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.shared-conversation-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
}

.shared-conversation-owner {
  min-width: 0;
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-conversation-permission {
  display: inline-flex;
  align-items: center;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.shared-conversation-permission.can-chat {
  background: rgba(183, 201, 242, 0.22);
  color: #2f3440;
}

.shared-conversation-permission.read-only {
  background: #f1f5f9;
  color: #64748b;
}

/* Home screen (app.php, empty state), as approved from the prototype on
   2026-10-13: the greeting, then the box, centred. */
.home-hero {
  max-width: 48rem;
  margin: 1.5rem auto 2.25rem;
  text-align: center;
}

.home-hero h2 {
  margin-bottom: .5rem;
}

.home-hero-sub {
  margin: 0 auto 1.5rem;
}

.home-hero-box {
  text-align: left;
  box-shadow: 0 18px 48px -24px rgba(47, 52, 64, .28);
}

/* Taller than the composer it shares its script with: here it is the page.
   !important because the textarea carries its sizes inline for that script. */
.home-hero-box textarea {
  min-height: 56px !important;
}

/* The home screen is already a new conversation: "New conversation" does
   nothing there, so it only shows inside one. */
body:has(#empty-state:not(.hidden)) #new-conv-btn,
body:has(#empty-state:not(.hidden)) div:has(> #mobile-new-conv-btn) {
  display: none;
}

/* Knowledge health, for the people who look after voices only, and only when
   one of theirs has something to look at. */
.home-health-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  max-width: 100%;
  margin: .9rem auto 0;
  padding: .55rem .9rem;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .75);
  color: #475569;
  font-size: .82rem;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.home-health-line:hover,
.home-health-line:focus-visible {
  border-color: #b7c9f2;
  background: #ffffff;
}

.home-health-line > i {
  flex: 0 0 auto;
  color: #059669;
  font-size: 1rem;
}

.home-health-line strong {
  color: #0f172a;
  font-weight: 650;
}

.home-health-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .2rem;
  color: #2f3440;
  font-weight: 650;
  white-space: nowrap;
}

/* Conversation rows: the title gets the whole row, up to two lines. It used to
   stop at a fixed 180 px, with room kept for actions that only show on hover. */
.conversation-row {
  position: relative;
}

.conversation-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* On a wide screen the actions float over the end of the row on hover, over a
   fade of the row's own colour. Narrower (the phone drawer) they stay in the
   row, always visible, as before. */
@media (min-width: 1024px) {
  .conversation-row-actions {
    --conversation-row-bg: #f8fafc;
    position: absolute;
    top: 50%;
    right: .35rem;
    padding-left: 1.5rem;
    background: linear-gradient(90deg, transparent, var(--conversation-row-bg) 1.25rem);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .15s ease;
  }

  .conversation-row.is-active .conversation-row-actions {
    --conversation-row-bg: color-mix(in srgb, #2f3440 10%, #ffffff);
  }

  .conversation-row:hover .conversation-row-actions,
  .conversation-row:focus-within .conversation-row-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.conversation-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.conversation-row-date {
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-row-shared-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(183, 201, 242, 0.18);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.conversation-row-shared-chip i {
  font-size: 11px;
}

.conversation-activity-notice {
  position: sticky;
  top: 12px;
  z-index: 35;
}

.conversation-activity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid rgba(183, 201, 242, 0.7);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.conversation-activity-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.conversation-activity-copy i {
  color: #b7c9f2;
  font-size: 17px;
}

.conversation-activity-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 10px;
  padding: 0 12px;
  background: #2f3440;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 160ms ease, transform 160ms ease;
}

.conversation-activity-card button:hover {
  background: #1f2430;
}

.conversation-activity-card button:active {
  transform: translateY(1px);
}

.conversation-ai-busy {
  position: sticky;
  top: 12px;
  z-index: 34;
}

.conversation-ai-busy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid rgba(183, 201, 242, 0.7);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.conversation-ai-busy-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.conversation-ai-busy-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b7c9f2;
  animation: conversation-ai-busy-pulse 1.2s ease-in-out infinite;
}

.conversation-ai-busy-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.conversation-ai-busy-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes conversation-ai-busy-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Flag / report modal */
/* Report, on a voice's answers: labelled and always visible, where the other
   message actions only show on hover (a bare triangle was not found). */
.msg-actions.is-voice-answer {
  opacity: 1;
}

.msg-action-btn.msg-action-report {
  width: auto;
  gap: .3rem;
  padding: 0 .6rem;
  font-size: .75rem;
  font-weight: 600;
}

.msg-action-btn.msg-action-report:hover {
  color: #b45309;
  background: #fef3c7;
}

/* Under an answer on a voice's own page. */
.voice-answer-actions {
  display: flex;
  gap: .25rem;
  margin-top: .3rem;
}

.flag-type-btn.is-active {
  color: #1f2937;
  background: #eaf1ff;
  border-color: rgba(183, 201, 242, .9);
  font-weight: 600;
}

.flag-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #2F3440;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(47, 52, 64, .28);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 80;
  pointer-events: none;
}

.flag-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.flag-toast i {
  color: #B7C9F2;
}

@media (max-width: 760px) {
  .organization-topbar {
    align-items: stretch;
    flex-direction: column;
    margin-top: 14px;
  }

  .organization-tabs {
    width: 100%;
  }

  .organization-tab {
    padding: 0 12px;
  }
}
/* Content transformer */
.format-card {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}
.format-card:hover { transform: translateY(-2px); }
.format-card.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.format-card.selected .format-icon {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: white;
}
.format-card .check-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #6366f1;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.format-card.selected .check-badge { display: flex; }
.history-item.active {
  background-color: rgba(99, 102, 241, 0.05);
  border-left: 3px solid #6366f1;
}
.result-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.result-tabs::-webkit-scrollbar { display: none; }
.result-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.result-tab:hover { background: #f8fafc; }
.result-tab.active {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: white;
  border-color: transparent;
}
.result-panel { display: none; }
.result-panel.active { display: block; }
@media (max-width: 1023px) {
  .result-panel {
    display: block !important;
    margin-bottom: 16px;
  }
  .result-tabs { display: none; }
}
/* Audio transcriber */
.transcriber-page .audio-drop-zone {
  border: 2px dashed #cbd5e1;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.transcriber-page .audio-drop-zone.dragover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
}
.transcriber-page .audio-drop-zone:hover { border-color: #a78bfa; }
.transcriber-page .history-item.active {
  background-color: rgba(139, 92, 246, 0.05);
  border-left: 3px solid #8b5cf6;
}
.transcriber-page .history-item.active p {
  color: #7c3aed;
  font-weight: 600;
}
@keyframes transcriber-pulse-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}
.transcriber-page .wave-bar { animation: transcriber-pulse-wave 1s ease-in-out infinite; }
.transcriber-page .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.transcriber-page .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.transcriber-page .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.transcriber-page .wave-bar:nth-child(5) { animation-delay: 0.4s; }

/* Project analysis */
.project-analysis-page .action-card {
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.project-analysis-page .action-card:hover { transform: translateY(-2px); }
.project-analysis-page .action-card.selected {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.1));
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
.project-analysis-page .action-card.selected .action-icon {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: white;
}
.project-analysis-page .action-card .check-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #10b981;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}
.project-analysis-page .action-card.selected .check-badge { display: flex; }
.project-analysis-page .history-item.active {
  background-color: rgba(16, 185, 129, 0.05);
  border-left: 3px solid #10b981;
}
.project-analysis-page .dropzone {
  border: 2px dashed #cbd5e1;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.project-analysis-page .dropzone.dragover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}
@keyframes project-file-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.project-analysis-page .file-item { animation: project-file-slide-in 0.2s ease; }
.project-analysis-page .result-table { width: 100%; border-collapse: collapse; }
.project-analysis-page .result-table th,
.project-analysis-page .result-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
.project-analysis-page .result-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  font-size: 0.875rem;
}
.project-analysis-page .result-table tr:hover { background: #f8fafc; }
.project-analysis-page .result-table .total-row {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.1));
  font-weight: 600;
}
.project-analysis-page .result-table .subtotal-row { background: #f1f5f9; font-weight: 500; }

/* Podcast from article */
.podcast-page .audio-player-warm { background: linear-gradient(135deg, #7c2d12, #c2410c); }
.podcast-page .custom-audio-player {
  filter: invert(1) hue-rotate(180deg) opacity(0.9);
}
.podcast-page .custom-audio-player::-webkit-media-controls-enclosure {
  background-color: rgba(255, 255, 255, 0.1);
}
@keyframes podcast-pulse-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}
.podcast-page .wave-bar { animation: podcast-pulse-wave 1s ease-in-out infinite; }
.podcast-page .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.podcast-page .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.podcast-page .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.podcast-page .wave-bar:nth-child(5) { animation-delay: 0.4s; }
.podcast-page .history-item.active {
  background-color: rgba(249, 115, 22, 0.05);
  border-left: 3px solid #f97316;
}
.podcast-page .history-item.active p { color: #c2410c; font-weight: 600; }

/* Image editor */
.image-editor-page .format-pill.active,
.image-editor-page .format-pill:has(input:checked),
.image-editor-page .style-pill.active,
.image-editor-page .style-pill:has(input:checked) {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}
.image-editor-page .intent-card {
  cursor: pointer;
  transform: translateY(0);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.image-editor-page .intent-card.active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.image-editor-page .intent-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -22px rgba(2, 6, 23, 0.55);
}

/* Owner control plane: reusable module-state catalog */
.module-state-catalog {
  --module-accent: #d96f59;
  --module-ink: #252a34;
  --module-muted: #697386;
  width: min(100%, 1120px);
  color: var(--module-ink);
}
.module-state-catalog__header {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1fr);
  align-items: end;
  gap: 32px;
  padding: 0 4px 24px;
  border-bottom: 1px solid #e7e9ee;
}
.module-state-catalog__eyebrow {
  margin: 0 0 7px;
  color: var(--module-accent) !important;
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.module-state-catalog__header h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.module-state-catalog__header > p {
  max-width: 58ch;
  margin: 0;
  color: var(--module-muted);
  line-height: 1.6;
}
.module-state-list { display: grid; }
.module-state-row {
  border-bottom: 1px solid #e7e9ee;
  background: rgba(255, 255, 255, 0.72);
  transition: background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.module-state-row:hover { background: rgba(255, 255, 255, 0.96); }
.module-state-row__summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 4px 16px;
}
.module-state-row__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e4ea;
  border-radius: 15px;
  color: #4f596b;
  background: #f7f8fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.module-state-row__icon i { font-size: 1.18rem; }
.module-state-row__copy { min-width: 0; }
.module-state-row__copy h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 760;
  letter-spacing: -0.012em;
}
.module-state-row__copy p {
  max-width: 68ch;
  margin: 0;
  color: var(--module-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.module-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #e1e4ea;
  border-radius: 999px;
  color: #596273;
  background: #f7f8fa;
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}
.module-state-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.module-state-badge[data-tone="positive"] { color: #26705e; border-color: #cce4dc; background: #eff8f5; }
.module-state-badge[data-tone="warning"] { color: #94651f; border-color: #ead9b8; background: #fbf7ed; }
.module-state-badge[data-tone="progress"] { color: #386b8d; border-color: #caddea; background: #f0f6fa; }
.module-state-badge[data-tone="danger"] { color: #a34f47; border-color: #ebccc8; background: #fbf1f0; }
.module-state-badge[data-tone="muted"] { color: #7a8190; background: #f1f2f4; }
.module-state-badge[data-tone="progress"] > span { animation: module-state-breathe 1.8s ease-in-out infinite; }
.module-state-details { margin: 0 4px 14px 60px; }
.module-state-details summary {
  width: fit-content;
  cursor: pointer;
  color: #555f70;
  font-size: 0.78rem;
  font-weight: 720;
  list-style: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.module-state-details summary::-webkit-details-marker { display: none; }
.module-state-details summary::after { content: ' +'; color: var(--module-accent); }
.module-state-details[open] summary::after { content: ' −'; }
.module-state-details summary:hover { color: var(--module-ink); }
.module-state-details summary:active { transform: translateY(1px); }
.module-state-details summary:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 4px; border-radius: 3px; }
.module-state-details__body {
  max-width: 68ch;
  padding: 11px 0 2px;
  color: var(--module-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.module-state-details__body p { margin: 0; }
.module-state-details__body p + p { margin-top: 6px; }
.module-state-dependencies { color: #94651f; font-weight: 680; }
.module-state-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 24px;
  padding: 22px 4px;
  border-block: 1px solid #e7e9ee;
}
.module-state-message > i { color: var(--module-accent); font-size: 1.35rem; }
.module-state-message h3 { margin: 0 0 5px; font-size: 0.95rem; }
.module-state-message p { margin: 0; color: var(--module-muted); font-size: 0.875rem; line-height: 1.5; }
.module-state-message--error > i { color: #a34f47; }
.module-state-list--loading { gap: 1px; }
.module-state-skeleton {
  display: grid;
  grid-template-columns: 42px minmax(140px, 0.7fr) minmax(80px, 0.2fr);
  gap: 16px;
  align-items: center;
  min-height: 80px;
  border-bottom: 1px solid #e7e9ee;
}
.module-state-skeleton span {
  height: 12px;
  border-radius: 999px;
  background: #eceef2;
  animation: module-state-shimmer 1.6s ease-in-out infinite alternate;
}
.module-state-skeleton span:first-child { width: 42px; height: 42px; border-radius: 15px; }
.module-state-skeleton span:last-child { justify-self: end; width: 86px; }
@keyframes module-state-breathe {
  0%, 100% { opacity: 0.38; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes module-state-shimmer {
  from { opacity: 0.55; transform: translateX(0); }
  to { opacity: 1; transform: translateX(3px); }
}
@media (max-width: 767px) {
  .module-state-catalog { width: 100%; }
  .module-state-catalog__header { grid-template-columns: 1fr; gap: 12px; padding-bottom: 20px; }
  .module-state-row__summary { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
  .module-state-badge { grid-column: 2; justify-self: start; }
  .module-state-details { margin-left: 62px; }
  .module-state-skeleton { grid-template-columns: 42px minmax(0, 1fr); }
  .module-state-skeleton span:last-child { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .module-state-row,
  .module-state-details summary,
  .module-state-badge[data-tone="progress"] > span,
  .module-state-skeleton span {
    animation: none;
    transition: none;
  }
}

/* First-administrator claim. Served once, on an instance nobody can sign in to
   yet, so it is deliberately plain: one column, no chrome, nothing to navigate
   to — the only thing to do on this page is the thing it is for. */
.claara-claim {
  width: 100%;
  max-width: 30rem;
  background: #fff;
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.claara-claim__logo {
  height: 2.5rem;
  margin: 0 auto 1.5rem;
  display: block;
}

.claara-claim__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}

.claara-claim__lead {
  margin: 0.5rem 0 1.75rem;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}

.claara-claim__field { margin-bottom: 1rem; }

.claara-claim__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.claara-claim__field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.95rem;
  background: #f8fafc;
}

.claara-claim__field input:focus {
  outline: 2px solid var(--brand-coral);
  outline-offset: 1px;
  background: #fff;
}

.claara-claim__field input[aria-invalid="true"] { border-color: #dc2626; }

.claara-claim__hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
}

.claara-claim__error {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #b91c1c;
}

.claara-claim__submit {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #B7C9F2 0%, var(--brand-coral) 100%);
  color: #1e293b;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Client mark — shown next to Claara's on a co-branded instance, never instead
   of it. An instance with no client logo renders none of this at all. */
.claara-client-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.claara-client-mark__rule {
  display: block;
  width: 1px;
  height: 1.75em;
  background: currentColor;
  opacity: 0.18;
}

.claara-client-mark__logo {
  display: block;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
}


/* WCAG 2.4.1 — a way past the navigation.
   Off-screen until focused rather than display:none, because a hidden element
   is not focusable and a skip link nobody can reach is decoration. */
.claara-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  border: 2px solid #0891b2;
  border-radius: 0 0 8px 0;
}

.claara-skip-link:focus {
  left: 0;
}

/* Tables the chat renders from markdown.
   app.php wraps every generated table in .table-container, and until task 8.13
   neither that class nor .md-table had a single rule anywhere in the stylesheet.
   The wrapper existed and did nothing: a wide table in an answer pushed the
   whole conversation sideways on a phone, which is the one thing 8.13's success
   criterion names. Invisible to a live audit, because reaching it needs a
   session and a reply that happens to contain a table. */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 12px 0;
}

.md-table {
  border-collapse: collapse;
  width: auto;
  min-width: 100%;
  font-size: 13px;
}

.md-table th,
.md-table td {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.md-table th {
  background: #f8fafc;
  font-weight: 600;
}

/* WCAG 2.2 2.5.8 Target Size (Minimum), AA.
   The "remember me" checkbox is 16px and its label 20px tall, so the effective
   target was 20 where 24 is required. The row, not the box, is what a thumb
   actually hits. */
.claara-login-page .remember-row,
.claara-login-page .remember-row label {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* --- Who else is in a shared conversation ---------------------------------
 *
 * Ambient, not announced. Presence is useful at a glance and never worth
 * interrupting for, so it is a row of initials beside the conversation title
 * rather than another banner in a column that already has two.
 */
.conversation-presence {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.conversation-presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #94a3b8;
  /* Overlapped enough to read as a group, not enough to eat a letter. The
     first attempt used -6px on a 22px circle and the next avatar sat on top
     of the previous one's second initial, which is the one thing a circle of
     initials has to get right. */
  margin-left: -4px;
  position: relative;
}

.conversation-presence-avatar:first-child {
  margin-left: 0;
}

/* Stable per person: the same colleague keeps the same colour between
   sessions, which is what makes a circle of two letters recognisable without
   being read. */
.conversation-presence-avatar[data-tone="0"] { background: #7c8db5; }
.conversation-presence-avatar[data-tone="1"] { background: #6f9e8f; }
.conversation-presence-avatar[data-tone="2"] { background: #a8806f; }
.conversation-presence-avatar[data-tone="3"] { background: #8a7fa8; }
.conversation-presence-avatar[data-tone="4"] { background: #6f8fa8; }
.conversation-presence-avatar[data-tone="5"] { background: #a89a6f; }

.conversation-presence-avatar.is-overflow {
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
}

/* A ring rather than a bouncing dot: it reads as "active" at a glance and
   stops moving in the corner of the eye while someone is trying to read. */
.conversation-presence-avatar.is-typing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(111, 158, 143, 0.75);
  animation: conversation-presence-pulse 1.6s ease-in-out infinite;
}

@keyframes conversation-presence-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-presence-avatar.is-typing::after {
    animation: none;
    opacity: 0.9;
  }
}

.conversation-typing {
  padding: 0 4px 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* --- What you have not been shown -----------------------------------------
 *
 * Sits at the end of the row, after the title, so a long title truncates into
 * it rather than pushing it off the edge.
 */
.conversation-unread {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2f3440;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The title carries the weight, the badge carries the number. Together they
   make an unread row legible without reading either. */
.conversation-unread + *,
.has-unread {
  font-weight: 700;
  color: #1f2430;
}

/* --- The document trash ----------------------------------------------------
 *
 * A muted version of the ordinary document row. It should read as the same
 * list seen from a different angle, not as a different screen.
 */
.voice-panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#voice-trash-toggle-btn.is-active {
  background: #2f3440;
  border-color: #2f3440;
  color: #ffffff;
}

.voice-document-row.is-trashed {
  background: #f8fafc;
  border-style: dashed;
}

.voice-document-row.is-trashed strong {
  color: #64748b;
  font-weight: 600;
}

/* The one irreversible action in the feature, and it looks like it. */
.voice-danger-btn {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
}

.voice-danger-btn:hover {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.55);
}

/* --- Selecting several documents -------------------------------------------- */
.voice-document-check {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 4px;
  cursor: pointer;
}

.voice-document-check input {
  width: 15px;
  height: 15px;
  accent-color: #2f3440;
  cursor: pointer;
}

/* Sticky, because the selection is made by scrolling and the actions have to
   stay reachable from wherever the last checkbox was ticked. */
.voice-selection-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f1f5f9;
  font-size: 13px;
  color: #334155;
}

.voice-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* An <a> styled as a button needs the alignment a <button> gets for free. */
a.voice-document-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --- Indexing in the background ---------------------------------------------
   The panel over the library that says where indexing stands, the count on the
   Documents tab, and the small motions that show a row changing state without
   the list being redrawn. */

.voice-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  animation: voice-badge-pulse 2s ease-in-out infinite;
}

.voice-tab-badge[hidden] {
  display: none;
}

/* --- Knowledge health ----------------------------------------------------------
   A to-do list for whoever looks after a voice. Calm on purpose: nothing here is
   urgent for the people using the voice, and an unkept voice still works. */

.voice-tab-badge.is-calm {
  background: #e2e8f0;
  color: #334155;
  animation: none;
}

/* A report's note keeps its lines: one sent from a voice's own page carries
   the question and the answer on lines of their own. */
.voice-health-note {
  white-space: pre-line;
}

.voice-health-panel {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.voice-health {
  display: grid;
  gap: 14px;
  padding: 14px 18px 18px;
}

.voice-health-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #166534;
  font-size: 13px;
  font-weight: 600;
}

.voice-health-section {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.voice-health-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
}

.voice-health-section-head > i {
  margin-top: 2px;
  color: #64748b;
  font-size: 18px;
}

.voice-health-section-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
}

.voice-health-section-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

.voice-health-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.voice-health-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: #94a3b8;
}

.voice-health-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.voice-health-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-top: 1px solid #f1f5f9;
}

.voice-health-item:first-child {
  border-top: 0;
}

.voice-health-item-body {
  min-width: 0;
}

.voice-health-item-body strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.voice-health-item-body p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #334155;
}

.voice-health-item-body blockquote {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
}

.voice-health-item-body small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.voice-health-docs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: #475569;
}

.voice-health-docs li {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}

.voice-health-docs em {
  color: #94a3b8;
}

.voice-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.voice-health-actions.is-stacked {
  flex-direction: column;
  align-items: stretch;
  max-width: 260px;
}

.voice-health-actions .voice-secondary-btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.voice-health-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.voice-doc-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-size: 11px;
}

.voice-doc-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #64748b;
}

.voice-doc-mark.is-verified {
  color: #047857;
}

.voice-doc-mark.is-due {
  color: #b45309;
}

.voice-doc-health-editor {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
  color: #475569;
}

.voice-doc-health-editor > label:not(.voice-health-check) {
  display: grid;
  gap: 4px;
}

.voice-doc-health-editor input[type="date"],
.voice-doc-health-editor select {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px 8px;
  font-size: 12px;
  color: #0f172a;
}

.voice-doc-health-buttons {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.voice-doc-health-buttons button {
  min-height: 34px;
  font-size: 12px;
}

.voice-health-report {
  border-color: #c7d2fe;
}

.voice-health-report-block {
  padding: 4px 0 6px;
  border-top: 1px solid #eef2f6;
}

.voice-health-report-block h4 {
  margin: 10px 14px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}

.voice-health-item.is-plain {
  grid-template-columns: 1fr;
}

.voice-health-docs.is-padded {
  padding: 8px 14px 6px;
}

/* A cited source the voice's responsible has verified (voice page). */
.source-verified-icon {
  color: #059669;
  font-size: 13px;
}

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

  .voice-health-actions,
  .voice-health-actions.is-stacked {
    justify-content: flex-start;
    max-width: none;
  }

  .voice-doc-health-buttons {
    margin-left: 0;
  }
}

.voice-indexing {
  margin: 0 16px 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  animation: voice-indexing-in .25s ease-out;
}

.voice-indexing[hidden] {
  display: none;
}

.voice-indexing.is-active {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.voice-indexing.is-done {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.voice-indexing.is-warn {
  border-color: #fde68a;
  background: #fffbeb;
}

.voice-indexing-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-indexing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 18px;
  color: #475569;
}

.voice-indexing.is-active .voice-indexing-icon {
  color: #2563eb;
  border-color: #bfdbfe;
}

.voice-indexing.is-done .voice-indexing-icon {
  color: #047857;
  border-color: #a7f3d0;
}

.voice-indexing.is-warn .voice-indexing-icon {
  color: #b45309;
  border-color: #fde68a;
}

.voice-indexing-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.voice-indexing-text strong {
  color: #0f172a;
  font-size: 14px;
}

.voice-indexing-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #475569;
}

.voice-indexing-eta {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.voice-indexing-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* A real <progress>, so its value is data rather than an inline width. */
.voice-indexing-bar {
  display: block;
  width: 100%;
  height: 8px;
  margin: 12px 0 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #dbeafe;
  appearance: none;
  -webkit-appearance: none;
}

.voice-indexing-bar::-webkit-progress-bar {
  background: #dbeafe;
  border-radius: 999px;
}

.voice-indexing-bar::-webkit-progress-value {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width .6s ease;
}

.voice-indexing-bar::-moz-progress-bar {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
}

.voice-indexing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569;
}

.voice-indexing-foot strong {
  color: #0f172a;
}

.voice-indexing-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1d4ed8;
}

.voice-doc-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: voice-spin .8s linear infinite;
}

.voice-indexing-icon .voice-doc-spinner {
  width: 16px;
  height: 16px;
}

/* A document imported from Google Drive: where it stands with its file there.
   A second line of the row, under the name, the status and the actions, so a
   reason has the row's width instead of the narrow name column. Sentence case,
   unlike the metadata line, because it is a sentence a person reads. */
.voice-document-drive {
  grid-column: 2 / -1;
  order: 1;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: -6px;
  color: #475569;
  font-size: 11.5px;
  line-height: 1.35;
}

.voice-document-drive i {
  flex: none;
  margin-top: 1px;
  font-size: 12px;
  color: #64748b;
}

.voice-document-drive.is-warning,
.voice-document-drive.is-warning i {
  color: #b45309;
}

.voice-document-error[hidden] {
  display: none;
}

/* A row that just became ready, or just failed, says so for a moment. */
.voice-document-row.is-just-ready {
  animation: voice-row-ready 1.6s ease-out;
}

.voice-document-row.is-just-failed {
  animation: voice-row-failed 1.6s ease-out;
}

@keyframes voice-spin {
  to { transform: rotate(360deg); }
}

@keyframes voice-indexing-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes voice-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); }
  50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}

@keyframes voice-row-ready {
  0% { background: #d1fae5; border-color: #6ee7b7; }
  100% { background: #ffffff; border-color: #e2e8f0; }
}

@keyframes voice-row-failed {
  0% { background: #fee2e2; border-color: #fca5a5; }
  100% { background: #ffffff; border-color: #e2e8f0; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-tab-badge,
  .voice-indexing,
  .voice-doc-spinner,
  .voice-document-row.is-just-ready,
  .voice-document-row.is-just-failed {
    animation: none;
  }
}

@media (max-width: 640px) {
  .voice-indexing {
    margin: 0 12px 12px;
  }

  .voice-indexing-head {
    flex-wrap: wrap;
  }

  .voice-indexing-text span {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   One-time password links (GPAND Phase 1, A2).
   The page a person opens to choose their password, the "forgot your password"
   note on the sign-in page, and the link the administrator passes on.
   --------------------------------------------------------------------------- */
.claara-password-link {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.claara-password-link__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.claara-password-link__logo { height: 3.5rem; width: auto; }
.claara-password-link__client { height: 2.25rem; }

.claara-password-link__identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.claara-password-link__identity span { font-size: 0.8rem; color: #64748b; }
.claara-password-link__identity strong { font-size: 0.95rem; color: #0f172a; overflow-wrap: anywhere; }

.claara-password-link__input { position: relative; }
.claara-password-link__input input { padding-right: 5.5rem; }

.claara-password-link__reveal {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  min-height: 2rem;
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.claara-password-link__reveal:hover { background: #f1f5f9; }
.claara-password-link__reveal:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 1px; }

.claara-password-link__aside {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
}

.claara-forgot {
  margin-top: 1.5rem;
  text-align: center;
}

.claara-forgot summary {
  display: inline-block;
  list-style: none;
  min-height: 24px;
  cursor: pointer;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.claara-forgot summary::-webkit-details-marker { display: none; }

.claara-forgot p {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.5;
}

.user-link-section {
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.user-link-section__label {
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}

.user-link-section__explainer {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
}

.user-link-section__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #fff;
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.user-link-section__button:hover { background: #f8fafc; }
.user-link-section__button:disabled { opacity: 0.6; cursor: wait; }
.user-link-section__button.hidden { display: none; }

.user-link {
  width: 100%;
  max-width: 32rem;
  padding: 1.75rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  text-align: center;
}

.user-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: rgba(183, 201, 242, 0.3);
  color: #2F3440;
  font-size: 1.35rem;
}

.user-link__title { font-size: 1.125rem; font-weight: 600; color: #0f172a; }

.user-link__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #475569;
}

.user-link__url {
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

.user-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.user-link__primary,
.user-link__secondary {
  flex: 1 1 12rem;
  min-height: 2.5rem;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.user-link__primary { border: 0; background: #2F3440; color: #fff; }
.user-link__primary:hover { opacity: 0.9; }
.user-link__secondary { border: 1px solid #cbd5e1; background: #fff; color: #1e293b; }
.user-link__secondary:hover { background: #f8fafc; }

.user-link__status {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #15803d;
}

.user-link__done {
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.user-link-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  font-size: 0.75rem;
}

/* Administration tables on a phone ------------------------------------------
   A wide table scrolled sideways on a phone, and whoever manages the workspace
   there had to hunt for the column they needed. Below 640px each row becomes a
   card; a cell that needs its column's name carries it in `data-label`, written
   by the page in the reader's language. */
@media (max-width: 640px) {
  .table-stack {
    min-width: 0 !important;
  }
  .table-stack thead {
    display: none;
  }
  .table-stack,
  .table-stack tbody,
  .table-stack tr:not(.hidden),
  .table-stack td:not(.hidden) {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .table-stack tr:not(.hidden) {
    padding: 12px 16px;
  }
  .table-stack td:not(.hidden) {
    padding: 4px 0 !important;
    text-align: left !important;
  }
  .table-stack td[data-label]:not(.hidden) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .table-stack td .justify-end {
    justify-content: flex-start;
  }
}

/* The instance accent on a light chip: a department or voice someone leads,
   a report's type. Mixed from --brand-coral so it follows each workspace's
   colour; the text is the accent darkened, readable on the tint. */
.accent-chip {
  background: color-mix(in srgb, var(--brand-coral) 10%, transparent);
  color: color-mix(in srgb, var(--brand-coral) 62%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-coral) 25%, transparent);
}

/* Documents (document generator): the list of templates to fill in */
.documents-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 26px 0 38px;
}

.documents-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.documents-hero h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 54px);
  line-height: .92;
  color: #0f172a;
}

.documents-hero p {
  max-width: 680px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.documents-card,
.documents-empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .42);
}

.documents-card {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 14px;
}

.documents-card-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-coral) 14%, #fff);
  color: color-mix(in srgb, var(--brand-coral) 70%, #000);
  font-size: 18px;
}

.documents-card h2 {
  margin: 14px 0 3px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 850;
}

.documents-card p {
  margin: 6px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.documents-empty {
  padding: 58px 26px;
  text-align: center;
}

.documents-empty i {
  font-size: 38px;
  color: #94a3b8;
}

.documents-empty h2 {
  margin: 16px 0 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 850;
}

.documents-empty p {
  max-width: 520px;
  margin: 0 auto;
  color: #64748b;
}

@media (max-width: 760px) {
  .documents-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 22px;
  }
}

/* Document templates (B6): the list, the upload form and the editor */
.tpl-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.tpl-list {
  display: grid;
  gap: 10px;
}

.tpl-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: inherit;
  transition: border-color .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.tpl-row:hover {
  border-color: color-mix(in srgb, var(--brand-coral) 45%, #e2e8f0);
  transform: translateY(-1px);
}

.tpl-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tpl-row-text strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}

.tpl-row-text small {
  color: #64748b;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-row-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.tpl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.tpl-chip[data-state="published"] { background: #ecfdf5; color: #047857; }
.tpl-chip[data-state="draft"],
.tpl-chip[data-state="waiting"] { background: #fff7ed; color: #b45309; }
.tpl-chip[data-state="archived"] { background: #f1f5f9; color: #64748b; }
.tpl-chip[data-state="new"] { background: #eff6ff; color: #1d4ed8; }

.tpl-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 38px -34px rgba(15, 23, 42, .45);
}

.tpl-card h2 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.tpl-upload {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.tpl-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.tpl-field > span {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.tpl-field > small {
  color: #64748b;
  font-size: 12px;
}

.tpl-field input[type="text"],
.tpl-field input[type="date"],
.tpl-field input[type="file"],
.tpl-field select,
.tpl-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
}

.tpl-field textarea {
  resize: vertical;
  line-height: 1.45;
}

.tpl-field input:focus,
.tpl-field select:focus,
.tpl-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-coral) 55%, transparent);
  outline-offset: 1px;
  border-color: transparent;
}

.tpl-field :disabled {
  background: #f8fafc;
  color: #475569;
}

.tpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.tpl-btn:hover:not(:disabled) { opacity: .92; transform: translateY(-1px); }
.tpl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tpl-btn-primary { background: #0f172a; color: #ffffff; }
.tpl-btn-secondary { background: #f1f5f9; color: #334155; }

.tpl-file-btn {
  position: relative;
  overflow: hidden;
}

.tpl-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tpl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tpl-link:hover { color: #0f172a; }

.tpl-form-error,
.tpl-error {
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 650;
}

.tpl-note {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

/* Where the editor says "Guardado" or what went wrong; nothing when empty. */
.tpl-flash:empty { display: none; }

.tpl-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.tpl-banner {
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.tpl-banner ul { margin: 6px 0 0; padding-left: 18px; }
.tpl-banner[data-kind="error"] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.tpl-banner[data-kind="ok"] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.tpl-banner[data-kind="info"] { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }

.tpl-head {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.tpl-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
}

.tpl-title-field input[type="text"] {
  font-size: 20px;
  font-weight: 800;
}

.tpl-lede { margin: 0; color: #475569; }

.tpl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.tpl-main { grid-column: 1; grid-row: 1; min-width: 0; }

.tpl-side {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.tpl-todo {
  margin: 0 0 10px;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.tpl-todo a { color: #0f172a; font-weight: 700; text-decoration: underline; }

.tpl-save-status {
  margin: 0 0 8px;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.tpl-save-status[data-dirty="1"] { color: #b45309; }

.tpl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tpl-actions .tpl-btn { flex: 1 1 auto; }

.tpl-versions summary {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.tpl-versions ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
}

.tpl-section > h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.tpl-section > .tpl-note { margin-bottom: 12px; }

.tpl-data { margin-bottom: 10px; scroll-margin-top: 12px; }

.tpl-data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 12px;
}

.tpl-data-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}

.tpl-data-head code {
  margin-left: auto;
  color: #64748b;
  font-size: 12px;
}

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

.tpl-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.tpl-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.tpl-check input { width: 16px; height: 16px; accent-color: #0f172a; }

.tpl-image img {
  max-width: 220px;
  max-height: 90px;
  object-fit: contain;
  padding: 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

.tpl-image .tpl-file-btn { align-self: flex-start; }

.tpl-block { margin-bottom: 10px; }

.tpl-block > h4 {
  margin: 16px 0 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tpl-block .tpl-data {
  border-style: dashed;
  box-shadow: none;
}

@media (max-width: 1024px) {
  .tpl-list-layout,
  .tpl-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tpl-upload,
  .tpl-side {
    position: static;
  }

  .tpl-side { grid-column: 1; grid-row: 1; }
  .tpl-main { grid-row: 2; }
}

@media (max-width: 640px) {
  .tpl-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tpl-row .tpl-chip { grid-column: 2; justify-self: start; }
  .tpl-row-open { display: none; }
  .tpl-data-grid { grid-template-columns: minmax(0, 1fr); }
  .tpl-data-head code { margin-left: 0; }
}

/* Making one document (B7): steps, the form, the preview, the download */
#dm-app {
  max-width: 880px;
  margin: 0 auto;
}

.dm-step-compact {
  display: none;
  margin: 0 0 10px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.dm-stepbar {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: dm-step;
}

.dm-stepbar li {
  flex: 1 1 0;
  padding-top: 8px;
  border-top: 4px solid #e2e8f0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  counter-increment: dm-step;
}

.dm-stepbar li::before { content: counter(dm-step) ". "; }
.dm-stepbar li.done { border-color: color-mix(in srgb, var(--brand-coral) 55%, #e2e8f0); color: #475569; }
.dm-stepbar li.current { border-color: var(--brand-coral); color: #0f172a; }
.dm-stepbar a { color: inherit; text-decoration: underline; }

.dm-eyebrow {
  margin: 0 0 4px;
  color: color-mix(in srgb, var(--brand-coral) 70%, #000);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dm-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  outline: none;
}

.dm-lead {
  margin: 8px 0 16px;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}

.dm-card {
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 18px 38px -34px rgba(15, 23, 42, .45);
}

.dm-section + .dm-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.dm-section-title {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}

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

.dm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dm-span-2 { grid-column: 1 / -1; }

.dm-label {
  color: #0f172a;
  font-size: 14px;
  font-weight: 750;
}

.dm-optional { color: #64748b; font-weight: 600; }

.dm-help {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.dm-input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
}

textarea.dm-input { resize: vertical; line-height: 1.45; }

.dm-input:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-coral) 55%, transparent);
  outline-offset: 1px;
  border-color: transparent;
}

.dm-input[aria-invalid="true"] { border-color: #dc2626; background: #fffafa; }

.dm-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.dm-msg:empty { display: none; }
.dm-msg[data-kind="error"] { color: #b91c1c; }
.dm-msg[data-kind="ok"] { color: #047857; }
/* Read from a photo (B10): proposals to check, and data that came from one */
.dm-msg[data-kind="scan"] { color: #475569; font-weight: 600; }
.dm-msg[data-kind="scan"] i { color: color-mix(in srgb, var(--brand-coral) 80%, #7c2d12); }
.dm-msg[data-kind="check"] { color: #92400e; }
.dm-from-scan .dm-input { border-color: color-mix(in srgb, var(--brand-coral) 70%, #cbd5e1); background: color-mix(in srgb, var(--brand-coral) 7%, #ffffff); }
.dm-from-scan .dm-ticks { border-radius: 10px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-coral) 45%, transparent); }

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

.dm-tick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  font-size: 14px;
  cursor: pointer;
}

.dm-tick input { width: 18px; height: 18px; accent-color: var(--brand-coral); }
.dm-tick:has(input:checked) { border-color: color-mix(in srgb, var(--brand-coral) 60%, #e2e8f0); background: color-mix(in srgb, var(--brand-coral) 7%, #fff); }

.dm-rows { display: grid; gap: 8px; }

.dm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.dm-row:has(.dm-row-cell + .dm-row-cell) {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto;
}

.dm-row-cell { display: flex; flex-direction: column; gap: 4px; }
.dm-row-label { color: #475569; font-size: 12px; font-weight: 700; }

.dm-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
}

.dm-add { justify-self: start; }

.dm-image { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dm-file { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: 14px; font-weight: 650; }

.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.dm-btn:hover:not(:disabled) { opacity: .92; transform: translateY(-1px); }
.dm-btn:disabled { opacity: .5; cursor: progress; }
.dm-btn-primary { background: #0f172a; color: #ffffff; }
.dm-btn-secondary { background: #f1f5f9; color: #334155; }
.dm-btn-ghost { background: transparent; color: #475569; padding: 0 8px; }

.dm-file-btn { position: relative; overflow: hidden; }
.dm-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dm-link {
  padding: 0;
  border: 0;
  background: none;
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.dm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.dm-actions-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }

.dm-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #047857;
  font-size: 13px;
  font-weight: 700;
}

.dm-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.dm-banner ul { margin: 6px 0 0; padding-left: 18px; }
.dm-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.dm-banner[data-kind="error"] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.dm-banner[data-kind="info"] { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }

.dm-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: start;
}

.dm-review-document { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.dm-open-preview { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; }

.dm-pages { display: grid; gap: 12px; min-height: 240px; }

.dm-pages-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  margin: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  font-size: 14px;
}

.dm-page {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .45);
}

.dm-review-side {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 12px;
}

.dm-summary { display: grid; gap: 10px; margin: 0; }
.dm-summary div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; }
.dm-summary dt { color: #64748b; font-size: 13px; font-weight: 700; }
.dm-summary dd { margin: 0; color: #0f172a; font-size: 14px; overflow-wrap: anywhere; }

.dm-done { text-align: center; padding: 32px 18px; }

.dm-done-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 28px;
}

.dm-download-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.dm-download-error { margin: 12px 0 0; color: #b91c1c; font-size: 14px; font-weight: 650; }

.documents-card-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .dm-stepbar { display: none; }
  .dm-step-compact { display: block; }
  .dm-fields,
  .dm-ticks { grid-template-columns: minmax(0, 1fr); }
  .dm-review { grid-template-columns: minmax(0, 1fr); }
  .dm-review-side { position: static; grid-row: 2; }
  .dm-summary div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dm-actions-right { width: 100%; }
  .dm-actions-right .dm-btn-primary { flex: 1 1 auto; }
}

/* Documents list: two ways to make a document, and the runs of "varios a la vez" (B8) */
.documents-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 14px;
}

.documents-card-actions .documents-card-go {
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
}

.documents-card-actions .documents-card-go:hover { opacity: .92; }

.documents-card-many {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.documents-card-many:hover { background: #e2e8f0; }

.documents-recent { margin-top: 26px; }
.documents-recent h2 { margin: 0; color: #0f172a; font-size: 20px; font-weight: 850; }
.documents-recent > p { margin: 4px 0 12px; color: #64748b; font-size: 14px; }

.documents-recent-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.documents-recent-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.documents-recent-item:hover { border-color: color-mix(in srgb, var(--brand-coral) 45%, #e2e8f0); }
.documents-recent-item strong { color: #0f172a; font-size: 15px; }
.documents-recent-meta { color: #64748b; font-size: 13px; }
.documents-recent-state { margin-left: auto; color: #334155; font-size: 13px; font-weight: 750; }
.documents-recent-state[data-state="done"] { color: #047857; }
.documents-recent-state[data-state="failed"] { color: #b91c1c; }

/* Mis documentos (B9): the person's own documents, and the last three on Documents */
.documents-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.documents-hero-actions .tpl-btn-secondary { background: #ffffff; border: 1px solid #e2e8f0; color: #0f172a; text-decoration: none; }
.documents-recent-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.documents-recent-head a { color: #0f172a; font-size: 14px; font-weight: 750; text-decoration: underline; }
.documents-recent-head + .dh-app { margin-top: 12px; }

.dh-toolbar { margin-bottom: 10px; }

.dh-search { position: relative; display: block; max-width: 560px; }
.dh-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 18px; pointer-events: none; }
.dh-search .dm-input { padding-left: 40px; }

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

.dh-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.dh-chip[aria-pressed="true"] { border-color: #0f172a; background: #0f172a; color: #ffffff; }

.dh-status { min-height: 0; margin: 0 0 8px; color: #047857; font-size: 14px; font-weight: 700; outline: none; }
.dh-status:empty { display: none; }

.dh-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dh-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.dh-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-coral) 14%, #fff);
  color: color-mix(in srgb, var(--brand-coral) 70%, #000);
  font-size: 18px;
}

.dh-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dh-title { color: #0f172a; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.dh-meta { color: #64748b; font-size: 13px; }

.dh-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dh-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
.dh-delete { color: #b91c1c; }
.dh-btn-danger { background: #b91c1c; color: #ffffff; }

.dh-confirm { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.dh-confirm p { margin: 0; color: #0f172a; font-size: 14px; line-height: 1.45; }
.dh-confirm-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

.dh-error { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.dh-error[hidden] { display: none; }

.dh-empty { padding: 34px 16px; text-align: center; color: #64748b; }
.dh-empty i { font-size: 30px; color: #94a3b8; }
.dh-empty p { margin: 10px 0 8px; }
.dh-empty-all .dm-btn { margin-top: 18px; }
.dh-empty-all .dm-btn i { font-size: inherit; color: inherit; }

.dh-more { display: flex; justify-content: center; margin-top: 14px; }
.dm-kept { margin: 14px 0 0; font-size: 14px; }
.dh-more:empty { display: none; }

@media (max-width: 760px) {
  .dh-item { grid-template-columns: auto minmax(0, 1fr); }
  .dh-actions, .dh-confirm { grid-column: 1 / -1; justify-content: flex-start; }
  .dh-actions .dh-btn { flex: 1 1 auto; }
}

/* Many documents at once (B8): the sheet, the columns, the rows, the run */
#db-app {
  max-width: 1080px;
  margin: 0 auto;
}

.dm-banner[data-kind="ok"] { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.db-muted { color: #64748b; font-size: 14px; line-height: 1.5; margin: 0; }

.db-how {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: db-how;
}

.db-how > li {
  display: grid;
  gap: 8px;
  padding-left: 40px;
  position: relative;
  counter-increment: db-how;
  min-width: 0;
}

.db-how > li::before {
  content: counter(db-how);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.db-how h2 { margin: 3px 0 0; color: #0f172a; font-size: 16px; font-weight: 800; }
.db-how .dm-btn { justify-self: start; }

.db-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.db-table th,
.db-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.db-table thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.db-table tbody th { color: #334155; font-weight: 750; }
.db-table tbody tr:last-child > * { border-bottom: 0; }
.db-example-row td { color: #64748b; font-style: italic; }
.db-columns td:last-child { min-width: 220px; }

.db-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  text-align: center;
}

.db-drop[data-over] { border-color: var(--brand-coral); background: color-mix(in srgb, var(--brand-coral) 6%, #fff); }
.db-drop > i { color: #64748b; font-size: 26px; }
.db-drop p { margin: 0; }

.db-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  max-width: 100%;
  padding: 8px 8px 8px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.db-question { display: grid; gap: 8px; }
.db-question-text { margin: 0; color: #0f172a; font-size: 15px; }
.db-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.db-answers input { accent-color: var(--brand-coral); width: 18px; height: 18px; }

.db-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 10px;
  margin: 0 0 14px;
}

.db-summary-item {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.db-summary-item strong { color: #0f172a; font-size: 26px; line-height: 1; }
.db-summary-item[data-kind="ok"] strong { color: #047857; }
.db-summary-item[data-kind="error"] { border-color: #fecaca; background: #fef2f2; }
.db-summary-item[data-kind="error"] strong { color: #b91c1c; }

.db-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

.db-chip {
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.db-chip[aria-pressed="true"] { border-color: #0f172a; background: #0f172a; color: #ffffff; }

.db-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.db-preview {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  min-width: 0;
}

.db-preview .dm-pages,
.db-preview .dm-pages-loading { min-height: 180px; }
.db-preview-title { margin: 0; color: #0f172a; font-size: 14px; font-weight: 800; }

.db-rows td,
.db-rows th { white-space: normal; overflow-wrap: break-word; }
.db-rows td:last-child,
.db-rows .db-nowrap { white-space: nowrap; }
.db-row-wrong > * { background: #fffafa; }
.db-fix-row > td { background: #fffafa; white-space: normal !important; }

.db-fix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.db-fix-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.db-fix-item .dm-msg { margin: 0; }
.db-fix-row .dm-ticks { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.db-badge[data-kind="ok"] { background: #ecfdf5; color: #047857; }
.db-badge[data-kind="error"] { background: #fee2e2; color: #b91c1c; }
.db-see { display: block; margin-top: 4px; font-size: 13px; }
.db-see[aria-pressed="true"] { color: var(--brand-coral); }

.db-progress {
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.db-progress > div {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-coral);
  transition: width .4s ease;
}

.db-progress-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.db-list { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; color: #334155; font-size: 14px; }
.db-contents summary { cursor: pointer; color: #0f172a; font-weight: 800; }

@media (max-width: 900px) {
  .db-review { grid-template-columns: minmax(0, 1fr); }
  .db-preview { position: static; grid-row: 1; }
}

@media (max-width: 760px) {
  /* On a phone the rows and the columns are cards: one per row, each value with its label. */
  .db-rows thead,
  .db-columns thead { display: none; }
  .db-rows,
  .db-rows tbody,
  .db-rows tr,
  .db-rows th,
  .db-rows td,
  .db-columns,
  .db-columns tbody,
  .db-columns tr,
  .db-columns th,
  .db-columns td { display: block; width: auto; }
  .db-rows tr:not(.db-fix-row),
  .db-columns tr { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
  .db-rows tr:not(.db-fix-row) > *,
  .db-columns tr > * { padding: 2px 0; border: 0; }
  .db-rows [data-label]::before,
  .db-columns [data-label]::before { content: attr(data-label) ": "; color: #64748b; font-size: 12px; font-weight: 700; }
  .db-rows .db-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; }
  .db-rows .db-status .db-see { display: inline; margin-top: 0; }
  .db-rows .db-fix-row > td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
  .db-columns td:last-child { min-width: 0; padding-top: 6px; }
  .db-how > li { padding-left: 0; padding-top: 36px; }
  .db-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-table th,
  .db-table td { padding: 8px 9px; }
  .documents-recent-state { margin-left: 0; width: 100%; }
}

/* Read from a photo or PDF (B10) */
.dm-banner[data-kind="scan"] {
  background: color-mix(in srgb, var(--brand-coral) 10%, #ffffff);
  color: #7c2d12;
  border: 1px solid color-mix(in srgb, var(--brand-coral) 40%, #ffffff);
}

.dm-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--brand-coral) 55%, #cbd5e1);
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-coral) 6%, #ffffff);
}

.dm-callout-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-coral) 16%, #ffffff);
  color: color-mix(in srgb, var(--brand-coral) 70%, #000000);
  font-size: 20px;
}

.dm-callout-body { flex: 1 1 240px; min-width: 0; }
.dm-callout-body p { margin: 0; color: #475569; font-size: 14px; line-height: 1.45; }
.dm-callout-body .dm-callout-title { color: #0f172a; font-size: 15px; font-weight: 800; }

.dm-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 38px 18px;
  border-style: dashed;
  text-align: center;
}

.dm-dropzone > i { font-size: 38px; color: #94a3b8; }
.dm-dropzone p { margin: 0; max-width: 520px; }
.dm-dropzone .dm-btn { margin-top: 10px; }

.dm-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: #475569; font-size: 14px; line-height: 1.45; }

.dm-reading { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 18px; text-align: center; }
.dm-reading p { margin: 0; }
.dm-reading > i { font-size: 30px; color: #64748b; }
.dm-spin { animation: capabilitySpin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .dm-spin { animation: none; }
}

.dm-read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dm-read-source { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 12px; }
.dm-read-photo { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.dm-read-source .dm-pages { max-height: 78vh; overflow: auto; }

.dm-read-proposals { display: grid; gap: 14px; }
.dm-read-found { margin: 0; color: #0f172a; font-size: 16px; font-weight: 800; }
.dm-read-proposals > .dm-help { margin-top: -8px; }

.dm-proposal { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.dm-proposal.is-check .dm-input { border-color: #f59e0b; background: #fffbeb; }
.dm-proposal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.dm-proposal-list { margin: 0; padding-left: 18px; color: #334155; font-size: 14px; line-height: 1.5; }
.dm-proposal .dm-msg:not([data-kind="check"]) { color: #64748b; font-weight: 600; }

.dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.dm-badge[data-kind="proposal"] { background: color-mix(in srgb, var(--brand-coral) 14%, #ffffff); color: #7c2d12; }
.dm-badge[data-kind="check"] { background: #fef3c7; color: #92400e; }
.dm-badge[data-kind="missing"] { background: #f1f5f9; color: #475569; }

@media (max-width: 900px) {
  .dm-read { grid-template-columns: minmax(0, 1fr); }
  .dm-read-source { position: static; }
  .dm-read-photo { max-height: 55vh; }
  /* No scroll inside a scroll on a phone: a finger on the PDF moves the page. "Ver el documento en grande" shows it all. */
  .dm-read-source .dm-pages { max-height: 60vh; overflow: hidden; }
}

/* --- Lists and screenshots in chat answers (and the Context page preview) ---
 *
 * The chat renders "- " and "1. " lines as real lists. Tailwind's reset takes
 * list-style away from every ul/ol, so the markers are stated here. Numbered
 * items carry their own value, so a list split by a blank line keeps counting.
 *
 * Screenshots come from the company's Word guides (WordContext). They fit the
 * bubble, stay readable on a phone, and open large on click.
 */
.md-list { margin: 6px 0; padding-left: 1.5em; }
.md-list-ul { list-style: disc; }
.md-list-ol { list-style: decimal; }
.md-list li { margin: 3px 0; padding-left: 2px; }
.md-list-level-1 { margin-left: 1.25em; }
.md-list-level-2 { margin-left: 2.5em; }
.md-list-level-3 { margin-left: 3.75em; }
.md-list-level-1.md-list-ul { list-style: circle; }

.context-guide-image {
  display: block;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  margin: 8px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  cursor: zoom-in;
  background: #ffffff;
}

/* The Context page shows a Word guide the way the chat will read it. */
.word-preview {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  background: #ffffff;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.6;
}
.word-preview p { margin: 0 0 6px; }
.word-preview .word-preview-sub { padding-left: 1.5em; }
.word-preview .word-preview-heading { margin: 14px 0 6px; font-weight: 700; color: #0f172a; }
.word-preview .word-preview-h1 { font-size: 20px; }
.word-preview .word-preview-h2 { font-size: 17px; }
.word-preview .word-preview-h3 { font-size: 15px; }
.word-preview a { color: #0891b2; text-decoration: underline; }
.word-preview .context-guide-image { cursor: default; }

/* --- Chat screen (owner, 2026-10-20: "Todos los puntos me parecen bien") ---
 *
 * The stylesheets load as styles.css, tailwind.css, then head.php's inline
 * <style>, whose `.prose h2` was written for the document viewer (24px). The
 * answer rules below carry two classes so they win over both.
 */

/* One centred column, as wide as the composer under it (48rem of content). */
.chat-thread {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* Claara's mark beside an answer; it used to be an "E". */
.chat-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.chat-avatar img { display: block; width: 22px; height: 22px; }

.chat-bubble { min-width: 0; word-break: break-word; }

/* One's own message: a soft solid colour and dark text. White on the
   blue-to-coral gradient measured 1.7 to 2.3, where AA asks 4.5. */
.chat-bubble.chat-bubble-user {
  background: var(--brand-secondary);
  color: var(--brand-ink);
  padding: 0.75rem 1.125rem;
  border-radius: 1.25rem 0.375rem 1.25rem 1.25rem;
  max-width: 36rem;
}

/* An answer sits on the page at a reading width, with no box around it. */
.chat-bubble.chat-answer {
  background: transparent;
  color: #1e293b;
  padding: 0.4rem 0 0;
  max-width: 36rem; /* about 85 characters of Outfit at 15px */
  line-height: 1.65;
}
.chat-bubble.chat-answer .prose { color: inherit; line-height: inherit; }
.chat-bubble.chat-answer h1,
.chat-bubble.chat-answer h2,
.chat-bubble.chat-answer h3 {
  margin: 1.1em 0 0.35em;
  line-height: 1.35;
  font-weight: 600;
  color: #0f172a;
}
.chat-bubble.chat-answer h1 { font-size: 1.2rem; }
.chat-bubble.chat-answer h2 { font-size: 1.08rem; }
.chat-bubble.chat-answer h3 { font-size: 1rem; }
.chat-bubble.chat-answer .md-hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 1.1em 0;
}
.chat-bubble.chat-answer .md-list { margin: 0.4em 0; }
.chat-bubble.chat-answer .md-list li { margin: 0.2em 0; }
.chat-bubble.chat-answer .table-container { background: #ffffff; }
/* A blank line in an answer: one paragraph gap, not an empty line. */
.md-break { display: block; height: 0.6em; }

/* Composer: a placeholder you can read, in upright type. */
.composer-input::placeholder {
  color: #64748b;
  font-style: normal;
  opacity: 1;
}

/* The send arrow: faint until there is something to send, then filled. */
.composer-send {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.composer-send-lg { width: 2.75rem; height: 2.75rem; }
.composer-send.is-ready {
  background: var(--brand-ink);
  color: #ffffff;
}
.composer-send.is-ready:hover { background: #1f232c; }
.composer-send:active { transform: scale(0.96); }
.composer-send:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Every icon in the composer names itself on hover or keyboard focus. One
   label: the browser's own title tooltip is gone, so there are not two. */
.composer-tool { position: relative; }
.composer-tool[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 10;
}
@media (hover: hover) {
  .composer-tool[data-tip]:hover::after { opacity: 1; }
}
.composer-tool[data-tip]:focus-visible::after { opacity: 1; }

/* The header avatar: the brand colour, solid. The gradient is kept for
   "New conversation" alone, so that one button stands out. */
.user-avatar-chip { background: var(--brand-primary); }

/* Knowledge health: an unanswered question opens to show why it is there, the
   documents it read and the answer it gave (owner, 2026-10-21), so a gap the
   voice misjudged can be told from a real one. */
.voice-health-details {
  margin-top: 8px;
  font-size: 13px;
  color: #334155;
}
.voice-health-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #0e7490;
  list-style: none;
}
.voice-health-details > summary::-webkit-details-marker { display: none; }
.voice-health-details > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.voice-health-details[open] > summary::before { transform: rotate(90deg); }
.voice-health-details > summary:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; border-radius: 4px; }
.voice-health-details[open] {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.voice-health-details[open] > summary { margin-bottom: 6px; }
.voice-health-details h4 {
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 650;
  color: #0f172a;
}
.voice-health-item-body .voice-health-why { margin: 0; }
.voice-health-item-body .voice-health-missing { margin: 4px 0 0; color: #0f172a; }
.voice-health-details .voice-health-empty { padding: 0; color: #64748b; }
.voice-health-match { color: #64748b; }
.voice-health-details .voice-health-docs em { color: #047857; font-style: normal; font-weight: 600; }
.voice-health-answer {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border-left: 3px solid #e2e8f0;
  background: #ffffff;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.55;
  color: #334155;
}
/* In the details the line reads as one sentence ("Vacation policy 71% match
   used in the answer"), wrapping as text on a phone instead of in columns. */
.voice-health-details .voice-health-docs li { display: block; }
.voice-health-details .voice-health-docs li i { margin-right: 6px; vertical-align: -2px; }

/* Voice Studio: what the chat knows about a voice, from its documents
   (Voices\VoiceKnowledge). Read-only, under "When Claara should suggest it". */
.voice-chat-knowledge {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 13px;
  color: #334155;
}
.voice-chat-knowledge h3 { margin: 0; font-size: 13px; font-weight: 650; color: #0f172a; }
.voice-chat-knowledge h4 { margin: 10px 0 2px; font-size: 12px; font-weight: 650; color: #0f172a; }
.voice-chat-knowledge p { margin: 2px 0 0; }
.voice-chat-knowledge ul { margin: 2px 0 0; padding-left: 1.2em; list-style: disc; }
.voice-chat-knowledge li { margin: 1px 0; }
.voice-chat-knowledge-intro, .voice-chat-knowledge-meta, .voice-chat-knowledge-empty { color: #64748b; font-size: 12px; }
.voice-chat-knowledge-meta { margin-top: 8px !important; }