/* Twenty's installed light tokens are the source of truth, including legacy views. */
:root, .light {
  --bg: var(--t-background-secondary, #fcfcfc);
  --surface: var(--t-background-primary, #fff);
  --border: var(--t-border-color-medium, #ebebeb);
  --border-strong: #d6d6d6;
  --text: var(--t-font-color-primary, #333);
  --text-secondary: var(--t-font-color-secondary, #666);
  --text-muted: #909090;
  --accent: #333; --accent-hover: #171717; --accent-soft: #f1f1f1;
  --radius: 6px; --shadow: none;
  --header-height: 64px; --sidebar-width: 232px;
}
body { color: var(--text); }
.brand .org, .reader-breadcrumb { color: #757575; }
.brand-mark { background: #333; }
.avatar, .badge-admin { color: #555; background: #ebebeb; }
.header-inner { height: var(--header-height); padding: 0 24px; }
.nav { width: var(--sidebar-width); background: #f7f7f7; padding: 14px 12px 18px; }
.nav a { gap: 12px; padding: 10px 12px; min-height: 40px; color: #666; }
.nav a.active { background: #ebebeb; color: #333; }
.nav a:hover { background: #efefef; }
.nav a > .icon { width: 19px; height: 19px; }
.nav-settings.needs-authorization { padding: 12px 8px; font-size: 11px; border-radius: 6px; gap: 8px; }
.nav-settings .connection-copy > span:first-child { white-space: normal; text-align: left; }
.nav-settings.needs-authorization .icon { width: 17px; height: 17px; }
.nav-settings .connection-state { font-size: 10px; }
button, input, select { font-family: inherit; }
:is(button,a,input,select,summary):focus-visible { outline: 2px solid #777; outline-offset: 3px; }
.model-tag--accent { color: #555; background: #f3f3f3; border-color: #ddd; }
.model-details { background: #fafafa; }
.seg.active { background: #f0f0f0; }
.pill.processing, .pill.queued { background: #fff5e6; color: #946100; border-color: #ecd9bb; }
.page-button[aria-current=page] { background: #333; }
body.signed-in #reader-root { margin: 0 0 0 var(--sidebar-width); padding: 0; max-width: none; width: calc(100% - var(--sidebar-width)); height: calc(100dvh - var(--header-height)); }
#reader-root > .light { height: 100%; }
.reader-layout { display: grid; grid-template-columns: 336px minmax(0,1fr); height: 100%; overflow: hidden; background: #fff; font-family: Inter,sans-serif; }
.reader-inbox { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.reader-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 20px 16px; }
.reader-inbox-head h1 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 0; }
.reader-inbox-head button { min-height: 32px; background: var(--t-background-primary-inverted, #333); color: #fff; border-color: #333; font-size: 13px; }
.reader-inbox-head button:hover { background: #444; }
.reader-inbox-head svg { color: #fff; }
.reader-menu-host > div > button { min-height: 32px; font-size: 13px; }
.reader-search { margin: 0 20px 12px; border: 1px solid #dedede; border-radius: 5px; overflow: hidden; }
.reader-search input { font-size: 13px; min-width: 0; height: 32px; border: 0; box-shadow: none; background: transparent; padding: 0; }
.reader-filter-row { display: flex; gap: 4px; padding: 0 20px 12px; align-items: center; }
.reader-filter-row select, .reader-filters select { border: 1px solid #dedede; border-radius: 5px; background: white; height: 32px; color: #555; font-size: 12px; padding: 0 8px; width: 100%; }
.reader-filter-row select { flex: 1; min-width: 0; }
.reader-filters { padding: 0 20px 12px; display: grid; gap: 8px; }
.reader-filters label { display: grid; gap: 4px; font-size: 12px; }
.reader-records { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.reader-day { margin: 0; padding: 20px 20px 8px; font-size: 12px; font-weight: 500; color: #777; }
.reader-item { position: relative; padding: 12px 20px 11px; border-bottom: 1px solid #f1f1f1; }
.reader-item.selected { background: #efefef; }
.reader-item:hover { background: #f5f5f5; }
.reader-item > a { display: block; color: #333; text-decoration: none; }
.reader-item strong { font-size: 14px; font-weight: 500; display: block; overflow-wrap: anywhere; line-height: 21px; }
.reader-date { display: block; color: #888; font-size: 12px; margin: 4px 0 6px; }
.reader-item-status { display: flex; justify-content: space-between; align-items: center; gap: 5px; min-width: 0; }
.reader-item-status > * { font-size: 11px; }
.reader-transcribe { color: #555; text-decoration: none; font-size: 11px; }
.reader-transcribe:hover { text-decoration: underline; }
.reader-inbox-foot { padding: 10px 20px; border-top: 1px solid var(--border); color: #888; font-size: 10px; line-height: 1.6; }
.reader-inbox-foot summary { cursor: pointer; }
.reader-inbox-foot p { margin: 6px 0; }
.reader-reading { overflow-y: auto; min-width: 0; position: relative; scrollbar-width: thin; }
.reader-legacy-host { min-height: 100%; }
body.signed-in #record-view { margin: 0; padding: 18px 30px 24px; width: 100%; max-width: none; }
#record-view > .back-link { font-size: 12px; display: inline; color: #888; margin: 0; }
.reader-breadcrumb { font-size: 12px; margin-left: 10px; overflow-wrap: anywhere; }
.reader-breadcrumb::before { content: '/'; padding-right: 10px; color: #aaa; }
#record-view .card { border: 0; border-radius: 0; box-shadow: none; margin: 0; background: transparent; }
#record-view .card-body, #record-view .card-header { padding: 0; }
#reader-root #record-view .record-heading-card { margin: 28px 0 0; }
#record-view .record-title-row { display: block; }
#record-title { font: 600 30px/1.3 Inter,sans-serif; color: #262626; padding: 0; width: 100%; border: 1px solid transparent; border-radius: 3px; background: transparent; letter-spacing: -.6px; }
#record-title:hover, #record-title:focus { border-color: #ddd; }
#record-status { display: none; }
#record-meta { display: none; }
.reader-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #888; margin: 10px 0 24px; }
.reader-summary .pill { padding: 2px 8px; font-size: 11px; }
#record-audio { display: block; width: 100%; height: 42px; margin: 0 0 22px; }
.legacy-record-actions { display: none !important; }
.reader-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.reader-tabs { display: flex; gap: 20px; }
.reader-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 13px 0; color: #777; font-size: 13px; font-weight: 500; }
.reader-tabs button[aria-selected=true] { color: #333; border-color: #333; }
.reader-menu-host { display: flex; gap: 4px; align-items: center; position: relative; }
.reader-dropdown { position: absolute; top: 36px; right: 0; padding: 5px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 16px #0000000d; border-radius: 6px; min-width: 200px; z-index: 20; display: grid; gap: 2px; }
#record-view:not([data-reader-tab=transcript]) #reader-panel-transcript,
#record-view:not([data-reader-tab=analysis]) #reader-panel-analysis,
#record-view:not([data-reader-tab=settings]) #reader-panel-settings { display: none; }
#reader-panel-transcript > .card-header { display: none; }
#record-transcript { max-height: none; overflow: visible; }
#record-transcript .seg { grid-template-columns: 48px minmax(0,1fr); display: grid; width: 100%; text-align: left; align-items: start; padding: 0 0 22px; gap: 14px; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
#record-transcript .seg.active { background: #f5f5f5; }
#record-transcript .seg .t { color: #888; font: 12px/1.8 Inter,sans-serif; }
#record-transcript .seg .s { font: 400 16px/1.6 Inter,sans-serif; color: #444; max-width: 65ch; }
.reader-model-footer { display: flex; justify-content: space-between; gap: 16px; color: #999; margin: 0 0 20px; font-size: 11px; overflow-wrap: anywhere; }
#reader-panel-settings .card-sub { margin-bottom: 18px; }
#reader-panel-settings .reprocess-controls { gap: 10px; }
#reader-panel-settings .model-details { margin-top: 18px; }
#reader-panel-analysis .card-header { margin-bottom: 20px; }
.reader-empty, .reader-welcome { color: #888; padding: 24px 20px; font-size: 13px; line-height: 1.7; }
.reader-welcome { padding: 80px 36px; text-align: center; }
.reader-welcome h2 { font-size: 21px; font-weight: 500; color: #444; }
.reader-feedback { margin: 0; padding: 8px 20px; font-size: 11px; color: #666; overflow-wrap: anywhere; }
.reader-error { color: #b42318; }
.reader-load-more { padding: 12px 20px; }
.reader-date, .reader-summary, .reader-inbox-foot, .reader-model-footer,
.reader-empty, .reader-welcome, #record-transcript .seg .t { color: #737373; }
#settings-dialog { border-radius: 8px; }
@media (max-width: 1100px) {
  :root { --sidebar-width: 190px; }
  .reader-layout { grid-template-columns: 270px minmax(0,1fr); }
  body.signed-in #record-view { padding: 18px 22px; }
  .reader-inbox-head, .reader-item { padding-left: 16px; padding-right: 16px; }
  .reader-tabs { gap: 12px; }
  #record-title { font-size: 23px; }
}
@media (max-width: 860px) {
  :root { --sidebar-width: 0px; }
  .nav { width: 220px; transform: translateX(-100%); }
  .nav-open .nav { transform: translateX(0); }
  #nav-toggle { display: inline-flex; }
  .reader-layout { grid-template-columns: 260px minmax(0,1fr); }
  .badge-admin { display: none; }
}
@media (max-width: 640px) {
  .reader-layout { display: block; }
  .reader-inbox, .reader-reading { height: 100%; }
  .reader-layout.has-record .reader-inbox { display: none; }
  .reader-layout:not(.has-record) .reader-reading { display: none; }
  .header-inner { padding: 0 14px; }
  .brand .org, #user-trigger > span:first-child { display: none; }
  body.signed-in #record-view { padding: 18px; }
  .reader-breadcrumb { display: none; }
  .reader-action-bar { flex-wrap: wrap; }
  .reader-tabs { gap: 16px; }
  .reader-menu-host { margin-left: auto; }
  #record-title { font-size: 23px; }
  .reader-model-footer { flex-wrap: wrap; }
  .reader-menu-host > div > button, .reader-filter-row button,
  .reader-inbox-head button, .reader-filter-row select { min-height: 40px; }
  .reader-transcribe { padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
.metadata-dialog { width: min(480px, calc(100vw - 40px)); box-sizing: border-box; border: 1px solid #dedede; border-radius: 12px; padding: 24px; color: #333; background: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.metadata-dialog::backdrop { background: #0006; }
.metadata-dialog h2 { margin-top: 0; font-size: 20px; }
.metadata-dialog p { color: #777; font-size: 13px; overflow-wrap: anywhere; }
.metadata-dialog label { display: block; margin-top: 20px; font-size: 14px; }
.metadata-dialog input { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.metadata-dialog button, .reader-tag-list button { border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; background: #fafafa; color: #444; cursor: pointer; font-family: inherit; }
.metadata-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.metadata-actions button[type=submit] { background: #333; color: white; }
.metadata-dialog button:disabled { opacity: .5; cursor: wait; }
.reader-tag-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.reader-tag-list button { font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }