/* "Modern" page style (Settings > Appearance), modeled on Attio's CRM: light grey sidebar, white page,
   14px medium type, hairline borders, outline buttons with a soft shadow, one blue accent. Only applies
   when the database's style is "modern" (class theme-attio on <html>). Values measured on the real app,
   light and dark. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root.theme-attio {
  --background: 0 0% 100%; --foreground: 210 6% 7%; --card: 0 0% 100%; --muted: 180 4% 97%;
  --muted-foreground: 0 0% 37%; --border: 220 9% 94%; --input: 225 9% 91%;
  --primary: 219 87% 55%; --primary-foreground: 0 0% 100%; --hover: 180 4% 97%; --radius: 8px; --sidebar: 0 0% 98.4%;
  --at-text: #101112; --at-2: rgba(0, 0, 0, .63); --at-3: rgba(0, 0, 0, .5); --at-line: #eeeff1; --at-ring: #e6e7ea;
  --at-rail: #fbfbfb; --at-page: #fff; --at-active: rgba(0, 0, 0, .04); --at-hover: #f6f7f7; --at-faint: rgba(0, 0, 0, .02);
  --at-btn: #fff; --at-btn-shadow: 0 0 2px rgba(28, 40, 64, .18), 0 1px 3px rgba(0, 0, 0, .04);
  --at-pop: #fff; --at-pop-shadow: 0 0 0 1px rgba(28, 40, 64, .04), 0 4px 8px -4px rgba(28, 40, 64, .12), 0 4px 12px -2px rgba(24, 41, 75, .16);
  --at-badge: rgba(0, 0, 0, .04); --at-badge-text: #505155; --at-link: #266df0; --at-tab: #fbfbfb; --at-mix: #000;
}
:root.theme-attio.dark {
  --background: 210 6% 7%; --foreground: 210 7% 95%; --card: 210 6% 7%; --muted: 220 5% 10%;
  --muted-foreground: 0 0% 60%; --border: 225 7% 11.5%; --input: 220 4% 13.5%;
  --primary: 219 87% 55%; --primary-foreground: 0 0% 100%; --hover: 220 5% 10%; --sidebar: 210 8% 4.5%;
  --at-text: #f1f2f3; --at-2: rgba(255, 255, 255, .6); --at-3: rgba(255, 255, 255, .45); --at-line: #1b1c1f; --at-ring: #212224;
  --at-rail: #0b0c0d; --at-page: #101112; --at-active: rgba(255, 255, 255, .05); --at-hover: #17181a; --at-faint: rgba(255, 255, 255, .04);
  --at-btn: #101112; --at-btn-shadow: inset 0 0 0 1px #212224, 0 0 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .12);
  --at-pop: #17181a; --at-pop-shadow: inset 0 0 0 1px #212224, 0 8px 28px -6px rgba(0, 0, 0, .48), 0 18px 88px -4px rgba(0, 0, 0, .64);
  --at-badge: rgba(255, 255, 255, .05); --at-badge-text: #d9dade; --at-link: #4e8cfc; --at-tab: #17181a; --at-mix: #fff;
}
:root.theme-attio body { font: 500 14px/20px Inter, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.005em; background: var(--at-page); color: var(--at-text); -webkit-font-smoothing: antialiased; }
.theme-attio input, .theme-attio select, .theme-attio textarea, .theme-attio button { font-family: inherit; letter-spacing: inherit; }

/* ---------------------------------------------------------------- layout */
.theme-attio .app.sf { grid-template-columns: 274px 1fr; }
.theme-attio .ghead, .theme-attio .side.appnav { display: none; }
.theme-attio .sfwrap { background: var(--at-page); }
.theme-attio .main { padding: 0; }

