/* Knote: a focused, accessible workspace. All assets are served locally. */
:root {
  --knote-bg:#f7f8f5;
  --knote-surface:#fff;
  --knote-surface-strong:#fff;
  --knote-bg-soft:#f3f5f1;
  --knote-ink:#25372f;
  --knote-muted:#6c766e;
  --knote-line:#e2e7df;
  --knote-brand:#285b4a;
  --knote-brand-strong:#1b4235;
  --knote-brand-soft:#eaf1e8;
  --knote-accent:#bc694e;
  --knote-shadow:0 8px 30px #23362a08;
  --knote-shadow-soft:0 2px 4px #23362a03;
  --bs-body-font-family:"Segoe UI",Arial,sans-serif;
  --bs-body-color:var(--knote-ink);
  --bs-body-bg:var(--knote-bg);
  --bs-border-color:var(--knote-line);
  --bs-primary-rgb:40,91,74;
  --bs-secondary-color:var(--knote-muted);
  --bs-link-color:var(--knote-brand);
  --bs-link-hover-color:var(--knote-brand-strong);
  --bs-border-radius:.65rem;
  --bs-border-radius-lg:1rem;
  --bs-heading-color:var(--knote-ink)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--knote-ink);
  font-size:14px;
  line-height:1.6;
  background:var(--knote-bg)
}

a {
  color:var(--knote-brand);
  text-decoration:none
}

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

button,a,input,select,textarea,summary {
  touch-action:manipulation
}

button {
  cursor:pointer
}

svg.icon {
  flex-shrink:0;
  vertical-align:middle
}

h1,h2,h3,h4 {
  letter-spacing:-.035em;
  line-height:1.25
}

h1 {
  font-size:2.2rem;
  font-weight:650
}

h2 {
  font-size:1.15rem;
  font-weight:650
}

h3 {
  font-size:1rem
}

a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #6c9472;
  outline-offset:3px
}

::selection {
  background:#d2e5cf
}

p {
  color:var(--knote-muted)
}

[hidden] {
  display:none!important
}

.muted,.text-muted {
  color:var(--knote-muted)!important
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:2000;
  padding:12px;
  background:#fff;
  border:2px solid var(--knote-brand)
}

.skip-link:focus {
  top:12px
}

kbd {
  color:#7e887f;
  background:#f0f2ed;
  border:1px solid #dde3d9;
  border-radius:4px;
  padding:1px 5px;
  font:11px "Segoe UI",sans-serif;
  box-shadow:0 1px 0 #dbe1d5
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  color:var(--knote-muted);
  padding:8px;
  border-radius:7px;
  min-width:34px;
  min-height:34px
}

.icon-button:hover {
  background:#e9ede4;
  color:var(--knote-brand)
}

.app-sidebar {
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:238px;
  background:#f0f3ec;
  border-right:1px solid #dfe5d8;
  padding:30px 18px 0;
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto
}

.app-brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--knote-ink);
  width:max-content
}

.app-brand__name {
  font-size:29px;
  font-weight:750;
  letter-spacing:-1.6px;
  line-height:1
}

.app-brand__mark {
  height:32px;
  width:32px;
  border-radius:9px;
  background:#2e5746;
  color:#f5f7e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,serif;
  font-size:30px;
  font-weight:bold;
  line-height:1;
  padding-bottom:6px
}

.app-brand__mark span {
  color:#e1a184;
  margin-top:8px
}

.brand-period {
  color:var(--knote-accent)
}

.app-sidebar .app-brand {
  margin:0 14px 30px
}

.sidebar-capture {
  margin:0 6px 30px;
  justify-content:center
}

.nav-label {
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:700;
  color:#899081;
  display:block;
  padding:0 14px;
  margin:0 0 10px
}

.sidebar-nav {
  display:grid;
  gap:4px
}

.sidebar-link {
  display:flex;
  align-items:center;
  gap:12px;
  color:#64725f;
  padding:10px 14px;
  min-height:42px;
  border-radius:7px;
  font-size:13px;
  font-weight:500;
  border:0;
  background:transparent;
  text-align:left;
  width:100%
}

.sidebar-link:hover {
  background:#e7ede0;
  color:#2c563f
}

.sidebar-link.is-active {
  background:#e0e9d8;
  color:#2b513f;
  font-weight:650
}

.sidebar-link kbd {
  margin-left:auto
}

.nav-label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:28px 0 2px
}

.nav-label-row .nav-label {
  margin:0
}

.sidebar-projects {
  display:grid;
  gap:3px
}

.sidebar-project {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:38px;
  padding:7px 14px;
  font-size:12px;
  color:#6a7567
}

.sidebar-project span:last-child {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.sidebar-project:hover {
  color:#234e43;
  background:#e8eddf;
  border-radius:7px
}

.project-dot {
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:2px;
  background:#7d9872
}

.color-0 {
  background:#879d79
}

.color-1 {
  background:#bd8c6d
}

.color-2 {
  background:#8c92b1
}

.color-3 {
  background:#69a7a2
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:28px
}

.sidebar-note {
  border-top:1px solid #dce3d4;
  padding:22px 14px 16px;
  font-size:15px;
  font-family:Georgia,serif;
  line-height:1.55;
  color:#657d5e
}

.sidebar-note strong {
  font-weight:normal;
  color:#425c3d
}

.sidebar-note span {
  display:block;
  font:11px/1.6 "Segoe UI",sans-serif;
  color:#8a9381;
  margin-top:8px;
  max-width:140px
}

.sidebar-account {
  border-top:1px solid #dce3d4;
  display:flex;
  align-items:center;
  gap:4px;
  padding:18px 2px;
  margin-top:16px
}

.account-link {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
  color:var(--knote-ink)
}

.account-link>span:last-child {
  overflow:hidden
}

.account-link strong {
  display:block;
  font-size:12px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap
}

.account-link small {
  font-size:10px;
  color:#8a9381;
  display:block
}

.avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  height:34px;
  width:34px;
  background:#e3dfcd;
  border:1px solid #d9d5c3;
  border-radius:50%;
  font-size:13px;
  color:#5d664d;
  font-weight:650
}

