:root, [data-theme="light"] {
  /* --ink-3 (muted text) is #5f6977: ≥4.5:1 on every light surface (--bg, --panel, --side, --th, --sel, --chip); the old #8a93a0 was 2.9–3.1:1. */
  --bg: #f7f7f5; --panel: #ffffff; --ink: #1d232a; --ink-2: #4a5360; --ink-3: #5f6977; --line: #e4e6ea; --line-2: #eef0f3;
  --accent: #2f6f5e; --accent-ink: #ffffff; --accent-soft: #e3efeb; --danger: #b3261e; --warn: #9a6700;
  --chip: #eef1f4; --hover: #f2f4f6; --sel: #e8f1ee;
  --shadow: 0 8px 28px rgba(20, 28, 38, .14);
  --shadow-sm: 0 2px 8px rgba(20, 28, 38, .08);
  --side: #fbfbfa; --th: #fafbfb; --row-hover: #fafcfb; --grp: #f4f6f5; --kanban-lane: #f0f2f1;
  --bg-2: var(--grp);
  --radius: 8px; --radius-lg: 14px; --base-font-size: 17px; --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Type / density tokens */
  --skin-line-height: 1.45;
  --skin-h1-size: 26px; --skin-h1-weight: 520; --skin-h1-tracking: -.02em;
  --skin-h2-size: 18px; --skin-h3-size: 16px;
  --skin-nav-size: 15px; --skin-nav-pad-y: 5px; --skin-nav-radius: 6px;
  --skin-toolbar-size: 13px;
  --skin-btn-pad-y: 5px; --skin-btn-pad-x: 11px; --skin-btn-radius: 6px; --skin-btn-font: inherit;
  --skin-grid-font: 16px; --skin-grid-row: 38px; --skin-grid-header-h: 32px; --skin-grid-pad-x: 9px;
  --skin-input-pad-y: 5px; --skin-input-radius: 6px;
  --skin-card-pad: 14px 16px;
}
[data-theme="dark"] {
  --bg: #0f1319; --panel: #171d26; --ink: #f5f7fa; --ink-2: #d7dce3; --ink-3: #bac3cf; --line: #3b4656; --line-2: #2f3846;
  --accent: #7bc6ad; --accent-ink: #07110d; --accent-soft: #203d35; --danger: #ff8a80; --warn: #f1c66f;
  --chip: #2f3948; --hover: #263140; --sel: #20473d;
  --shadow: 0 8px 28px rgba(0, 0, 0, .55);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --side: #121821; --th: #202936; --row-hover: #263140; --grp: #202936; --kanban-lane: #161d27;
  --bg-2: var(--grp);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: var(--base-font-size)/var(--skin-line-height) var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); position: relative; vertical-align: middle; cursor: pointer; flex: 0 0 auto; transition: background .15s ease, border-color .15s ease; }