/* ---------------------------------------------------------------- sidebar */
.theme-attio .rail { background: var(--at-rail); border-right: 1px solid var(--at-line); padding: 0 8px 8px; justify-content: flex-start; align-items: stretch; gap: 0; overflow-y: auto; }
.theme-attio .rail .grow { flex: 1; min-height: 12px; }
.theme-attio .at-brand { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 -8px; padding: 0 14px; border-bottom: 1px solid var(--at-line); font-weight: 600; font-size: 16px; color: var(--at-text); min-width: 0; }
.theme-attio .at-brand .logo-img, .theme-attio .at-brand .logo { width: 24px; height: 24px; border-radius: 6px; flex: none; object-fit: cover; }
.theme-attio .at-brand .logo { background: var(--at-text); color: var(--at-page); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.theme-attio .at-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .at-search { display: flex; align-items: center; gap: 6px; height: 28px; margin: 10px 4px 10px; padding: 0 4px 0 6px; border-radius: 8px; background: var(--at-btn); box-shadow: var(--at-btn-shadow); color: var(--at-3); }
.theme-attio .at-search input { border: none; outline: none; background: none; flex: 1; min-width: 0; font: inherit; color: var(--at-text); padding: 0; }
.theme-attio .at-search input::placeholder { color: var(--at-text); }
.theme-attio .at-search kbd { font: 500 10px/1 Inter, sans-serif; color: var(--at-3); padding: 3px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .at-search:focus-within { box-shadow: inset 0 0 0 1px var(--at-link), 0 0 0 3px color-mix(in srgb, var(--at-link) 18%, transparent); }
.theme-attio .at-group { display: flex; flex-direction: column; gap: 1px; }
.theme-attio .at-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 4px 0 8px; border: none; border-radius: 9px; background: none; color: var(--at-text); font: inherit; cursor: pointer; text-align: start; }
.theme-attio .at-item > svg { color: var(--at-2); flex: none; }
.theme-attio .at-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .at-item:hover { background: var(--at-active); }
.theme-attio .at-item.on { background: var(--at-active); }
.theme-attio .at-item.on > svg { color: var(--at-text); }
.theme-attio .at-tile { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; color: #fff; flex: none; }
.theme-attio .at-tile svg { stroke-width: 2.2; }
.theme-attio .at-section { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 12px; padding: 0 4px 0 8px; font-size: 12px; line-height: 16px; color: var(--at-2); }
.theme-attio .at-section > span { display: flex; align-items: center; gap: 6px; }
.theme-attio .at-section button { display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--at-2); cursor: pointer; border-radius: 6px; width: 22px; height: 22px; }
.theme-attio .at-section button:hover { background: var(--at-active); color: var(--at-text); }
.theme-attio .at-extra { border-top: 1px solid var(--at-line); margin: 0 -8px; padding: 8px 8px 0; }
.theme-attio .at-account { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 6px; margin: 8px -8px -8px; padding-inline: 14px 10px; border-top: 1px solid var(--at-line); }
.theme-attio .at-account .avatar { width: 20px; height: 20px; margin: 0; font-size: 10px; font-weight: 600; border-radius: 50%; background: #864aff; color: #fff; }
.theme-attio .at-me { flex: 1; min-width: 0; font-size: 14px; color: var(--at-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .ghi { width: 28px; height: 28px; border-radius: 8px; color: var(--at-2); }
.theme-attio .ghi:hover { background: var(--at-active); color: var(--at-text); }

/* ---------------------------------------------------------------- header rows */
.theme-attio .top.at-head { display: flex; align-items: center; gap: 8px; height: 49px; padding: 0 12px; border-bottom: 1px solid var(--at-line); background: var(--at-page); }
.theme-attio .at-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.theme-attio .at-kicker { color: var(--at-2); white-space: nowrap; }
.theme-attio .at-sep { color: var(--at-3); }
.theme-attio .at-crumb h2 { margin: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--at-text); }
.theme-attio .at-actions { display: flex; align-items: center; gap: 4px; }
.theme-attio .at-meta { padding: 8px 12px 0; margin: 0; font-size: 12px; color: var(--at-2); min-height: 0; }
.theme-attio .at-meta:empty, .theme-attio .at-bar ~ .at-meta { display: none; }
.theme-attio .top.at-head + .at-meta { display: none; }
.theme-attio .at-bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--at-line); }
.theme-attio .at-sub { display: flex; align-items: center; gap: 8px; height: 49px; padding: 0 12px; border-bottom: 1px solid var(--at-line); }
.theme-attio .at-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: none; border-radius: 8px; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-ring); color: var(--at-text); font: inherit; cursor: pointer; white-space: nowrap; }
.theme-attio .at-chip svg { color: var(--at-2); }
.theme-attio .at-chip:hover { background: var(--at-hover); }
.theme-attio .at-dim { color: var(--at-2); }
.theme-attio .at-filter { background: var(--at-faint); box-shadow: none; color: var(--at-3); }
.theme-attio .at-filter svg { color: var(--at-3); }
.theme-attio .at-filter.on { color: var(--at-link); background: color-mix(in srgb, var(--at-link) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-link) 25%, transparent); }
.theme-attio .at-filter.on svg { color: var(--at-link); }
.theme-attio .at-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 6px; background: var(--at-badge); box-shadow: inset 0 0 0 1px var(--at-line); color: var(--at-badge-text); font-size: 12px; line-height: 16px; }
.theme-attio .at-find { display: flex; align-items: center; gap: 6px; height: 28px; width: 220px; padding: 0 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--at-ring); color: var(--at-3); }
.theme-attio .at-find input { border: none; outline: none; background: none; flex: 1; min-width: 0; font: inherit; color: var(--at-text); padding: 0; }
.theme-attio .at-find input::placeholder { color: var(--at-3); }
.theme-attio .at-find:focus-within { box-shadow: inset 0 0 0 1px var(--at-link); }
.theme-attio .at-modes { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--at-hover); box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .at-modes button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 8px; background: none; color: var(--at-3); cursor: pointer; }
.theme-attio .at-modes button:hover { color: var(--at-text); }
.theme-attio .at-modes button.on { background: var(--at-page); color: var(--at-text); box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--at-line); }