.sidebar-account form {
  margin:0
}

.workspace-shell {
  margin-left:238px;
  min-height:100vh;
  display:flex;
  flex-direction:column
}

.workspace-topbar {
  height:73px;
  border-bottom:1px solid var(--knote-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 40px;
  background:#ffffffa6
}

.topbar-location {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:12px;
  color:#879080
}

.topbar-location strong {
  font-weight:500;
  color:#495945
}

.topbar-divider {
  color:#c2c9bc
}

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

.topbar-search {
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  font-size:12px;
  color:#85917c
}

.topbar-search kbd {
  margin-left:10px
}

.preview-badge {
  font-size:10px;
  border:1px solid #d9e2cc;
  background:#f1f5e9;
  border-radius:5px;
  color:#758366;
  padding:4px 8px
}

.app-main {
  padding:36px 40px 0;
  flex:1;
  outline:none
}

.app-container {
  max-width:1420px;
  margin:auto
}

.workspace-footer {
  display:flex;
  justify-content:space-between;
  color:#929b8a;
  font-size:10px;
  letter-spacing:.3px;
  padding:35px 0 22px;
  border-top:1px solid var(--knote-line);
  margin-top:35px
}

.workspace-footer span:last-child {
  font-weight:700
}

.mobile-menu,.sidebar-close {
  display:none
}

.page-cluster {
  display:grid;
  gap:24px
}

.page-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:3px
}

.page-header__content {
  min-width:0;
  max-width:780px
}

.page-header__eyebrow,.section-panel__eyebrow {
  display:block;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:10px;
  font-weight:700;
  color:#8c977e;
  margin-bottom:8px
}

.page-header__title {
  font-size:clamp(1.7rem,2.7vw,2.25rem);
  margin:0 0 10px;
  overflow-wrap:anywhere
}

.page-header__lede {
  font-size:13px;
  line-height:1.7;
  margin:0;
  max-width:650px;
  color:#7c8873
}

.page-header__actions {
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  padding-top:16px;
  flex-shrink:0
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  font-size:12px;
  font-weight:600;
  padding:9px 15px;
  border-radius:7px;
  line-height:1.5;
  white-space:normal;
  transition:background .15s,border-color .15s,box-shadow .15s
}

.btn-sm {
  min-height:33px;
  font-size:11px;
  padding:6px 10px
}

.btn-primary {
  --bs-btn-bg:var(--knote-brand);
  --bs-btn-border-color:var(--knote-brand);
  --bs-btn-hover-bg:var(--knote-brand-strong);
  --bs-btn-hover-border-color:var(--knote-brand-strong);
  --bs-btn-active-bg:var(--knote-brand-strong);
  --bs-btn-active-border-color:var(--knote-brand-strong);
  --bs-btn-disabled-bg:#819585;
  --bs-btn-disabled-border-color:#819585;
  color:#fff;
  box-shadow:0 2px 2px #254e4210
}

.btn-outline-primary,.btn-outline-secondary {
  --bs-btn-color:#54664d;
  --bs-btn-border-color:#d8e0d1;
  --bs-btn-hover-color:#2c4e39;
  --bs-btn-hover-bg:#ecf1e6;
  --bs-btn-hover-border-color:#bacab1;
  --bs-btn-active-bg:#dce8d4;
  --bs-btn-active-color:#2c4e39;
  --bs-btn-active-border-color:#bacab1;
  background:#fff
}

.btn-outline-danger {
  --bs-btn-color:#a34c3b;
  --bs-btn-border-color:#e4d4cc;
  --bs-btn-hover-bg:#a34c3b;
  --bs-btn-hover-border-color:#a34c3b
}

.btn-link {
  color:#526d44
}

.text-link {
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:7px
}

.text-link:hover {
  text-decoration:underline
}

.section-panel,.page-panel,.card,.output-card,.recorder-panel,.auth-panel {
  background:#fff;
  border:1px solid var(--knote-line);
  border-radius:10px;
  box-shadow:var(--knote-shadow-soft);
  min-width:0
}

.section-panel,.page-panel,.card-body,.output-card,.recorder-panel {
  padding:23px
}

.section-panel__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:19px
}

.section-panel__title {
  font-size:15px;
  font-weight:650;
  letter-spacing:-.3px;
  margin:0
}

.section-panel__copy {
  font-size:12px;
  color:#87907e;
  margin:6px 0 0
}

.section-panel__header .section-panel__eyebrow {
  display:none
}

.helper-copy {
  font-size:13px;
  color:var(--knote-muted);
  line-height:1.75
}

.form-label {
  font-size:12px;
  font-weight:600;
  margin-bottom:7px
}

