@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/Figtree-roman.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/Figtree-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./fonts/Playfair-roman.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("./fonts/Playfair-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --color-bg: #faf7f3;
  --color-surface: #f1eae2;
  --color-text: #17334f;
  --color-divider: rgba(23, 51, 79, .14);
  --color-accent: #c0764a;
  --color-accent-100: #f7ebe1;
  --color-accent-600: #a45f37;
  --color-accent-700: #874a28;
  --color-accent-800: #5f331b;
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --shadow-lg: 0 18px 48px rgba(23, 51, 79, .14);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  overflow: hidden;
}

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

button {
  cursor: pointer;
}

a {
  color: var(--color-accent-700);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}

a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.app-loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.brand-tile,
.workspace-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 6px;
  font-family: var(--font-heading);
  line-height: 1;
}

.brand-tile {
  width: 30px;
  height: 30px;
  justify-self: center;
  font-size: 13px;
}

.app-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}

.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.rail {
  width: 216px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 2.5%, transparent);
}

.rail-brand {
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--color-divider);
}

.rail-brand-main {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rail-brand-main strong {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
}

.rail-url,
.kicker,
.label-upper {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

.rail-url {
  margin-top: 7px;
}

.nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tw-nav,
.workspace-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.tw-nav {
  padding: 7px 9px;
}

.tw-nav:hover,
.workspace-menu button:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.tw-nav.active {
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.nav-icon {
  display: flex;
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .85;
}

.nav-count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.workspace-switcher {
  position: relative;
  padding: 10px;
  border-top: 1px solid var(--color-divider);
}

.workspace-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% - 4px);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}

.workspace-menu button {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.workspace-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: left;
}

.workspace-pill span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.workspace-pill b,
.workspace-pill small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-pill b {
  font-size: 12.5px;
  font-weight: 500;
}

.workspace-pill small {
  font-size: 10px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.workspace-mark {
  width: 24px;
  height: 24px;
  flex: none;
  font-size: 11px;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 15px 22px 13px;
  border-bottom: 1px solid var(--color-divider);
}

.topbar-title {
  flex: 1;
  min-width: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.1;
}

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

.transfer-wrap {
  position: relative;
}

.transfer-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 40;
  min-width: 158px;
  padding: 6px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.transfer-menu button,
.transfer-menu label {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  text-align: left;
}

.transfer-menu button:hover,
.transfer-menu label:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-wrap span {
  position: absolute;
  left: 9px;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.search-wrap .input {
  width: 250px;
  min-height: 30px;
  font-size: 12.5px;
  padding: 5px 10px 5px 24px;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 40px;
}

.tw-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.tw-scroll::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: 9px;
}

.tw-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
}

.btn svg,
.tw-ib svg,
.nav-icon svg,
.workspace-pill svg,
.workspace-menu svg,
.search-wrap svg,
.file-row svg,
.link-row svg {
  display: block;
  flex: none;
}

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

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.sync-pill {
  min-width: 92px;
  justify-content: center;
}

.sync-pill[data-status="error"] {
  color: #b3402b;
  border-color: color-mix(in srgb, #b3402b 42%, var(--color-divider));
}

.btn-ghost {
  color: var(--color-accent);
  padding-inline: 4px;
  border-color: transparent;
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.tw-ib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.tw-ib:hover {
  border-color: var(--color-divider);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.input,
.tw-sel {
  width: 100%;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 9px;
}

.input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 14px;
}

textarea.input {
  resize: vertical;
  line-height: 1.55;
}

.tw-sel {
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23807c78' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  padding: 5px 24px 5px 9px;
  font-size: 12.5px;
  min-height: 30px;
}

.tw-sel:hover {
  border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.tw-mini {
  width: auto;
  max-width: 170px;
  font-size: 12px;
  min-height: 26px;
  padding: 3px 22px 3px 7px;
  border-color: transparent;
}

.tw-mini:hover {
  border-color: var(--color-divider);
}

.tw-date {
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 3px 6px;
  min-height: 26px;
}

.tw-date:hover,
.tw-date:focus {
  border-color: var(--color-divider);
  outline: none;
}

.tw-tw {
  max-width: 100%;
  overflow-x: auto;
}

.tw-t {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: var(--tfs, 13px);
}

.tw-t th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}

.tw-t td {
  padding: var(--rp, 7px) 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  vertical-align: middle;
}

.tw-t tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

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

.metric {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 12px 14px;
}

.metric-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 6px;
}

.metric-value strong {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.metric-value span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.tiny-bar {
  height: 2px;
  margin-top: 10px;
  background: var(--color-neutral-200);
  border-radius: 2px;
  overflow: hidden;
}

.tiny-bar span {
  display: block;
  height: 100%;
  width: var(--value);
  background: var(--bar-color, var(--color-accent));
}

.section-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.section-line h2,
.section-line h4 {
  font-size: 16px;
}

.muted {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 10px;
}

.filters .tw-sel,
.filters .input {
  width: auto;
  min-width: 145px;
}

.filters .input {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12.5px;
}

.filters .tw-sel[data-active="true"],
.filters .input[data-active="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent-800);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.result-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0 11px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-color);
  flex: none;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.dot-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 11px;
}

.tag-outline {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.tag-neutral {
  background: var(--color-neutral-100);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.empty {
  border: 1px dashed var(--color-divider);
  border-radius: 10px;
  padding: 34px;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.empty strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text);
}

.split {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.main-pane {
  flex: 1;
  min-width: 0;
}

.aside-pane {
  width: 320px;
  flex: none;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  padding: 14px;
  background: var(--color-bg);
}

.aside-pane h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.aside-list {
  display: grid;
  gap: 8px;
}

.mini-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
  font-size: 12.5px;
}

.mini-row b {
  font-weight: 500;
}

.candidate-title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
}

.candidate-subtitle,
.evidence {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-subtitle {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}

.evidence {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--color-accent-700);
}

.score {
  font-family: var(--font-heading);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--score-color, var(--color-text));
}

.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.seg button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding: 5px 10px;
  font-size: 12.5px;
}

.seg button.active {
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.follow-group {
  margin-top: 15px;
}

.follow-group h3 {
  font-size: 15px;
  margin-bottom: 7px;
}

.follow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}

.stack {
  display: grid;
  gap: 10px;
}

.panel {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 12px 14px;
}

.template-grid,
.capture-grid,
.archive-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

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

.roles-main {
  min-width: 0;
}

.tw-t tbody tr.is-selected {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.table-link {
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font: inherit;
  padding: 0;
}

.role-detail {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 13px;
  background: var(--color-bg);
}

.role-detail-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.role-detail-head h3 {
  font-size: 18px;
  margin: 2px 0 4px;
}

.role-detail-head p {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

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

.role-detail-stats div {
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 8px;
}

.role-detail-stats b {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
}

.role-detail-stats span {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.role-detail-facts {
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
}

.role-detail-facts div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
  padding-bottom: 5px;
  font-size: 12px;
}

.role-detail-facts span {
  color: color-mix(in srgb, var(--color-text) 56%, transparent);
}

.role-detail-facts b {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  text-align: right;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.role-detail-list {
  margin-top: 14px;
}

.role-detail-list h4 {
  font-size: 15px;
}

.role-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.archive-stack {
  display: grid;
  gap: 22px;
}

.template-surface {
  display: grid;
  gap: 12px;
}

.template-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 2px;
}

.template-cats button {
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding: 5px 10px;
  font-size: 12.5px;
}

.template-cats button.active {
  border-color: var(--color-accent);
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

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

.template-card {
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 12px;
  background: transparent;
}

.template-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.template-card-top h3 {
  font-size: 17px;
  margin: 0;
}

.template-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--color-divider);
  margin-top: 12px;
  padding-top: 10px;
}

.template-card-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.template-card-actions .btn {
  min-height: auto;
  padding: 0 2px;
  border: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.list-button {
  display: block;
  width: 100%;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  padding: 8px 10px;
  font-size: 12.5px;
}

.list-button.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.template-body {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 13px;
}

.drawer-backdrop,
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--color-neutral-900) 32%, transparent);
}