/* ---------------------------------------------------------------- buttons */
.theme-attio .btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 4px 8px 4px 6px; border-radius: 8px; border: none; background: var(--at-btn); box-shadow: var(--at-btn-shadow); color: var(--at-text); font: 500 14px/20px Inter, -apple-system, sans-serif; letter-spacing: -.005em; white-space: nowrap; }
.theme-attio .btn > svg { flex: none; }
.theme-attio .btn > svg:last-child:not(:first-child) { color: var(--at-2); margin-inline-start: -2px; }
.theme-attio .btn:hover { background: var(--at-hover); }
.theme-attio .btn:disabled { opacity: .5; }
.theme-attio .btn.primary, .theme-attio .btn.sfbtn.primary { background: #266df0; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 4px -2px rgba(38, 109, 240, .12), 0 3px 6px -2px rgba(38, 109, 240, .08); }
.theme-attio .btn.primary:hover { background: #1f5fd8; }
.theme-attio .btn.ghost { box-shadow: none; background: transparent; color: var(--at-2); }
.theme-attio .btn.ghost:hover { background: var(--at-active); color: var(--at-text); }
.theme-attio .btn.danger { color: #eb3b3b; }
.theme-attio .btn.icon { padding: 0; width: 28px; justify-content: center; }
.theme-attio .at-actions .btn, .theme-attio .sf-actions .btn { margin: 0 !important; }
.theme-attio .input { height: 32px; border-radius: 8px; border: none; box-shadow: inset 0 0 0 1px var(--at-ring); background: var(--at-page); color: var(--at-text); font: inherit; }
.theme-attio textarea.input { height: auto; }
.theme-attio .input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--at-link), 0 0 0 3px color-mix(in srgb, var(--at-link) 15%, transparent); }
.theme-attio .toolbar { background: var(--at-page) !important; border: none; border-bottom: 1px solid var(--at-line); padding: 10px 12px; gap: 8px; font-size: 14px; color: var(--at-2); }
.theme-attio .seg { border-radius: 10px; overflow: hidden; border: none; padding: 2px; gap: 2px; background: var(--at-hover); box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .seg button { height: 24px; font: inherit; padding: 0 10px; border: none; border-radius: 8px; background: none; color: var(--at-3); }
.theme-attio .seg button.on, .theme-attio .seg button[aria-pressed="true"] { background: var(--at-page); color: var(--at-text); box-shadow: inset 0 0 0 1px var(--at-line); }

/* ---------------------------------------------------------------- table */
.theme-attio .grid { font-size: 14px; border-collapse: separate; border-spacing: 0; }
.theme-attio .grid th, .theme-attio .grid th.num { background: var(--at-page) !important; color: var(--at-2) !important; font-weight: 500; font-size: 14px; height: 40px; border-color: var(--at-line); border-top: none; }
.theme-attio .grid th .h { gap: 8px; padding: 0 12px; height: 40px; }
.theme-attio .grid th .h .muted.small { order: -1; color: var(--at-3); font-size: 13px; width: 14px; text-align: center; }
.theme-attio .grid th .h:hover { color: var(--at-text); }
.theme-attio .grid th .bar { display: none; }
.theme-attio .grid th .h::after { display: none; }
.theme-attio .grid th .h .muted.small { display: inline-block; }
.theme-attio .grid th, .theme-attio .grid td { border-right: 1px solid var(--at-line); vertical-align: middle; }
.theme-attio .grid th.num, .theme-attio .grid td.num { border-right: none; }
.theme-attio .grid tbody td:nth-child(2) .cell { color: var(--at-text); }
.theme-attio .grid tbody td:nth-child(2) .cell:hover { text-decoration: none; }
.theme-attio .lane-head { position: static; }
.theme-attio .lane-head::after { display: none; }
.theme-attio .grid td { height: 36px; border-color: var(--at-line); background: var(--at-page); }
.theme-attio .grid td .cell { min-height: 35px; padding: 8px 12px 7px; color: var(--at-text); max-width: 320px; }
.theme-attio .grid td .cell.editable:hover { background: var(--at-faint); }
.theme-attio .grid tr:hover td, .theme-attio .grid tr:hover td.num { background: var(--at-hover) !important; }
.theme-attio .grid tr:hover td .cell.editable:hover { background: transparent; }
.theme-attio .grid td.num, .theme-attio .grid th.num { width: 56px; min-width: 56px; background: var(--at-page); color: var(--at-3); font-size: 12px; }
.theme-attio .grid td.num button { height: 35px; font-size: 12px; color: var(--at-3); }
.theme-attio .grid td.num button:hover { color: var(--at-link); }
.theme-attio .grid td.num .sel, .theme-attio input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0 2px 0 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--at-mix) 12%, transparent); background: var(--at-page); vertical-align: middle; cursor: pointer; display: inline-grid; place-content: center; }
.theme-attio input[type="checkbox"]:checked { background: #266df0; border-color: #266df0; }
.theme-attio input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.theme-attio .grid td:nth-child(2) .cell { font-weight: 500; }
.theme-attio .grid a, .theme-attio .lnk { color: var(--at-link); text-decoration: none; }
.theme-attio .grid a:hover { text-decoration: underline; }
.theme-attio .grid th.add-col button { color: var(--at-3); font-size: 16px; }
.theme-attio .check { border-radius: 5px; border-color: color-mix(in srgb, var(--at-mix) 15%, transparent); }
.theme-attio .check.on { background: #266df0; border-color: #266df0; color: #fff; }
.theme-attio .bar-pct { background: var(--at-line); border-radius: 99px; }
.theme-attio .bar-pct i { background: #266df0; border-radius: 99px; }
.theme-attio .pager { height: 37px; padding: 0 12px; gap: 8px; border-top: 1px solid var(--at-line); font-size: 14px; color: var(--at-2); background: var(--at-page); }
.theme-attio .pager .btn.ghost { width: 24px; height: 24px; padding: 0; justify-content: center; }
.theme-attio .empty { color: var(--at-2); }

/* tags: tinted fill, hairline ring, darker text (lighter in dark mode) */
.theme-attio .chip { height: 22px; padding: 0 6px; border-radius: 7px; font-size: 14px; font-weight: 500; background: var(--at-badge); color: var(--at-text); box-shadow: inset 0 0 0 1px var(--at-line); margin: 0 4px 0 0; }
.theme-attio .chip[style*="--c"] { background: color-mix(in srgb, var(--c) 16%, var(--at-page)) !important; color: color-mix(in srgb, var(--c) 62%, var(--at-mix)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, var(--at-page)); }
.theme-attio.dark .chip[style*="--c"] { background: color-mix(in srgb, var(--c) 18%, var(--at-page)) !important; color: color-mix(in srgb, var(--c) 70%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, var(--at-page)); }

/* ---------------------------------------------------------------- popovers, dialogs, drawers */
.theme-attio .pop { background: var(--at-pop); border: none; border-radius: 12px; padding: 4px; box-shadow: var(--at-pop-shadow); min-width: 220px; }
.theme-attio .pop button { height: 32px; padding: 6px 8px; gap: 8px; border-radius: 8px; font: inherit; color: var(--at-text); }
.theme-attio .pop button svg { color: var(--at-2); flex: none; }
.theme-attio .pop button:hover { background: var(--at-hover); }
.theme-attio.dark .pop button:hover { background: rgba(255, 255, 255, .05); }
.theme-attio .pop hr { border-top-color: var(--at-line); margin: 4px -4px; }
.theme-attio .overlay { background: rgba(0, 0, 0, .28); }
.theme-attio .dialog, .theme-attio .drawer { background: var(--at-pop); border: none; border-radius: 12px; box-shadow: var(--at-pop-shadow); color: var(--at-text); }
.theme-attio .drawer { border-radius: 12px 0 0 12px; }
.theme-attio .dialog .head, .theme-attio .drawer .head { font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--at-line); }
.theme-attio .dialog .foot, .theme-attio .drawer .foot { border-top: 1px solid var(--at-line); }
.theme-attio .field > span, .theme-attio label > span { font-size: 12px; color: var(--at-2); font-weight: 500; }
.theme-attio .tabs { border-bottom: 1px solid var(--at-line); padding: 8px 12px; gap: 4px; display: flex; }
.theme-attio .tabs button { height: 28px; font: inherit; font-weight: 500; padding: 4px 8px; margin: 0; border: none; border-radius: 8px; color: var(--at-2); box-shadow: none; white-space: nowrap; }
.theme-attio .tabs button.on { color: var(--at-text); background: var(--at-tab); box-shadow: inset 0 0 0 1px var(--at-line); border: none; font-weight: 500; }
.theme-attio .tabs { overflow-x: auto; }
.theme-attio .content { background: var(--at-page); border: none; }

/* cards, lists, settings */
.theme-attio .card { border-radius: 12px; border: none; box-shadow: inset 0 0 0 1px var(--at-line); background: var(--at-page); }
.theme-attio .card h3, .theme-attio .card .title { font-size: 14px; font-weight: 600; }
.theme-attio .list-item { border-radius: 12px; border: none; box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .content.pad { max-width: 816px; margin: 0 auto; padding: 32px 24px; width: 100%; box-sizing: border-box; }
.theme-attio .content.pad h2, .theme-attio .content.pad > h3:first-child { font-size: 24px; font-weight: 600; line-height: 28px; }
.theme-attio .muted { color: var(--at-2); }
.theme-attio .toast { border-radius: 10px; box-shadow: var(--at-pop-shadow); }

/* ---------------------------------------------------------------- kanban, calendar, gallery, dashboard */
.theme-attio .kanban { gap: 10px; padding: 12px; }
.theme-attio .lane { flex: 0 0 266px; border: none; border-radius: 12px; background: linear-gradient(var(--at-rail), color-mix(in srgb, var(--at-rail) 0%, transparent) 260px); }
.theme-attio.dark .lane { background: linear-gradient(#141517, rgba(20, 21, 23, 0) 260px); }
.theme-attio .lane.drop { background: color-mix(in srgb, var(--at-link) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-link) 35%, transparent); }
.theme-attio .lane-head { gap: 8px; height: 36px; padding: 8px 8px 8px 10px; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--at-text); }
.theme-attio .lane-head .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--at-3); }
.theme-attio .lane-head .dot[style*="background:#"], .theme-attio .lane-head .dot[style*="background:r"] { box-shadow: none; }
.theme-attio .lane-head .muted.small { margin-inline-start: 0 !important; display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 6px; background: var(--at-badge); box-shadow: inset 0 0 0 1px var(--at-line); color: var(--at-badge-text); font-size: 12px; font-weight: 500; }
.theme-attio .lane-body { padding: 0 8px 8px; gap: 8px; }
.theme-attio .kcard { padding: 10px 12px; border: none; border-radius: 12px; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-line), 0 1px 2px rgba(0, 0, 0, .04); font-size: 14px; }
.theme-attio .kcard:hover { box-shadow: inset 0 0 0 1px var(--at-ring), 0 4px 10px -4px rgba(28, 40, 64, .14); }
.theme-attio .kcard > div:first-child { font-weight: 600 !important; margin-bottom: 4px; }
.theme-attio .kcard .muted, .theme-attio .kcard span.muted { color: var(--at-2); }
.theme-attio #gridWrap > .toolbar { border: none; padding: 12px 12px 0; }
.theme-attio .widget { border-radius: 12px; border: none; box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .cal-d { border-color: var(--at-line); }

/* ---------------------------------------------------------------- sign-in */
.theme-attio .login, :root.theme-attio .login { background: var(--at-rail) !important; }
.theme-attio .login .card { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--at-line), 0 8px 28px -6px rgba(28, 40, 64, .12); }
.theme-attio .login .btn.primary { width: 100%; justify-content: center; height: 36px; }