.form-control,.form-select {
  font-size:13px;
  min-height:42px;
  border:1px solid #dce2d6;
  border-radius:7px;
  background-color:#fff;
  padding:10px 12px;
  color:var(--knote-ink)
}

.form-control::placeholder {
  color:#9da596
}

.form-control:focus,.form-select:focus,.form-check-input:focus {
  border-color:#7e9c6e;
  box-shadow:0 0 0 3px #deead54d
}

.form-check-input:checked {
  background-color:var(--knote-brand);
  border-color:var(--knote-brand)
}

.form-text {
  font-size:11px;
  line-height:1.65
}

.form-check-label {
  font-size:12px
}

.form-shell {
  max-width:920px
}

.form-actions,.toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.form-actions {
  padding-top:10px
}

.toolbar form {
  margin:0
}

.form-section {
  padding:24px 0;
  border-top:1px solid var(--knote-line)
}

.field-errors {
  margin-top:6px;
  font-size:12px;
  color:#a74d3c
}

.alert {
  border-radius:8px;
  padding:13px 42px 13px 16px;
  font-size:13px
}

.flash-stack {
  display:grid;
  gap:10px;
  margin-bottom:22px
}

.flash-stack .alert {
  margin:0
}

.alert-success {
  color:#33543d;
  background:#eaf2e6;
  border-color:#d3e2cd
}

.alert-danger {
  color:#8f4135;
  background:#fcf1ed;
  border-color:#ecd9d0
}

.alert-warning {
  color:#826333;
  background:#faf5e7;
  border-color:#eaddbe
}

.alert-info {
  color:#416474;
  background:#eef5f7;
  border-color:#d9e5e9
}

.overview-date {
  font-size:11px;
  color:#8b967f;
  white-space:nowrap
}

.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:24px;
  align-items:start
}

.overview-primary,.overview-aside {
  display:grid;
  gap:24px;
  min-width:0
}

.capture-banner {
  position:relative;
  overflow:hidden;
  border:1px solid #d9e3ce;
  background:#edf2e5;
  border-radius:10px;
  padding:28px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.capture-banner__copy {
  position:relative;
  z-index:1;
  max-width:510px
}

.capture-banner h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:29px;
  color:#334d2c;
  line-height:1.25;
  letter-spacing:-.7px;
  margin:0 0 12px
}

.capture-banner p {
  font-size:12px;
  max-width:350px;
  color:#7e8d70;
  line-height:1.8;
  margin-bottom:20px
}

.capture-banner .toolbar {
  gap:10px
}

.capture-art {
  width:150px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  position:relative
}

.capture-art:before,.capture-art:after {
  content:"";
  position:absolute;
  width:138px;
  height:138px;
  border:1px solid #c8d5b9;
  border-radius:50%;
  opacity:.65
}

.capture-art:after {
  width:178px;
  height:178px;
  opacity:.3
}

.capture-art__disc {
  display:grid;
  place-items:center;
  width:100px;
  height:100px;
  background:#e1eacd;
  border:1px solid #c6d4b3;
  border-radius:50%;
  color:#687f50;
  transform:rotate(-10deg)
}

.capture-art__disc .icon {
  width:50px;
  height:50px;
  stroke-width:1.1
}

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

.stat-card {
  border:1px solid var(--knote-line);
  padding:17px 19px;
  background:#fff;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  position:relative
}

.stat-card__label {
  color:#85907a;
  font-size:10px;
  letter-spacing:.1px
}

.stat-card__value {
  font-size:27px;
  font-weight:600;
  line-height:1.4;
  color:#364b2e;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.7px
}

.stat-card__meta {
  font-size:10px;
  color:#8e9785
}

.stat-card>.icon {
  position:absolute;
  top:19px;
  right:18px;
  color:#acb79e;
  width:16px;
  height:16px
}

.stat-card:hover {
  border-color:#bdcbb0
}

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

.section-header-inline h2 {
  font-size:15px;
  margin:0
}

.section-header-inline p {
  font-size:11px;
  margin:4px 0 0;
  color:#8b9580
}

.section-header-inline .text-link {
  font-size:11px
}

.activity-panel {
  padding:22px 0 0
}

.activity-panel>.section-header-inline {
  padding:0 22px
}

.recording-list {
  display:grid
}

.recording-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 0;
  border-bottom:1px solid #edf0e8;
  min-width:0
}

.recording-row:last-child {
  border-bottom:0
}

.activity-panel .recording-row {
  padding:17px 22px
}

.recording-row:hover {
  background:#fafbf7
}

.recording-type-icon {
  width:39px;
  height:44px;
  border:1px solid #e2e8d9;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#799066;
  background:#f5f7ef;
  flex-shrink:0
}

.recording-type-icon.upload {
  color:#ae8b65;
  background:#faf6ed;
  border-color:#eee6d6
}

.recording-row__body {
  min-width:0;
  flex:1;
  display:block;
  color:inherit
}

.recording-row__body:hover .list-title {
  color:var(--knote-brand)
}

.list-title {
  font-size:13px;
  font-weight:600;
  color:#435339;
  overflow-wrap:anywhere
}

.list-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  font-size:10px;
  color:#929b86;
  margin-top:4px
}

.list-meta>span+span:before {
  content:"·";
  margin-right:10px;
  color:#b6bda9
}

.recording-row__right {
  display:flex;
  align-items:center;
  gap:15px;
  flex-shrink:0
}

.recording-row__right>.icon {
  color:#b3bba9
}