.drawer {
  position: relative;
  width: 496px;
  max-width: 94vw;
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  border-left: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px 28px;
}

.drawer.role-drawer {
  width: 540px;
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.drawer-header > div {
  flex: 1;
  min-width: 0;
}

.drawer-header h2 {
  margin: 4px 0 2px;
  font-size: 23px;
}

.drawer-subtitle {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  display: grid;
  gap: 5px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.score-card {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 14px;
}

.score-card-top {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 7px;
}

.score-card-top strong {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.reason-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
}

.reason-row b {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.reason-meter {
  width: 52px;
  height: 3px;
  background: var(--color-neutral-200);
  border-radius: 2px;
  overflow: hidden;
}

.reason-meter span {
  display: block;
  height: 100%;
  width: var(--value);
  background: var(--color-accent);
}

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--color-text) 26%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
}

.drop-zone:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.file-row,
.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12.5px;
}

.file-row span:nth-child(2),
.link-row a {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-actions,
.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
}

.drawer-actions .btn-primary {
  flex: 1;
}

.dialog-backdrop {
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dialog {
  width: min(620px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
}

.dialog-title {
  font-family: var(--font-heading);
  font-size: 21px;
  margin-bottom: 12px;
}

.transfer-copy {
  max-width: 72ch;
  margin-top: -4px;
  font-size: 12.5px;
  line-height: 1.45;
}

.transfer-dialog {
  width: min(980px, 100%);
}

.cloud-dialog {
  width: min(460px, 100%);
}

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

.transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.transfer-summary div {
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 9px 10px;
}

.transfer-summary b,
.transfer-summary span {
  display: block;
}

.transfer-summary b {
  font-size: 16px;
  font-weight: 600;
}

.transfer-summary span {
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 11.5px;
}

.transfer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.transfer-preview {
  max-height: 260px;
}

.duplicate-dialog {
  width: min(560px, 100%);
}

.duplicate-list {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.duplicate-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--color-bg) 82%, var(--color-accent-100));
}