/* ---------------------------------------------------------------- pages: title, empty states, lists */
.theme-attio .at-page { max-width: 768px; margin: 0 auto; padding: 40px 24px 72px; box-sizing: border-box; width: 100%; }
.theme-attio .at-page-wide { max-width: 1080px; }
.theme-attio .at-page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--at-line); }
.theme-attio .at-page-head h1 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--at-text); }
.theme-attio .at-page-head p { margin: 6px 0 0; color: var(--at-2); }
.theme-attio .at-page .card { max-width: none !important; padding: 20px; }
.theme-attio .at-page .card + .card, .theme-attio .at-page details.card { margin-top: 12px; }
.theme-attio .at-page .card > b:first-child { font-size: 16px; font-weight: 600; }
.theme-attio .at-page .list-item { padding: 12px 14px; margin-top: 8px; }
.theme-attio .at-sec-title { margin: 24px 0 8px; font-size: 12px; line-height: 16px; color: var(--at-2); }
.theme-attio .at-page-head + * .at-sec-title:first-child, .theme-attio #tBody > .at-sec-title:first-child { margin-top: 0; }
.theme-attio .at-list { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--at-line); overflow: hidden; }
.theme-attio .at-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--at-line); }
.theme-attio .at-row:last-child { border-bottom: none; }
.theme-attio .at-row:hover { background: var(--at-hover); }
.theme-attio .at-row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .at-row-meta { font-size: 13px; color: var(--at-2); }
.theme-attio .at-tile-lg { width: 28px; height: 28px; border-radius: 8px; }
.theme-attio .at-tile-lg svg { width: 14px; height: 14px; }
.theme-attio .at-muted-note { margin: 8px 0; font-size: 13px; color: var(--at-3); }
.theme-attio .at-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 16px; }
.theme-attio .at-empty-art { position: relative; width: 136px; height: 136px; display: grid; place-items: center; }
.theme-attio .at-empty-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--at-ring) 1.1px, transparent 1.3px); background-size: 9px 9px; -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.theme-attio .at-empty-art span { position: relative; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--at-page); color: var(--at-2); box-shadow: inset 0 0 0 1px var(--at-ring), 0 6px 16px -6px rgba(28, 40, 64, .18); }
.theme-attio .at-empty h3 { margin: 12px 0 6px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--at-text); }
.theme-attio .at-empty p { margin: 0; max-width: 360px; color: var(--at-2); }
.theme-attio .at-empty-actions { display: flex; gap: 8px; margin-top: 18px; }
.theme-attio .at-select { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--at-ring); color: var(--at-2); cursor: pointer; }
.theme-attio .at-select select { appearance: none; -webkit-appearance: none; border: none; outline: none; background: none; font: inherit; color: var(--at-text); padding: 0 2px; cursor: pointer; }
.theme-attio .at-select select option { color: #101112; }

/* history: activity feed grouped by day */
.theme-attio .at-day { margin: 24px 0 8px; font-size: 12px; line-height: 16px; color: var(--at-2); text-transform: capitalize; }
.theme-attio #hList > .at-day:first-child { margin-top: 0; }
.theme-attio .at-feed { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--at-line); overflow: hidden; }
.theme-attio .at-feed-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--at-line); }
.theme-attio .at-feed-item:last-child { border-bottom: none; }
.theme-attio .at-feed-item:hover { background: var(--at-hover); }
.theme-attio .at-feed-item .btn.icon { width: 24px; height: 24px; opacity: 0; }
.theme-attio .at-feed-item:hover .btn.icon, .theme-attio .at-feed-item .btn.icon:focus { opacity: 1; }
.theme-attio .at-feed-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--at-badge); box-shadow: inset 0 0 0 1px var(--at-line); color: var(--at-2); }
.theme-attio .at-feed-ico.green { color: #02ad6e; background: color-mix(in srgb, #02ad6e 10%, var(--at-page)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #02ad6e 22%, var(--at-page)); }
.theme-attio .at-feed-ico.red { color: #eb3b3b; background: color-mix(in srgb, #eb3b3b 9%, var(--at-page)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #eb3b3b 20%, var(--at-page)); }
.theme-attio .at-feed-ico.blue { color: var(--at-link); background: color-mix(in srgb, var(--at-link) 9%, var(--at-page)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-link) 20%, var(--at-page)); }
.theme-attio .at-feed-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px; }
.theme-attio .at-ref { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--at-badge); box-shadow: inset 0 0 0 1px var(--at-line); font-size: 13px; }
.theme-attio .at-time { font-size: 13px; color: var(--at-3); white-space: nowrap; }
.theme-attio .at-change { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.theme-attio .at-change svg { transform: rotate(-90deg); color: var(--at-3); }
.theme-attio .at-k { color: var(--at-2); min-width: 90px; }
.theme-attio .at-old { padding: 1px 6px; border-radius: 6px; background: var(--at-faint); color: var(--at-3); text-decoration: line-through; }
.theme-attio .at-new { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, #02ad6e 12%, var(--at-page)); color: color-mix(in srgb, #02ad6e 70%, var(--at-mix)); }
.theme-attio .at-kvs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.theme-attio .at-kv { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border-radius: 7px; background: var(--at-faint); box-shadow: inset 0 0 0 1px var(--at-line); font-size: 13px; }
.theme-attio .at-kv i { font-style: normal; color: var(--at-3); margin-inline-end: 6px; }

/* queries: saved list + editor card + results */
.theme-attio .at-q { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.theme-attio .at-q-side .at-sec-title { margin-top: 0; }
.theme-attio .at-q-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 8px; border-radius: 8px; cursor: pointer; color: var(--at-text); }
.theme-attio .at-q-item > svg { color: var(--at-2); flex: none; }
.theme-attio .at-q-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .at-q-item:hover { background: var(--at-active); }
.theme-attio .at-q-item .btn.icon { width: 22px; height: 22px; opacity: 0; }
.theme-attio .at-q-item:hover .btn.icon { opacity: 1; }
.theme-attio .at-editor { border-radius: 12px; overflow: hidden; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-ring), 0 1px 3px rgba(0, 0, 0, .04); }
.theme-attio .at-editor:focus-within { box-shadow: inset 0 0 0 1px var(--at-link), 0 0 0 3px color-mix(in srgb, var(--at-link) 14%, transparent); }
.theme-attio .at-editor-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--at-line); background: var(--at-rail); }
.theme-attio .at-editor-tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--at-2); }
.theme-attio .at-kbd { font-size: 12px; color: var(--at-3); padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--at-line); }
.theme-attio .at-editor textarea { display: block; width: 100%; min-height: 168px; box-sizing: border-box; border: none; outline: none; resize: vertical; padding: 14px 16px; background: var(--at-page); color: var(--at-text); font: 400 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.theme-attio .at-res-count { margin: 16px 0 8px; }
.theme-attio .at-res { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--at-line); overflow: auto; max-height: 60vh; }
.theme-attio .at-res .grid { min-width: 100%; }
.theme-attio .at-res .grid tr:last-child td { border-bottom: none; }
.theme-attio .at-res .grid th:last-child, .theme-attio .at-res .grid td:last-child { border-right: none; }