.status-pill {
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  border:1px solid #e2e7dc;
  background:#f4f6ef;
  color:#7f8c6c;
  padding:4px 8px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}

.status-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}

.status-pill--completed {
  background:#edf4e8;
  border-color:#dfead6;
  color:#6b8655
}

.status-pill--ready,.status-pill--draft {
  background:#f6f4ec;
  border-color:#ebe6d6;
  color:#a28b5c
}

.status-pill--queued,.status-pill--transcribing {
  background:#eef3f5;
  border-color:#dce6ec;
  color:#6d8c9a
}

.status-pill--failed {
  background:#fcf0e9;
  border-color:#f0dfd1;
  color:#b07453
}

.badge {
  font-size:10px;
  font-weight:600;
  border-radius:5px;
  padding:5px 8px;
  line-height:1.4
}

.text-bg-success {
  background:#edf4e8!important;
  color:#6b8655!important
}

.text-bg-secondary,.text-bg-light {
  background:#f1f3ed!important;
  color:#6e7a60!important
}

.text-bg-danger {
  background:#f8e9e3!important;
  color:#a3614b!important
}

.text-bg-warning {
  background:#f8f0df!important;
  color:#94703d!important
}

.text-bg-info {
  background:#eaf1f5!important;
  color:#607e91!important
}

.list-group {
  border:0;
  border-radius:0;
  box-shadow:none
}

.list-group-item {
  border:0;
  border-bottom:1px solid #edf0e8;
  background:transparent;
  padding:16px 0
}

.list-group-item:last-child {
  border:0
}

.list-group-item-action:hover {
  background:#fafbf7
}

.list-entry {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:start
}

.list-entry__link {
  min-width:0;
  flex:1
}

.item-stack {
  display:grid;
  gap:5px
}

.transcript-preview {
  color:#89947d;
  font-size:12px;
  line-height:1.8;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:pre-wrap
}

.transcript-preview--empty {
  color:#a2ab99
}

.project-mini {
  padding:15px 0;
  border-bottom:1px solid #edf0e8;
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit
}

.project-mini:last-child {
  border:0;
  padding-bottom:0
}

.project-mini .folder-tile {
  width:35px;
  height:35px
}

.project-mini strong {
  font-size:12px;
  display:block;
  font-weight:600
}

.project-mini small {
  font-size:10px;
  color:#919b85
}

.project-mini>.icon {
  margin-left:auto;
  color:#b3bca7
}

.folder-tile {
  background:#f4eee1;
  color:#b99867;
  display:grid;
  place-items:center;
  border-radius:7px;
  flex-shrink:0;
  width:43px;
  height:43px
}

.folder-tile.tone-2 {
  background:#efedf4;
  color:#9d91b9
}

.folder-tile.tone-3 {
  background:#e9f1ec;
  color:#7b9e81
}

.folder-tile.tone-0 {
  background:#f4eae4;
  color:#bd9981
}

.insight-panel {
  background:#faf7ef;
  border:1px solid #eae4d4;
  border-radius:10px;
  padding:22px
}

.insight-panel>.icon {
  color:#af9570;
  margin-bottom:15px
}

.insight-panel h2 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:20px;
  color:#7b684b;
  line-height:1.3;
  margin-bottom:9px
}

.insight-panel p {
  color:#a09076;
  font-size:12px;
  line-height:1.8;
  margin-bottom:15px
}

.insight-panel .text-link {
  color:#9d7f53;
  font-size:11px
}

.empty-state {
  text-align:center;
  padding:45px 20px;
  color:#939e85
}

.empty-state .empty-icon {
  height:56px;
  width:56px;
  display:grid;
  place-items:center;
  margin:0 auto 17px;
  border-radius:14px;
  background:#eef3e7;
  color:#81946a
}

.empty-state h2,.empty-state h3 {
  font-size:16px;
  color:#657b51;
  margin-bottom:9px
}

.empty-state p {
  font-size:12px;
  line-height:1.8;
  max-width:350px;
  margin:0 auto 18px;
  color:#929d85
}

.empty-state .toolbar {
  justify-content:center
}

.empty-state--compact {
  padding:25px 0
}

.empty-state--compact p {
  margin-bottom:10px
}

.attention-item {
  display:block;
  color:inherit;
  padding:13px 0;
  border-bottom:1px solid #edf0e8
}

.attention-item:last-child {
  border:0
}

.attention-item strong {
  font-size:12px;
  display:block
}

.attention-item small {
  font-size:11px;
  color:#939e85;
  display:block;
  margin-top:4px
}

.onboarding-step {
  display:flex;
  gap:13px;
  padding:15px 0;
  border-bottom:1px solid #edf0e8;
  color:inherit
}

.onboarding-step:last-child {
  border:0
}

.step-number {
  display:grid;
  place-items:center;
  border:1px solid #dce7d0;
  border-radius:50%;
  width:24px;
  height:24px;
  font-size:10px;
  flex-shrink:0;
  color:#789263
}

.onboarding-step strong {
  display:block;
  font-size:12px
}

.onboarding-step small {
  font-size:11px;
  color:#9aa28f
}

.filter-panel {
  padding:0
}

.library-tabs {
  display:flex;
  gap:24px;
  padding:0 23px;
  border-bottom:1px solid var(--knote-line);
  overflow-x:auto
}