.duplicate-item div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.duplicate-item strong {
  font-size: 13px;
  font-weight: 600;
}

.duplicate-item span,
.duplicate-item p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
}

.hello-csv-frame {
  --hello-csv-color-primary: var(--color-accent);
  --hello-csv-color-primary-light: var(--color-accent-600);
  --hello-csv-color-primary-extra-light: var(--color-accent-100);
  --hello-csv-color-secondary: var(--color-accent-700);
  --hello-csv-color-tertiary: var(--color-divider);
  --hello-csv-color-tertiary-light: var(--color-bg);
  --hello-csv-color-muted: var(--color-neutral-100);
  --hello-csv-color-muted-light: var(--color-bg);
  --color-hello-csv-primary: var(--color-accent);
  --color-hello-csv-primary-light: var(--color-accent-600);
  --color-hello-csv-primary-extra-light: var(--color-accent-100);
  --color-hello-csv-secondary: var(--color-accent-700);
  --color-hello-csv-tertiary: var(--color-divider);
  --color-hello-csv-tertiary-light: var(--color-bg);
  --color-hello-csv-muted: var(--color-neutral-100);
  --color-hello-csv-muted-light: var(--color-bg);
  min-height: 540px;
  margin-top: 12px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-bg);
  overflow: auto;
}

.hello-csv-frame * {
  font-family: var(--font-body);
}

.hello-csv-frame .hello-csv {
  min-height: 540px;
  color: var(--color-text);
}

.hello-csv-frame h1,
.hello-csv-frame h2,
.hello-csv-frame h3 {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

.hello-csv-frame .text-2xl {
  font-size: 20px;
  line-height: 1.15;
}

.hello-csv-frame .p-5 {
  padding: 18px;
}

.hello-csv-frame .p-10 {
  padding: 24px;
}

.hello-csv-frame .space-y-4 > :not(:last-child) {
  margin-bottom: 12px;
}

.hello-csv-frame .space-y-5 > :not(:last-child) {
  margin-bottom: 16px;
}

.hello-csv-frame .space-x-5 > :not(:last-child) {
  margin-right: 12px;
}

.hello-csv-frame .flex.h-full.justify-between.space-x-5 > .flex-2 {
  flex: 1 1 auto;
}

.hello-csv-frame .flex.h-full.justify-between.space-x-5 > .flex-1:last-child {
  flex: 0 0 220px;
  max-width: 220px;
  background: color-mix(in srgb, var(--color-bg) 78%, var(--color-accent-100));
}

.hello-csv-frame .rounded-xl,
.hello-csv-frame .rounded-lg {
  border-radius: 8px;
}

.hello-csv-frame .border-gray-200,
.hello-csv-frame .border-gray-300 {
  border-color: var(--color-divider);
}

.hello-csv-frame .bg-white,
.hello-csv-frame .bg-gray-50 {
  background: var(--color-bg);
}

.hello-csv-frame .text-gray-500 {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.hello-csv-frame .text-gray-900 {
  color: var(--color-text);
}

.hello-csv-frame button {
  border-radius: 999px;
}

@media (max-width: 760px) {
  .hello-csv-frame .flex.h-full.justify-between.space-x-5 {
    display: block;
  }

  .hello-csv-frame .flex.h-full.justify-between.space-x-5 > .flex-1:last-child {
    display: none;
  }
}

.palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.palette-button {
  display: flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 12px;
  padding: 5px 10px 5px 7px;
  border-radius: 20px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.swatches {
  display: flex;
}

.swatches span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.swatches span + span {
  margin-left: -4px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  font-size: 12.5px;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.capture-snippet {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
}

.capture-setup {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
}

.capture-setup-copy {
  flex: 1;
  min-width: 0;
}

.capture-setup-title {
  font-family: var(--font-heading);
  font-size: 15px;
}

.capture-setup-note {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  margin-top: 2px;
}

.capture-tag {
  font-size: 10.5px;
  white-space: nowrap;
}

.capture-bookmarklet {
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--color-accent);
  padding: 5px 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  white-space: nowrap;
}

.capture-bookmarklet:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.capture-workbench {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.capture-inbox {
  flex: 1;
  min-width: 0;
}

.capture-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.capture-title-line h4 {
  margin: 0;
  font-size: 15px;
}

.capture-title-line span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.capture-row {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.capture-row.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.capture-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.capture-row .tag {
  font-size: 10px;
}

.capture-row-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-row-time {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  white-space: nowrap;
}

.capture-row-url {
  font-size: 11px;
  color: var(--color-accent-700);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-row-snippet {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.capture-review {
  width: 352px;
  flex: none;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 12px 14px;
}

.capture-review-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.capture-review-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.capture-review .input {
  font-size: 13px;
}

.capture-review .tw-sel {
  width: 100%;
  min-height: 36px;
}

.capture-pair {
  display: flex;
  gap: 9px;
}

.capture-pair .field {
  flex: 1;
}

.capture-review textarea.input {
  min-height: 66px;
}

.capture-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.capture-actions .btn-primary {
  flex: 1;
  padding: 6px 8px;
  font-size: 12.5px;
}

.capture-actions .btn-secondary {
  padding: 6px 10px;
  font-size: 12.5px;
}

.capture-empty {
  padding: 26px 8px;
  text-align: center;
}

.capture-empty div {
  font-family: var(--font-heading);
  font-size: 17px;
  margin-bottom: 5px;
}

.capture-empty p {
  margin: 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 1100px) {
  body {
    overflow: auto;
  }

  .app-shell {
    min-height: 100vh;
    height: auto;
  }

  .app-body,
  .split,
  .template-grid,
  .roles-layout,
  .capture-grid,
  .capture-workbench,
  .archive-grid {
    flex-direction: column;
    display: flex;
  }

  .rail {
    width: 100%;
    min-height: auto;
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
    flex: none;
  }

  .nav .tw-nav {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .workspace-switcher {
    border-top: 0;
  }

  .workspace-menu {
    position: static;
    margin-top: 8px;
    max-height: min(320px, 52vh);
    overflow-y: auto;
    box-shadow: none;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .topbar-actions,
  .search-wrap,
  .search-wrap .input {
    width: 100%;
  }

  .transfer-wrap,
  .transfer-wrap .btn {
    width: 100%;
  }

  .transfer-menu {
    position: static;
    margin-top: 6px;
    box-shadow: none;
  }

  .content,
  .main {
    overflow: visible;
  }

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

  .aside-pane {
    width: 100%;
  }

  .role-detail {
    width: 100%;
  }

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

  .capture-review {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .metrics,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .follow-toolbar,
  .template-card-foot,
  .role-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .capture-setup,
  .capture-pair {
    flex-direction: column;
    align-items: stretch;
  }

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