/* home: greeting, table shortcuts, widgets */
.theme-attio .at-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 24px; }
.theme-attio .at-tcard { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px; border: none; border-radius: 12px; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-line), 0 1px 2px rgba(0, 0, 0, .03); font: inherit; color: var(--at-text); cursor: pointer; text-align: start; transition: box-shadow .15s, transform .15s; }
.theme-attio .at-tcard:hover { box-shadow: inset 0 0 0 1px var(--at-ring), 0 6px 16px -8px rgba(28, 40, 64, .2); transform: translateY(-1px); }
.theme-attio .at-tcard .at-tile { width: 28px; height: 28px; border-radius: 8px; }
.theme-attio .at-tcard .at-tile svg { width: 15px; height: 15px; }
.theme-attio .at-tcard .at-dim { font-size: 13px; }
.theme-attio .widgets { gap: 12px; }
.theme-attio .widget { padding: 16px; background: var(--at-page); }
.theme-attio .widget > .row b { font-size: 13px; font-weight: 500; color: var(--at-2); }
.theme-attio .widget .kpi { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; color: var(--at-text); margin-top: 8px; }
.theme-attio .at-page > .widgets > .at-empty { grid-column: 1 / -1; }

/* assistant: chat thread + composer */
.theme-attio .at-chat-wrap { overflow-y: auto; }
.theme-attio .at-chat { max-width: 720px; width: 100%; margin: 0 auto; padding: 32px 24px 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
.theme-attio .at-msg { display: flex; flex-direction: column; max-width: 86%; }
.theme-attio .at-msg.me { align-self: flex-end; align-items: flex-end; }
.theme-attio .at-msg.them { align-self: flex-start; flex-direction: row; align-items: flex-start; gap: 10px; margin: 6px 0 20px; }
.theme-attio .at-bubble { padding: 9px 14px; border-radius: 16px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.theme-attio .at-msg.me .at-bubble { background: #266df0; color: #fff; border-bottom-right-radius: 6px; }
.theme-attio .at-msg.them .at-bubble { background: var(--at-rail); box-shadow: inset 0 0 0 1px var(--at-line); border-top-left-radius: 6px; }
.theme-attio .at-msg-meta { margin: 4px 4px 0; font-size: 12px; color: var(--at-3); }
.theme-attio .at-bot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #864aff, #266df0); box-shadow: 0 4px 10px -4px rgba(134, 74, 255, .6); }
.theme-attio .at-composer-wrap { padding: 12px 24px 14px; border-top: 1px solid var(--at-line); background: var(--at-page); }
.theme-attio .at-composer { max-width: 720px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-ring), 0 6px 20px -10px rgba(28, 40, 64, .22); }
.theme-attio .at-composer:focus-within { box-shadow: inset 0 0 0 1px var(--at-link), 0 0 0 3px color-mix(in srgb, var(--at-link) 14%, transparent); }
.theme-attio .at-composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-attio .at-composer textarea { flex: 1; min-width: 0; max-height: 160px; border: none; outline: none; resize: none; padding: 6px 0; background: none; color: var(--at-text); font: inherit; line-height: 20px; }
.theme-attio .at-send { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; display: grid; place-items: center; background: #266df0; color: #fff; cursor: pointer; }
.theme-attio .at-send:hover { background: #1f5fd8; }
.theme-attio .at-send:disabled { opacity: .6; cursor: default; }
.theme-attio .at-composer-wrap .at-muted-note { max-width: 720px; margin: 8px auto 0; text-align: center; font-size: 12px; }
.theme-attio .at-hero { text-align: center; padding: 56px 0 8px; }
.theme-attio .at-hero-ico { width: 52px; height: 52px; border-radius: 16px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, #864aff, #266df0); box-shadow: 0 10px 28px -10px rgba(134, 74, 255, .7); }
.theme-attio .at-hero h1 { margin: 18px 0 6px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.theme-attio .at-hero p { margin: 0 auto; max-width: 440px; color: var(--at-2); }
.theme-attio .at-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; text-align: start; }
.theme-attio .at-tip { padding: 12px 14px; border: none; border-radius: 12px; background: var(--at-page); box-shadow: inset 0 0 0 1px var(--at-line); font: inherit; color: var(--at-text); line-height: 20px; cursor: pointer; text-align: start; }
.theme-attio .at-tip:hover { background: var(--at-hover); box-shadow: inset 0 0 0 1px var(--at-ring); }
.theme-attio .thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--at-2); }
.theme-attio .gcard { border-radius: 12px; overflow: hidden; }

@media (max-width: 800px) {
  .theme-attio .at-page { padding: 24px 16px 56px; }
  .theme-attio .at-q { grid-template-columns: 1fr; }
  .theme-attio .at-tips { grid-template-columns: 1fr; }
  .theme-attio .at-chat { padding: 20px 14px; }
  .theme-attio .at-composer-wrap { padding: 10px 12px 12px; }
  .theme-attio .at-page-head { align-items: flex-start; }
}

/* native selects, details, small print */
.theme-attio select.input, .theme-attio .toolbar select, .theme-attio .dialog select, .theme-attio .drawer select { appearance: none; -webkit-appearance: none; padding: 0 30px 0 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.theme-attio select.input option { color: #101112; background: #fff; }
.theme-attio .input::placeholder, .theme-attio textarea::placeholder { color: var(--at-3); }
.theme-attio .small { font-size: 13px; }
.theme-attio #sBody [style*="max-width"] { max-width: none !important; }
.theme-attio details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.theme-attio details > summary::-webkit-details-marker { display: none; }
.theme-attio details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.8px solid var(--at-2); border-bottom: 1.8px solid var(--at-2); transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; }
.theme-attio details[open] > summary::before { transform: rotate(45deg); }
.theme-attio .secret { border-radius: 12px; background: var(--at-rail); box-shadow: inset 0 0 0 1px var(--at-line); border: none; }
.theme-attio .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.theme-attio .cal-d { background: var(--at-page); }
.theme-attio .cal-d.today, .theme-attio .cal-d.on { box-shadow: inset 0 0 0 1px var(--at-link); }

/* record drawer */
.theme-attio .at-dr-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.theme-attio .at-dr-title .at-tile { width: 28px; height: 28px; border-radius: 8px; }
.theme-attio .at-dr-title .at-tile svg { width: 15px; height: 15px; }
.theme-attio .at-dr-title > span:nth-child(2) { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-attio .at-dr-title .at-dim { font-size: 13px; font-weight: 500; white-space: nowrap; }
.theme-attio .drawer .body { padding: 16px 20px; }
.theme-attio .drawer .body > p.small.muted:first-child { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--at-line); }
.theme-attio .drawer .field { margin-bottom: 12px; }
.theme-attio .field .dot[style$="background:"] { display: none !important; }
.theme-attio .field > span .muted { color: var(--at-3); font-weight: 400; }
.theme-attio .drawer h4 { margin: 24px 0 8px !important; font-size: 12px; font-weight: 500; color: var(--at-2); }
.theme-attio .drawer .at-feed-item { padding: 10px 12px; }

/* ---------------------------------------------------------------- phones: the sidebar becomes a top bar */
@media (max-width: 800px) {
  .theme-attio .app.sf { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .theme-attio .rail { display: flex; }
  .theme-attio .rail { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--at-line); padding: 6px 8px; gap: 2px; }
  .theme-attio .rail .grow, .theme-attio .at-section, .theme-attio .at-search, .theme-attio .at-me, .theme-attio .at-title { display: none; }
  .theme-attio .at-brand { height: auto; margin: 0; padding: 0 6px 0 2px; border: none; flex: none; }
  .theme-attio .at-group { flex-direction: row; }
  .theme-attio .at-item { width: auto; white-space: nowrap; }
  .theme-attio .at-extra { border: none; margin: 0; padding: 0; }
  .theme-attio .at-account { border: none; margin: 0; padding: 0 0 0 6px; height: auto; }
  .theme-attio .at-bar, .theme-attio .at-sub { gap: 8px; }
  .theme-attio .at-sub { overflow-x: auto; }
  .theme-attio .at-find { width: auto; flex: 1; min-width: 120px; }
  .theme-attio .at-sub .grow { display: none; }
  .theme-attio .lane { flex-basis: 240px; }
}