.library-tabs a {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  white-space:nowrap;
  padding:17px 0 14px;
  color:#929d87;
  border-bottom:2px solid transparent
}

.library-tabs a.is-active {
  color:#4b6c3d;
  border-bottom-color:#5e8150;
  font-weight:600
}

.tab-count {
  background:#edf1e6;
  color:#8b987a;
  border-radius:5px;
  font-size:10px;
  padding:1px 6px
}

.filter-toolbar {
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:20px 23px
}

.filter-search {
  flex:1;
  min-width:180px
}

.filter-toolbar .form-control,.filter-toolbar .form-select {
  font-size:11px;
  min-height:37px
}

.filter-toolbar .form-label {
  font-size:10px;
  margin-bottom:4px;
  color:#859179
}

.filter-select {
  min-width:125px;
  flex:0 1 165px
}

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

.filter-actions .btn {
  min-height:37px
}

.library-results {
  padding:0 23px 8px
}

.library-results .recording-row {
  padding:20px 0
}

.library-results .recording-row__body .transcript-preview {
  margin-top:9px
}

.library-results .recording-row__right {
  align-self:flex-start;
  margin-top:5px
}

.results-summary {
  font-size:11px;
  color:#8d997e;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 14px
}

.pagination-bar {
  padding:18px 0 0;
  border-top:1px solid var(--knote-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.pagination-links {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.page-number {
  display:grid;
  place-items:center;
  min-width:30px;
  min-height:33px;
  border-radius:5px;
  color:#8c977d;
  font-size:11px
}

.page-number.is-current {
  background:#e8efdf;
  color:#4c6d3e;
  font-weight:700
}

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

.project-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid var(--knote-line);
  border-radius:10px;
  padding:24px;
  color:inherit;
  min-height:210px
}

.project-card:hover {
  border-color:#bbcbae;
  box-shadow:var(--knote-shadow)
}

.project-card .folder-tile {
  margin-bottom:20px
}

.project-card h2 {
  font-size:15px;
  margin:0 0 9px;
  overflow-wrap:anywhere
}

.project-card p {
  font-size:12px;
  line-height:1.7;
  color:#8d9980;
  flex:1
}

.project-card__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#99a389;
  border-top:1px solid #edf0e8;
  padding-top:15px;
  margin-top:10px
}

.project-card__footer strong {
  font-weight:500;
  color:#718464
}

.project-form-layout {
  max-width:950px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:24px
}

.project-form-tip {
  padding:20px;
  color:#94a083;
  font-size:12px;
  line-height:1.85
}

.project-form-tip h2 {
  font-size:14px;
  color:#728962
}

.project-form-tip .icon {
  margin-bottom:18px
}

.breadcrumb-line {
  font-size:11px;
  color:#8a997b;
  display:flex;
  align-items:center;
  gap:7px
}

.chip-list {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:15px
}

.chip {
  font-size:11px;
  padding:5px 9px;
  border:1px solid #dfe6d7;
  border-radius:6px;
  color:#869778;
  background:#f1f4ec
}

.chip strong {
  color:#617b50
}

.search-form {
  display:flex;
  gap:10px
}

.search-results-list {
  display:grid;
  gap:15px
}

.search-result {
  display:block;
  padding:20px 23px;
  border:1px solid var(--knote-line);
  border-radius:8px;
  background:#fff;
  color:inherit
}

.search-result:hover {
  border-color:#bbcbae
}

.search-result__meta {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:10px;
  color:#95a087;
  margin-bottom:9px
}

.search-result h2 {
  font-size:15px
}

.search-result p {
  font-size:12px;
  color:#8b987c;
  line-height:1.85;
  margin-bottom:0;
  overflow-wrap:anywhere
}

.search-result mark {
  background:#f2ecc6;
  color:#776830;
  padding:1px 2px
}

.search-category {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#7a8d69;
  margin:15px 0
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(270px,.85fr);
  gap:22px
}

.detail-stack,.sidebar-stack {
  display:grid;
  align-content:start;
  gap:22px;
  min-width:0
}

.audio-shell {
  padding:18px;
  background:#f6f8f1;
  border:1px solid #e3e9da;
  border-radius:8px
}

audio {
  width:100%;
  max-width:100%;
  height:44px
}

.transcript-box {
  font-size:14px;
  line-height:1.95;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#58634f
}

.editor-shell textarea {
  min-height:420px;
  font-size:14px;
  line-height:1.9
}

.status-note {
  font-size:12px;
  color:#899778
}

.action-banner {
  padding:18px;
  border:1px solid #d8e5ce;
  border-radius:8px;
  background:#f1f6eb
}

.action-banner p {
  font-size:12px
}

.disclosure-card {
  border:1px solid var(--knote-line);
  border-radius:8px;
  background:#fff
}

.disclosure-card summary {
  padding:14px 18px;
  font-size:12px;
  font-weight:600;
  cursor:pointer
}

.disclosure-card__body {
  border-top:1px solid var(--knote-line);
  padding:18px
}

.copy-button {
  display:inline-flex;
  gap:6px;
  align-items:center;
  flex-shrink:0
}

.copy-button svg {
  width:15px;
  height:15px
}

.copy-button.is-copied {
  background:#e9f3e0;
  border-color:#cddfbf;
  color:#5a7a40
}

.status-list {
  display:grid;
  gap:0
}

.status-check {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:17px 0;
  border-bottom:1px solid #edf0e8
}

.status-check:last-child {
  border:0
}

.status-check>.icon {
  color:#8ca574;
  margin-top:2px
}

.status-check.warning>.icon {
  color:#be9b67
}

.status-check strong {
  font-size:12px;
  display:block
}

.status-check p {
  font-size:11px;
  margin:5px 0 0;
  line-height:1.8
}

.settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);
  gap:24px;
  align-items:start
}