input[type="checkbox"]::before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: translateX(14px); }
input[type="checkbox"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
[data-theme="dark"] input[type="checkbox"] { background: var(--hover); border-color: var(--line); }
[data-theme="dark"] input[type="checkbox"]::before { background: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.65); }
[data-theme="dark"] input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
/* Toggles are for on/off settings; lists where you pick several things (.check-list) use real checkboxes. */
table.dt input[type="checkbox"], .entity-filter-popover input[type="checkbox"], .fieldlist input[type="checkbox"], .check-list input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 16px; height: 16px; border-radius: 2px; background: initial; border: initial; box-shadow: none; accent-color: var(--accent); }
table.dt input[type="checkbox"]::before, .entity-filter-popover input[type="checkbox"]::before, .fieldlist input[type="checkbox"]::before, .check-list input[type="checkbox"]::before { content: none; }
table.dt input[type="checkbox"]:checked, .entity-filter-popover input[type="checkbox"]:checked, .fieldlist input[type="checkbox"]:checked, .check-list input[type="checkbox"]:checked { background: initial; border-color: initial; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
h1 { font-size: var(--skin-h1-size); margin: 0; font-weight: var(--skin-h1-weight); letter-spacing: var(--skin-h1-tracking); }
h2 { font-size: var(--skin-h2-size); margin: 0 0 8px; font-weight: 560; }
h3 { font-size: var(--skin-h3-size); margin: 0 0 6px; font-weight: 560; }

/* layout */
/* Parallel-live vs DEV instance strip (CLIO_INSTANCE=dev on :8021). */
.clio-instance-banner {
  position: sticky; top: 0; z-index: 4000;
  background: #9a3412; color: #fff8f1;
  text-align: center; padding: 6px 12px; font-size: 13px; line-height: 1.35;
  border-bottom: 1px solid #7c2d12;
}
.clio-instance-banner b { letter-spacing: .04em; }
html:has(.clio-instance-banner) .shell { height: calc(100vh - 2.5rem); }
.shell { display: grid; grid-template-columns: var(--sidebar-w, 280px) 1fr; height: 100vh; }
.shell.collapsed, .shell.side-hidden { grid-template-columns: 1fr; }
.sidebar-show { position: fixed; top: 12px; left: 4px; z-index: 40; opacity: .18; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: none; transition: opacity .12s ease, background .12s ease, box-shadow .12s ease; }
.sidebar-show:hover, .sidebar-show:focus-visible { opacity: 1; background: var(--panel); box-shadow: var(--shadow); }
/* min-height:0 so the grid row (100vh) can shrink the aside; otherwise the entity list
   forces .side taller than the viewport and the sticky foot floats mid-sidebar. */
.side { background: var(--side); border-right: 1px solid var(--line); overflow: visible; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; grid-column: 1; grid-row: 1; position: relative; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.side .ws { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 12px 10px 10px 12px; font-weight: 650; position: relative; min-width: 0; }
.side .ws .pop-anchor { min-width: 0; }
.account-menu, .help-menu { width: 100%; justify-content: flex-start; padding: 6px 10px; min-width: 0; min-height: 40px; overflow: visible; white-space: normal; }
.sidebar-toggle { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; cursor: pointer; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: var(--hover); color: var(--ink); }
.sidebar-hide { justify-self: end; }
.side-resizer { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; z-index: 20; cursor: col-resize; }
.side-resizer:hover, .side-resizer:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.brand-lockup { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "logo title"; column-gap: 10px; align-items: center; min-width: 0; width: 100%; text-align: left; }
.brand-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; flex: none; display: block; background: var(--panel); border: 1px solid var(--line); }
.brand-logo.login-logo { width: 96px; height: 96px; border-radius: 16px; }
.brand-lockup .brand-mark { grid-area: logo; width: 40px; height: 40px; border-radius: 9px; }
.side .ws-brand { grid-area: title; display: block; min-width: 0; font-size: 18px; line-height: 1.05; font-weight: 780; letter-spacing: .08em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-home { min-width: 0; color: inherit; text-decoration: none; border-radius: 10px; padding: 2px; }
.brand-home:hover { background: var(--hover); text-decoration: none; }
.theme-toggle { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 10px; font-size: 14px; color: var(--ink-2); }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--hover); }
.theme-menu-item { justify-content: space-between; gap: 12px; }
.side .sec { padding: 10px 10px 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.side .sec.nested { padding-top: 6px; padding-left: 28px; }
.sec-toggle { border: 0; background: transparent; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; padding: 0; text-align: left; }
.sec-toggle:hover, .sec-toggle:focus-visible { color: var(--ink-2); }
.side a.nav, .side button.nav { display: flex; gap: 8px; align-items: center; padding: var(--skin-nav-pad-y) 10px; margin: 1px 6px; border-radius: var(--skin-nav-radius); color: var(--ink-2); border: 0; background: none; width: calc(100% - 12px); text-align: left; font-size: var(--skin-nav-size); }
/* External brand marks: light/dark pairs follow CLIO data-theme (not OS prefers-color-scheme). */
.ext-brand-logo { position: relative; display: inline-flex; width: 18px; height: 18px; flex: none; align-items: center; justify-content: center; }
.ext-brand-logo img { display: block; width: 18px; height: 18px; object-fit: contain; }
.ext-brand-logo .ext-logo-dark { display: none; }
[data-theme="dark"] .ext-brand-logo .ext-logo-light { display: none; }
[data-theme="dark"] .ext-brand-logo .ext-logo-dark { display: block; }
.side a.nav:hover, .side button.nav:hover { background: var(--hover); text-decoration: none; }
/* Muddy Asana egg tip — small hover above the Asana nav row (sidebar only) */
.side .asana-nav-wrap { display: contents; }
.asana-egg-tip {
  position: fixed; z-index: 2000; transform: translateY(-100%);
  box-sizing: border-box; max-width: calc(var(--sidebar-w, 280px) - 16px);
  padding: 5px 8px; border-radius: 6px; font-size: 11px; font-weight: 560;
  line-height: 1.3; white-space: normal; text-align: left; pointer-events: none;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.asana-egg-tip.below { transform: none; }
.side a.nav.on { background: var(--sel); color: var(--ink); font-weight: 560; }
.side a.nav.sub { padding-left: 28px; min-width: 0; }
/* Pin is opacity-only until hover — collapse its box so it cannot squeeze .nav-type-name to 0px
   (that looked like blank/"unnamed" rows: icon + count, no label). */
.side .pin-type {
  flex: none; opacity: 0; width: 0; min-width: 0; padding: 0; margin: 0; overflow: hidden;
  border: 0; pointer-events: none;
}
.side a.nav.sub:hover .pin-type, .side a.nav.sub:focus-within .pin-type, .side .pin-type:focus-visible, .side .pin-type[aria-label^="Unpin"] {
  opacity: 1; width: auto; min-width: 1.25em; padding: 0 4px; pointer-events: auto;
}
.nav-type-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.side .badge { margin-left: auto; font-size: 13px; background: var(--chip); border-radius: 10px; padding: 0 7px; color: var(--ink-2); }
.side .grow { flex: 1; }
.side .foot { border-top: 1px solid var(--line); padding: 6px 0; position: sticky; bottom: 0; background: var(--side); z-index: 50; }
.side .foot.foot-compact { display: flex; flex-direction: column; gap: 2px; }
.side .foot .pop-anchor { width: 100%; }
.side .foot .side-settings {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% - 12px); margin: 4px 6px 2px; min-height: 34px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink-2); font-weight: 560; text-decoration: none;
}
.side .foot .side-settings:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side .foot .side-settings.on { background: var(--sel); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.side .help-menu .user-guide-ico { margin-right: 2px; }
.side-help-menu,
.side-account-menu { width: min(260px, calc(var(--sidebar-w, 280px) + 40px)); max-width: min(260px, calc(100vw - 24px)); }
.side-help-menu .item,
.side-account-menu .item { display: flex; align-items: center; gap: 8px; }
.side-help-menu .item .user-guide-ext { margin-left: auto; }
.side-account-menu .theme-menu-row { justify-content: space-between; }
.account-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-guide-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; flex: none; }
.user-guide-ext { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.whats-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 8px; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--side) 80%, transparent); }
.gordian-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }
.gordian-logo { display: block; width: min(420px, 100%); height: auto; object-fit: contain; }
.app-copyright { width: 100%; margin: 16px auto 10px; padding: 0 12px; text-align: center; color: var(--ink-3); font-size: 12px; line-height: 1.35; white-space: normal; max-width: calc(100vw - 24px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.app-copyright .copyright-icon { width: 16px; height: 16px; border-radius: 4px; }
.app-copyright-text { min-width: 0; overflow-wrap: anywhere; }
.side .app-copyright { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 10px 8px; padding: 0 2px 8px; max-width: none; font-size: 10px; color: var(--ink-3); }
.side .app-copyright .copyright-icon { width: 36px; height: 36px; border-radius: 8px; }
.side .app-version { margin-bottom: 4px; }
.main { overflow: auto; min-width: 0; grid-column: 2; grid-row: 1; }
.shell.side-hidden .main { grid-column: 1; }
.page { padding: 20px 28px 56px; max-width: 100%; }
.shell.side-hidden .page { padding-left: 56px; }
.page.narrow { max-width: 1040px; }
.head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.head-more { display: contents; }
.head-more > summary { display: none; }
.head-more-pop { display: contents; }
/* Push trailing actions in any flex row (heads, modals, cards, Slack rows). */
.spacer { flex: 1; min-width: 0; }
.head .spacer { flex: 1; }
.entity-type-switcher { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(520px, 48vw); overflow: hidden; vertical-align: middle; }
.entity-type-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-key-summary { display: inline-block; min-width: 0; max-width: min(420px, 36vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--skin-card-pad); }
.card.tight { padding: 0; overflow: hidden; }
.entity-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 1120px; }
.entity-card { border-left: 6px solid var(--entity-color); min-width: 0; overflow: visible; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.entity-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.entity-card-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-width: 0; }
.entity-card-body { display: grid; gap: 5px; min-width: 0; color: inherit; text-decoration: none; }
.entity-card-body:hover { text-decoration: none; color: inherit; }
.entity-card-main { display: grid; gap: 5px; min-width: 0; }
.entity-card-title-link { color: inherit; text-decoration: none; min-width: 0; }
.entity-card-title-link:hover { text-decoration: none; color: inherit; }
.entity-card-title { min-width: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; line-height: 1.2; font-size: 17px; display: block; }
.entity-card-desc { color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.entity-card-desc:hover { text-decoration: none; color: var(--ink-2); }
.entity-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: inherit; text-decoration: none; }
.entity-card-meta:hover { text-decoration: none; color: inherit; }
.entity-card-count { white-space: nowrap; }
.entity-card-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; text-decoration: none; }
.entity-card-open { color: var(--ink-3); font-size: 24px; line-height: 1; justify-self: end; align-self: center; text-decoration: none; }
.entity-card-open:hover { text-decoration: none; color: var(--ink-2); }
.entity-card-icon-btn {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; flex: none;
}
.entity-card-icon-btn .typeIcon,
.entity-card-icon.typeIcon { width: 36px; height: 36px; border-radius: 10px; }
.entity-card-icon-btn .typeIcon svg,
.entity-card-icon-btn .typeIcon-glyph,
.entity-card-icon.typeIcon svg,
.entity-card-icon.typeIcon .typeIcon-glyph { width: 20px; height: 20px; }
.entity-card-icon-btn:hover,
.entity-card-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.entity-card-icon-btn::after {
  content: '✎'; position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 9px; line-height: 14px; text-align: center;
  opacity: 0; pointer-events: none;
}
.entity-card:hover .entity-card-icon-btn::after,
.entity-card-icon-btn:focus-visible::after { opacity: 1; }
.entity-card-desc-add {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  text-align: left; cursor: pointer; font: inherit; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px; width: fit-content;
}
.entity-card-desc-add:hover { color: var(--accent); }
.entity-customize-trigger {
  justify-self: start; margin-top: 8px; padding-left: 4px; padding-right: 8px;
  color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
  border: 0; background: transparent; box-shadow: none;
}
.entity-customize-trigger:hover, .entity-customize-trigger:focus-visible {
  color: var(--accent); background: transparent;
}
.palette-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; background: conic-gradient(from 90deg, #2f6f5e, #7c3aed, #d97706, #2f6f5e); border: 1px solid color-mix(in srgb, var(--panel) 70%, #000); flex: 0 0 auto; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: stretch; }
.home-widget { display: grid; gap: 10px; min-height: 150px; min-width: 0; }
.home-ask-top { margin-bottom: 14px; }
.home-widget h2, .home-widget h3 { margin: 8px 0 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; font-weight: 560; }
.home-widget-ask .home-ask-title { margin: 0; }
.home-ask-compose .in { flex: 1; min-width: 0; }
.home-recent-card { margin: 0; padding: 12px 14px; }
.home-recent-head { margin-bottom: 6px; }
.home-recent-pills { gap: 8px; }
.home-widget-ask { min-height: 0; grid-column: 1 / -1; }
.home-widget.is-dragging { opacity: .55; }
.home-widget-grip { cursor: grab; color: var(--ink-3); flex: none; padding: 4px 2px; user-select: none; }
.home-widget-grip:active { cursor: grabbing; }
.home-ask-feedback { margin-top: 6px; }
.ask-example { padding: 12px 14px; }
.ask-example-flag { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ask-example-comments { margin: 6px 0 0; padding-left: 18px; }
.ask-example-tried { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--chip); }
.home-widget-lanes { grid-column: 1 / -1; min-width: 0; }
.home-widget-open { justify-self: start; }
.home-lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 300px); gap: 10px; overflow-x: auto; align-items: start; padding-bottom: 4px; }
.home-lane { min-width: 0; background: var(--kanban-lane); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 8px; }
.home-lane .kanban-lane-head { padding: 2px 4px 8px; margin-bottom: 8px; }
.home-lane-card { padding: 8px 10px; }
.home-lane-more { display: block; padding: 2px 4px; }
.home-ask-hero {
  max-width: 720px;
  margin: min(12vh, 96px) auto 48px;
  text-align: center;
  padding: 0 12px;
}
.home-ask-title { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.home-ask-hero .home-ask { text-align: left; }
.home-ask-meta { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
.home-ask-hero .home-ask-meta { justify-content: center; }
.home-ask-resource.is-live::after {
  content: '';
  display: inline-block;
  width: 0.45em; height: 0.45em; margin-left: 0.45em;
  border-radius: 50%;
  background: var(--accent, #2a6); vertical-align: 0.05em;
  animation: home-ask-pulse 1.1s ease-in-out infinite;
}
@keyframes home-ask-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.home-ask-spin {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-right: 0.4em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: home-ask-spin 0.7s linear infinite;
}
@keyframes home-ask-spin {
  to { transform: rotate(360deg); }
}
.home-recent-inline { margin-top: 28px; }
.home-add-menu { width: min(420px, 86vw); max-height: 68vh; overflow: auto; padding: 4px; }
.home-add-section { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.home-add-section:last-child { border-bottom: 0; }
.home-add-section > b { display: block; padding: 4px 10px 6px; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.entity-filter-popover { display: grid; min-width: 190px; }
.entity-filter-popover .item { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.empty { padding: 40px; text-align: center; color: var(--ink-3); }

/* controls */
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: var(--skin-btn-radius); padding: var(--skin-btn-pad-y) var(--skin-btn-pad-x); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-size: var(--skin-btn-font); }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { padding: 2px 8px; font-size: 14px; }
.btn.on { background: var(--sel); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.btn:disabled { opacity: .5; cursor: default; }
.tool { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 4px 8px; border-radius: 6px; color: var(--ink-2); font-size: 13px; position: relative; }
.tool:hover { background: var(--hover); }
.tool.on { color: var(--accent); background: var(--accent-soft); }
.tool .n { position: absolute; top: 0; right: 2px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; font-size: 12px; padding: 0 4px; }
.toolgroup { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--panel); }
input.in, select.in, textarea.in { border: 1px solid var(--line); border-radius: var(--skin-input-radius); padding: var(--skin-input-pad-y) 8px; background: var(--panel); min-width: 0; }
input.in:focus, select.in:focus, textarea.in:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.btn:focus-visible, .tool:focus-visible, .pg:focus-visible, .nav:focus-visible, .tabs button:focus-visible, .sec-toggle:focus-visible, .sidebar-toggle:focus-visible, .help-link:focus-visible, .theme-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
textarea.in { width: 100%; min-height: 80px; resize: vertical; }
.search { position: relative; }
.search input { padding-left: 28px; width: 260px; }
.search::before { content: "⌕"; position: absolute; left: 9px; top: 4px; color: var(--ink-3); }
.global-search { padding: 0 10px 10px; display: grid; gap: 5px; }
.global-search label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.global-search .search input { width: 100%; border-radius: 10px; padding-top: 7px; padding-bottom: 7px; background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.global-search .search::before { top: 7px; }
.search-results { display: grid; gap: 14px; }
.search-results .card > h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.search-result-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; border-top: 1px solid var(--line-2); }
.search-result-row:first-of-type { border-top: 0; }
.search-result-row a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-kind { width: 150px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border-radius: 999px; padding: 1px 9px; font-size: 14px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.avatar { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); font-size: 13px; font-weight: 650; line-height: 1; object-fit: cover; text-transform: uppercase; }
.typeIcon { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #fff; flex: 0 0 auto; border: 1px solid color-mix(in srgb, #fff 34%, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
[data-theme="dark"] .typeIcon { border-color: color-mix(in srgb, #fff 24%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.typeIcon svg { width: 15px; height: 15px; }
.typeIcon-glyph {
  width: 15px; height: 15px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
.chip.ref { background: #e7eef8; color: #24466f; }
.chip.person { background: #f1ebf7; color: #553075; }
[data-theme="dark"] .chip.ref { background: #1c3654; color: #d8eaff; }
[data-theme="dark"] .chip.person { background: #39294c; color: #f0dcff; }
.activity-labels { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.activity-labels.list-labels { margin-top: 5px; }
.activity-labels.kanban-labels { margin-top: 6px; gap: 4px; }
/* Team labels: a distinct pill (person icon + stronger team-coloured outline) so teams read as their
   own thing, clearly separated from ordinary tags (Summary Doc, Planning, …). */
.label-chip.team { gap: 4px; border-color: color-mix(in srgb, var(--label-color) 70%, #4b5563); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--label-color) 28%, transparent); font-weight: 700; }
.label-chip.team .team-ico { flex: 0 0 auto; opacity: .85; color: color-mix(in srgb, var(--label-color) 78%, #333); }
[data-theme="dark"] .label-chip.team .team-ico { color: color-mix(in srgb, var(--label-color) 70%, #fff); }
.activity-labels.team-col { margin-top: 0; }
.team-count-row { align-items: center; gap: 8px; }
.team-count-row .team-pill { max-width: 82%; overflow: hidden; text-overflow: ellipsis; }
/* Data-lock (Viewing/Editing): green = viewing, red = editing; KS eye/pencil SVGs. */
.btn.lock-toggle.lock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}
.lock-toggle-inner { display: inline-flex; align-items: center; gap: 6px; }
.lock-toggle-inner .lock-ico { flex: none; }
.btn.lock-toggle.viewing {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent);
}
.btn.lock-toggle.editing {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, var(--panel));
  color: var(--danger);
}
.lock-menu { width: 340px; max-width: min(340px, 92vw); padding: 4px; }
.lock-menu .item.lock-opt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.lock-menu .item.lock-opt:hover { background: var(--hover, color-mix(in srgb, var(--ink) 6%, var(--panel))); }
.lock-opt-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lock-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lock-menu .item.lock-opt .lock-opt-title { font-weight: 650; line-height: 1.25; }
.lock-menu .item.lock-opt .lock-opt-desc { color: var(--ink-3); font-size: 12px; line-height: 1.35; font-weight: 400; }
.lock-menu .item.lock-opt.viewing .lock-ico { color: var(--accent); }
.lock-menu .item.lock-opt.editing .lock-ico { color: var(--danger); }
.lock-menu .item.lock-opt.viewing .lock-opt-title { color: var(--accent); }
.lock-menu .item.lock-opt.editing .lock-opt-title { color: var(--danger); }
.lock-menu .item.lock-opt.on.viewing { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.lock-menu .item.lock-opt.on.editing { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.lock-menu .lock-check { flex: none; color: var(--ink-2, var(--ink)); }
.dt-locked .dt tbody .cell { cursor: default; }
/* Red glow around the entire table while Editing data. */
.dt-root.dt-editing .dt-wrap {
  border-color: var(--danger);
  border-radius: 8px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent),
    0 0 24px 8px color-mix(in srgb, var(--danger) 45%, transparent);
}
[data-theme="dark"] .dt-root.dt-editing .dt-wrap {
  border-color: var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent),
    0 0 28px 10px color-mix(in srgb, var(--danger) 50%, transparent);
}
.card.record-editing {
  border: 1px solid var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent),
    0 0 22px 6px color-mix(in srgb, var(--danger) 40%, transparent);
}
.label-chip { --label-color: var(--accent); max-width: 100%; border: 1px solid color-mix(in srgb, var(--label-color) 45%, var(--line)); background: color-mix(in srgb, var(--label-color) 20%, var(--panel)); color: var(--ink); font-weight: 650; }
[data-theme="dark"] .label-chip { background: color-mix(in srgb, var(--label-color) 30%, var(--bg)); border-color: color-mix(in srgb, var(--label-color) 62%, var(--line)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.chip.x { cursor: pointer; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 14px; border: 1px solid var(--line); background: var(--panel); }
.pill.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.pill.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
/* Entity card: external system the base is synced from (entity_types.sync_source). */
.pill.pill-sync { font-size: 12px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); white-space: nowrap; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
/* Status: Kaleidoscope-style colored icon + plain capitalized text (no filled pill). Icon color
   is baked per-status in core.js (grey backlog/to-do/submitted/blocked/cancelled, amber in-progress,
   green done); the text stays in the normal foreground color. */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; vertical-align: middle; }
.status .status-icon { flex: 0 0 auto; }
.status .status-text { text-transform: capitalize; }
[data-theme="dark"] .pill { background: var(--hover); color: var(--ink); border-color: var(--line); }
.temp-password-inline { border: 1px solid var(--line); border-radius: 8px; background: var(--accent-soft); padding: 8px; max-width: 520px; }
[data-theme="dark"] input.in, [data-theme="dark"] select.in, [data-theme="dark"] textarea.in { background: var(--bg); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .btn { color: var(--ink-2); }
[data-theme="dark"] .btn.primary { color: var(--accent-ink); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { border: 0; background: none; padding: 8px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:focus-visible { color: var(--ink); outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 560; }

/* popovers & modals — Popover/FloatMenu/Typeahead set position:fixed + flip inline; absolute is fallback only */
.pop-anchor { position: relative; display: inline-block; z-index: 5; }
.pop-anchor.open { z-index: 120; }
.pop { position: absolute; z-index: 1000; top: calc(100% + 6px); left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; min-width: 260px; width: max-content; max-width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; pointer-events: auto; }
.pop.float-menu, .pop.typeahead-list { z-index: 1200; }
.pop.right { left: auto; right: 0; }
.side .foot .pop { top: auto; bottom: calc(100% + 6px); }
.pop .item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; min-height: 32px; }
.pop .item:hover { background: var(--hover); }
.pop .item:focus-visible { background: var(--hover); outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: -2px; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.error { color: var(--danger); }
.typeahead { position: relative; display: inline-block; }
.typeahead > input { width: 260px; }
.pop.typeahead-list { padding: 6px; max-width: calc(100vw - 16px); }
.pop .typeahead-item { white-space: normal; align-items: flex-start; }
.pop .typeahead-item.on { background: var(--hover); }
.typeahead-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.typeahead-label { overflow-wrap: anywhere; }
.typeahead-hint { flex: 0 0 auto; white-space: nowrap; padding-top: 1px; }
.typeahead-more { padding: 6px 9px 2px; border-top: 1px solid var(--line-2); margin-top: 4px; }
.veil { position: fixed; inset: 0; background: rgba(20, 26, 34, .38); z-index: 2600; display: grid; place-items: center; padding: 20px; }
.cmd-veil { place-items: start center; padding-top: min(18vh, 120px); z-index: 2700; }
.cmd-palette { width: min(560px, 100%); background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.cmd-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; font-size: 16px; background: transparent; }
.cmd-input:focus { outline: none; box-shadow: none; }
.cmd-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
.cmd-list { max-height: min(420px, 55vh); overflow: auto; padding: 6px 0; }
.cmd-group { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cmd-group-recent { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-transform: none; }
.cmd-group-recent span { text-transform: uppercase; letter-spacing: .04em; }
.cmd-clear-recent { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cmd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cmd-item:hover, .cmd-item.on { background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); }
.cmd-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: -2px; }
.cmd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-foot { padding: 8px 14px; border-top: 1px solid var(--line); }
.modal { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); width: min(980px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.sm { width: min(520px, 100%); }
.modal.lg { width: min(1120px, 100%); }
/* Rich "New from template" draft editor lives inside a modal; strip the drawer page's own scroll/padding. */
.new-from-template .activity-drawer-page { padding: 0; }
.new-from-template .crumbs { display: none; }
/* Requests block (Kaleidoscope): entity actions + block adders (Section / Result table / Spreadsheet). */
.requests-block { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.requests-actions { gap: 8px; align-items: center; }
.requests-actions .req-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.pill.beta { font-size: 11px; padding: 0 6px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); margin-left: 4px; }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal header h2 { margin: 0; }
.modal .body { padding: 16px 20px; overflow: auto; }
.modal footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--panel); box-shadow: var(--shadow); z-index: 900; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.drawer header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.drawer .body { padding: 14px 18px; overflow: auto; flex: 1; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 2500; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; max-width: min(520px, 92vw); }
.toast.err { background: var(--danger); }
.toast-action { background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent); color: inherit; border-radius: 6px; padding: 2px 8px; cursor: pointer; font: inherit; }
.toast-action:hover, .toast-action:focus-visible { background: color-mix(in srgb, var(--bg) 12%, transparent); outline: 2px solid color-mix(in srgb, var(--bg) 55%, transparent); outline-offset: 2px; }

/* data table */
.dt-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 230px); }
table.dt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
table.dt th, table.dt td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 0 var(--skin-grid-pad-x); height: var(--skin-grid-row); text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; font-size: var(--skin-grid-font); }
/* QOL-118: text/url cells wrap in-grid (base td is nowrap+ellipsis+fixed height). */
table.dt td.cell.cell-text {
  white-space: normal;
  overflow: hidden; /* contain inner scroll; do not ellipsis the cell itself */
  text-overflow: clip;
  max-width: 560px;
  width: 280px; /* prefer a wrap column under table width:max-content */
  min-width: 140px;
  height: auto;
  min-height: var(--skin-grid-row);
  vertical-align: middle;
  padding-top: 4px;
  padding-bottom: 4px;
}
table.dt td.cell.cell-text .cell-expand-wrap,
table.dt td.cell.cell-text .cell-expand-body,
table.dt td.cell.cell-text .cell-text-value {
  display: block;
  max-width: 100%;
  min-width: 0;
}
table.dt td.cell.cell-text .cell-text-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  /* Wrap to two lines, then clip (⤢ / Shift+Space opens the full value); keeps rows short on sequence-heavy bases */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.75em;
  overflow: hidden;
}
table.dt td.cell.cell-text .cell-stack { display: flex; flex-direction: column; max-width: 100%; min-width: 0; min-height: 0; }
table.dt td.cell.cell-text .cell-stack > * { overflow: visible; text-overflow: unset; white-space: normal; max-width: 100%; }
.cell-expand-wrap { position: relative; display: block; max-width: 100%; padding-right: 22px; min-height: 1.2em; }
.cell-expand-body { display: block; max-width: 100%; min-width: 0; }
.cell-expand-btn {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--ink-2); font-size: 12px; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none;
}
td.cell:hover .cell-expand-btn, td.cell.focus .cell-expand-btn, td.cell.dt-focus .cell-expand-btn, .cell-expand-wrap:focus-within .cell-expand-btn { opacity: 1; pointer-events: auto; }
.cell-expand-btn:hover { color: var(--accent); border-color: var(--accent); }
.cell-expand-pop { min-width: min(480px, 70vw); }
.cell-expand-full {
  max-height: min(60vh, 480px);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.4;
}
.cell-expand-full a { color: var(--accent); }
.cell-truncated-url { color: var(--ink-2); text-decoration: line-through wavy; text-decoration-color: var(--warn, #c47a00); cursor: help; }
.cell-truncated-banner {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn, #c47a00) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn, #c47a00) 35%, var(--line));
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
table.dt td.cell.cell-text .cell-url {
  display: inline; margin-right: 6px; overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
/* URL cells clamp like text cells: two lines, then clip (⤢ opens every link) */
table.dt td.cell.cell-text .cell-expand-body:has(> .cell-url) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.75em; line-height: 1.35;
}
table.dt th { position: sticky; top: 0; background: var(--th); z-index: 3; font-weight: 500; color: var(--ink-2); height: var(--skin-grid-header-h); user-select: none; }
table.dt th .th { display: flex; align-items: center; gap: 6px; }
table.dt th .ty { color: var(--ink-3); font-size: 13px; width: 14px; text-align: center; flex: none; }
table.dt th .sortind { color: var(--accent); font-size: 13px; flex: none; }
/* Airtable-style column header menu: the whole header opens the menu (no click-to-sort) */
table.dt th .pop-anchor { display: block; width: 100%; min-width: 0; }
table.dt th .col-header-btn.btn { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
table.dt th .col-header-btn.btn:hover { color: var(--ink); }
table.dt th .col-header-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
table.dt th .col-header-caret { margin-left: auto; padding-left: 4px; color: var(--ink-3); font-size: 11px; opacity: 0; flex: none; }
table.dt th:hover .col-header-caret, table.dt th .pop-anchor.open .col-header-caret { opacity: 1; }
.col-menu { min-width: 220px; }
.col-menu .item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; min-height: 30px; font-weight: 400; color: var(--ink); }
.col-menu .item:hover { background: var(--hover); }
.col-menu .item.danger { color: var(--danger); }
.col-menu .col-menu-ic { width: 18px; text-align: center; color: var(--ink-3); font-size: 13px; flex: none; }
.col-menu .item.danger .col-menu-ic { color: var(--danger); }
.col-menu .col-menu-check { margin-left: auto; color: var(--accent); }
.col-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.col-menu .col-menu-head { font-size: 12px; color: var(--ink-2); padding: 2px 4px 6px; font-weight: 500; }
.col-menu .col-menu-stat { padding: 3px 4px; }
/* View list: per-view rename / duplicate / delete */
.view-list { max-height: 46vh; overflow: auto; margin: -2px -2px 2px; }
.view-row { display: flex; align-items: center; gap: 6px; }
.view-row.on { background: var(--hover); }
.view-row .view-pick { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; cursor: pointer; overflow: hidden; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: 0; }
.view-row .view-mark { color: var(--accent); width: 12px; flex: none; text-align: center; }
.view-row .view-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-row .view-row-actions { display: flex; align-items: center; gap: 2px; opacity: 0; flex: none; }
.view-row:hover .view-row-actions, .view-row.on .view-row-actions { opacity: 1; }
.btn.xs { padding: 1px 6px; min-width: 22px; height: 22px; line-height: 1; font-size: 12px; border-radius: 5px; }
.view-row .btn.xs.danger { color: var(--danger); }
.view-row .btn.xs[disabled] { opacity: .3; cursor: not-allowed; }
table.dt th .rs { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; }
table.dt th:hover .rs { background: var(--line); }
table.dt td.sel, table.dt th.sel { width: 36px; min-width: 36px; padding: 0 8px; text-align: center; position: sticky; left: 0; background: var(--panel); z-index: 2; }
table.dt th.sel { z-index: 4; background: var(--th); }
table.dt td.first, table.dt th.first { position: sticky; left: 36px; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
table.dt th.first { z-index: 4; background: var(--th); }
table.dt th.add-field-col { min-width: 96px; width: 96px; text-align: center; color: var(--ink-2); background: var(--th); }
table.dt td.add-field-cell { min-width: 96px; width: 96px; background: var(--panel); border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
table.dt tbody tr { background: var(--panel); }
table.dt tbody tr:hover { background: var(--row-hover); }
table.dt tbody tr:hover > td.sel,
table.dt tbody tr:hover > td.first { background: var(--row-hover); }
table.dt tbody tr.picked { background: var(--sel); }
table.dt tbody tr.picked > td.sel,
table.dt tbody tr.picked > td.first { background: var(--sel); }
table.dt td.cell a { position: relative; z-index: 1; pointer-events: auto; cursor: pointer; }
table.dt td.cell { cursor: default; }
table.dt td.cell .cell-stack { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; max-width: 100%; min-height: var(--skin-grid-row); vertical-align: middle; }
table.dt td.cell .cell-stack > * { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
table.dt td.cell .cell-source { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.1; text-decoration: none; }
table.dt td.cell .cell-source:hover { color: var(--accent); text-decoration: underline; }
/* Molecule chrome follows the theme; the drawing canvas stays paper-white for SMILES contrast. */
.mol-preview {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  max-width: 100%; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--line-2);
}
.mol-preview.compact { width: 184px; height: 84px; }
.mol-preview canvas, .mol-preview img {
  display: block; max-width: 100%; max-height: 100%; background: #fff; border-radius: 4px;
}
.mol-copy { position: absolute; right: 5px; bottom: 5px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; font-size: 10px; padding: 1px 4px; color: var(--ink-3); opacity: 0; }
.mol-preview:hover .mol-copy { opacity: 1; }
[data-theme="dark"] .mol-preview { background: var(--chip); border-color: var(--line); }
table.dt td.cell.editing { padding: 0; outline: 2px solid var(--accent); outline-offset: -2px; overflow: visible; }
/* .focus and .dt-focus are aliases so Shift+Space expand / CSS hit either class name */
table.dt td.cell.focus, table.dt td.cell.dt-focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
table.dt td.cell.dt-range { background: #e7f0fa; outline: 1px solid #7aa5d8; outline-offset: -1px; }
[data-theme="dark"] table.dt td.cell.dt-range { background: #213247; outline-color: #75a7d8; }
table.dt tr.add-row td { color: var(--ink-3); background: var(--panel); cursor: pointer; height: 34px; }
table.dt tr.add-row:hover td { background: var(--hover); color: var(--ink-2); }
table.dt td.cell input, table.dt td.cell select { width: 100%; height: calc(var(--skin-grid-row) - 2px); border: 0; padding: 0 10px; background: var(--panel); outline: none; color: var(--ink); font-size: var(--skin-grid-font); }
table.dt tr.grp td { background: var(--grp); font-weight: 600; height: 32px; position: sticky; left: 0; }
table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt td.more { width: 40px; text-align: center; color: var(--ink-3); }
/* Grouped result table (Kaleidoscope KEY FIELDS / ENTITY DATA header) */
table.dt.dt-grouped thead tr.dt-group-row th { top: 0; z-index: 4; }
table.dt.dt-grouped thead tr:not(.dt-group-row) th { top: 26px; }
table.dt.dt-grouped th.dt-group { height: 26px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--th); }
table.dt.dt-grouped th.dt-group-start, table.dt.dt-grouped td.dt-group-start { border-left: 2px solid var(--line); }
table.dt tr.dt-add-row td { height: 36px; padding: 0 10px; background: var(--panel); border-right: 0; text-align: left; }
table.dt tr.dt-add-row:hover td { background: var(--panel); }
.dt-add-btn { border: 0; background: transparent; color: var(--ink-3); font: inherit; cursor: pointer; padding: 2px 0; }
.dt-add-btn:hover { color: var(--accent); }
.dt-add-inline { display: inline-flex; align-items: center; gap: 6px; }
.dt-add-inline .in.sm { width: 220px; height: 30px; }
.chev { flex-shrink: 0; vertical-align: middle; transition: transform .15s; }
.chev.closed { transform: rotate(-90deg); }
.dt-add-more { margin-left: 6px; padding: 0 4px; display: inline-flex; align-items: center; }
.dt-add-more.on .chev { transform: rotate(180deg); }
.float-menu { padding: 4px; }
.egg-silph-scope { object-fit: contain; }
.prefix-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.prefix-table th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.prefix-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.prefix-table tr:last-child td { border-bottom: 0; }
.prefix-table.editable tr.unlisted td:first-child { color: var(--ink-3); }
.series-editor .prefix-table { max-width: 640px; }
.series-select { min-width: 240px; }
.bulk-series-pick { align-items: flex-end; }
.req-star { color: var(--danger); margin-left: 2px; font-weight: 600; }
table.dt td.cell.req-empty { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.req-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); margin-right: 6px; }
.req-toggle.on { color: var(--danger); }
.bulk-req-note { color: var(--ink-2); }

.bulk-key { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bulk-key-ico { width: 15px; height: 15px; color: var(--ink-3); }
.bulk-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1.2fr; gap: 10px; }
.bulk-series { gap: 6px; align-items: center; }
.bulk-chip { cursor: pointer; border: 1px solid var(--line); background: var(--panel); font: inherit; }
.bulk-chip.on { border-color: var(--accent); color: var(--accent); }
.bulk-hint { color: var(--accent); }
.bulk-preview { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.bulk-preview.ok { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.bulk-preview.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.bulk-preview .bad-text { color: var(--danger); }
.bulk-prefill { border-top: 1px solid var(--line); padding-top: 8px; }
.bulk-fields { max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.bulk-field { display: grid; grid-template-columns: 38% 1fr auto; align-items: center; min-height: 34px; padding: 0 10px; border-bottom: 1px solid var(--line-2); }
.bulk-field:last-child { border-bottom: 0; }
.bulk-fval { cursor: pointer; min-height: 30px; display: flex; align-items: center; }
.bulk-fval .in { width: 100%; }
.bulk-multi { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 6px 0; }
.bulk-multi .btn { align-self: flex-end; }
.section-h { margin: 0; font-size: 18px; font-weight: 600; }
.activity-scroll { gap: 16px; }
.result-table { padding: 12px 14px; }
.view-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 6px 2px;
  min-height: 34px;
}
.view-options-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.view-options-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.view-options-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  max-width: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.filter-chip:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.filter-chip-main {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 4px 8px 4px 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.filter-chip-main:hover { background: var(--hover); }
.filter-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-left: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-chip-x:hover { background: var(--hover); color: var(--ink); }
.filter-chip-x:focus-visible { background: var(--hover); color: var(--ink); outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 2px; flex-wrap: wrap; }
.pager .spacer { flex: 1; }
.pager-nav { display: inline-flex; align-items: center; gap: 4px; }
.pager button.pg { min-width: 30px; height: 28px; border: 1px solid transparent; background: none; border-radius: 6px; }
.pager button.pg.on { border-color: var(--line); background: var(--panel); font-weight: 600; }
.pager-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
}
.pager-range { color: var(--ink-2); }
.pager-dot { margin: 0; user-select: none; color: var(--ink-3); }
.pager-size {
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.pager-size:hover, .pager-size:focus-visible { color: var(--ink); background: var(--hover); border-radius: 6px; }
.pager-size:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.pager-draft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
}
.pager-draft-label { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.cell-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-btn.empty { border-style: dashed; color: var(--ink-3); background: transparent; }
.option-checklist { border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: var(--panel); }
.option-checklist-scroll { max-height: 220px; overflow: auto; }
.bulkbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2400;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(96vw, 980px);
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  margin: 0;
}
.bulkbar-count { white-space: nowrap; }
[data-theme="dark"] .bulkbar { box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.select-all-banner { text-align: center; padding: 8px 12px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.select-all-banner .linkish { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* rules editor */
.rule { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr auto auto auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.rule.color { grid-template-columns: 26px 1.2fr 1fr 1.3fr 90px auto; }
.swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.swatches { display: flex; gap: 4px; flex-wrap: wrap; width: 170px; }

/* Entity type Customize → Appearance */
.configure-appearance { display: flex; flex-direction: column; gap: 14px; }
.configure-appearance-preview {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2, var(--hover));
}
.configure-appearance-preview-icon.typeIcon,
.configure-appearance-preview .typeIcon { width: 40px; height: 40px; border-radius: 10px; }
.configure-appearance-preview .typeIcon svg,
.configure-appearance-preview .typeIcon-glyph { width: 22px; height: 22px; }
.configure-appearance-preview-text { min-width: 0; display: grid; gap: 2px; }
.configure-appearance-preview-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.configure-appearance-fields { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
@media (max-width: 640px) { .configure-appearance-fields { grid-template-columns: 1fr; } }
.configure-sync-source { grid-column: 1 / -1; }
.configure-sync-source .in + .in { margin-top: 6px; }
.configure-color-row { display: flex; align-items: center; gap: 8px; }
.configure-color-row .type-color { width: 52px; height: 36px; padding: 2px; cursor: pointer; }
.configure-swatches { display: grid; gap: 6px; }
.configure-swatch-row { display: flex; flex-wrap: wrap; gap: 5px; }
.configure-hide { margin-top: 2px; }
.icon-picker { display: grid; gap: 8px; }
.icon-picker-head { display: grid; gap: 8px; }
.icon-picker-search { margin: 0; }
.icon-picker-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.icon-pick {
  width: 40px; height: 40px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; cursor: pointer;
}
.icon-pick:hover { background: var(--hover); border-color: var(--line); }
.icon-pick.on { background: var(--accent-soft); border-color: var(--accent); }
.icon-picker-meta { padding: 0 2px; }
.fieldlist .fi { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.fieldlist .fi:hover { background: var(--hover); }
.fieldlist .fi.drag { opacity: .4; }
.fieldlist .grip { cursor: grab; color: var(--ink-3); }
.fieldlist.divided .fi { border-bottom: 1px solid var(--line-2); padding: 8px 12px; border-radius: 0; }

/* detail pages */
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 0; }
.kv > div { padding: 7px 8px; border-bottom: 1px solid var(--line-2); min-height: 36px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kv > div.k { color: var(--ink-2); font-size: 13px; }
.kv > div.v.editable:hover { background: var(--hover); cursor: text; }
.field-history-btn { padding: 2px 5px; min-height: 0; line-height: 0; color: var(--ink-3); opacity: .7; }
.field-history-btn:hover, .field-history-btn:focus-visible, .field-history-btn.on { opacity: 1; color: var(--accent); }
.kv > div.field-history { grid-column: 1 / -1; display: block; background: var(--sel); border-radius: 6px; margin: 2px 0 6px; padding: 8px 10px; }
.field-history .maptable td, .field-history .maptable th { padding: 4px 8px; }
.rich { line-height: 1.55; overflow-wrap: anywhere; }
.rich table { border-collapse: collapse; margin: 8px 0; }
.rich td, .rich th { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.rich img { max-width: 100%; border-radius: 6px; }
.rich h1 { font-size: 20px; margin: 14px 0 6px; } .rich h2 { font-size: 17px; margin: 12px 0 6px; } .rich h3 { font-size: 15px; }
.rich p { margin: 6px 0; }
.rich ul.tasklist { list-style: none; padding-left: 6px; }
.rich .mention { background: #f1ebf7; color: #553075; border-radius: 4px; padding: 0 3px; }
.rich[contenteditable="true"] { outline: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); padding: 8px; border-radius: 6px; min-height: 80px; background: var(--panel); color: var(--ink); }
[data-theme="dark"] .rich { color: var(--ink); }
[data-theme="dark"] .rich :where(p, div, span, li, td, th, h1, h2, h3, h4, h5, h6, strong, em, b, i, u):not(.mention) { color: var(--ink) !important; background-color: transparent !important; }
[data-theme="dark"] .rich a { color: var(--accent) !important; }
[data-theme="dark"] .rich table { background: var(--panel); color: var(--ink); }
[data-theme="dark"] .kv > div { color: var(--ink); }
[data-theme="dark"] .kv > div.k { color: var(--ink-2); }
.property-display-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; width: 100%; }
.property-display-value { min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; }
.property-display-value > span { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 100%; }
.property-display-value .property-link { width: 100%; max-width: 100%; }
.home-ask-answer { white-space: pre-wrap; line-height: 1.55; }
.home-ask-ref { display: inline-block; min-width: 1.3em; margin: 0 1px; padding: 0 4px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: .72em; font-weight: 600; line-height: 1.5; text-align: center; vertical-align: super; text-decoration: none; }
.home-ask-how { margin-top: 8px; }
.home-ask-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.home-ask-n { display: inline-block; min-width: 1.5em; margin-right: 2px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; }
.result-table-title { cursor: text; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
.result-table-title:hover { background: var(--hover); }
.result-table-title:focus-visible { background: var(--hover); outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.result-table-title-in { font-weight: 650; min-width: 220px; height: 30px; }
.property-file-list { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 2px !important; width: 100%; }
.property-file-item { display: flex; align-items: center; gap: 4px; min-width: 0; }
.property-file-item > span { min-width: 0; }
.activity-title-card { gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.activity-title-input { font-size: 26px; font-weight: 620; line-height: 1.2; border-color: var(--line-2); border-radius: 8px; padding: 10px 12px; flex: 1; min-width: 280px; background: var(--panel); }
.activity-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 16px; margin-bottom: 14px; padding: 14px; }
.activity-summary-field { min-width: 0; display: grid; align-content: start; gap: 5px; }
.activity-summary-field .row { min-width: 0; }
.summary-value { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-overview-card { display: grid; gap: 20px; }
.activity-detail-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.activity-event-log { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.event-log-head { display: flex; align-items: center; gap: 8px; }
.event-log-head h3 { margin: 0; }
.activity-detail-scrim { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: flex-end; background: rgba(15, 19, 25, .18); backdrop-filter: blur(1px); }
.activity-detail-drawer { width: min(920px, calc(100vw - 260px)); height: 100vh; overflow: auto; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -18px 0 36px rgba(20, 28, 38, .18); padding: 18px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.activity-drawer-page { display: grid; gap: 10px; }
.record-drawer-page { display: grid; gap: 10px; }
.record-drawer-page .head h1 { font-size: 22px; }
.activity-drawer-page .activity-title-input { font-size: 22px; }
.activity-drawer-page .activity-detail-body { grid-template-columns: minmax(0, 1fr); }
.activity-metadata-card { display: grid; gap: 10px; }
.activity-metadata-card h3, .activity-event-log .section-h, .activity-event-log h2 { margin: 0; font-size: 18px; }
.activity-metadata-list { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--panel); }
.metadata-field-row { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line-2); min-height: 58px; }
.metadata-field-row:last-child { border-bottom: 0; }
.metadata-field-label { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 12px 3px; color: var(--ink-2); background: transparent; font-size: 14px; }
.metadata-field-icon { width: 16px; text-align: center; color: var(--ink-3); flex: 0 0 auto; }
.metadata-field-row > div:last-child { min-width: 0; padding: 0 12px 9px 35px; display: flex; align-items: center; }
.metadata-field-row .property-display-row { align-items: center; }
.metadata-field-row .property-display-row > .btn { opacity: 0; transition: opacity .12s ease; }
.metadata-field-row:hover .property-display-row > .btn, .metadata-field-row:focus-within .property-display-row > .btn { opacity: 1; }
.compact { max-width: 180px; }
[data-theme="dark"] .activity-title-input, [data-theme="dark"] .activity-metadata-list { background: var(--panel); border-color: var(--line); }
[data-theme="dark"] .metadata-field-label { background: transparent; color: var(--ink-2); }
[data-theme="dark"] .activity-detail-scrim { background: rgba(0, 0, 0, .42); }
[data-theme="dark"] .activity-detail-drawer { box-shadow: -18px 0 36px rgba(0,0,0,.55); }
[data-theme="dark"] .rich[contenteditable="true"] { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
[data-theme="dark"] .rich .mention { background: #39294c; color: #f0dcff; border: 1px solid color-mix(in srgb, #f0dcff 35%, var(--line)); font-weight: 650; }
[data-theme="dark"] .rich .mention::selection { background: #ffd166; color: var(--bg); }
.editbar { display: flex; gap: 2px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.editbar button:not(.btn) { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 2px 7px; font-size: 12px; }
.editbar button:not(.btn):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 1px; }
.rich-save-hint { margin-right: 4px; white-space: nowrap; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.comment .who { font-weight: 560; }
.mention-suggestions { position: relative; z-index: 1200; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; max-height: 220px; overflow: auto; }
.mention-suggestion { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--ink); border-radius: 8px; padding: 8px 10px; text-align: left; }
.mention-suggestion:hover, .mention-suggestion:focus, .mention-suggestion:focus-visible, .mention-suggestion.on { background: var(--sel); outline: none; }
.mention-suggestion-name { font-weight: 650; color: var(--ink); }
.mention-suggestion-email { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .mention-suggestions { background: var(--bg); border-color: var(--line); box-shadow: var(--shadow); }
[data-theme="dark"] .mention-suggestion:hover, [data-theme="dark"] .mention-suggestion:focus { background: var(--sel); }
[data-theme="dark"] .mention-suggestion:hover .mention-suggestion-name, [data-theme="dark"] .mention-suggestion:focus .mention-suggestion-name { color: var(--ink); }
[data-theme="dark"] .mention-suggestion:hover .mention-suggestion-email, [data-theme="dark"] .mention-suggestion:focus .mention-suggestion-email { color: var(--ink-2); }
[data-theme="dark"] .mention-suggestion-email { color: var(--ink-2); }
.crumbs { display: flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); }
/* Activity toolbar — match Kaleidoscope: view · Kanban · search · Filter/Sort/Settings + chips. */
.act-toolbar { display: grid; gap: 8px; margin-bottom: 12px; }
.act-toolbar-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-toolbar-ks .act-toolbar-primary { flex-wrap: nowrap; gap: 10px; }
.act-toolbar-search { flex: 1 1 220px; min-width: 160px; max-width: 520px; }
.act-toolbar-ks .act-toolbar-search { flex: 1 1 auto; max-width: none; }
.act-toolbar-search input { width: 100%; }
.act-view-select { min-width: 160px; max-width: 280px; font-weight: 600; }
.act-toolbar-ks .act-view-select { min-width: 180px; max-width: 320px; }
.act-ks-tools { flex: 0 0 auto; }
.act-ks-tools .tool { flex-direction: column; min-width: 52px; }
.act-filter-panel {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px; min-width: min(420px, 86vw);
}
.act-filter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-filter-label {
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.2;
}
.act-filter select.in { min-width: 120px; max-width: 200px; }
.act-view-scope { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-left: 2px; }
.act-view-scope-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: #f3e6d8; color: #3a2f28; border: 1px solid #e2d0bd; font-size: 13px; line-height: 1.3;
}
[data-theme="dark"] .act-view-scope-chip {
  background: color-mix(in srgb, #c4a484 22%, var(--panel)); color: var(--ink);
  border-color: color-mix(in srgb, #c4a484 35%, var(--line));
}
.act-view-scope-chip.label { font-weight: 500; }
.act-mode-menu { min-width: 320px; padding: 4px; }
.act-mode-item { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left; width: 100%; }
.act-mode-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-mode-item-title { font-weight: 650; }
.act-settings-menu { min-width: 260px; max-height: min(70vh, 520px); overflow: auto; }
.act-settings-head { padding: 8px 10px 4px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.act-calendar { display: grid; gap: 10px; }
.act-calendar-head { gap: 10px; align-items: center; }
.act-calendar-dow, .act-calendar-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.act-calendar-dow > div { text-align: center; padding: 4px; }
.act-calendar-cell {
  min-height: 92px; border: 1px solid var(--line-2); border-radius: 8px; padding: 4px; background: var(--panel);
}
.act-calendar-cell.has-day { background: var(--kanban-lane); }
.act-calendar-daynum { font-size: 12px; font-weight: 650; color: var(--ink-3); margin-bottom: 4px; }
.act-calendar-chip {
  display: block; width: 100%; text-align: left; border: 0; background: var(--panel); border-radius: 4px;
  padding: 2px 5px; margin-bottom: 3px; font-size: 12px; line-height: 1.25; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line);
}
.act-calendar-chip:hover { border-color: var(--accent); color: var(--accent); }
.act-list table.dt { width: 100%; }
.act-list .act-title-col { min-width: 320px; }
/* Narrow screens: keep secondary columns reachable via horizontal scroll instead of hiding them. */
@media (max-width: 1100px) {
  .act-list.dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .act-list table.dt { min-width: 900px; width: max-content; }
  .act-list .col-wide { display: table-cell; }
  .act-list .act-title-col { min-width: 160px; max-width: 240px; }
  .summary-value { white-space: normal; overflow: visible; text-overflow: unset; }
}
@media (max-width: 600px) {
  .activity-summary-grid { grid-template-columns: 1fr; }
}
.shortcut-group + .shortcut-group { margin-top: 14px; }
.shortcut-group h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table td, .shortcut-table th { padding: 4px 0; vertical-align: top; text-align: left; font-weight: inherit; }
.shortcut-table td:first-child, .shortcut-table th:first-child { width: 46%; padding-right: 12px; }
kbd { font: 12px var(--mono); background: var(--chip); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.stat { font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.stat.sm { font-size: 20px; margin-top: 4px; }
.stat-detail { margin-top: 4px; }
.login { display: grid; place-items: center; height: 100vh; position: relative; background: var(--bg); }
.login-shell { padding: 48px 18px; overflow: auto; }
.login-theme { position: absolute; top: 16px; right: 16px; }
.login-stack { display: grid; gap: 18px; justify-items: center; width: min(460px, 100%); }
.login-wordmark { width: min(420px, 100%); display: flex; justify-content: center; padding: 10px 16px; border-radius: 12px; }
.login .card, .login-card { width: min(420px, 100%); padding: 28px; }
.login-card .btn { justify-content: center; }
/* Google Identity-style provider button (logo + label; not CLIO primary). */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 42px; padding: 0 14px;
  background: #fff; color: #1f1f1f; border: 1px solid #747775;
  border-radius: 4px; font-weight: 560; font-size: 14px; text-decoration: none;
  box-shadow: none;
}
.btn-google:hover { background: #f8f9fa; border-color: #747775; color: #1f1f1f; }
.btn-google:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.btn-google-logo { flex: none; display: block; }
[data-theme="dark"] .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
[data-theme="dark"] .btn-google:hover { background: #1e1f20; color: #e3e3e3; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.login-brand h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.steps { display: flex; gap: 18px; font-size: 13px; color: var(--ink-3); }
.steps .on { color: var(--ink); font-weight: 600; }
.settings-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 16px; }
.settings-nav button { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: transparent; color: var(--ink-2); border-radius: 7px; padding: 9px 10px; text-align: left; }
.settings-nav button:hover { background: var(--hover); color: var(--ink); }
.settings-nav button.on { background: var(--sel); color: var(--ink); font-weight: 560; }
.settings-nav small { color: var(--ink-3); font-weight: 400; line-height: 1.25; }
.settings-nav-group + .settings-nav-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.settings-nav-label { padding: 4px 10px 6px; color: var(--ink-3); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
.settings-panel { min-width: 0; }
.settings-panel-head { margin-bottom: 12px; }
.settings-panel-head h2 { font-size: 20px; margin: 0 0 2px; }
.settings-panel-head p { margin: 0; color: var(--ink-3); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.account-settings-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; }
.account-settings-stack .card { width: 100%; box-shadow: var(--shadow-sm); }
.profile-card, .appearance-card, .account-auth-card { padding: 18px; gap: 14px; border-radius: 12px; }
.account-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.profile-name { font-size: 22px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.profile-email { color: var(--ink-2); margin-top: 2px; }
.account-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.account-meta span { display: inline-flex; border: 1px solid var(--line); background: var(--chip); color: var(--ink-2); border-radius: 999px; padding: 2px 9px; font-size: 13px; }
.account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-2); padding-bottom: 10px; }
.account-card-head h3 { margin: 0 0 3px; }
.account-card-head p { margin: 0; color: var(--ink-3); }
.appearance-control { display: flex; align-items: center; gap: 12px; }
.appearance-control input[type="range"] { flex: 1; }
.appearance-control .color-input { width: 54px; height: 40px; padding: 3px; }
.settings-page { max-width: 1220px; }
.settings-users.settings-page, .settings-wide.settings-page { max-width: min(1680px, 100%); }
.settings-users .settings-panel, .settings-wide .settings-panel { min-width: 0; }
.labels-admin-list, .metadata-admin-list { display: grid; gap: 0; }
.labels-admin-row, .metadata-admin-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-2);
}
.labels-admin-main, .metadata-admin-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.labels-admin-actions, .metadata-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.email-smtp-kv, .slack-conn-kv { grid-template-columns: 140px minmax(0, 1fr); }
.audit-table-wrap { overflow-x: auto; }
.audit-browser-export { padding-top: 4px; border-top: 1px solid var(--line-2); }
.members-card { overflow: visible; width: 100%; max-width: none; padding: 0; }
.members-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, var(--side)); border-radius: var(--radius) var(--radius) 0 0; }
.members-toolbar h3 { margin: 0 0 2px; }
.members-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.members-controls .search { min-width: 220px; }
.archived-toggle { white-space: nowrap; color: var(--ink-2); }
.members-table-wrap { overflow-x: auto; overflow-y: visible; }
table.members-table.maptable { display: table; table-layout: auto; width: 100%; min-width: 1100px; }
.members-table .member-col-check { width: 44px; }
.members-table .member-col-name { min-width: 200px; }
.members-table .member-col-email { min-width: 240px; }
.members-table .member-col-role { width: 132px; min-width: 132px; }
.members-table .member-col-status { width: 116px; min-width: 116px; }
.members-table .member-col-auth { width: 140px; min-width: 140px; }
.members-table .member-col-date { width: 120px; min-width: 112px; }
.members-table .member-col-actions { width: 180px; min-width: 180px; }
.members-table th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.members-table td { vertical-align: middle; }
.member-action-cell { text-align: right; }
.member-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.member-temp-pw { flex: 0 0 auto; }
.member-user { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.member-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.member-name > span:first-child, .member-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block; }
.admin-badge { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); font-weight: 700; }
.member-access, .member-status-control { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; max-width: 100%; }
.member-role-select { width: 100%; min-width: 0; max-width: 100%; padding: 4px 8px; font-size: 14px; border-radius: 7px; }
.member-status { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.member-action-menu { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 18px; line-height: 1; border: 1px solid var(--line); background: var(--panel); }
.member-action-popover { display: grid; min-width: 210px; }
.member-action-popover .item { border: 0; background: transparent; color: var(--ink); width: 100%; text-align: left; font: inherit; }
.member-filter-menu { white-space: nowrap; }
.member-filter-popover { display: grid; min-width: 190px; }
.member-filter-popover .item { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.selectable-list, .tag-filter-popover { display: grid; gap: 4px; max-height: 320px; overflow: auto; width: min(320px, 78vw); padding: 2px; }
/* Inline tag creation inside a Picker popover. */
.picker-create { display: grid; gap: 6px; padding: 4px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; width: min(320px, 78vw); }
.picker-create .in { width: 100%; }
.picker-create-btn { justify-self: start; }
.selectable-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.selectable-item:hover { background: var(--hover); border-color: var(--line); }
.selectable-item.on { background: var(--sel); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--ink); font-weight: 650; }
.selectable-item.clear { grid-template-columns: minmax(0, 1fr); color: var(--ink-2); justify-items: start; }
.selectable-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; color: var(--accent); font-weight: 800; }
[data-theme="dark"] .selectable-item.on { background: var(--sel); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--ink); }
.member-issued-row td { padding-top: 0; background: color-mix(in srgb, var(--panel) 94%, var(--side)); }
.maptable { width: 100%; border-collapse: collapse; }
.maptable td, .maptable th { padding: 6px 8px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.maptable th { font-size: 12px; color: var(--ink-3); font-weight: 560; }
.members-table td, .members-table th { padding: 12px 14px; }
.preview { overflow: auto; max-height: 260px; border: 1px solid var(--line); border-radius: 8px; }
.preview table { border-collapse: collapse; font-size: 12px; }
.preview td, .preview th { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 4px 8px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.preview th { background: var(--th); position: sticky; top: 0; }
.errlist { max-height: 180px; overflow: auto; font-size: 12px; background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 40px; text-align: center; color: var(--ink-2); background: var(--th); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.srcgrid button { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.srcgrid button:hover { background: var(--hover); }
.srcgrid button.on { border-color: var(--accent); background: var(--accent-soft); }
.property-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 84%, var(--side));
  color: var(--accent);
  font-weight: 640;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;
}
.property-link:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.property-link-icon { width: 15px; height: 15px; font-size: 14px; line-height: 1; object-fit: contain; flex: 0 0 auto; }
.property-link-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-display-value .property-link { max-width: 100%; }
.property-link--gsheet, .property-link--gdrive { padding: 0; border: 0; border-radius: 0; background: transparent; color: #1a73e8; font-weight: 560; }
.property-link--gsheet:hover, .property-link--gdrive:hover { background: transparent; text-decoration: underline; }
.property-value-inline { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.property-choice-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 13px; font-weight: 650; line-height: 1.35; }
[data-theme="dark"] .property-choice-chip { background: var(--hover); border-color: var(--line); color: var(--ink); }
.property-option-editor { display: grid; gap: 8px; width: 100%; }
.property-option-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; padding: 2px; }
.property-option { border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink-2); padding: 3px 9px; font-size: 13px; font-weight: 650; }
.property-option:hover { border-color: var(--accent); color: var(--ink); }
.property-option.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .property-option { background: var(--hover); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .property-option.on { background: var(--sel); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .property-link--gsheet, [data-theme="dark"] .property-link--gdrive { color: #8ab4f8; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 420px); gap: 14px; overflow-x: auto; align-items: start; padding: 4px 4px 16px; scrollbar-gutter: stable; }
.kanban .lane, .kanban-lane { min-width: 0; max-height: calc(100vh - 220px); overflow-y: auto; background: var(--kanban-lane); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-sm); }
.kanban .lane h2, .kanban .lane h3, .kanban-lane-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 4px 6px 10px; margin: 0 0 8px; text-transform: none; border-bottom: 1px solid var(--line-2); font-size: inherit; font-weight: inherit; }
.kanban-lane-title { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 760; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.kanban-lane-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 12px; font-weight: 720; }
.kanban .kc, .kanban-card { min-width: 0; overflow: visible; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(20, 28, 38, .04); }
.kanban .kc:hover, .kanban-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--panel) 94%, var(--accent-soft)); }
/* Whole card is clickable (opens the side drawer), like Kaleidoscope. */
.kanban-card.is-clickable { cursor: pointer; }
.kanban-card.is-clickable:focus-visible, table.dt tr.is-clickable:focus-visible, .act-group-row:focus-visible, .tl-row:focus-visible, .tl-group:focus-visible, .view-pick:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.kanban-card.is-clickable .kanban-card-title { cursor: pointer; }
/* Kaleidoscope-style card: title clamped to two lines, small labels, a single quiet footer row. */
.kanban-card-title { min-width: 0; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.kanban-card-title { text-decoration: none; color: inherit; }
a.kanban-card-title:hover { text-decoration: underline; }
.kanban-labels .label-chip { font-size: 12px; padding: 0 7px; }
.kanban-prop { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-top: 8px; color: var(--ink-2); }
.kanban-card-meta .spacer { flex: 1; }
.kanban-type { font-size: 11px; padding: 0 5px; font-weight: 500; }
.kanban-subtasks { list-style: none; margin: 6px 0 0; padding: 4px 0 0; border-top: 1px dashed var(--line-2); font-size: 12px; }
.kanban-subtasks li { display: flex; align-items: center; gap: 6px; padding: 1px 0; min-width: 0; }
.kanban-subtasks li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.act-group-row td { background: var(--bg-2); font-weight: 600; cursor: pointer; }
.act-group-caret { display: inline-block; width: 1em; }
/* Timeline: fixed label column, proportional track with month gridlines. */
.timeline { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.tl-row { display: grid; grid-template-columns: minmax(220px, 30%) 1fr; border-top: 1px solid var(--line-2); cursor: pointer; min-height: 30px; }
.tl-row:hover { background: var(--bg-2); }
.tl-head { border-top: 0; cursor: default; font-size: 12px; color: var(--ink-3); }
.tl-label { padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; border-right: 1px solid var(--line-2); }
.tl-track { position: relative; overflow: hidden; }
.tl-month { position: absolute; top: 6px; padding-left: 4px; white-space: nowrap; border-left: 1px solid var(--line-2); }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); opacity: .5; }
.tl-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--danger); opacity: .6; }
.tl-bar { position: absolute; top: 8px; height: 14px; min-width: 4px; border-radius: 4px; background: var(--accent); }
.tl-bar.st-done { background: color-mix(in srgb, var(--accent) 70%, var(--panel)); }
.tl-bar.st-cancelled { background: var(--ink-3); }
.tl-dot.st-done { background: color-mix(in srgb, var(--accent) 70%, var(--panel)); }
.tl-dot.st-cancelled { background: var(--ink-3); }
.tl-dot { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); }
.tl-undated { position: absolute; top: 7px; left: 6px; }
.tl-group { padding: 6px 8px; border-top: 1px solid var(--line-2); background: var(--bg-2); font-weight: 600; cursor: pointer; }
.kanban-move { width: 2.2em; padding: 0 2px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.kanban-card:hover .kanban-move, .kanban-move:focus { opacity: 1; }
.kanban-more { width: 100%; margin-top: 4px; }
.card-due { font-size: 12px; white-space: nowrap; }
.people-avatars { display: inline-flex; align-items: center; }
.people-avatars .avatar.stacked { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.people-avatars .avatar.stacked:first-child { margin-left: 0; }
.kanban-unset-toggle { white-space: nowrap; }
/* Projects overview board */
.projects-board .project-card { padding: 12px 14px; }
.project-progress { margin-top: 10px; }
.project-progress-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.project-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .2s ease; }
.project-progress-label { display: block; margin-top: 4px; }
@media (max-width: 1100px) {
  /* Overlay rail only. 768×1024 (iPad Mini) lives here — do not stack forms/Home/Settings. */
  .shell { grid-template-columns: 1fr; }
  .shell .main { grid-column: 1; }
  /* 44px › at left:4px needs ≥56px inset (was 52px → title sat on the chevron). */
  .shell .page, .shell.side-hidden .page { padding: 16px 16px 32px 56px; }
  .shell .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 60; box-shadow: var(--shadow); }
  .shell .side-resizer { display: none; }
  .side-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / 35%); }
  .sidebar-show { opacity: 1; background: var(--panel); box-shadow: var(--shadow); }
  .login-shell { padding: 18px; align-content: center; }
  .activity-detail-drawer { width: 100vw; padding: 14px; }
  .home-ask-compose .in, .cmd-input, input.in, select.in, textarea.in { font-size: 16px; }
  .pop { max-width: calc(100vw - 24px); min-width: min(260px, calc(100vw - 24px)); }
  .pop > * { max-width: 100%; box-sizing: border-box; }
  .head > * { min-width: 0; }
  .head h1 { overflow-wrap: anywhere; }
  .entity-type-switcher, .entity-key-summary { max-width: 100%; }
  .toolgroup { flex-wrap: wrap; max-width: 100%; }
  .dt-root > .row { row-gap: 8px; }
  .members-controls .search { min-width: 0; }
  .home-widget > .row { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .kv { grid-template-columns: 1fr; }
  .dt-toolbar > .search, .act-toolbar > .search, .act-toolbar-search, .global-search .search { width: 100%; max-width: 100%; min-width: 0; }
  .dt-toolbar > .search input, .act-toolbar > .search input, .act-toolbar-search input, .global-search .search input { width: 100%; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
  .head { align-items: center; }
  .rule.color { grid-template-columns: 1fr; }
}

/* Viewport + coarse pointer stamps from stampLayoutAttrs() — never user-agent. */
html[data-narrow="1"] .shell { grid-template-columns: 1fr; }
html[data-narrow="1"] .shell .main { grid-column: 1; }
html[data-narrow="1"] .shell .page,
html[data-narrow="1"] .shell.side-hidden .page { padding: 16px 16px 32px 56px; }
html[data-narrow="1"] .shell .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 60; box-shadow: var(--shadow); }
html[data-narrow="1"] .shell .side-resizer { display: none; }
html[data-narrow="1"] .sidebar-show { opacity: 1; background: var(--panel); box-shadow: var(--shadow); width: 44px; height: 44px; }
html[data-coarse="1"] .sidebar-show { width: 44px; height: 44px; }
html[data-narrow="1"] .home-ask-compose .in,
html[data-narrow="1"] .cmd-input,
html[data-narrow="1"] input.in,
html[data-narrow="1"] select.in,
html[data-narrow="1"] textarea.in { font-size: 16px; }
html[data-narrow="1"] .pop { max-width: calc(100vw - 24px); min-width: min(260px, calc(100vw - 24px)); }
html[data-narrow="1"] .pop > * { max-width: 100%; box-sizing: border-box; }
html[data-narrow="1"] .head > * { min-width: 0; }
html[data-narrow="1"] .entity-type-switcher,
html[data-narrow="1"] .entity-key-summary { max-width: 100%; }
html[data-narrow="1"] .toolgroup { flex-wrap: wrap; max-width: 100%; }
html[data-narrow="1"] .home-widget > .row { flex-wrap: wrap; }
html[data-compact="1"] .toolgroup, html[data-phone="1"] .toolgroup {
  display: flex; flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%;
}
html[data-compact="1"] .settings-shell { grid-template-columns: 1fr; }
html[data-compact="1"] .settings-nav { position: static; }
html[data-compact="1"] .head { align-items: center; }
html[data-compact="1"] .dt-toolbar > .search,
html[data-compact="1"] .act-toolbar > .search,
html[data-compact="1"] .act-toolbar-search,
html[data-compact="1"] .global-search .search { width: 100%; max-width: 100%; min-width: 0; }
html[data-compact="1"] .rule.color { grid-template-columns: 1fr; }
html[data-compact="1"] .kv { grid-template-columns: 1fr; }
html[data-narrow="1"] .side .pin-type,
html[data-coarse="1"] .side .pin-type { opacity: 1; }
html[data-narrow="1"] .kanban-move,
html[data-coarse="1"] .kanban-move { opacity: 1; }
html[data-narrow="1"] .view-row .view-row-actions,
html[data-coarse="1"] .view-row .view-row-actions { opacity: 1; }
html[data-narrow="1"] .notif-row .notif-clear,
html[data-coarse="1"] .notif-row .notif-clear { opacity: 1; }
html[data-narrow="1"] .home-widget-grip,
html[data-coarse="1"] .home-widget-grip { display: none; }
.member-status .s-todo { color: var(--warn); font-weight: 600; }
.err-text { color: var(--danger); }
.merge-refs { margin: 6px 0; padding-left: 18px; max-height: 160px; overflow: auto; }
table.dt.notif-table { width: 100%; }
table.dt.notif-table th { height: auto; padding: 10px 9px; overflow: visible; vertical-align: bottom; }
table.dt.notif-table td { white-space: normal; }
table.dt.notif-table th:not(:first-child), .notif-table td.notif-check { text-align: center; width: 150px; }
table.dt.notif-table .notif-group td { background: var(--line-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.notif-col-title { font-weight: 650; margin-bottom: 8px; color: var(--ink); }
.notif-all {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel); box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.notif-all .btn {
  margin: 0; padding: 5px 12px; min-height: 28px; font-size: 13px; font-weight: 650;
  line-height: 1.2; border: 0; border-radius: 0; background: transparent; color: var(--ink-2);
}
.notif-all .btn + .btn { border-left: 1px solid var(--line); }
.notif-all .btn:hover { background: var(--chip); color: var(--ink); }
.notif-all .notif-bulk-on:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.notif-all .notif-bulk-off:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
[data-theme="dark"] .notif-all { box-shadow: none; }
.notif-row { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.notif-row.unread { background: var(--accent-soft); }
.notif-row .notif-clear { opacity: 0; font-size: 13px; line-height: 1; padding: 2px 8px; }
.notif-row:hover .notif-clear, .notif-row .notif-clear:focus-visible { opacity: 1; }
.act-check-col { width: 28px; }
.channel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.channel-chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.channel-chip:hover { border-color: var(--accent); }
.channel-chip:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.channel-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.slack-test-ping { flex-wrap: wrap; gap: 8px; }
.app-version {
  margin: 6px 10px 8px;
  padding: 8px 10px;
  text-align: center;
  border-top: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.45;
}
.app-version-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.app-version-build {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  word-break: break-all;
}
.app-version-commit { opacity: .92; }
.slack-steps { margin: 0; padding-left: 20px; line-height: 1.7; }
.slack-manifest { margin: 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; font-size: 12px; max-height: 320px; overflow: auto; }
.slack-channel-list { max-height: 420px; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; }
.slack-channel-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.slack-channel-row:last-child { border-bottom: 0; }
.slack-channel-row.on { background: var(--accent-soft); }
.slack-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slack-channel-row .spacer { flex: 1; }
.slack-channel-row .slack-allow { gap: 6px; flex: none; }
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 650; line-height: 1; vertical-align: middle; text-decoration: none; }
.help-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.help-link:focus-visible { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* Ask Ollama admin monitor */
.ask-monitor-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ask-monitor-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.ask-monitor-main { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.ask-monitor-who { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ask-monitor-limits { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-monitor-limits .pill.ok {
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
[data-theme="dark"] .ask-monitor-limits .pill.ok {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.ask-monitor-meta { overflow-wrap: anywhere; }

/* record page QOL (comments, tabs) */
.comment .row .comment-avatar { flex: 0 0 auto; }
.comment .comment-time { cursor: default; }
.comment-pending-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.comment-pending-thumb {
  position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--chip); flex: 0 0 auto;
}
.comment-pending-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--panel); }
.comment-pending-remove {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2);
  font-size: 12px; line-height: 1; cursor: pointer; opacity: .92;
}
.comment-pending-remove:hover, .comment-pending-remove:focus-visible {
  color: var(--danger); border-color: var(--danger); outline: none;
}
/* Hide unimplemented avatar-upload breadcrumb until real upload ships (QOL-158). */
.profile-card > .muted.small { display: none; }

/* Import / review surfaces that were light-only */
[data-theme="dark"] .drop { background: var(--panel); }
[data-theme="dark"] .errlist {
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  color: var(--ink);
}
[data-theme="dark"] .preview th { background: var(--th); color: var(--ink); }

/* Asana Archive (read-only sidecar) */
.asana-page { min-width: 0; }
.asana-head { align-items: flex-start; gap: 12px; }
.asana-brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.asana-brand-row h1 { margin: 0; }
.asana-logo { flex: 0 0 auto; border-radius: 6px; }
.asana-actions { gap: 8px; }
.asana-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel);
}
.asana-search .in { flex: 1; min-width: 180px; }
.asana-me-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap;
}
.asana-project-list { display: flex; flex-direction: column; gap: 6px; }
.asana-project-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); text-decoration: none; color: inherit;
}
.asana-project-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--panel) 92%, var(--accent-soft)); }
.asana-project-name { font-weight: 650; font-size: 15px; }
.asana-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.asana-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px);
  gap: 12px; overflow-x: auto; align-items: start; padding: 4px 2px 20px;
  scrollbar-gutter: stable;
}
.asana-column {
  min-width: 0; max-height: calc(100vh - 220px); overflow-y: auto;
  background: var(--kanban-lane); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px;
}
.asana-column-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  align-items: start; padding: 2px 4px 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.asana-column-title {
  margin: 0; font-size: 14px; font-weight: 720; line-height: 1.3;
  overflow-wrap: anywhere;
}
.asana-column-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--chip); color: var(--ink-2); font-size: 12px; font-weight: 700;
}
.asana-column-cards { display: flex; flex-direction: column; gap: 8px; }
.asana-column-empty { padding: 8px 4px; }
.asana-card {
  display: block; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(20, 28, 38, .04);
}
.asana-card:hover { border-color: var(--accent); }
.asana-card.is-done .asana-card-title { color: var(--ink-3); text-decoration: line-through; }
.asana-card-title {
  font-weight: 600; font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.asana-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; color: var(--ink-2); font-size: 12px;
}
.asana-card-spacer { flex: 1; }
.asana-person { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.asana-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.asana-due {
  font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 6px;
  background: var(--chip); color: var(--ink-2);
}
.asana-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.asana-count-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; background: var(--chip); color: var(--ink-2);
}
.asana-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.asana-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--chip));
  color: var(--ink-2); border: 1px solid var(--line-2);
}
.asana-search-results { margin: 0 0 18px; }
.asana-search-head { margin-bottom: 8px; }
.asana-search-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.asana-task-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 20px; align-items: start;
}
@media (max-width: 600px) {
  .asana-task-layout { grid-template-columns: 1fr; }
}
.asana-task-status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.asana-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line);
  color: transparent; font-size: 11px; flex: 0 0 auto;
}
.asana-check.on { color: #fff; background: #27AE60; border-color: #27AE60; }
.asana-check.lg { width: 22px; height: 22px; font-size: 12px; }
.asana-notes {
  white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel);
  margin-bottom: 18px; line-height: 1.45;
}
.asana-section-block { margin-bottom: 22px; }
.asana-section-block h3 { margin: 0 0 10px; font-size: 15px; }
.asana-subtasks { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line-2); }
.asana-subtasks-root { padding-left: 0; border-left: 0; }
.asana-subtasks li { margin: 0 0 6px; }
.asana-subtask-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 0;
}
.asana-subtask-row a { min-width: 0; overflow-wrap: anywhere; }
.asana-stories { display: flex; flex-direction: column; gap: 10px; }
.asana-story {
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel);
}
.asana-story.is-system { background: transparent; border-style: dashed; }
.asana-story-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.asana-story-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; flex: 1; min-width: 0; }
.asana-story-who { font-weight: 650; font-size: 13px; }
.asana-story-kind { text-transform: lowercase; }
.asana-story-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--chip); flex: 0 0 auto;
}
.asana-story-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.asana-story.is-system .asana-story-body { color: var(--ink-2); font-size: 12px; }
.asana-story-likes { display: inline-flex; gap: 8px; font-size: 12px; color: var(--ink-2); }
.asana-heart::before { content: "♥ "; color: #c45c6a; }
.asana-like::before { content: "+ "; font-weight: 700; }
.asana-task-side {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.asana-side-block { min-width: 0; }
.asana-side-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.asana-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.asana-side-list a { overflow-wrap: anywhere; }
.asana-followers { display: flex; flex-direction: column; gap: 4px; }
.asana-cf { margin: 0; display: grid; gap: 6px; }
.asana-cf dt { font-size: 12px; color: var(--ink-3); }
.asana-cf dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.asana-att-missing { color: var(--ink-3); }
.asana-empty { padding: 36px 16px; }

/* grid + configure QOL */
table.dt tr.grp td { padding: 0; }
table.dt tr.grp .grp-toggle { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0 10px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
table.dt tr.grp .grp-toggle:hover { color: var(--accent); }
table.dt tr.grp .grp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.dt tr.grp .grp-caret { display: inline-block; width: 12px; color: var(--ink-3); }
.trash-table .trash-actions { white-space: nowrap; text-align: right; }
.trash-table .trash-actions .btn + .btn { margin-left: 6px; }

/* Entity card description (base blurb) */
.entity-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 2px 0 4px; line-height: 1.35; max-width: 42ch;
}
.entity-info-popover { padding: 4px 2px; }

/* ===== Cage cards: in-app print preview (cc-*) and the Assign cages dialog (cage-assign) =====
   The preview lives in a body-level host outside #app so print CSS hides the shell and lets pages flow. */
.cc-print-host { position: fixed; inset: 0; z-index: 3900; }
html:has(.clio-instance-banner) .cc-print-host { top: 2.5rem; }
.cc-print { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.cc-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.cc-toolbar .cc-title { font-size: 15px; }
.cc-toolbar .cc-size, .cc-toolbar .cc-custom, .cc-toolbar .cc-dymo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cc-toolbar .cc-custom input { width: 72px; }
.cc-pages { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--bg); }
.cc-page { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc-card { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line); padding: var(--cc-m, 0.15in); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.08in; overflow: hidden; font-family: Helvetica, Arial, sans-serif; }
.cc-card .cc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10pt; line-height: 1.15; }
.cc-card .cc-grid th, .cc-card .cc-grid td { border: 1px solid #000; padding: 1px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 0.22in; }
.cc-card .cc-grid th { font-weight: 700; }
.cc-card .cc-grid td.cc-left { text-align: left; }
.cc-card .cc-grid .cc-blank { border: 0; }
.cc-card .cc-grid .cc-big { font-size: 13pt; }
.cc-card .cc-animals th:first-child { font-size: 13pt; }
.cc-card .cc-grid td.cc-cage { font-size: 13pt; }
.cc-empty { padding: 40px; color: var(--ink-2); text-align: center; max-width: 520px; }
.cc-meta { font-size: 11px; }
@media (max-width: 720px) { .cc-card { transform-origin: top center; transform: scale(.6); margin-bottom: calc(var(--cc-h, 3.2in) * -0.4); } }
/* Dark theme: cards stay white (they are paper); toolbar follows the theme. */
[data-theme="dark"] .cc-card { box-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media print {
  html.cc-printing body > :not(.cc-print-host) { display: none !important; }
  html.cc-printing, html.cc-printing body { background: #fff !important; height: auto !important; overflow: visible !important; }
  .cc-print-host { position: static; }
  .cc-print { position: static; display: block; background: #fff; }
  .cc-toolbar, .cc-meta, .cc-empty { display: none !important; }
  .cc-pages { display: block; padding: 0; overflow: visible; background: #fff; }
  .cc-page { display: block; break-after: page; page-break-after: always; }
  .cc-page:last-child { break-after: auto; page-break-after: auto; }
  .cc-card { box-shadow: none; margin: 0; width: var(--cc-w) !important; height: var(--cc-h) !important; }
}
.cage-card-template .cct-head { width: 100%; background: none; border: 0; padding: 10px 14px; cursor: pointer; color: inherit; font: inherit; text-align: left; gap: 10px; }
.cage-card-template .cct-body { padding: 0 14px 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.cage-card-template .cct-section { display: flex; flex-direction: column; gap: 6px; }
.cage-card-template .cct-row { gap: 6px; align-items: center; }
.cage-card-template .cct-rowno { width: 14px; text-align: right; }
.cage-card-template .cct-fixed { display: inline-flex; align-items: center; background: var(--line-2); color: var(--ink-2); }
.cage-card-template .cct-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.cage-card-template .cct-label-name { flex: 1; color: var(--ink-2); }
.cage-card-template select.in.sm { max-width: 220px; }
.cage-assign .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.receive-steps { display: inline-flex; gap: 6px; margin-left: 12px; font-size: 12px; font-weight: 500; vertical-align: middle; }
.receive-step { padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--ink-3); }
.receive-step.on { background: var(--accent); color: var(--accent-ink); }
.receive-step.done { color: var(--ink-2); }
.receive-hub-row { display: flex; gap: 12px; align-items: flex-start; }
.receive-hub-ok, .receive-hub-todo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 600; }
.receive-hub-ok { background: var(--accent); color: var(--accent-ink); }
.receive-hub-todo { background: var(--chip); color: var(--ink-2); }
.receive-hub .linkish { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.receive-hub .linkish:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }
.cc-toolbar .cc-back { margin-right: 4px; }
.cage-census .census-filters button.chip { border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2); }
.cage-census .census-filters button.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cage-census .census-table-wrap { overflow: auto; }
.cage-census .census-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cage-census .census-table th, .cage-census .census-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.cage-census .census-table th { font-weight: 600; color: var(--ink-2); font-size: 13px; position: sticky; top: 0; background: var(--panel); }
.cage-census .census-table .num { text-align: right; }
.cage-census .census-table tr.picked td { background: var(--sel); }
.cage-census .census-animals { max-width: 420px; }
.cage-census .census-status.never { background: #fde8e8; color: #8a2a2a; }
.cage-census .census-status.stale { background: #fff1d6; color: #7a4b00; }
.cage-census .census-status.current { background: #e2f3e8; color: #1f5f3a; }
.cage-assign-preview { width: 100%; border-collapse: collapse; font-size: 13px; }
.cage-assign-preview th, .cage-assign-preview td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.cage-assign-preview th { background: var(--panel); font-weight: 600; }

/* Accessibility chrome (final push B): skip link, reduced motion, focus target for #main. */
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 5000; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; box-shadow: var(--shadow); }
.skip-link:focus, .skip-link:focus-visible { top: 8px; outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.main:focus, .activity-detail-drawer:focus { outline: none; }
table.dt th[tabindex]:focus-visible, .act-list th[tabindex]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===================================================================================================
   Airtable interface mode (per-user, Settings → Appearance → Interface). Additive only: every rule is
   scoped to [data-ui-mode="airtable"] or an .at-* class; the CLIO chrome above is left untouched.
   =================================================================================================== */
[data-ui-mode="airtable"] .at-page { padding: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
[data-ui-mode="airtable"] .main:has(> .page.at-page) { display: flex; flex-direction: column; overflow: hidden; }
.at-base {
  --at-font: 13px; --at-lh: 18px; --at-row: 32px; --at-ctl: 26px; --at-radius: 3px;
  --at-line: var(--line-2); --at-gutter-w: 66px;
  display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: var(--at-font); line-height: var(--at-lh);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.at-base .btn, .at-base .in, .at-base select, .at-base .pop .item, .at-base .pill, .at-base .chip, .at-base .cell-btn { font-size: var(--at-font); }
.at-base .btn.sm { padding: 2px 8px; min-height: var(--at-ctl); border-radius: var(--at-radius); }
.at-base .in { padding: 2px 8px; min-height: var(--at-ctl); border-radius: var(--at-radius); }

/* Base bar: type colour, two bands (solid name bar + darker tab strip) */
.at-basebar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 10px; background: var(--at-base); color: var(--at-base-ink); flex: none; }
.at-basebar .btn.at-basename { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; font-size: 17px; font-weight: 650; padding: 4px 8px; border-radius: 6px; }
.at-basebar .btn.at-basename:hover { background: var(--at-base-veil); }
.at-basebar .typeIcon.at-base-icon { color: var(--at-base-ink); border-color: transparent; box-shadow: none; width: 26px; height: 26px; }
.at-basebar .typeIcon.at-base-icon .typeIcon-glyph, .at-basebar .typeIcon.at-base-icon svg { width: 16px; height: 16px; }
.at-basebar .btn.at-basename b { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-basebar .at-caret { font-size: 11px; opacity: .8; }
.at-basebar .pill { background: var(--at-base-veil); color: inherit; }
.at-base-info { width: 300px; color: var(--ink); display: grid; gap: 6px; }
.at-base-desc { margin: 0 0 2px; white-space: pre-wrap; line-height: 1.4; }
.at-basetabs { display: flex; gap: 2px; margin-left: 8px; align-self: stretch; align-items: stretch; }
.at-basetab { border: 0; background: transparent; color: var(--at-base-ink-soft); padding: 0 12px; font-weight: 500; border-bottom: 2px solid transparent; }
.at-basetab.on { color: var(--at-base-ink); border-bottom-color: var(--at-base-ink); }
.at-basebar .spacer { flex: 1; }
.at-basebar .at-basebtn, .at-basebar .btn.at-basebtn { border: 1px solid var(--at-base-ink-soft); background: var(--at-base-veil); color: var(--at-base-ink); border-radius: 999px; padding: 3px 12px; min-height: var(--at-ctl); font-weight: 600; }
.at-basebar .at-basebtn:hover, .at-basebar .btn.at-basebtn:hover { background: var(--at-base-ink-soft); color: var(--at-base); }
.at-basebar .btn.at-basemore { padding: 3px 9px; }
.at-basebar .help-link { color: var(--at-base-ink); border-color: var(--at-base-ink-soft); }
/* Table tabs */
.at-tabstrip { display: flex; align-items: flex-end; gap: 0; padding: 0 8px; background: var(--at-base-dark); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; min-height: 32px; }
.at-tabstrip::-webkit-scrollbar { display: none; }
.at-tabstrip .at-tab, .at-tabstrip .btn.at-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--at-strip-ink-soft); padding: 0 12px; height: 32px; font-size: var(--at-font); font-weight: 500; white-space: nowrap; border-radius: var(--at-radius) var(--at-radius) 0 0; flex: none; max-width: 240px; }
.at-tabstrip .at-tab .at-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.at-tabstrip .at-tab:hover { color: var(--at-strip-ink); background: var(--at-strip-veil); }
.at-tabstrip .typeIcon.at-tab-icon { width: 20px; height: 20px; border-radius: 5px; color: var(--at-strip-ink); border-color: transparent; box-shadow: none; }
.at-tabstrip .typeIcon.at-tab-icon .typeIcon-glyph, .at-tabstrip .typeIcon.at-tab-icon svg { width: 13px; height: 13px; }
.at-tabstrip .at-tab.on .typeIcon.at-tab-icon { color: var(--at-base-ink); }
.at-tabstrip .at-tab.on { background: var(--panel); color: var(--ink); }
.at-tabstrip .at-tab.on:hover { background: var(--panel); }
.at-tabstrip .at-tab-all { padding: 0 8px; }
.at-tabstrip .at-tab-add { margin-left: 4px; color: var(--at-strip-ink-soft); }
.at-tabstrip .pop-anchor { display: inline-flex; align-items: flex-end; }
.at-tabstrip .pop .item { color: var(--ink); }
[data-theme="dark"] .at-tabstrip .at-tab.on { background: var(--bg); }

/* Body: views sidebar + grid */
.at-body { display: flex; flex: 1; min-height: 0; background: var(--panel); }
[data-theme="dark"] .at-body { background: var(--bg); }
.at-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.at-main .dt-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.at-main .dt-wrap { flex: 1; max-height: none; border: 0; border-radius: 0; min-height: 0; }
.at-views { width: 260px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
[data-theme="dark"] .at-views { background: var(--side); }
.at-views-find { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-2); }
.at-views-find .in { flex: 1; border: 0; background: transparent; padding-left: 0; }
.at-views-find .in:focus { outline: none; box-shadow: none; }
.at-views-ico { color: var(--ink-3); }
.at-views-list { flex: 1; overflow: auto; padding: 6px 8px; }
.at-view { display: flex; align-items: center; border-radius: var(--at-radius); min-height: 30px; }
.at-view:hover { background: var(--hover); }
.at-view.on { background: var(--sel); }
.at-view-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 0 8px; height: 30px; font-weight: 500; }
.at-view.on .at-view-pick { font-weight: 600; }
.at-view-ico { color: #2d7ff9; font-size: 14px; flex: none; }
.at-view-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-view-dot { color: var(--warn); margin-left: 4px; }
.at-view .btn.at-view-more { border: 0; background: transparent; padding: 0 6px; height: 30px; opacity: 0; color: var(--ink-2); }
.at-view:hover .btn.at-view-more, .at-view .pop-anchor.open .btn.at-view-more, .at-view.on .btn.at-view-more { opacity: 1; }
.at-views .pop .item.disabled { opacity: .4; cursor: not-allowed; }
.at-views-create { border-top: 1px solid var(--line-2); padding: 8px 8px 10px; display: grid; gap: 2px; }
.at-views-create-label { font-weight: 600; color: var(--ink-2); padding: 4px 8px 6px; }
.at-view-create { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 0 8px; height: 30px; border-radius: var(--at-radius); }
.at-view-create:hover { background: var(--hover); }
.at-view-create .at-plus { color: var(--ink-3); font-size: 15px; }
.at-view-create.at-views-hide { color: var(--ink-3); font-size: 12px; margin-top: 4px; }

/* View bar */
.at-viewbar { display: flex; align-items: center; gap: 2px; padding: 0 10px; min-height: 44px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.at-viewbar::-webkit-scrollbar { display: none; }
.at-viewbar > *, .at-viewbar .pop-anchor { flex: none; }
[data-theme="dark"] .at-viewbar { background: var(--bg); }
.at-viewbar .spacer { flex: 1; }
.at-viewbar .at-divider { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.at-viewbar .at-tool, .at-viewbar .btn.at-tool, .at-viewbar .tool.at-tool { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; border: 1px solid transparent; background: transparent; color: var(--ink-2); padding: 0 9px; height: var(--at-ctl); border-radius: var(--at-radius); font-size: var(--at-font); font-weight: 500; white-space: nowrap; }
.at-viewbar .at-tool:hover { background: var(--hover); color: var(--ink); }
.at-viewbar .at-tool.on { background: var(--hover); color: var(--ink); }
.at-viewbar .at-tool .n { position: static; background: transparent; color: inherit; font-size: inherit; padding: 0; font-weight: 500; }
.at-viewbar .at-tool .tool-ico { font-size: 13px; color: var(--ink-3); }
.at-viewbar .at-tool.at-on .tool-ico { color: inherit; }
.at-viewbar .at-tool.at-on { color: var(--ink); }
.at-viewbar .at-tool.at-on.at-filter { background: #cfe5c4; border-color: #cfe5c4; }
.at-viewbar .at-tool.at-on.at-sort { background: #ffe0cc; border-color: #ffe0cc; }
.at-viewbar .at-tool.at-on.at-group { background: #d9e3ff; border-color: #d9e3ff; }
.at-viewbar .at-tool.at-on.at-color { background: #f3d8ff; border-color: #f3d8ff; }
.at-viewbar .at-tool.at-on.at-hide { background: #e1e8ee; border-color: #e1e8ee; }
.at-viewbar .at-tool.at-on.at-set { background: #fbe4a4; border-color: #fbe4a4; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-filter { background: #28402a; border-color: #28402a; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-sort { background: #4a3324; border-color: #4a3324; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-group { background: #2a3550; border-color: #2a3550; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-color { background: #43304d; border-color: #43304d; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-hide { background: #334050; border-color: #334050; }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-set { background: #4d4020; border-color: #4d4020; }
.at-viewbar .at-viewname { font-weight: 600; color: var(--ink); max-width: 260px; }
.at-viewbar .at-viewname .at-view-ico { margin-right: 2px; }
.at-viewbar .at-views-toggle { margin-right: 6px; }
.at-viewbar .at-views-toggle.on { background: var(--hover); }
.at-viewbar .at-dirty { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }
.at-viewbar .at-dirty .btn { height: var(--at-ctl); padding: 0 9px; border-radius: var(--at-radius); }
.at-viewbar .btn.lock-toggle.lock-toggle { height: var(--at-ctl); border-radius: var(--at-radius); font-size: var(--at-font); padding: 0 9px; }
.at-find { display: inline-flex; align-items: center; gap: 4px; height: var(--at-ctl); border: 1px solid var(--line); border-radius: var(--at-radius); padding: 0 4px 0 8px; background: var(--panel); }
.at-find input { border: 0; background: transparent; width: 180px; font-size: var(--at-font); padding: 0; outline: none; color: var(--ink); }
.at-find .at-find-count { color: var(--ink-3); font-size: 12px; white-space: nowrap; padding: 0 4px; }
.at-find .btn { border: 0; background: transparent; padding: 0 5px; height: 22px; min-height: 0; color: var(--ink-2); }
.at-viewbar .at-find-btn { font-size: 15px; padding: 0 7px; }
.at-searchrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-2); background: var(--th); flex: none; }
.at-searchrow .search { min-width: 260px; }

/* Grid density: 13px / 32px rows, flat hairlines, no outer rounding */
.at-grid table.dt { --skin-grid-font: var(--at-font); --skin-grid-row: var(--at-row); --skin-grid-header-h: var(--at-row); --skin-grid-pad-x: 8px; }
.at-grid table.dt th, .at-grid table.dt td { border-color: var(--at-line); }
.at-grid table.dt th { background: var(--th); color: var(--ink-2); font-weight: 500; }
.at-grid table.dt th .col-header-btn.btn { font-size: var(--at-font); }
.at-grid table.dt th .ty { font-size: 13px; color: var(--ink-2); opacity: 1; width: 16px; }
/* Field-type icons as Lucide glyphs (the text glyphs — ⚿ ≡ ◉ … — are hidden; fonts without them showed boxes) */
.at-grid table.dt th .ty[data-ft], .at-expand .k .ty[data-ft] { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0; color: var(--ink-2); flex: none; vertical-align: -3px; }
.at-grid table.dt th .ty[data-ft]::before, .at-expand .k .ty[data-ft]::before { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: var(--ft-icon) center / contain no-repeat; mask: var(--ft-icon) center / contain no-repeat; }
.at-grid .ty[data-ft="key"], .at-expand .ty[data-ft="key"] { --ft-icon: url(/static/icons/lucide/key-round.svg); color: var(--accent); }
.at-grid .ty[data-ft="text"], .at-expand .ty[data-ft="text"] { --ft-icon: url(/static/icons/lucide/type.svg); }
.at-grid .ty[data-ft="number"], .at-expand .ty[data-ft="number"] { --ft-icon: url(/static/icons/lucide/hash.svg); }
.at-grid .ty[data-ft="select"], .at-expand .ty[data-ft="select"] { --ft-icon: url(/static/icons/lucide/circle-chevron-down.svg); }
.at-grid .ty[data-ft="multiselect"], .at-expand .ty[data-ft="multiselect"] { --ft-icon: url(/static/icons/lucide/list.svg); }
.at-grid .ty[data-ft="date"], .at-expand .ty[data-ft="date"] { --ft-icon: url(/static/icons/lucide/calendar.svg); }
.at-grid .ty[data-ft="reference"], .at-expand .ty[data-ft="reference"] { --ft-icon: url(/static/icons/lucide/arrow-up-right.svg); }
.at-grid .ty[data-ft="url"], .at-expand .ty[data-ft="url"] { --ft-icon: url(/static/icons/lucide/link.svg); }
.at-grid .ty[data-ft="people"], .at-expand .ty[data-ft="people"] { --ft-icon: url(/static/icons/lucide/user.svg); }
.at-grid .ty[data-ft="file"], .at-expand .ty[data-ft="file"] { --ft-icon: url(/static/icons/lucide/paperclip.svg); }
.at-grid .ty[data-ft="formula"], .at-expand .ty[data-ft="formula"] { --ft-icon: url(/static/icons/lucide/square-function.svg); }
.at-grid .ty[data-ft="lookup"], .at-expand .ty[data-ft="lookup"] { --ft-icon: url(/static/icons/lucide/search.svg); }
.at-grid .ty[data-ft="checkbox"], .at-expand .ty[data-ft="checkbox"] { --ft-icon: url(/static/icons/lucide/square-check.svg); }
.at-grid .ty[data-ft="_created_at"], .at-grid .ty[data-ft="_updated_at"], .at-expand .ty[data-ft="_created_at"], .at-expand .ty[data-ft="_updated_at"] { --ft-icon: url(/static/icons/lucide/clock.svg); }
.at-grid .ty[data-ft="_import_id"], .at-expand .ty[data-ft="_import_id"] { --ft-icon: url(/static/icons/lucide/file.svg); }
.at-grid table.dt th .col-header-btn.btn { color: var(--ink-2); }
.at-grid table.dt th .col-header-btn.btn .col-header-name { color: var(--ink); font-weight: 500; }
.at-expand .metadata-field-icon, .at-expand .field-icon, .at-expand .ty { color: var(--ink-2); opacity: 1; }
.at-grid table.dt td.cell .cell-stack { min-height: var(--at-row); }
/* Short rows: long text is a single clipped line (the ↗ expand record shows it all) */
.at-grid table.dt td.cell.cell-text { white-space: nowrap; height: var(--at-row); min-height: 0; padding-top: 0; padding-bottom: 0; vertical-align: middle; text-overflow: ellipsis; }
.at-grid table.dt td.cell.cell-text .cell-text-value, .at-grid table.dt td.cell.cell-text .cell-stack > *, .at-grid table.dt td.cell.cell-text .cell-url { white-space: nowrap; max-height: none; overflow: hidden; text-overflow: ellipsis; line-height: var(--at-lh); }
.at-grid table.dt td.cell.cell-text .cell-expand-wrap { min-height: 0; }
/* Activity provenance sits beside the value on one line instead of stacking under it */
.at-grid table.dt td.cell .cell-stack, .at-grid table.dt td.cell.cell-text .cell-stack { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; min-height: 0; height: var(--at-row); max-width: 100%; }
.at-grid table.dt td.cell .cell-stack > *, .at-grid table.dt td.cell.cell-text .cell-stack > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.at-grid table.dt td.cell .cell-stack .cell-source { display: inline-block; font-size: 11px; line-height: var(--at-lh); color: var(--ink-3); max-width: 45%; }
.at-grid table.dt td.cell .cell-stack .cell-source::before { content: "↗ "; }
/* Structure previews and thumbnails fit the row; the expanded record shows them full size */
.at-grid table.dt td.cell .mol-preview, .at-grid table.dt td.cell .mol-preview.compact { width: auto; height: 28px; padding: 0 2px; border: 0; border-radius: 3px; background: transparent; }
.at-grid table.dt td.cell .mol-preview canvas, .at-grid table.dt td.cell .mol-preview img { height: 28px; width: auto; max-width: 160px; }
.at-grid table.dt td.cell .mol-preview .mol-copy { display: none; }
.at-grid table.dt td.cell img, .at-grid table.dt td.cell .file-thumb { max-height: 28px; width: auto; }
/* Row-number gutter: number by default, checkbox on hover / when any row is picked, ↗ expand */
.at-grid table.dt td.at-gutter, .at-grid table.dt th.at-gutter { width: var(--at-gutter-w); min-width: var(--at-gutter-w); max-width: var(--at-gutter-w); padding: 0 4px 0 8px; text-align: left; }
.at-grid table.dt td.at-gutter { color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* The checkbox and ↗ stay in the tab order (opacity, not display:none) so keyboard users can select / expand rows */
.at-grid table.dt td.at-gutter .at-rownum { display: inline-block; width: 22px; text-align: center; font-size: 12px; }
.at-grid table.dt td.at-gutter input[type="checkbox"] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0; width: 14px; height: 14px; margin: 0; }
.at-grid table.dt td.at-gutter .at-expand-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; border: 0; background: transparent; color: var(--ink-3); width: 22px; height: 22px; border-radius: var(--at-radius); padding: 0; font-size: 12px; line-height: 1; }
.at-grid table.dt td.at-gutter .at-expand-btn:hover { background: var(--hover); color: #2d7ff9; }
.at-grid table.dt tbody tr:hover > td.at-gutter .at-rownum,
.at-grid table.dt tbody tr.picked > td.at-gutter .at-rownum,
.at-grid table.dt td.at-gutter:focus-within .at-rownum,
.at-grid.at-has-picked table.dt td.at-gutter .at-rownum { opacity: 0; }
.at-grid table.dt tbody tr:hover > td.at-gutter input[type="checkbox"],
.at-grid table.dt tbody tr.picked > td.at-gutter input[type="checkbox"],
.at-grid.at-has-picked table.dt td.at-gutter input[type="checkbox"],
.at-grid table.dt td.at-gutter input[type="checkbox"]:focus-visible,
.at-grid table.dt td.at-gutter .at-expand-btn:focus-visible,
.at-grid table.dt tbody tr:hover > td.at-gutter .at-expand-btn { opacity: 1; }
.at-grid table.dt th.at-gutter input[type="checkbox"] { width: 14px; height: 14px; margin-left: 4px; opacity: 0; }
.at-grid table.dt th.at-gutter:hover input[type="checkbox"], .at-grid table.dt th.at-gutter input[type="checkbox"]:checked, .at-grid.at-has-picked table.dt th.at-gutter input[type="checkbox"] { opacity: 1; }
.at-grid table.dt td.first, .at-grid table.dt th.first { left: var(--at-gutter-w); box-shadow: 2px 0 0 var(--line); }
.at-grid table.dt td.first.at-frozen { font-weight: 500; }
.at-grid table.dt tr.add-row td { height: var(--at-row); color: var(--ink-3); }
.at-grid table.dt tr.add-row td.at-gutter { text-align: center; font-size: 16px; padding-left: 0; }
.at-grid table.dt th.add-field-col { min-width: 92px; width: 92px; }
.at-grid .at-add-field, .at-grid .btn.at-add-field-pop { border: 0; background: transparent; color: var(--ink-2); font-size: 17px; width: 100%; height: var(--at-row); border-radius: 0; padding: 0; min-height: 0; }
.at-grid .at-add-field:hover, .at-grid .btn.at-add-field-pop:hover { background: var(--hover); color: var(--ink); }
.at-grid table.dt th.add-field-col .pop-anchor { display: block; }
/* Focus / selection: Airtable blue */
.at-grid table.dt td.cell.focus, .at-grid table.dt td.cell.dt-focus { box-shadow: inset 0 0 0 2px #2d7ff9; }
.at-grid table.dt td.cell.dt-range { background: rgba(45, 127, 249, .12); }
/* Find in view: all hits amber, current hit stronger */
.at-grid table.dt td.cell.at-find-hit { background: #fff3bf; }
.at-grid table.dt td.cell.at-find-cur { background: #ffd43b; box-shadow: inset 0 0 0 2px #e8a700; }
[data-theme="dark"] .at-grid table.dt td.cell.at-find-hit { background: #5a4a12; }
[data-theme="dark"] .at-grid table.dt td.cell.at-find-cur { background: #866c10; box-shadow: inset 0 0 0 2px #ffd43b; }
/* Pastel choice pills, pale-blue link pills, green checks (Airtable-like; CLIO's own palette) */
.at-grid .cell-btn.choice, .at-grid .chip.choice, .at-expand .cell-btn.choice, .at-expand .chip.choice { border: 0; border-radius: 999px; padding: 1px 9px; font-size: var(--at-font, 13px); line-height: 18px; font-weight: 450; }
.at-grid [data-tone="0"], .at-expand [data-tone="0"] { background: #cfdfff; color: #102046; }
.at-grid [data-tone="1"], .at-expand [data-tone="1"] { background: #d0f0fd; color: #04283f; }
.at-grid [data-tone="2"], .at-expand [data-tone="2"] { background: #c2f5e9; color: #012524; }
.at-grid [data-tone="3"], .at-expand [data-tone="3"] { background: #d1f7c4; color: #0b1d05; }
.at-grid [data-tone="4"], .at-expand [data-tone="4"] { background: #ffeab6; color: #3b2300; }
.at-grid [data-tone="5"], .at-expand [data-tone="5"] { background: #fee2d5; color: #6b2c0f; }
.at-grid [data-tone="6"], .at-expand [data-tone="6"] { background: #ffdce5; color: #4c0c1c; }
.at-grid [data-tone="7"], .at-expand [data-tone="7"] { background: #ffdaf6; color: #400832; }
.at-grid [data-tone="8"], .at-expand [data-tone="8"] { background: #ede2fe; color: #280b5f; }
.at-grid [data-tone="9"], .at-expand [data-tone="9"] { background: #eeeeee; color: #333333; }
[data-theme="dark"] .at-grid [data-tone="0"], [data-theme="dark"] .at-expand [data-tone="0"] { background: #2b4a8a; color: #dbe6ff; }
[data-theme="dark"] .at-grid [data-tone="1"], [data-theme="dark"] .at-expand [data-tone="1"] { background: #1d5a78; color: #d6f1ff; }
[data-theme="dark"] .at-grid [data-tone="2"], [data-theme="dark"] .at-expand [data-tone="2"] { background: #176a5a; color: #cdf7ec; }
[data-theme="dark"] .at-grid [data-tone="3"], [data-theme="dark"] .at-expand [data-tone="3"] { background: #2f6a2a; color: #dcf7d2; }
[data-theme="dark"] .at-grid [data-tone="4"], [data-theme="dark"] .at-expand [data-tone="4"] { background: #7a5a12; color: #ffefc2; }
[data-theme="dark"] .at-grid [data-tone="5"], [data-theme="dark"] .at-expand [data-tone="5"] { background: #86421f; color: #ffe3d2; }
[data-theme="dark"] .at-grid [data-tone="6"], [data-theme="dark"] .at-expand [data-tone="6"] { background: #8a2f45; color: #ffdbe4; }
[data-theme="dark"] .at-grid [data-tone="7"], [data-theme="dark"] .at-expand [data-tone="7"] { background: #7c2f6c; color: #ffdaf6; }
[data-theme="dark"] .at-grid [data-tone="8"], [data-theme="dark"] .at-expand [data-tone="8"] { background: #4e3690; color: #ebe0ff; }
[data-theme="dark"] .at-grid [data-tone="9"], [data-theme="dark"] .at-expand [data-tone="9"] { background: #4a505a; color: #eceff3; }
.at-grid .chip.ref, .at-expand .chip.ref { background: #d9e8ff; color: #1d3f8a; border-radius: 999px; }
.at-grid .chip.person, .at-expand .chip.person { border-radius: 999px; }
.at-grid .cell-check, .at-expand .cell-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: #20c933; color: #fff; font-size: 11px; font-weight: 700; }
[data-theme="dark"] .at-grid .chip.ref, [data-theme="dark"] .at-expand .chip.ref { background: #203a6a; color: #cfe0ff; }

/* Footer: per-column summaries (every record in the view) + record count / paging */
.at-footer { display: flex; align-items: stretch; height: 34px; border-top: 1px solid var(--line); background: var(--th); overflow: hidden; flex: none; }
.at-footer-scroll { display: flex; align-items: stretch; min-width: 100%; }
.at-footer-cell { flex: none; border-right: 1px solid var(--at-line); display: flex; align-items: center; justify-content: flex-end; min-width: 0; padding: 0; color: var(--ink-3); }
.at-footer-cell.at-gutter { width: var(--at-gutter-w); min-width: var(--at-gutter-w); border-right: 0; position: sticky; left: 0; z-index: 2; background: var(--th); }
.at-footer-cell.at-frozen { position: sticky; left: var(--at-gutter-w); z-index: 2; background: var(--th); box-shadow: 2px 0 0 var(--line); }
.at-footer-cell.at-footer-end { flex: 1; border-right: 0; }
.at-footer-cell .pop-anchor { display: block; width: 100%; height: 100%; }
.at-footer-cell .btn.at-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); padding: 0 8px; font-size: 12px; min-height: 0; }
.at-footer-cell .btn.at-sum-btn:hover { background: var(--hover); color: var(--ink-2); }
.at-footer-cell .at-sum-hint { opacity: 0; }
.at-footer-cell:hover .at-sum-hint, .at-footer-cell .pop-anchor.open .at-sum-hint { opacity: 1; }
.at-footer-cell .at-sum-label { color: var(--ink-3); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.at-footer-cell .at-sum-value { color: var(--ink); font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-footer .pop .item.on { background: var(--sel); }
.at-recordbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 34px; border-top: 1px solid var(--line-2); background: var(--panel); flex: none; font-size: 12px; color: var(--ink-2); }
[data-theme="dark"] .at-recordbar { background: var(--bg); }
.at-recordbar .at-count { font-weight: 500; color: var(--ink); white-space: nowrap; }
.at-recordbar .spacer { flex: 1; }
.at-recordbar .pager-nav button.pg { min-width: 24px; height: 24px; border: 1px solid transparent; background: none; border-radius: var(--at-radius); font-size: 12px; }
.at-recordbar .pager-nav button.pg.on { border-color: var(--line); background: var(--th); font-weight: 600; }
.at-recordbar .pager-meta { display: inline-flex; align-items: center; gap: 6px; }
.at-recordbar .pager-size { border: 0; background: transparent; padding: 0 4px; height: 24px; min-height: 0; color: var(--ink-2); font-size: 12px; }
/* Floating bulk pill */
.bulkbar[data-chrome="airtable"] { bottom: 56px; border-radius: 999px; padding: 6px 10px 6px 16px; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.bulkbar[data-chrome="airtable"] .btn { border-radius: 999px; font-size: 13px; }

/* Expanded record modal */
.at-expand-scrim { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(15, 19, 25, .45); padding: 24px; }
.at-expand { width: min(1180px, 100%); height: min(860px, 100%); background: var(--bg); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; }
.at-expand-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.at-expand-head .spacer { flex: 1; }
.at-expand > .record-drawer-page { flex: 1; min-height: 0; overflow: hidden; padding: 0; gap: 0; }
.at-expand .record-drawer-page.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.at-expand .record-drawer-page.split > .head { grid-column: 1 / -1; margin: 0; padding: 14px 20px 8px; }
.at-expand .record-drawer-page.split > .select-all-banner { grid-column: 1 / -1; margin: 0 20px; }
.at-expand .record-drawer-page.split > .record-fields-card { grid-column: 1; grid-row: 2; overflow: auto; margin: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 8px 20px 24px; background: var(--panel); }
.at-expand .record-drawer-page.split > .tabs { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding: 0 16px; background: var(--bg); position: sticky; top: 0; z-index: 2; }
.at-expand .record-drawer-page.split > :not(.head):not(.record-fields-card):not(.tabs):not(.select-all-banner) { grid-column: 2; grid-row: 2; margin-top: 52px; overflow: auto; padding: 0 16px 24px; }
.at-expand .record-drawer-page.split .head h1 { font-size: 20px; }

/* Icon rail replaces the sidebar on entity pages */
.shell.at-rail-shell { grid-template-columns: 48px 1fr; }
.at-rail { width: 48px; align-items: center; padding: 8px 0; gap: 2px; }
.at-rail .at-rail-brand { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 6px; }
.at-rail .at-rail-brand .brand-logo, .at-rail .at-rail-brand .brand-mark { width: 30px; height: 30px; border-radius: 7px; }
.at-rail .at-rail-item, .at-rail .btn.at-rail-item { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--ink-2); border: 0; background: transparent; position: relative; padding: 0; text-decoration: none; }
.at-rail .at-rail-item:hover { background: var(--hover); color: var(--ink); }
.at-rail .at-rail-item.on { background: var(--sel); color: var(--ink); }
.at-rail .at-rail-ico { font-size: 17px; line-height: 1; display: inline-flex; }
.at-rail .at-rail-glyph { width: 20px; height: 20px; display: inline-block; background-color: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; }
.at-rail .at-rail-item { color: var(--ink-2); }
.at-rail .at-rail-item.on { color: var(--accent); }
[data-theme="dark"] .at-rail .at-rail-item { color: var(--ink-2); }
.at-rail .at-rail-badge { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 10px; padding: 0 4px; background: var(--accent); color: var(--accent-ink); }
.at-rail .grow { flex: 1; }
.at-rail .pop-anchor { display: flex; }
.at-rail .side-account-menu { width: 260px; }

/* Settings → Appearance → Interface */
.ui-mode-control { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---- Airtable mode: final push 2026-10-10 ---- */
/* Tokens: an AA-safe muted ink (#6b7280 on white = 4.8:1; --ink-3 was 3.2:1), Airtable blue, selection wash */
.at-base { --at-muted: #6b7280; --at-blue: #2d7ff9; --at-blue-soft: rgba(45, 127, 249, .12); --at-sel: #e9f1fe; --at-focus: 0 0 0 2px var(--at-blue); }
[data-theme="dark"] .at-base { --at-muted: #aeb7c4; --at-blue: #5aa2ff; --at-blue-soft: rgba(90, 162, 255, .18); --at-sel: #233a5e; }
/* Keyboard focus: one visible ring everywhere (band buttons use the band ink so the ring shows on any colour) */
.at-base :is(.at-tool, .at-tab, .at-view-pick, .at-view-create, .at-view-more, .at-add-field, .at-expand-btn, .at-sum-btn, .at-find-btn, .at-searchrow-close, .at-basetab):focus-visible { outline: 2px solid var(--at-blue); outline-offset: -2px; box-shadow: none; }
.at-basebar :is(.at-basename, .at-basebtn, .help-link):focus-visible, .at-tabstrip .at-tab:focus-visible { outline: 2px solid var(--at-base-ink); outline-offset: -2px; }
.at-base .in:focus-visible, .at-views-find .in:focus-visible { outline: 2px solid var(--at-blue); outline-offset: -1px; box-shadow: none; }
.at-views-find:focus-within { box-shadow: inset 0 -2px 0 var(--at-blue); border-bottom-color: transparent; }
.at-views-find .in:focus-visible { outline: none; }
.at-grid table.dt td.at-gutter input[type="checkbox"]:focus-visible, .at-grid table.dt th.at-gutter input[type="checkbox"]:focus-visible { outline: 2px solid var(--at-blue); outline-offset: 1px; opacity: 1; }
/* Base bar info popover */
.at-base-muted { color: var(--at-muted); font-size: 12px; margin: 0; }
.at-base-keyed { display: inline-flex; align-items: center; gap: 5px; }
.at-key-ico { display: inline-block; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: url(/static/icons/lucide/key-round.svg) center / contain no-repeat; mask: url(/static/icons/lucide/key-round.svg) center / contain no-repeat; flex: none; }
.at-basebar .btn.at-basename b { font-size: 17px; line-height: 22px; }
.at-basebar .at-basetabs .at-basetab { font-size: var(--at-font); cursor: default; }
/* Table-tab strip: ▾ All tables and + Add stay pinned at the right edge while the strip scrolls */
.at-tabstrip { scroll-behavior: smooth; scroll-padding-inline: 8px 160px; }
.at-tabstrip .at-tabstrip-end { position: sticky; right: 0; display: inline-flex; align-items: flex-end; flex: none; margin-left: auto; padding-left: 10px; background: var(--at-base-dark); box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .25); z-index: 130; /* above the grid's sticky cells so the ▾ menu is not painted under them */ }
.at-footer-cell:has(> .pop-anchor.open) { z-index: 130; }
.at-tabstrip .at-tab[tabindex="-1"]:focus { outline: none; }
.at-tabstrip .at-tab.on { box-shadow: inset 0 2px 0 var(--at-base); }
.at-tabstrip .at-tab-add { padding: 0 10px; }
.at-tables-menu { width: 320px; display: flex; flex-direction: column; min-height: 0; max-height: 60vh; }
.at-tables-menu .at-tables-find { width: 100%; margin-bottom: 6px; flex: none; }
.at-tables-menu .at-tables-list { overflow: auto; min-height: 0; }
.at-tables-menu .item .typeIcon { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.at-tables-menu .item.on { background: var(--at-sel); font-weight: 600; }
.at-tables-menu .at-tablecount { color: var(--at-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.at-tables-menu .at-tables-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--at-muted); padding: 10px 8px 4px; border-top: 1px solid var(--line-2); margin-top: 4px; }
/* Views sidebar */
.at-views .pop .item.danger { color: var(--danger); }
.at-views .pop .item.disabled { pointer-events: none; }
.at-views-skel { padding: 2px 4px; }
.at-views-hide.at-views-hide { color: var(--at-muted); }
.at-view-create .at-plus { color: var(--at-muted); }
.at-views-find .at-views-ico { color: var(--at-muted); }
.at-views-find .in[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* View bar: Search (filters every record) sits beside Find (highlights this page) */
.at-viewbar .at-tool.at-search .at-search-q { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.at-viewbar .at-tool.at-on.at-search { background: var(--at-blue-soft); border-color: transparent; color: var(--ink); }
.at-viewbar .at-tool .tool-label { display: inline; }
.at-viewbar .at-tool .tool-ico { font-size: 13px; line-height: 1; }
.at-viewbar .at-find input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.at-viewbar .at-find .at-find-count { color: var(--at-muted); }
.at-viewbar .at-find .btn.at-find-all { color: var(--at-blue); font-weight: 600; white-space: nowrap; }
.at-viewbar .at-find:focus-within { border-color: var(--at-blue); box-shadow: 0 0 0 1px var(--at-blue); }
.at-viewbar .at-tool.at-filter .tool-label, .at-viewbar .at-tool.at-group .tool-label, .at-viewbar .at-tool.at-set .tool-label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.at-searchrow { gap: 8px; padding: 5px 10px; }
.at-searchrow .search input.in { width: 300px; padding-left: 28px; }
.at-searchrow .search::before { top: 3px; }
.at-searchrow .at-searchrow-hint { color: var(--at-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.at-searchrow .spacer { flex: 1; }
.at-searchrow .btn.at-searchrow-close { border: 0; background: transparent; color: var(--ink-2); padding: 0 6px; min-height: 0; height: 22px; border-radius: var(--at-radius); }
.at-searchrow .btn.at-searchrow-close:hover { background: var(--hover); color: var(--ink); }
/* Narrow grids: inactive tools collapse to icons (as Airtable does) so Search / Find / ⋯ never scroll away */
.at-main { container-type: inline-size; container-name: at-main; }
@container at-main (max-width: 1000px) {
  .at-viewbar .at-tool:not(.at-on):not(.at-viewname) .tool-label, .at-viewbar .at-views-toggle > span, .at-viewbar .at-dirty .at-save-long { display: none; }
  .at-viewbar .at-tool:not(.at-on):not(.at-viewname) { padding: 0 7px; }
  .at-viewbar .at-tool .tool-ico { font-size: 14px; }
}
@container at-main (max-width: 1260px) {
  /* With unsaved view changes the Reset / Save pair needs ~180px more: collapse the inactive tools first */
  .at-viewbar:has(.at-dirty) .at-tool:not(.at-on):not(.at-viewname):not(.at-search) .tool-label, .at-viewbar:has(.at-dirty) .at-views-toggle > span { display: none; }
  .at-viewbar:has(.at-dirty) .at-tool:not(.at-on):not(.at-viewname) { padding: 0 7px; }
}
@container at-main (max-width: 940px) {
  .at-viewbar .at-tool.at-search .tool-label, .at-viewbar .at-tool.at-on .tool-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .at-viewbar .at-viewname { max-width: 160px; }
  .at-viewbar .at-dirty .btn.primary { font-size: 12px; padding: 0 7px; }
}
/* Popovers opened from the Airtable chrome: flatter radius, denser items, room for the filter rules */
.at-base .pop { border-radius: 6px; padding: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04); }
.at-base .pop .item { min-height: 28px; padding: 4px 8px; border-radius: var(--at-radius); font-size: var(--at-font); }
.at-base .pop hr { margin: 6px 0; }
.at-base .pop h3 { font-size: 13px; margin: 2px 0 8px; }
.at-base .pop .col-menu .item { min-height: 28px; }
.at-viewbar .pop { max-width: min(720px, calc(100vw - 32px)); }
.at-viewbar .pop > div[style*="width:640px"] { max-width: 100%; }
.at-base .pop .fieldlist .fi { padding: 3px 6px; border-radius: var(--at-radius); }
.at-base .pop .rule { margin-bottom: 4px; }
.at-base .pop .btn.sm { min-height: var(--at-ctl); padding: 2px 8px; border-radius: var(--at-radius); }
.at-base .pop .in, .at-base .pop select.in { min-height: var(--at-ctl); border-radius: var(--at-radius); }
/* Grid: columns default to an Airtable-like width (resized columns keep their inline width), hover/selection washes */
.at-grid table.dt th:not([style^="width:"]), .at-grid table.dt td.cell:not([style*="max-width"]) { max-width: 280px; }
.at-grid table.dt th:not(.sel):not(.add-field-col):hover { background: var(--hover); }
.at-grid table.dt th:hover .rs { background: var(--at-blue); width: 3px; }
.at-grid table.dt th .rs { transition: background .1s ease; }
.at-grid table.dt tbody tr.picked, .at-grid table.dt tbody tr.picked > td.sel, .at-grid table.dt tbody tr.picked > td.first { background: var(--at-sel); }
.at-grid table.dt input[type="checkbox"] { accent-color: var(--at-blue); }
.at-grid table.dt td.at-gutter .at-rownum { color: var(--at-muted); }
.at-grid table.dt td.at-gutter .at-expand-btn { color: var(--at-muted); }
.at-grid table.dt td.cell.dt-range { background: var(--at-blue-soft); outline: 0; }
.at-grid table.dt td.cell.focus, .at-grid table.dt td.cell.dt-focus { box-shadow: inset 0 0 0 2px var(--at-blue); outline: 0; }
.at-grid table.dt td.cell.editing { outline-color: var(--at-blue); }
.at-grid table.dt th .ty[data-ft="key"] { color: var(--at-muted); }
.at-grid table.dt th .sortind { color: var(--at-blue); }
.at-grid table.dt th.first.at-frozen .col-header-name { font-weight: 600; color: var(--ink); }
/* Scrollbars: thin, quiet */
.at-main .dt-wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.at-main .dt-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.at-main .dt-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--panel); }
.at-main .dt-wrap::-webkit-scrollbar-track { background: transparent; }
.at-views-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Group rows: field name small, value bold, count muted; the label stays visible while scrolling sideways */
.at-grid table.dt tr.grp td { background: var(--grp); overflow: visible; height: var(--at-row); }
.at-grid table.dt tr.grp .grp-toggle { position: sticky; left: 0; width: max-content; max-width: 100%; height: var(--at-row); gap: 8px; font-size: var(--at-font); }
.at-grid table.dt tr.grp .grp-toggle:hover { color: inherit; background: var(--hover); }
.at-grid .at-grp-field { font-size: 11px; font-weight: 500; color: var(--at-muted); text-transform: uppercase; letter-spacing: .03em; }
.at-grid .at-grp-value { font-weight: 600; color: var(--ink); }
.at-grid .at-grp-value i { font-style: normal; color: var(--at-muted); font-weight: 500; }
.at-grid .at-grp-count { font-weight: 400; color: var(--at-muted); font-size: 12px; }
.at-grid table.dt tr.grp.grp-collapsed td { border-bottom: 1px solid var(--line); }
/* Empty state + skeleton + loading bar */
.at-empty { padding: 56px 24px; text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: 6px; position: sticky; left: 0; }
.at-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.at-empty-sub { font-size: 13px; color: var(--at-muted); max-width: 420px; }
.at-empty-actions { justify-content: center; gap: 8px; margin-top: 10px; }
.at-skeleton { padding: 0; }
.at-skeleton .at-skel-row { display: flex; align-items: center; gap: 12px; height: var(--at-row, 32px); padding: 0 8px; border-bottom: 1px solid var(--line-2); }
.at-skeleton .at-skel-num { width: 22px; height: 10px; border-radius: 3px; background: var(--line-2); margin-left: 8px; margin-right: 24px; flex: none; }
.at-skeleton .at-skel-cell, .at-views-skel .at-skel-cell, .at-viewbar-skel .at-skel-tool { display: inline-block; height: 10px; border-radius: 3px; flex: none; background: linear-gradient(90deg, var(--line-2) 0%, var(--hover) 50%, var(--line-2) 100%); background-size: 200% 100%; animation: at-shimmer 1.4s ease-in-out infinite; }
.at-views-skel .at-skel-row { height: 30px; display: flex; align-items: center; padding: 0 8px; }
.at-viewbar-skel .at-skel-tool { height: 14px; margin-right: 10px; }
.at-grid-booting { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.at-grid.at-grid-booting .at-skeleton { flex: 1; }
.at-main .dt-wrap .at-loading-bar { position: sticky; top: 0; left: 0; height: 0; z-index: 6; overflow: visible; }
.at-main .dt-wrap .at-loading-bar::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 40%; background: var(--at-blue); border-radius: 2px; animation: at-slide 1.1s ease-in-out infinite; }
@keyframes at-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes at-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .at-skeleton .at-skel-cell, .at-views-skel .at-skel-cell, .at-viewbar-skel .at-skel-tool, .at-main .dt-wrap .at-loading-bar::before { animation: none; } }
/* Footer */
.at-footer-cell .at-sum-label { color: var(--at-muted); }
.at-footer-cell .btn.at-sum-btn { color: var(--at-muted); }
.at-footer-cell .at-sum-hint { color: var(--at-muted); }
.at-footer-cell .btn.at-sum-btn:focus-visible { outline: 2px solid var(--at-blue); outline-offset: -2px; }
.at-recordbar .at-count { font-variant-numeric: tabular-nums; }
.at-recordbar .pager-nav button.pg:hover { background: var(--hover); }
.at-recordbar .pager-nav button.pg:focus-visible, .at-recordbar .pager-size:focus-visible { outline: 2px solid var(--at-blue); outline-offset: -2px; }
.at-recordbar .pager-nav button.pg:disabled { opacity: .4; cursor: default; }
.at-recordbar .pager-size { border-radius: var(--at-radius); }
/* Floating bulk pill: one line, compact buttons, scrolls sideways if it ever outgrows the viewport; hidden under the record modal */
.bulkbar[data-chrome="airtable"] { flex-wrap: nowrap; justify-content: safe center; max-width: calc(100vw - 96px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 6px; padding: 6px 8px 6px 14px; }
.bulkbar[data-chrome="airtable"]::-webkit-scrollbar { display: none; }
.bulkbar[data-chrome="airtable"] .btn { flex: none; padding: 3px 9px; min-height: var(--at-ctl, 26px); white-space: nowrap; }
.bulkbar[data-chrome="airtable"] .bulkbar-count { flex: none; margin-right: 4px; }
.bulkbar[data-chrome="airtable"] .btn:focus-visible { outline: 2px solid #2d7ff9; outline-offset: 1px; }
.at-grid.dt-root:has(> .at-expand-scrim) > .bulkbar[data-chrome="airtable"] { display: none; }
.at-grid.dt-root:has(> .at-expand-scrim) > .select-all-banner { visibility: hidden; }
/* Expanded record modal: label column fits "Genes & Genotypes ⟲" on one line */
.at-expand .kv { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
.at-expand .kv > div.k { flex-wrap: nowrap; font-size: var(--at-font); min-width: 0; }
.at-expand .kv > div.k > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-expand-head .btn.sm { min-height: 26px; border-radius: 3px; font-size: 13px; }
.at-expand-head .btn.ghost.sm:disabled { opacity: .35; }
.at-expand-head .muted.small { color: var(--at-muted); font-variant-numeric: tabular-nums; }
.at-expand .record-drawer-page.split .head h1 { font-weight: 650; }
.at-expand :is(.btn, .in):focus-visible { outline: 2px solid var(--at-blue, #2d7ff9); outline-offset: 1px; }
/* Select-all banner sits flat between the view bar and the grid (no floating CLIO card) */
.at-grid.dt-root > .select-all-banner { margin: 0; border-radius: 0; border-width: 0 0 1px; font-size: 12px; padding: 5px 12px; background: var(--at-sel); color: var(--ink); }
.at-grid.dt-root > .select-all-banner .linkish { color: var(--at-blue); }
/* View name in the bar truncates instead of pushing the tools */
.at-viewbar .btn.at-viewname { display: inline-flex; align-items: center; gap: 4px; }
.at-viewbar .at-viewname .at-viewname-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Radii: 3px controls, 6px panels, 6px dialogs (no 8–14px CLIO rounding inside the Airtable chrome) */
.at-expand { border-radius: 6px; }
.at-rail .at-rail-item, .at-rail .btn.at-rail-item { border-radius: 6px; }
.at-rail .at-rail-brand .brand-logo, .at-rail .at-rail-brand .brand-mark { border-radius: 6px; }
.at-base .pop .view-list .view-row, .at-base .pop .fieldlist .fi { border-radius: var(--at-radius); }
/* Icon rail */
.at-rail .at-rail-item:focus-visible { outline: 2px solid #2d7ff9; outline-offset: -2px; }
/* Entities index in Airtable mode: tighter cards and a hairline divider rhythm */
[data-ui-mode="airtable"] .entity-list .card.entity-card { border-radius: 6px; }
[data-ui-mode="airtable"] .entity-card .entity-card-title { font-size: 15px; }
/* Dark theme pairs for the rules above */
[data-theme="dark"] .at-grid table.dt th:not(.sel):not(.add-field-col):hover { background: var(--hover); }
[data-theme="dark"] .at-grid table.dt tr.grp td { background: var(--grp); }
[data-theme="dark"] .at-main .dt-wrap::-webkit-scrollbar-thumb { border-color: var(--bg); }
[data-theme="dark"] .at-tabstrip .at-tabstrip-end { box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .5); }
[data-theme="dark"] .at-base .pop { box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme="dark"] .at-viewbar .at-tool.at-on.at-search { color: var(--ink); }
[data-theme="dark"] .at-empty-title { color: var(--ink); }
/* google-btn stamp */
/* sync host */
/* logo-theme 1791767084 */