/* Airtable components, rebuilt from Airtable's own app (public shared views, read 3 Oct 2026, no login).
   Every size and colour below was measured on the live app at 1440x900 or read from Airtable's stylesheet;
   anything estimated says "est." next to it. Needs airtable-tokens.css first. Dark mode: add .at-dark to any parent.
   Private study copy for internal education. Airtable's brand, icons and product belong to Airtable. */

/* ---------- base ---------- */
.at-root { font-family: var(--font-family-body); font-size: var(--font-size-body-default); line-height: 18px; color: var(--colors-foreground-default);
  background: var(--colors-background-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.at-root *, .at-root *::before, .at-root *::after { box-sizing: border-box; }
.at-i { width: 16px; height: 16px; flex: none; fill: currentColor; display: inline-block; vertical-align: middle; }
.at-i.s12 { width: 12px; height: 12px; } .at-i.s14 { width: 14px; height: 14px; } .at-i.s20 { width: 20px; height: 20px; } .at-i.s24 { width: 24px; height: 24px; }
.at-quiet { opacity: .75; } .at-quieter { opacity: .5; }
.at-subtle { color: var(--colors-foreground-subtle); }
.at-strong { font-weight: 500; }
.at-mono { font-family: var(--font-family-mono); }
.at-heading { font-family: var(--font-family-body); font-weight: 500; }  /* app headings are the system font, weight 500 (measured) */
.at-link { color: var(--colors-hyperlink-primary); text-decoration: none; cursor: pointer; transition: color var(--motion-standard-fast); }
.at-link:hover { color: var(--colors-hyperlink-primary-hover); }
.at-focus:focus-visible, .at-root :focus-visible { outline: 2px solid var(--colors-border-focus); outline-offset: 2px; }  /* measured: 2px solid #166EE1, 2px gap */

/* view-type icon colours (fill on the icon, measured; dark = the colour's Light1) */
.at-vi-grid { color: var(--palette-blue-blue); } .at-vi-form { color: var(--palette-pink-pink); }
.at-vi-gallery { color: var(--palette-purple-purple); } .at-vi-kanban { color: var(--palette-green-green); }
.at-vi-calendar { color: var(--palette-orange-orange); } .at-vi-timeline { color: var(--palette-red-red); } .at-vi-list { color: var(--palette-teal-tealDark1); }
.at-dark .at-vi-grid:not(.at-light *) { color: var(--palette-blue-blueLight1); }
.at-dark .at-vi-form:not(.at-light *) { color: var(--palette-pink-pinkLight1); }
.at-dark .at-vi-gallery:not(.at-light *) { color: var(--palette-purple-purpleLight1); }
.at-dark .at-vi-kanban:not(.at-light *) { color: var(--palette-green-greenLight1); }
.at-dark .at-vi-calendar:not(.at-light *) { color: var(--palette-orange-orangeLight1); }
.at-dark .at-vi-timeline:not(.at-light *) { color: var(--palette-red-redLight1); }
.at-dark .at-vi-list:not(.at-light *) { color: var(--palette-teal-tealLight1); }

/* ---------- base colour (the coloured top bar of a base) ----------
   A base picks one of 10 colours. Light colours (cyan, teal, yellow) use dark text, the rest white text. */
.at-base-cyan   { --at-base: var(--palette-cyan-cyan);     --at-base-l3: var(--palette-cyan-cyanLight3);     --at-base-l2: var(--palette-cyan-cyanLight2);     --at-base-d1: 15, 104, 162; --at-base-ink: rgba(0,0,0,.65); --at-base-ink-strong: rgba(0,0,0,.95); --at-base-dark-app: #0b2833; }
.at-base-blue   { --at-base: var(--palette-blue-blue);     --at-base-l3: var(--palette-blue-blueLight3);     --at-base-l2: var(--palette-blue-blueLight2);     --at-base-d1: 13, 82, 172;  --at-base-ink: #fff; --at-base-ink-strong: #fff; --at-base-dark-app: #04162d; }
.at-base-teal   { --at-base: var(--palette-teal-teal);     --at-base-l3: var(--palette-teal-tealLight3);     --at-base-l2: var(--palette-teal-tealLight2);     --at-base-d1: 23, 114, 110; --at-base-ink: rgba(0,0,0,.65); --at-base-ink-strong: rgba(0,0,0,.95); --at-base-dark-app: #002c2b; }
.at-base-green  { --at-base: var(--palette-green-green);   --at-base-l3: var(--palette-green-greenLight3);   --at-base-l2: var(--palette-green-greenLight2);   --at-base-d1: 0, 100, 0;    --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #011c03; }
.at-base-yellow { --at-base: var(--palette-yellow-yellow); --at-base-l3: var(--palette-yellow-yellowLight3); --at-base-l2: var(--palette-yellow-yellowLight2); --at-base-d1: 175, 96, 2;   --at-base-ink: rgba(0,0,0,.65); --at-base-ink-strong: rgba(0,0,0,.95); --at-base-dark-app: #332501; }
.at-base-orange { --at-base: var(--palette-orange-orange); --at-base-l3: var(--palette-orange-orangeLight3); --at-base-l2: var(--palette-orange-orangeLight2); --at-base-d1: 170, 45, 0;   --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #2b0e00; }
.at-base-red    { --at-base: var(--palette-red-red);       --at-base-l3: var(--palette-red-redLight3);       --at-base-l2: var(--palette-red-redLight2);       --at-base-d1: 177, 15, 65;  --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #2c010c; }
.at-base-pink   { --at-base: var(--palette-pink-pink);     --at-base-l3: var(--palette-pink-pinkLight3);     --at-base-l2: var(--palette-pink-pinkLight2);     --at-base-d1: 171, 10, 131; --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #2c0122; }
.at-base-purple { --at-base: var(--palette-purple-purple); --at-base-l3: var(--palette-purple-purpleLight3); --at-base-l2: var(--palette-purple-purpleLight2); --at-base-d1: 98, 49, 174;  --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #190b30; }
.at-base-gray   { --at-base: var(--palette-gray-gray500);  --at-base-l3: var(--palette-gray-gray50);         --at-base-l2: var(--palette-gray-gray100);        --at-base-d1: 65, 69, 77;   --at-base-ink: rgba(255,255,255,.85); --at-base-ink-strong: #fff; --at-base-dark-app: #131416; }

/* ---------- base top bar (56px) ---------- */
.at-basebar { height: 56px; display: flex; align-items: center; gap: 0; padding: 0 16px; background: var(--at-base); color: var(--at-base-ink); }
.at-basebar .title { display: flex; align-items: center; font-size: 21px; line-height: 31.5px; font-weight: 500; color: var(--at-base-ink-strong); white-space: nowrap; }
.at-basebar .title .bicon { width: 20px; height: 20px; margin-right: 8px; fill: currentColor; }
.at-basebar .ibtn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9999px; cursor: pointer; color: var(--at-base-ink-strong); }
.at-basebar .sep { width: 1px; height: 20px; margin: 0 16px; background: var(--at-base-sep, rgba(0,0,0,.1)); }
.at-toppill { height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 9999px; color: var(--at-base-ink); cursor: pointer; white-space: nowrap; text-decoration: none; font-size: 13px; }
.at-toppill:hover { background: rgba(var(--at-base-d1), .1); color: rgba(0,0,0,.85); }
.at-base-blue .at-toppill:hover, .at-base-green .at-toppill:hover, .at-base-orange .at-toppill:hover, .at-base-red .at-toppill:hover,
.at-base-pink .at-toppill:hover, .at-base-purple .at-toppill:hover, .at-base-gray .at-toppill:hover { color: #fff; }
.at-basebar .grow { flex: 1; }

/* ---------- table tabs (32px) ---------- */
.at-tabbar { height: 32px; display: flex; border-radius: 6px 6px 0 0; background: var(--at-base-l3); overflow: hidden; }
.at-tabbar .tabs { flex: 1; display: flex; padding-left: 12px; background: rgba(var(--at-base-d1), .1); min-width: 0; border-top-right-radius: 6px; }
.at-tabbar, .at-tabbar .tabs, .at-tabbar .end { box-shadow: inset 0 -1px 1px rgba(0,0,0,.08); }  /* soft line along the bottom of the strip (measured on pixels) */
.at-tab { position: relative; height: 32px; display: flex; align-items: center; padding: 0 12px; color: rgba(0,0,0,.65); border-radius: 3px 3px 0 0; cursor: pointer; white-space: nowrap; user-select: none; }
.at-tab:hover { color: rgba(0,0,0,.95); background: rgba(0,0,0,.08); }
.at-tab[aria-selected="true"] { background: var(--colors-background-default); color: var(--colors-foreground-default); font-weight: 500; box-shadow: rgba(0,0,0,.08) 0 0 1px 1px; }
.at-tab + .at-tab::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 1px; background: rgba(0,0,0,.1); }  /* est. divider, hidden next to the active tab */
.at-tab[aria-selected="true"]::before, .at-tab[aria-selected="true"] + .at-tab::before { display: none; }
.at-tabbar .more { width: 40px; display: grid; place-items: center; color: rgba(0,0,0,.65); cursor: pointer; }
.at-tabbar .end { display: flex; align-items: center; gap: 4px; padding: 0 12px; margin-left: 8px; color: rgba(0,0,0,.65); background: rgba(var(--at-base-d1), .1); border-radius: 6px 0 0 0; cursor: pointer; }
.at-dark .at-tabbar:not(.at-light *) { background: var(--at-base-dark-app); }
.at-dark .at-tabbar .tabs:not(.at-light *), .at-dark .at-tabbar .end:not(.at-light *) { background: var(--palette-gray-gray900); box-shadow: inset 0 1px 0 var(--colors-border-default); padding-top: 1px; }  /* dark strip has a 1px top line that pushes the tabs down 1px (measured) */
.at-dark .at-tab:not(.at-light *) { color: rgba(255,255,255,.85); }
.at-dark .at-tab:hover:not(.at-light *) { color: rgba(255,255,255,.85); background: transparent; }  /* no visible change in the live dark capture */
.at-dark .at-tab[aria-selected="true"]:not(.at-light *) { background: var(--palette-gray-gray700); color: #fff; }
.at-dark .at-tab + .at-tab:not(.at-light *)::before { background: rgba(255,255,255,.1); }
.at-dark .at-tabbar .more:not(.at-light *), .at-dark .at-tabbar .end:not(.at-light *) { color: rgba(255,255,255,.85); }

/* ---------- view bar / toolbar (44px) ---------- */
.at-viewbar { height: 44px; display: flex; align-items: center; background: var(--colors-background-default); box-shadow: 0 1px 0 0 var(--colors-border-default); }
.at-dark .at-viewbar:not(.at-light *) { background: var(--palette-gray-gray700); }
.at-viewsbtn { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 2px solid transparent; border-radius: var(--radius-round-default); font-weight: 500; cursor: pointer; }
.at-viewsbtn:hover, .at-viewsbtn[aria-pressed="true"] { background: var(--colors-background-selected); }
.at-vdiv { width: 1px; height: 16px; margin: 0 12px 0 4px; background: var(--palette-opacity-darken3); }
.at-dark .at-vdiv:not(.at-light *) { background: var(--palette-opacity-lighten3); }
.at-viewswitch { height: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--radius-round-default); cursor: pointer; font-weight: 500; white-space: nowrap; }
.at-viewswitch:hover { background: var(--colors-background-selected); }
.at-tool { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-round-default); color: var(--colors-foreground-subtle);
  cursor: pointer; white-space: nowrap; transition: background-color 85ms ease-in; box-shadow: inset 0 0 0 2px transparent; }
.at-tool:hover, .at-tool:active { background: var(--colors-background-selected); }  /* pressed = same as hover (measured) */
.at-tool.icon-only { width: 32px; height: 24px; padding: 4px 8px; }
/* a tool that is "on" takes a pale fill of its own colour: hide fields = cyan, group = purple (measured live, light and dark);
   filter = green, sort = orange, colour = yellow (Airtable help-centre screenshots, light only). Their dark values are est.:
   the same "app" tint rule Airtable uses for cyan and purple. */
.at-tool.on.yellow { background: var(--palette-yellow-yellowLight2); }
.at-dark .at-tool.on.yellow:not(.at-light *) { background: #332f24; color: var(--palette-yellow-yellowLight1); }
.at-tool.on { color: var(--colors-foreground-default); }
.at-tool.on:hover { box-shadow: inset 0 0 0 2px var(--palette-opacity-darken2); }
.at-tool.on.cyan { background: var(--palette-cyan-cyanLight2); } .at-tool.on.purple { background: var(--palette-purple-purpleLight2); }
.at-tool.on.green { background: var(--palette-green-greenLight2); } .at-tool.on.orange { background: var(--palette-orange-orangeLight2); }
.at-tool.on.blue { background: var(--palette-blue-blueLight2); } .at-tool.on.red { background: var(--palette-red-redLight2); }
.at-dark .at-tool.on:hover:not(.at-light *) { box-shadow: inset 0 0 0 2px var(--palette-opacity-lighten2); }
.at-dark .at-tool.on.cyan:not(.at-light *) { background: #272f33; color: var(--palette-cyan-cyanLight1); }
.at-dark .at-tool.on.purple:not(.at-light *) { background: #2d2c33; color: var(--palette-purple-purpleLight1); }
.at-dark .at-tool.on.green:not(.at-light *) { background: #29312a; color: var(--palette-green-greenLight1); }
.at-dark .at-tool.on.orange:not(.at-light *) { background: #332d29; color: var(--palette-orange-orangeLight1); }
.at-dark .at-tool.on.blue:not(.at-light *) { background: #2a2d33; color: var(--palette-blue-blueLight1); }
.at-dark .at-tool.on.red:not(.at-light *) { background: #332a2d; color: var(--palette-red-redLight1); }

/* ---------- views sidebar (281px) ---------- */
.at-sidebar { width: 281px; background: var(--colors-background-default); display: flex; flex-direction: column; padding-top: 8px; position: relative; }
.at-sidebar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 1px; background: var(--palette-gray-gray300); }/* resize line */
.at-dark .at-sidebar:not(.at-light *)::after { background: var(--palette-gray-gray700); }
.at-findview { margin: 0 16px; height: 36px; display: flex; align-items: center; border-bottom: 1px solid var(--colors-border-default); transition: border .16s; }
.at-findview:focus-within { border-bottom-color: var(--colors-border-focus); }
.at-findview .at-i { margin: 0 8px 0 10px; opacity: .75; }
.at-findview input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0 8px 0 0; }
.at-findview input::placeholder { color: var(--colors-foreground-subtle); opacity: .9; }
.at-viewlist { padding: 8px 12px 12px; display: flex; flex-direction: column; }
.at-viewitem { height: 32.25px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-round-default); font-weight: 500; line-height: 16.25px; cursor: pointer; text-decoration: none; color: inherit; }
.at-viewitem:hover { background: var(--colors-background-selected); }
.at-viewitem[aria-current="page"], .at-viewitem[aria-selected="true"] { background: color-mix(in srgb, var(--at-base-l2, var(--palette-cyan-cyanLight2)) 70%, transparent); }
.at-dark .at-viewitem[aria-current="page"]:not(.at-light *), .at-dark .at-viewitem[aria-selected="true"]:not(.at-light *) { background: var(--palette-opacity-lighten1); }
.at-viewitem .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-viewitem .chk { width: 14px; height: 14px; margin-right: 4px; color: var(--colors-foreground-subtle); display: none; }
.at-viewitem[aria-current="page"] .chk, .at-viewitem[aria-selected="true"] .chk { display: block; }
.at-sidelabel { font-size: 11px; line-height: 16.5px; color: var(--colors-foreground-subtle); padding: 12px 8px 4px; }

/* ---------- grid ---------- */
.at-grid { background: var(--colors-background-subtler); font-size: 13px; line-height: 18px; position: relative; }
.at-grid .hrow { display: flex; height: 32px; background: var(--colors-background-default); box-shadow: inset 0 -1px 0 var(--cell-borderColor-header); }
.at-grid .hcell { flex: none; display: flex; align-items: center; padding: 1px 0 0 8px; font-weight: 500; line-height: 19.5px; white-space: nowrap; overflow: hidden;
  box-shadow: inset 1px 0 0 var(--cell-borderColor); cursor: default; position: relative; }
.at-grid .hcell.primary { box-shadow: inset -1px 0 0 var(--pane-borderColor-separator); }
.at-grid .hcell .caret { margin-left: auto; margin-right: 8px; opacity: 0; transition: opacity 85ms ease-in; }
.at-grid .hcell:hover .caret, .at-grid .hcell[aria-expanded="true"] .caret { opacity: .75; }
.at-grid .hcell .fi { margin-right: 6px; opacity: .75; }  /* field-type icon (shown in menus; headers in this build show none) */
.at-grid .rnum { flex: none; width: 32px; display: flex; justify-content: center; padding-top: 7px; font-size: 12px; color: var(--colors-foreground-subtle); }
.at-grid .row { display: flex; position: relative; }
.at-grid .cell { flex: none; position: relative; padding-left: 1px; background: var(--cell-background-base); box-shadow: inset 0 -1px 0 var(--cell-borderColor), inset 1px 0 0 var(--cell-borderColor); overflow: hidden; }  /* 1px left line, content starts after it (measured) */
.at-grid .cell.primary { box-shadow: inset 0 -1px 0 var(--cell-borderColor), inset -1px 0 0 var(--pane-borderColor-separator); }
.at-grid .row:hover .cell, .at-grid .row:hover .actions { background: var(--row-background-cursor); }
.at-grid .row.selected .cell, .at-grid .row.selected .actions { background: var(--cell-background-selected); }
.at-grid .cell.cursor::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--cell-borderColor-cursor); border-radius: 2px; pointer-events: none; }
.at-grid .cell .txt { padding: 6px; line-height: 19.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.at-grid .cell .tok { padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.at-grid .cell .ico { padding: 4px 6px 5px; display: flex; justify-content: center; }
.at-grid .cell .lnk { padding: 4px; display: flex; flex-wrap: wrap; }
.at-grid .cell.num { text-align: right; } .at-grid .cell.num .txt { font-variant-numeric: tabular-nums; }
.at-grid .actions { flex: none; width: 72px; display: flex; background: var(--cell-background-base); box-shadow: inset 0 -1px 0 var(--cell-borderColor); position: relative; }
.at-grid .rowcolor { position: absolute; left: 30px; top: 4px; bottom: 5px; width: 4px; border-radius: 9999px; }
.at-grid .expand { position: absolute; left: 39px; top: 3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-round-default);
  background: var(--colors-background-default); box-shadow: var(--elevation-low); opacity: 0; cursor: pointer; transition: opacity 85ms ease-in; color: var(--colors-foreground-default); }
.at-grid .row:hover .expand, .at-grid .expand:focus-visible { opacity: 1; }
.at-grid .row:hover .rnum { visibility: hidden; }
.at-grid .row .rowcheck { position: absolute; left: 8px; top: 7px; opacity: 0; }
.at-grid .row:hover .rowcheck, .at-grid .row.selected .rowcheck, .at-grid .row .rowcheck:focus-visible { opacity: 1; }
.at-grid .row:focus-within .rnum { visibility: hidden; }
.at-grid .row:focus-within .expand { opacity: 1; }
.at-grid .row.selected .rnum { visibility: hidden; }
/* group header (48px) */
.at-grid .ghead { display: flex; height: 48px; background: var(--colors-background-subtler); box-shadow: inset 0 -1px 0 var(--cell-borderColor); }
.at-dark .at-grid .ghead:not(.at-light *) { box-shadow: inset 0 -1px 0 var(--palette-gray-gray800); }
.at-grid .ghead .caretbtn { width: 32px; flex: none; display: grid; place-items: center; cursor: pointer; }
.at-grid .ghead .caretbtn .at-i { transition: transform .2s ease-out; }
.at-grid .ghead[aria-expanded="false"] .caretbtn .at-i { transform: rotate(-90deg); }
.at-grid .ghead .glabel { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-right: 8px; }
.at-grid .ghead .gfield { font-size: 9px; line-height: 13.5px; padding-top: 4px; color: var(--colors-foreground-subtle); letter-spacing: .9px; text-transform: uppercase; }
.at-grid .ghead .gval { padding: 4px; }
.at-grid .ghead .gval .at-chip { font-size: 14px; font-weight: 600; line-height: 22.4px; }
.at-grid .ghead .gcount { font-size: 11px; line-height: 16.5px; color: var(--colors-foreground-subtle); padding: 16px 0 13px; margin: 0 15px 0 20px; }
.at-grid .gspacer { height: 8px; }  /* measured: 8px between groups */
.at-grid .sumbar { height: 32px; display: flex; align-items: center; padding-left: 12px; font-size: 11px; background: var(--colors-background-default); box-shadow: inset 0 1px 0 var(--cell-borderColor); }

/* ---------- checkbox, star, flag ---------- */
.at-check { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: var(--radius-round-default); background: var(--colors-background-raised-control);
  border: 1px solid var(--palette-gray-gray400); box-shadow: 0 0 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08); color: #fff; cursor: pointer; }
.at-check .at-i { width: 11px; height: 11px; opacity: 0; }
.at-check[aria-checked="true"] { background: var(--colors-background-checked-control); border-color: var(--colors-background-checked-control); }
.at-check[aria-checked="true"] .at-i { opacity: 1; }
.at-dark .at-check:not(.at-light *) { box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08); }
.at-star { color: var(--palette-green-green); } .at-flag { color: var(--palette-red-red); }

/* ---------- select options (choice tokens) and linked-record chips ---------- */
.at-token { height: 22px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9999px; line-height: 20.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--colors-foreground-default); background: var(--at-choice-grayLight2); max-width: 100%; }
.at-token.sm { height: 18px; line-height: 18px; padding: 0 8px; font-size: 12px; }
.at-chip { height: 22px; display: inline-flex; align-items: center; padding: 0 6px; margin: 0 4px 4px 0; border-radius: var(--radius-round-default); line-height: 20.8px; white-space: nowrap;
  background: #e9eef9; color: var(--colors-foreground-default); }/* "foreign-key-blue", measured */
.at-dark .at-chip:not(.at-light *) { background: var(--palette-opacity-lighten2-tinted); }
/* 10 colours x 4 strengths; text is ink on the pale ones and white on the strong ones; in dark the pale ones take the colour's Light2 as text */
.at-token.blueLight2 { background: var(--at-choice-blueLight2); } .at-token.blueLight1 { background: var(--at-choice-blueLight1); } .at-token.blue { background: var(--at-choice-blue); color: #fff; } .at-token.blueDark1 { background: var(--at-choice-blueDark1); color: #fff; }
.at-token.cyanLight2 { background: var(--at-choice-cyanLight2); } .at-token.cyanLight1 { background: var(--at-choice-cyanLight1); } .at-token.cyan { background: var(--at-choice-cyan); } .at-token.cyanDark1 { background: var(--at-choice-cyanDark1); color: #fff; }
.at-token.tealLight2 { background: var(--at-choice-tealLight2); } .at-token.tealLight1 { background: var(--at-choice-tealLight1); } .at-token.teal { background: var(--at-choice-teal); } .at-token.tealDark1 { background: var(--at-choice-tealDark1); color: #fff; }
.at-token.greenLight2 { background: var(--at-choice-greenLight2); } .at-token.greenLight1 { background: var(--at-choice-greenLight1); } .at-token.green { background: var(--at-choice-green); color: #fff; } .at-token.greenDark1 { background: var(--at-choice-greenDark1); color: #fff; }
.at-token.yellowLight2 { background: var(--at-choice-yellowLight2); } .at-token.yellowLight1 { background: var(--at-choice-yellowLight1); } .at-token.yellow { background: var(--at-choice-yellow); } .at-token.yellowDark1 { background: var(--at-choice-yellowDark1); color: #fff; }
.at-token.orangeLight2 { background: var(--at-choice-orangeLight2); } .at-token.orangeLight1 { background: var(--at-choice-orangeLight1); } .at-token.orange { background: var(--at-choice-orange); color: #fff; } .at-token.orangeDark1 { background: var(--at-choice-orangeDark1); color: #fff; }
.at-token.redLight2 { background: var(--at-choice-redLight2); } .at-token.redLight1 { background: var(--at-choice-redLight1); } .at-token.red { background: var(--at-choice-red); color: #fff; } .at-token.redDark1 { background: var(--at-choice-redDark1); color: #fff; }
.at-token.pinkLight2 { background: var(--at-choice-pinkLight2); } .at-token.pinkLight1 { background: var(--at-choice-pinkLight1); } .at-token.pink { background: var(--at-choice-pink); color: #fff; } .at-token.pinkDark1 { background: var(--at-choice-pinkDark1); color: #fff; }
.at-token.purpleLight2 { background: var(--at-choice-purpleLight2); } .at-token.purpleLight1 { background: var(--at-choice-purpleLight1); } .at-token.purple { background: var(--at-choice-purple); color: #fff; } .at-token.purpleDark1 { background: var(--at-choice-purpleDark1); color: #fff; }
.at-token.grayLight2 { background: var(--at-choice-grayLight2); } .at-token.grayLight1 { background: var(--at-choice-grayLight1); } .at-token.gray { background: var(--at-choice-gray); color: #fff; } .at-token.grayDark1 { background: var(--at-choice-grayDark1); color: #fff; }
.at-dark .at-token:not(.at-light *) { color: #fff; }
.at-dark .at-token.cyan:not(.at-light *), .at-dark .at-token.teal:not(.at-light *), .at-dark .at-token.yellow:not(.at-light *) { color: var(--palette-gray-gray900); }  /* est.: white on these fails contrast (2.7 to 2.9:1) */
.at-dark .at-token[class*="blueLight"]:not(.at-light *) { color: var(--palette-blue-blueLight2); }
.at-dark .at-token[class*="cyanLight"]:not(.at-light *) { color: var(--palette-cyan-cyanLight2); }
.at-dark .at-token[class*="tealLight"]:not(.at-light *) { color: var(--palette-teal-tealLight2); }
.at-dark .at-token[class*="greenLight"]:not(.at-light *) { color: var(--palette-green-greenLight2); }
.at-dark .at-token[class*="yellowLight"]:not(.at-light *) { color: var(--palette-yellow-yellowLight2); }
.at-dark .at-token[class*="orangeLight"]:not(.at-light *) { color: var(--palette-orange-orangeLight2); }
.at-dark .at-token[class*="redLight"]:not(.at-light *) { color: var(--palette-red-redLight2); }
.at-dark .at-token[class*="pinkLight"]:not(.at-light *) { color: var(--palette-pink-pinkLight2); }
.at-dark .at-token[class*="purpleLight"]:not(.at-light *) { color: var(--palette-purple-purpleLight2); }
.at-dark .at-token[class*="grayLight"]:not(.at-light *) { color: var(--palette-gray-gray100); }

/* ---------- buttons (heights from Airtable's .button-size-* rules; corner 6px, 500 weight) ---------- */
.at-btn { height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; border-radius: var(--radius-round-big);
  font: inherit; font-size: 13px; line-height: 22px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
  color: var(--colors-foreground-default); background: var(--colors-background-raised-control); box-shadow: var(--elevation-low);
  transition: background-color var(--motion-standard-fast), box-shadow var(--motion-standard-fast); }
.at-btn:hover { background: var(--colors-background-raised-control-hover); box-shadow: var(--elevation-low-hover); }
.at-btn.primary { background: var(--colors-background-primary-control); color: #fff; box-shadow: none; }
.at-btn.primary:hover { background: var(--colors-background-primary-control-emphasis); }
.at-dark .at-btn.primary:hover:not(.at-light *) { color: var(--palette-gray-gray900); }
.at-btn.quiet { background: var(--palette-opacity-darken1); box-shadow: none; }
.at-btn.quiet:hover { background: var(--palette-opacity-darken2); }
.at-dark .at-btn.quiet:not(.at-light *) { background: var(--palette-opacity-lighten1); }
.at-dark .at-btn.quiet:hover:not(.at-light *) { background: var(--palette-opacity-lighten2); }
.at-btn.ghost { background: transparent; box-shadow: none; } .at-btn.ghost:hover { background: var(--colors-background-selected); }
.at-btn.danger { background: var(--palette-red-red); color: #fff; box-shadow: none; } .at-btn.danger:hover { background: var(--palette-red-redDark1); }
.at-btn.xs { height: 24px; font-size: 11px; line-height: 20px; padding: 0 8px; } .at-btn.sm { height: 28px; } .at-btn.lg { height: 36px; font-size: 15px; line-height: 28px; padding: 0 16px; }
.at-btn[disabled], .at-btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.at-btn.icon { width: 32px; padding: 0; } .at-btn.icon.sm { width: 28px; } .at-btn.icon.xs { width: 24px; }
.at-circlebtn { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; opacity: .75; }
.at-circlebtn:hover { opacity: 1; background: var(--colors-background-inset-control-hover); }

/* ---------- inputs, switch ---------- */
.at-input { height: 32px; width: 100%; display: block; padding: 6px 8px; border: 0; border-radius: var(--radius-round-big); font: inherit; color: inherit;
  background: var(--colors-background-subtler); box-shadow: inset 0 0 0 1px var(--colors-border-default); outline: 0; transition: box-shadow 85ms ease-in; }
.at-input:hover { box-shadow: inset 0 0 0 1px var(--colors-border-emphasis); }
.at-input:focus { box-shadow: inset 0 0 0 2px var(--colors-border-focus); background: var(--colors-background-default); }
.at-input::placeholder { color: var(--colors-foreground-subtler); }
.at-dark .at-input:not(.at-light *) { background: var(--palette-neutral-trueBlack); }
.at-dark .at-input:focus:not(.at-light *) { background: var(--palette-gray-gray900); }
.at-switch { width: 19px; height: 12px; flex: none; display: inline-flex; justify-content: flex-start; padding: 2px; border-radius: 9999px; background: var(--colors-background-switch-track);
  cursor: pointer; transition: all 85ms ease-in; }
.at-switch::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--colors-background-switch-handle); }
.at-switch.on, .at-switch[aria-checked="true"] { justify-content: flex-end; background: var(--colors-background-checked-control); }

/* ---------- popovers and menus (no open or close animation: sampled every frame, they appear full size and vanish within one frame) ---------- */
.at-pop { background: var(--colors-background-raised-popover); border-radius: var(--radius-round-default); box-shadow: var(--elevation-high); overflow: hidden; color: var(--colors-foreground-default); }
.at-pop[data-state="closed"] { display: none; }
.at-pop .phead { padding: 16px 16px 0; font-weight: 500; line-height: 16.25px; color: var(--colors-foreground-subtle); }
.at-pop hr { border: 0; border-top: 1px solid var(--colors-border-default); margin: 8px 16px; }
.at-pop .pbody { padding: 16px 16px 0; }
.at-pop .pfoot { padding: 16px; display: flex; align-items: center; gap: 16px; }
.at-pop .empty { opacity: .5; }
.at-menu { list-style: none; margin: 0; padding: 12px; }
.at-mi { min-height: 34px; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-round-default); cursor: pointer; white-space: nowrap; user-select: none; }
.at-mi:hover, .at-mi.hl { background: var(--colors-background-selected); }
.at-mi .at-i { color: var(--colors-foreground-default); }
.at-mi .val { margin-left: auto; color: var(--colors-foreground-subtle); }
.at-mi.danger { color: var(--colors-foreground-accent-negative); } .at-mi.danger .at-i { color: inherit; }
.at-mi.is-disabled { opacity: .5; cursor: default; }
.at-msep { height: 1px; margin: 8px; background: var(--colors-background-selected); }
/* compact rows: Sort and Group field pickers (26px) */
.at-mi.compact { min-height: 26px; padding: 4px 8px; gap: 12px; }
.at-mi.compact .at-i { opacity: .75; }
.at-addcond { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--colors-foreground-subtle); cursor: pointer; }
.at-addcond.primary { color: var(--colors-hyperlink-primary); }
.at-addcond:hover { color: var(--colors-foreground-default); } .at-addcond.primary:hover { color: var(--colors-hyperlink-primary-hover); }
.at-findfield { margin: 8px 16px 0; height: 36px; display: flex; align-items: center; border-bottom: 2px solid var(--colors-border-default); }
.at-findfield input:focus-visible, .at-findview input:focus-visible { outline: none; }  /* search lines show focus with their underline, not an outline */
.at-findfield:focus-within { border-bottom-color: var(--colors-border-focus); }
.at-findfield input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: inherit; padding: 8px 0; }
.at-fieldrow { height: 18px; margin: 8px 0 4px; display: flex; align-items: center; padding: 0 4px; border-radius: var(--radius-round-default); cursor: pointer; }
.at-fieldrow:hover { background: var(--colors-background-selected); }
.at-fieldrow .at-i { margin: 0 8px 0 16px; }
.at-smallbtn { flex: 1; height: 26px; display: grid; place-items: center; font-size: 11px; font-weight: 500; border-radius: var(--radius-round-default); background: var(--palette-opacity-darken1); opacity: .75; cursor: pointer; }
.at-smallbtn:hover { opacity: 1; }
.at-dark .at-smallbtn:not(.at-light *) { background: var(--palette-opacity-lighten1); }
/* tooltip: Airtable's dark menu tooltip, 12px, 5px x 7px (from its stylesheet: .ui-tooltip.menuItemTooltip).
   The hint captured live on the grid is white with grey 14px text and a 1px line: .at-tooltip.light. Timing from the live one: 0.2s fade after 0.2s. */
.at-tooltip { display: inline-block; background: #444; color: #fff; font-size: 12px; line-height: 16px; padding: 5px 7px; border-radius: var(--radius-round-default); white-space: nowrap; }
.at-tooltip.light { background: #fff; color: #808080; font-size: 14px; line-height: 18px; padding: 4px 8px; border-radius: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.at-tip-host { position: absolute; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; }
.at-tip-host.show { opacity: 1; }

/* ---------- expanded record (detail view) ---------- */
.at-backdrop { position: absolute; inset: 0; background: var(--colors-background-modal-backdrop); }
.at-record { width: 800px; background: var(--colors-background-raised-surface); border-radius: var(--radius-round-big); box-shadow: var(--elevation-high); display: flex; flex-direction: column; overflow: hidden; }
.at-record[tabindex="-1"]:focus { outline: none; }  /* the window takes focus when it opens so Tab starts inside it; like Airtable, it shows no ring itself */
.at-record .rhead { height: 48px; flex: none; display: flex; align-items: center; padding: 0 16px 0 20px; box-shadow: inset 0 -1px 0 var(--colors-border-default); }
.at-record .rhead .nav { display: flex; gap: 4px; }
.at-record .rhead .nav span { width: 16px; height: 47px; display: grid; place-items: center; opacity: .75; cursor: pointer; }
.at-record .rhead .nav span[aria-disabled="true"] { opacity: .5; cursor: default; }
.at-record .rhead .rtitle { flex: 1; margin-left: 12px; font-size: 15px; line-height: 18.75px; opacity: 0; transition: opacity 85ms ease-in; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-record .rhead.scrolled .rtitle { opacity: 1; }
.at-record .rbody { flex: 1; overflow: auto; padding: 32px 40px 40px; }
.at-record .rinner { max-width: 640px; margin: 0 auto; }
.at-record .plabel { margin: 8px 0 4px; opacity: .75; }
.at-record .pval { font-size: 23px; line-height: 32px; padding: 4px 8px; margin: 0 -8px; }
.at-record .rdiv { border-bottom: 1px solid var(--colors-border-default); margin: 16px 0 32px; }
.at-record .fpair { display: flex; margin-bottom: 24px; }
.at-record .flabel { width: 160px; flex: none; margin: 4px 16px 0 0; line-height: 20px; opacity: .75; }
.at-record .fval { flex: 1; min-width: 0; }
/* text field: grey box (light) / black (dark); select and checkbox: raised control; all with a 1px inner line (measured, light + dark) */
.at-record .fbox { min-height: 32px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; padding: 6px 8px 4px; border-radius: var(--radius-round-big);
  background: var(--colors-background-subtler); box-shadow: inset 0 0 0 1px var(--colors-border-default); line-height: 19.5px; }
.at-record .fbox.select { height: 32px; padding: 0 8px; align-items: center; background: var(--colors-background-raised-control); }
.at-record .fcheck { width: 22px; height: 22px; margin: 5px 0; display: grid; place-items: center; border-radius: var(--radius-round-default); box-shadow: inset 0 0 0 1px var(--colors-border-default); background: var(--colors-background-raised-control); }
.at-record .fcheck .at-i { width: 16px; height: 16px; background: var(--colors-background-subtler); }  /* the icon sits on a small subtler square (measured, black in dark) */
.at-record .lcard { height: 80px; padding: 8px; border-radius: var(--radius-round-big); box-shadow: var(--elevation-low); background: var(--colors-background-raised-surface); overflow: hidden; }
.at-record .lcard .lt { font-size: 15px; font-weight: 500; line-height: 18.75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-record .lcard .lcols { display: flex; gap: 8px; margin-top: 8px; }
.at-record .lcard .lcols > div { width: 132px; flex: none; min-width: 0; }
.at-record .lcard .lk { font-size: 11px; line-height: 16.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-record .lcard .lv { margin-top: 2px; line-height: 19.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* linked chips inside a card are cut at the column edge with no "…" (measured) */
.at-record .lcard .lv .at-chip { display: inline-block; vertical-align: top; height: 19.5px; line-height: 19.5px; margin: 0 4px 0 0; max-width: 100%; overflow: hidden; text-overflow: clip; }
.at-record .rfoot { flex: none; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; box-shadow: inset 0 1px 0 var(--colors-border-default); }

/* ---------- gallery card (measured on the Team gallery) ---------- */
.at-card { width: 303px; border-radius: var(--radius-round-big); background: var(--colors-background-raised-surface); box-shadow: var(--elevation-medium); overflow: hidden; cursor: pointer; transition: box-shadow 85ms ease-in; }
.at-card:hover { box-shadow: var(--elevation-medium-hover); }
.at-card .cover { height: 176px; background: var(--colors-background-subtle); display: grid; place-items: center; }  /* est. */
.at-card .cbody { padding: 16px 22px 18px; display: grid; gap: 8px; }  /* title starts 22px in (measured); vertical est. */
.at-card .ct { font-weight: 500; font-size: 16px; line-height: 24px; }
.at-card .ck { font-size: 11px; color: var(--colors-foreground-subtle); }
.at-cards { display: flex; flex-wrap: wrap; gap: 16px; }  /* 16px between cards (measured) */

/* ---------- toast (est.: Airtable shows a dark pill at the bottom) ---------- */
.at-toast { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-round-big); background: var(--palette-gray-gray800); color: #fff; box-shadow: var(--elevation-medium); font-size: 13px; }
.at-dark .at-toast:not(.at-light *) { background: var(--palette-gray-gray700); }
.at-toast b { font-weight: 500; color: var(--palette-blue-blueLight1); cursor: pointer; }

/* ---------- home screen pieces (est.: from Airtable's help-centre screenshot of the 2025 home, not measured live) ---------- */
.at-homenav { width: 281px; background: var(--colors-background-default); box-shadow: inset -1px 0 0 var(--colors-border-default); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.at-homenav .ni { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: var(--radius-round-big); font-size: 15px; cursor: pointer; }
.at-homenav .ni:hover { background: var(--colors-background-selected); }
.at-homenav .ni[aria-current="page"] { background: var(--colors-background-subtle); }

/* ---------- states shown frozen (for the design-system page) ---------- */
.is-hover.at-tool, .is-hover.at-viewswitch, .is-hover.at-viewsbtn, .is-hover.at-viewitem, .is-hover.at-mi { background: var(--colors-background-selected); }
.is-hover.at-tool.on { box-shadow: inset 0 0 0 2px var(--palette-opacity-darken2); }
.is-hover.at-tab { color: rgba(0,0,0,.95); background: rgba(0,0,0,.08); }
.is-hover.at-btn { background: var(--colors-background-raised-control-hover); box-shadow: var(--elevation-low-hover); }
.is-hover.at-btn.primary { background: var(--colors-background-primary-control-emphasis); box-shadow: none; }
.at-dark .is-hover.at-btn.primary:not(.at-light *) { color: var(--palette-gray-gray900); }
.is-hover.at-input { box-shadow: inset 0 0 0 1px var(--colors-border-emphasis); }
.is-focus { outline: 2px solid var(--colors-border-focus); outline-offset: 2px; }
.is-focus.at-input { outline: 0; box-shadow: inset 0 0 0 2px var(--colors-border-focus); }
.is-disabled { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .at-root *, .at-root *::before, .at-root *::after { transition: none !important; animation: none !important; } }