.settings-stack {
  display:grid;
  gap:24px
}

.storage-meter {
  display:flex;
  gap:25px;
  margin-top:20px
}

.storage-meter strong {
  font-size:23px;
  font-weight:500;
  display:block;
  color:#657e53
}

.storage-meter small {
  font-size:10px;
  color:#9aa78a
}

.password-field {
  position:relative
}

.password-field .form-control {
  padding-right:65px
}

.password-toggle {
  position:absolute;
  right:8px;
  top:7px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#8c9b7b;
  font-size:11px;
  min-height:28px;
  padding:4px 8px
}

dialog {
  border:1px solid #dae3d1;
  border-radius:13px;
  padding:24px;
  color:var(--knote-ink);
  background:#fff;
  box-shadow:0 30px 100px #19251630;
  width:min(580px,calc(100% - 32px));
  max-height:85vh
}

dialog::backdrop {
  background:#23342666;
  backdrop-filter:blur(3px)
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:18px
}

.dialog-heading h2 {
  font-size:17px;
  margin:0
}

.command-search {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #dbe4d2;
  border-radius:8px;
  padding:8px 10px
}

.command-search>.icon {
  color:#99a38b
}

.command-search input {
  border:0;
  outline:none;
  min-width:0;
  flex:1;
  font-size:12px
}

.command-links {
  display:grid;
  margin-top:15px
}

.command-links a {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  padding:13px 10px;
  border-radius:7px;
  color:#718760
}

.command-links a:hover {
  background:#eff4e9
}

.command-links a>.icon:last-child {
  margin-left:auto;
  color:#a5b09a
}

.dialog-footnote {
  font-size:10px;
  color:#9da890;
  margin:18px 0 0
}

.guide-steps {
  counter-reset:guide;
  list-style:none;
  padding:0;
  margin:0
}

.guide-steps li {
  position:relative;
  counter-increment:guide;
  padding:4px 0 12px 45px
}

.guide-steps li:before {
  content:counter(guide);
  position:absolute;
  left:0;
  top:4px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  background:#ecf2e3;
  color:#7d9765;
  border-radius:50%;
  font-size:11px
}

.guide-steps strong {
  font-size:13px
}

.guide-steps p {
  font-size:12px;
  line-height:1.8;
  margin-top:4px
}

.shortcut-row {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  border-top:1px solid var(--knote-line);
  padding-top:16px;
  color:#95a186;
  font-size:10px
}

.guest-shell {
  background:#f4f6ef
}

.guest-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 5vw;
  border-bottom:1px solid #e4e9db
}

.guest-topbar>span {
  color:#a1ad90;
  font-size:11px
}

.guest-shell .app-main {
  padding:50px 5vw 0
}

.guest-shell .app-container {
  max-width:1100px
}

.auth-layout {
  display:grid;
  grid-template-columns:1fr 430px;
  gap:80px;
  align-items:center;
  min-height:65vh
}

.auth-story {
  max-width:490px
}

.auth-story .page-header__eyebrow {
  color:#9eab87
}

.auth-story h1 {
  font-family:Georgia,serif;
  font-size:clamp(36px,4vw,55px);
  font-weight:400;
  letter-spacing:-1.6px;
  color:#3d5a31;
  line-height:1.14;
  margin:20px 0
}

.auth-story p {
  font-size:14px;
  line-height:1.9;
  color:#8b9b78;
  max-width:360px
}

.auth-story-wave {
  display:flex;
  align-items:center;
  gap:6px;
  height:65px;
  margin:35px 0;
  color:#b3c09d
}

.auth-story-wave span {
  display:block;
  width:4px;
  border-radius:3px;
  background:currentColor
}

.auth-story-wave span:nth-child(3n) {
  background:#a4b888
}

.auth-promise {
  border-top:1px solid #dde5d2;
  padding-top:20px;
  font-size:11px;
  color:#8c9e77;
  display:flex;
  gap:8px;
  align-items:center
}

.auth-panel {
  padding:30px;
  max-width:470px;
  width:100%
}

.auth-panel h2 {
  font-size:22px;
  margin:0 0 8px
}

.auth-panel .helper-copy {
  font-size:12px
}

.auth-panel .auth-switch {
  font-size:12px;
  color:#929f84;
  margin:22px 0 0;
  text-align:center
}

.auth-panel .btn-primary {
  margin-top:5px
}

.auth-panel .page-header__eyebrow {
  font-size:9px
}

.auth-panel .form-control {
  background:#fdfefb
}

.auth-panel .mb-3 {
  margin-bottom:18px!important
}

@media(min-width:1600px) {
  .app-main {
    padding-top:45px
  }
  .overview-grid {
    grid-template-columns:minmax(0,1fr) 320px
  }
  .capture-banner {
    padding:38px
  }
}

@media(max-width:1200px) {
  .app-sidebar {
    width:218px;
    padding-left:14px;
    padding-right:14px
  }
  .workspace-shell {
    margin-left:218px
  }
  .app-main {
    padding:30px 26px 0
  }
  .workspace-topbar {
    padding:0 26px
  }
  .overview-grid {
    grid-template-columns:minmax(0,1fr) 255px;
    gap:18px
  }
  .overview-primary,.overview-aside {
    gap:18px
  }
  .capture-banner {
    padding:23px
  }
  .capture-art {
    width:90px
  }
  .capture-art:after {
    width:135px;
    height:135px
  }
  .capture-art:before {
    width:110px;
    height:110px
  }
  .capture-art__disc {
    width:80px;
    height:80px
  }
  .stats-grid {
    gap:10px
  }
  .stat-card {
    padding:15px
  }
  .stat-card>.icon {
    display:none
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .auth-layout {
    gap:35px
  }
}

@media(max-width:1020px) {
  .overview-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .overview-aside {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .overview-aside>.insight-panel {
    grid-column:auto
  }
  .settings-grid,.detail-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .page-header__actions {
    padding-top:5px
  }
  .page-header__title {
    font-size:29px
  }
  .project-form-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .project-form-tip {
    display:none
  }
  .auth-layout {
    grid-template-columns:1fr 400px;
    gap:30px
  }
  .auth-story h1 {
    font-size:40px
  }
  .recording-row__right {
    gap:8px
  }
  .recording-row__right>.icon {
    display:none
  }
}

@media(max-width:767px) {
  body {
    font-size:14px
  }
  .app-sidebar {
    transform:translateX(-100%);
    width:265px;
    transition:transform .2s ease;
    padding-top:25px
  }
  .sidebar-open .app-sidebar {
    transform:translateX(0)
  }
  .sidebar-backdrop {
    position:fixed;
    inset:0;
    background:#18271766;
    z-index:99
  }
  .sidebar-close {
    display:flex;
    position:absolute;
    right:14px;
    top:29px
  }
  .sidebar-open {
    overflow:hidden
  }
  .workspace-shell {
    margin-left:0
  }
  .workspace-topbar {
    height:62px;
    padding:0 16px
  }
  .mobile-menu {
    display:flex;
    margin-left:-7px
  }
  .topbar-location {
    gap:9px;
    font-size:11px
  }
  .topbar-location>span:first-of-type,.topbar-divider {
    display:none
  }
  .topbar-actions {
    gap:8px
  }
  .topbar-search span,.topbar-search kbd {
    display:none
  }
  .topbar-search {
    padding:10px
  }
  .app-main {
    padding:26px 18px 0
  }
  .page-cluster {
    gap:20px
  }
  .page-header {
    flex-wrap:wrap;
    gap:14px
  }
  .page-header__title {
    font-size:28px
  }
  .page-header__actions {
    padding:0;
    flex-shrink:1;
    gap:8px
  }
  .page-header__lede {
    font-size:12px
  }
  .overview-date {
    font-size:10px
  }
  .capture-banner {
    padding:25px
  }
  .capture-banner h2 {
    font-size:27px
  }
  .capture-banner p {
    max-width:265px
  }
  .capture-art {
    display:none
  }
  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .stat-card {
    padding:15px 17px
  }
  .stat-card__value {
    font-size:27px
  }
  .stat-card>.icon {
    display:block
  }
  .overview-aside {
    grid-template-columns:1fr
  }
  .overview-grid {
    gap:20px
  }
  .section-panel,.page-panel,.output-card,.card-body {
    padding:20px
  }
  .activity-panel {
    padding:20px 0 0
  }
  .activity-panel>.section-header-inline {
    padding:0 18px
  }
  .activity-panel .recording-row {
    padding:16px 18px
  }
  .recording-row {
    gap:11px;
    align-items:flex-start;
    flex-wrap:wrap
  }
  .recording-row__body {
    min-width:calc(100% - 62px)
  }
  .recording-row__right {
    margin-left:50px;
    margin-top:-3px
  }
  .recording-row__right .copy-button {
    padding:3px 7px;
    min-height:27px
  }
  .recording-row__right>.icon {
    display:none
  }
  .list-meta {
    font-size:10px;
    gap:2px 8px
  }
  .list-meta>span+span:before {
    margin-right:8px
  }
  .list-title {
    font-size:13px
  }
  .filter-panel {
    padding:0
  }
  .library-tabs {
    gap:19px;
    padding:0 18px
  }
  .filter-toolbar {
    padding:18px
  }
  .filter-search {
    flex:1 1 100%
  }
  .filter-select {
    flex:1 1 42%;
    min-width:100px
  }
  .filter-actions {
    flex:1 1 100%
  }
  .filter-actions .btn {
    flex:1
  }
  .library-results {
    padding:0 18px 8px
  }
  .library-results .recording-row__right {
    margin-top:-3px
  }
  .library-results .recording-row__body .transcript-preview {
    font-size:11px
  }
  .pagination-bar {
    flex-direction:column;
    align-items:flex-start;
    gap:12px
  }
  .project-grid {
    grid-template-columns:1fr
  }
  .project-card {
    padding:22px;
    min-height:190px
  }
  .project-card .folder-tile {
    margin-bottom:15px
  }
  .form-shell {
    max-width:none
  }
  .form-actions>.btn {
    flex:1
  }
  .list-entry {
    flex-wrap:wrap
  }
  .list-entry__link {
    min-width:100%
  }
  .chip-list {
    margin-top:12px
  }
  .dialog-heading h2 {
    font-size:16px
  }
  .command-dialog,.help-dialog {
    padding:20px
  }
  .command-search input {
    font-size:12px
  }
  .command-search>.icon {
    display:none
  }
  .shortcut-row {
    gap:9px
  }
  .auth-layout {
    grid-template-columns:1fr;
    gap:25px;
    min-height:unset;
    max-width:450px;
    margin:auto
  }
  .guest-topbar {
    padding:23px
  }
  .guest-topbar>span {
    display:none
  }
  .guest-shell .app-main {
    padding:30px 20px 0
  }
  .auth-story h1 {
    font-size:34px;
    margin:10px 0
  }
  .auth-story p,.auth-story-wave,.auth-promise {
    display:none
  }
  .auth-story .page-header__eyebrow {
    font-size:9px
  }
  .auth-panel {
    padding:25px
  }
  .workspace-footer {
    font-size:9px;
    margin-top:30px;
    padding-top:22px
  }
  .editor-shell textarea {
    min-height:60vh
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

@media print {
  .app-sidebar,.workspace-topbar,.workspace-footer,.toolbar,.page-header__actions,.audio-shell,button,dialog,.copy-button,.no-print {
    display:none!important
  }
  .workspace-shell {
    margin:0
  }
  .app-main {
    padding:0
  }
  .page-panel,.section-panel,.card,.output-card {
    border:0;
    box-shadow:none;
    padding:10px 0
  }
  body {
    background:#fff;
    font-size:12pt;
    color:#111
  }
  .transcript-box {
    font-size:12pt;
    line-height:1.7
  }
  .detail-grid {
    display:block
  }
  .page-header__title {
    font-size:22pt
  }
  .guest-topbar {
    display:none
  }
  a {
    color:inherit
  }
}

/* Readable secondary text and compact navigation for laptop-height windows. */
:root {
  --knote-muted:#66735f
}

.page-header__eyebrow,.section-panel__eyebrow,.nav-label,.overview-date,.section-panel__copy,.section-header-inline p,.stat-card__label,.stat-card__meta,.list-meta,.results-summary,.filter-toolbar .form-label,.project-mini small,.attention-item small,.onboarding-step small,.project-card p,.project-card__footer,.form-text,.transcript-preview,.workspace-footer,.search-result__meta,.search-result p,.sidebar-project.muted {
  color:#69765f
}

.page-header__lede,.capture-banner p {
  color:#677759
}

.stat-card__label,.stat-card__meta,.list-meta,.form-text,.project-mini small,.attention-item small,.project-card__footer,.search-result__meta {
  font-size:11px
}

.filter-toolbar .form-control,.filter-toolbar .form-select,.filter-toolbar .form-label {
  font-size:12px
}

.status-pill {
  font-size:11px
}

.status-pill--completed {
  color:#55743f
}

.status-pill--ready,.status-pill--draft {
  color:#827044
}

.status-pill--queued,.status-pill--transcribing {
  color:#4e7181
}

.status-pill--failed {
  color:#975c3f
}

.library-tabs a {
  color:#6b7c5d
}

.tab-count {
  color:#62774e
}

.insight-panel p {
  color:#827050
}

.insight-panel .text-link {
  color:#81643c
}

.topbar-location,.topbar-search,.sidebar-note span,.account-link small,.sidebar-project,.preview-badge,.dialog-footnote,.shortcut-row,.storage-meter small {
  color:#65755a
}

.auth-story p,.auth-promise,.auth-panel .auth-switch,.guest-topbar>span {
  color:#6a7c57
}

.btn-close {
  min-width:24px;
  min-height:24px
}

@media(max-height:850px) and (min-width:768px) {
  .app-sidebar {
    padding-top:24px
  }
  .app-sidebar .app-brand {
    margin-bottom:23px
  }
  .sidebar-capture {
    margin-bottom:22px
  }
  .nav-label-row {
    margin-top:19px
  }
  .sidebar-note {
    display:none
  }
  .sidebar-bottom {
    padding-top:15px
  }
  .sidebar-account {
    padding:13px 2px;
    margin-top:9px
  }
}

@media(max-width:767px) {
  .sidebar-note {
    display:none
  }
  .sidebar-bottom {
    padding-top:15px
  }
  .sidebar-account {
    padding:13px 2px
  }
  .sidebar-projects {
    gap:0
  }
  .nav-label-row {
    margin-top:19px
  }
  .btn:not(.btn-sm) {
    min-height:44px
  }
  .form-control,.form-select {
    font-size:16px
  }
  .filter-toolbar .form-control,.filter-toolbar .form-select {
    font-size:16px
  }
  .filter-toolbar .form-label {
    font-size:12px
  }
  .sidebar-link {
    min-height:44px
  }
  .icon-button {
    min-width:40px;
    min-height:40px
  }
  .workspace-footer span:first-child {
    max-width:220px
  }
}

@media(max-height:760px) and (min-width:768px) {
  .app-sidebar {
    padding-top:20px
  }
  .app-sidebar .app-brand {
    margin-bottom:18px
  }
  .sidebar-capture {
    margin-bottom:18px
  }
  .sidebar-link {
    min-height:38px;
    padding-top:8px;
    padding-bottom:8px
  }
  .nav-label-row {
    margin-top:15px
  }
  .sidebar-project {
    min-height:33px;
    padding-top:5px;
    padding-bottom:5px
  }
  .sidebar-bottom {
    padding-top:10px
  }
  .sidebar-account {
    margin-top:7px;
    padding:11px 2px
  }
}