/* ============================================================
   Notion design system · components  (notion.css)  — v2, 2 Oct 2026
   Study copy for internal education. Not for shipping.
   Load after notion-tokens.css and notion-icons.js.

   Where the numbers come from
   [live]  read from Notion's own DOM on public pages (inline styles + computed styles), 2 Oct 2026
   [shot]  measured on Notion Help Center screenshots (960x600 window at 2x/4x), mostly 2025 builds
   Class prefix .n-  ·  Notion's own token names (see notion-tokens.css)
   ============================================================ */

/* ---------- Base ---------- */
.n-root { font-family: var(--n-font); font-size: 16px; line-height: 1.5; color: var(--c-texPri); background: var(--c-bacPri); -webkit-font-smoothing: antialiased; }
.n-root *, .n-root *::before, .n-root *::after { box-sizing: border-box; }
.n-i { width: 20px; height: 20px; flex: 0 0 auto; display: block; fill: currentColor; }
.n-i.s16 { width: 16px; height: 16px; }
.n-i.s14 { width: 14px; height: 14px; }
.n-i.s12 { width: 12px; height: 12px; }
/* gallery icons (property / view / page icons) are 16px boxes scaled 1.2 by Notion [live] */
.n-gi { width: 16px; height: 16px; flex: 0 0 auto; display: block; fill: currentColor; transform: scale(1.2); }
.n-emoji { font-family: var(--n-emoji); font-weight: 400; line-height: 1; display: inline-grid; place-items: center; }
/* Hover/pressed fills [live]: hover = --ca-bacIntTra (5% warm grey), pressed = the same colour at double strength.
   Notion writes it with the relative-colour syntax: rgb(from var(--ca-bacIntTra) r g b / calc(alpha * 2)). */
.n-root, .n-light, .n-dark { --n-hov: var(--ca-bacIntTra); --n-pre: rgb(from var(--ca-bacIntTra) r g b / calc(alpha * 2)); }

/* Mac look. Notion uses the system font; on a Mac that is San Francisco, which
   can't be shipped on the web. Study copies of Mac screenshots use Inter, the
   closest free match, slightly tightened because Inter runs ~3% wider. */
.n-mac { --n-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji"; }
.n-mac .n-db-title, .n-mac .n-page-title { letter-spacing: -0.017em; }
.n-mac .n-td.title, .n-mac .n-btn-blue { letter-spacing: -0.1px; }
.n-mac .n-view[aria-selected="true"] { letter-spacing: -0.25px; }

/* ---------- Desktop window + tab bar (Notion for Mac, 2025)  [shot] ---------- */
.n-window { position: relative; overflow: hidden; background: var(--c-bacPri); display: flex; flex-direction: column; }
.n-chrome { height: 35px; flex: 0 0 35px; display: flex; align-items: stretch; background: var(--c-palGra50); box-shadow: inset 0 -1px 0 var(--ca-borSecTra); color: var(--c-icoPri); }
.n-lights { display: flex; align-items: center; gap: 8px; padding: 0 0 0 13px; }
.n-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.n-lights i:nth-child(1) { background: #ff5f57; }
.n-lights i:nth-child(2) { background: #febc2e; }
.n-lights i:nth-child(3) { background: #28c840; }
.n-cbtn { width: 28px; height: 28px; align-self: center; display: grid; place-items: center; border-radius: 6px; color: var(--c-icoPri); }
.n-cbtn:hover { background: var(--n-hov); }
.n-tab { width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 17px; background: var(--c-bacPri); box-shadow: -1px 0 0 var(--ca-borSecTra), 1px 0 0 var(--ca-borSecTra); font-size: 13.5px; color: var(--c-texPri); white-space: nowrap; }

/* ---------- Sidebar  [live] ---------- */
.n-sidebar { width: 240px; flex: 0 0 240px; background: var(--c-bacSec); box-shadow: inset -1px 0 0 var(--c-borSec); display: flex; flex-direction: column; font-size: 14px; color: var(--c-texAccPri); font-weight: 400; }
.n-side-list { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.n-side-item { height: 30px; min-height: 27px; padding: 4px 8px 4px 5px; display: flex; align-items: center; border-radius: 6px; font-size: 14px; color: var(--c-texAccPri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-side-item:hover { background: var(--n-hov); }
.n-side-item[aria-current="page"] { background: var(--ca-bacIntTra); color: var(--c-texPri); }
.n-side-ico { width: 22px; height: 18px; flex: 0 0 22px; margin-inline-end: 8px; display: grid; place-items: center; color: var(--c-icoSec); }
.n-side-ico .n-emoji { font-size: 16px; }
.n-side-ico.tile { height: 22px; border-radius: 4px; background: var(--ca-bacTerTra); color: var(--c-icoPri); }
.n-side-label { height: 30px; padding: 0 8px; display: flex; align-items: center; gap: 4px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--c-texTer); }
.n-side-sep { height: 1px; margin: 6px 0; background: var(--ca-borSecTra); }
.n-ws { height: 32px; padding: 0 6px; display: flex; align-items: center; gap: 8px; border-radius: 6px; color: var(--c-texPri); font-weight: 500; }
.n-ws:hover { background: var(--n-hov); }

/* ---------- Top bar (breadcrumbs + page actions) ---------- */
.n-topbar { height: 45px; flex: 0 0 45px; display: flex; align-items: center; gap: 2px; padding: 0 12px; font-size: 14px; color: var(--c-texPri); }
.n-crumb { height: 24px; padding: 0 6px; display: flex; align-items: center; gap: 6px; border-radius: 6px; white-space: nowrap; }
.n-crumb:hover { background: var(--n-hov); }
.n-crumb-sep { color: var(--c-texTer); margin: 0 2px; }
.n-tbtn { height: 28px; min-width: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; color: var(--c-icoPri); font-size: 14px; }
.n-tbtn:hover { background: var(--n-hov); }

/* ---------- Page header  [live] ---------- */
.n-page-icon { width: 78px; height: 78px; border-radius: 4px; font-size: 78px; line-height: 1; display: grid; place-items: center; }
.n-page-title { font-size: 40px; font-weight: 700; line-height: 48px; color: var(--c-texPri); margin: 0; padding: 0 8px; }
.n-db-title { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0; }  /* full-page database title [shot] */
.n-prop-row { display: flex; align-items: center; min-height: 34px; font-size: 14px; }
.n-prop-name { width: 160px; display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--c-texSec); }

/* ---------- Blocks  [live]: every block = 6px wrapper padding + 2px text padding ---------- */
.n-block { padding: 6px; }
.n-block > .t { padding: 2px; }
.n-p { font-size: 16px; line-height: 1.5; margin: 0; padding: 8px; }
.n-h1 { font-size: 1.875em; font-weight: 600; line-height: 1.3; margin: 0; padding: 38px 8px 8px; }
.n-h2 { font-size: 1.5em;   font-weight: 600; line-height: 1.3; margin: 0; padding: 28px 8px 8px; }
.n-h3 { font-size: 1.25em;  font-weight: 600; line-height: 1.3; margin: 0; padding: 22px 8px 8px; }
.n-hbg { border-radius: 6px; }   /* heading with a background colour: the colour sits on the text box, radius 6 */
.n-divider { height: 13px; padding: 6px 8px; } .n-divider::before { content: ""; display: block; height: 1px; background: var(--ca-borPriTra); }
.n-callout { display: flex; gap: 0; border-radius: 10px; border: 1px solid transparent; background: var(--c-graBacPri); padding: 12px; }
.n-callout > .ico { width: 24px; height: 24px; margin-top: 7.5px; flex: 0 0 24px; display: grid; place-items: center; }
.n-callout > .body { padding: 6px; min-width: 0; } .n-callout > .body > * { padding: 2px; margin: 0; }
.n-pagelink { display: flex; align-items: center; padding: 2px; border-radius: 4px; color: inherit; text-decoration: none; }
.n-pagelink:hover { background: var(--n-hov); }
.n-pagelink .ico { width: 24px; height: 24px; margin-inline-end: 4px; display: grid; place-items: center; flex: 0 0 24px; }
.n-pagelink .t { font-weight: 500; line-height: 1.3; border-bottom: 1px solid var(--ca-borPriTra); white-space: nowrap; }
.n-link { color: inherit; text-decoration: underline; text-decoration-thickness: .05em; text-decoration-color: var(--ca-opaLinDecCol); text-underline-offset: 10%; }
.n-quote { border-inline-start: 3px solid currentColor; padding: 0 14px; font-size: 1.2em; }
.n-todo { display: flex; align-items: flex-start; gap: 6px; padding: 8px; }
.n-check { width: 16px; height: 16px; margin-top: 4px; border-radius: 3px; box-shadow: inset 0 0 0 1.25px var(--c-icoSec); flex: 0 0 auto; display: grid; place-items: center; color: #fff; }
.n-check.on { background: var(--c-palUiBlu600); box-shadow: none; }
.n-todo.done .t { color: var(--c-texTer); text-decoration: line-through; text-decoration-color: var(--c-texDis); }
.n-toggle { display: flex; align-items: center; gap: 4px; padding: 8px; }
.n-toggle .n-i { color: var(--c-icoPri); transition: transform .15s; }
.n-toggle[aria-expanded="true"] .n-i { transform: rotate(90deg); }
.n-code { font-family: var(--n-mono); font-size: 85%; background: var(--c-codStiBloBac, var(--c-bacTer)); color: var(--c-redTexSec); border-radius: 4px; padding: .2em .4em; }
.n-mention { color: var(--c-texSec); }
/* text + background colours (Notion's "Color" menu) */
.n-c-gray { color: var(--c-graTexSec); } .n-c-brown { color: var(--c-broTexSec); } .n-c-orange { color: var(--c-oraTexSec); }
.n-c-yellow { color: var(--c-yelTexSec); } .n-c-green { color: var(--c-greTexSec); } .n-c-blue { color: var(--c-bluTexSec); }
.n-c-purple { color: var(--c-purTexSec); } .n-c-pink { color: var(--c-pinTexSec); } .n-c-red { color: var(--c-redTexSec); }
.n-b-gray { background: var(--c-graBacSec); } .n-b-brown { background: var(--c-broBacSec); } .n-b-orange { background: var(--c-oraBacSec); }
.n-b-yellow { background: var(--c-yelBacSec); } .n-b-green { background: var(--c-greBacSec); } .n-b-blue { background: var(--c-bluBacSec); }
.n-b-purple { background: var(--c-purBacSec); } .n-b-pink { background: var(--c-pinBacSec); } .n-b-red { background: var(--c-redBacSec); }

/* ---------- Buttons ---------- */
/* Button block / secondary button  [live] */
.n-btn { height: 32px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; border: 1px solid var(--ca-borPriTra); background: transparent; color: var(--c-texPri); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.n-btn:hover { background: var(--n-hov); }
.n-btn:active { background: var(--n-pre); }
.n-btn .n-i, .n-btn .n-gi { margin-inline-start: -4px; }
.n-btn.ghost { border-color: transparent; color: var(--c-texSec); }
.n-btn.ghost:hover { color: var(--c-texPri); }
/* Primary blue ("New", "Start with this template", "Invite") */
.n-btn-blue { height: 28px; display: inline-flex; align-items: stretch; border-radius: 6px; background: var(--c-bluBacAccPri); color: var(--c-bluTexInvPri); font-size: 14px; font-weight: 600; overflow: hidden; cursor: pointer; }
.n-btn-blue > span { display: flex; align-items: center; padding: 0 8px; }
/* [live] hover #1F76CC, pressed #1C69B6 (measured on Notion's blue button) */
.n-btn-blue > span:hover, .n-btn-blue > span.is-hover { background: #1f76cc; }
.n-btn-blue > span:active, .n-btn-blue > span.is-active { background: #1c69b6; }
.n-btn-blue > .split { padding: 0 4px; box-shadow: inset 1px 0 0 rgba(0,0,0,.17); }
.n-btn-blue:focus-visible { outline: none; box-shadow: var(--c-butBluFocRin); }

/* ---------- Database: view tabs + toolbar  [live] ---------- */
.n-dbbar { display: flex; align-items: center; height: 34px; }
.n-views { display: flex; align-items: center; gap: 1px; }
.n-view { height: 32px; padding: 6px 12px; display: flex; align-items: center; border-radius: 20px; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--c-texSec); white-space: nowrap; max-width: 220px; }
.n-view .n-gi, .n-view .n-i { margin-inline-end: 6px; }
.n-view > span { margin-top: 1px; }
.n-view:hover { background: var(--n-hov); }
.n-view[aria-selected="true"] { background: var(--ca-bacIntTra); color: var(--c-texPri); }
.n-tools { margin-left: auto; display: flex; align-items: center; gap: 1px; }
.n-tool { width: 28px; height: 28px; padding: 6px; display: grid; place-items: center; border-radius: 6px; color: var(--c-texSec); }
.n-tool .n-i { width: 16px; height: 16px; }
.n-tool:hover { background: var(--n-hov); }

/* ---------- Database: table  [live] ---------- */
.n-table { font-size: 14px; color: var(--c-texPri); --n-grid: var(--ca-borSecTra); --n-row: 37px; }
.n-tr { display: flex; height: var(--n-row); }
.n-td { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-inline-end: 1px solid var(--n-grid); border-bottom: 1px solid var(--n-grid); line-height: 1.5; white-space: nowrap; overflow: hidden; }
.n-tr.head { height: 36px; box-shadow: inset 0 -1px 0 var(--n-grid); color: var(--c-texSec); }
.n-tr.head .n-td { border: 0; line-height: 21px; }
.n-tr.head .n-gi, .n-tr.head .n-i { color: var(--c-icoSec); }
.n-td.title { font-weight: 500; }
.n-td.title .ico { width: 22px; height: 22px; margin: -2px 3px 0 -2px; display: inline-grid; place-items: center; flex: 0 0 22px; }
.n-td.last { border-inline-end: 0; flex: 1 1 auto; }
.n-tr:not(.head):hover .n-td { background: var(--ca-tabRowHovBac); }
.n-tr.add { color: var(--c-texTer); }
.n-tr.add .n-td { border-inline-end: 0; }
.n-tr.add .n-i { color: var(--c-icoTer); }
.n-open { height: 24px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: var(--c-whiButBac); box-shadow: var(--c-shaOutMd); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--c-texSec); }

/* ---------- Select / multi-select tag  [live] ---------- */
.n-tag { height: 20px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; font-size: 14px; line-height: 120%; white-space: nowrap; color: var(--c-graTexPri); background: var(--ca-graBacTerTra); }
.n-tag.brown  { color: var(--c-broTexPri); background: var(--ca-broBacTerTra); }
.n-tag.orange { color: var(--c-oraTexPri); background: var(--ca-oraBacTerTra); }
.n-tag.yellow { color: var(--c-yelTexPri); background: var(--ca-yelBacTerTra); }
.n-tag.green  { color: var(--c-greTexPri); background: var(--ca-greBacTerTra); }
.n-tag.blue   { color: var(--c-bluTexPri); background: var(--ca-bluBacTerTra); }
.n-tag.purple { color: var(--c-purTexPri); background: var(--ca-purBacTerTra); }
.n-tag.pink   { color: var(--c-pinTexPri); background: var(--ca-pinBacTerTra); }
.n-tag.red    { color: var(--c-redTexPri); background: var(--ca-redBacTerTra); }
.n-tags { display: flex; flex-wrap: nowrap; gap: 6px 8px; align-items: center; }
/* Status: rounder pill with an 8px dot  [live] */
.n-status { border-radius: 10px; padding: 0 9px 0 7px; }
.n-status::before { content: ""; width: 8px; height: 8px; border-radius: 99px; margin-inline-end: 5px; flex: 0 0 8px; background: var(--c-graIcoAccPri); }
.n-status.brown::before { background: var(--c-broIcoAccPri); } .n-status.orange::before { background: var(--c-oraIcoAccPri); }
.n-status.yellow::before { background: var(--c-yelIcoAccPri); } .n-status.green::before { background: var(--c-greIcoAccPri); }
.n-status.blue::before { background: var(--c-bluIcoAccPri); } .n-status.purple::before { background: var(--c-purIcoAccPri); }
.n-status.pink::before { background: var(--c-pinIcoAccPri); } .n-status.red::before { background: var(--c-redIcoAccPri); }

/* ---------- Database: board  [live] ---------- */
.n-board { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.n-lane { width: 276px; flex: 0 0 276px; border-radius: 10px; background: var(--ca-bacSecTra); padding: 0 8px 8px; }
.n-lane.gray { background: var(--ca-graBacPriTra); } .n-lane.green { background: var(--ca-greBacPriTra); } .n-lane.red { background: var(--ca-redBacPriTra); }
.n-lane.blue { background: var(--ca-bluBacPriTra); } .n-lane.yellow { background: var(--ca-yelBacPriTra); } .n-lane.purple { background: var(--ca-purBacPriTra); }
.n-lane.brown { background: var(--ca-broBacPriTra); } .n-lane.orange { background: var(--ca-oraBacPriTra); } .n-lane.pink { background: var(--ca-pinBacPriTra); }
.n-lane-head { height: 40px; padding: 3px; display: flex; align-items: center; border-radius: 6px; }
.n-lane-count { padding: 0 6px; min-height: 20px; display: flex; align-items: center; color: var(--c-texAccPri); }
/* [live] the count takes the lane's colour */
.n-lane.gray .n-lane-count { color: var(--c-graTexAccPri); } .n-lane.brown .n-lane-count { color: var(--c-broTexAccPri); } .n-lane.orange .n-lane-count { color: var(--c-oraTexAccPri); }
.n-lane.yellow .n-lane-count { color: var(--c-yelTexAccPri); } .n-lane.green .n-lane-count { color: var(--c-greTexAccPri); } .n-lane.blue .n-lane-count { color: var(--c-bluTexAccPri); }
.n-lane.purple .n-lane-count { color: var(--c-purTexAccPri); } .n-lane.pink .n-lane-count { color: var(--c-pinTexAccPri); } .n-lane.red .n-lane-count { color: var(--c-redTexAccPri); }
.n-card { background: var(--c-bacEle); border-radius: 10px; box-shadow: var(--c-shaBasSm), 0 0 0 1px var(--ca-borSecTra); min-height: 40px; margin-bottom: 8px; padding: 8px 10px; transition: background 100ms ease-out; }
.n-card:hover { background: var(--c-bacSec); }
.n-card .t { display: flex; align-items: flex-start; font-size: 15px; line-height: 1.5; font-weight: 500; padding: 0 1px; }
.n-card .t .ico { width: 24px; height: 24px; border-radius: 5px; margin: 0 4px 0 -2px; flex: 0 0 24px; display: grid; place-items: center; }
.n-card .p { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Floating layers ---------- */
/* Menu / popover  [live]: radius 10, sections padded 4, items 28px, icon 20 + gap 8 */
.n-menu { min-width: 210px; background: var(--c-popBac); border-radius: 10px; box-shadow: var(--c-shaOutLg); font-size: 14px; overflow: hidden; }
.n-menu-sec { padding: 4px; }
.n-menu-sec + .n-menu-sec { box-shadow: inset 0 1px 0 var(--ca-borSecTra); }
.n-menu-sec + .n-menu-sec::before { content: none; }
.n-menu-label { height: 28px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--c-texSec); }
.n-menu-item { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; color: var(--c-texPri); line-height: 1.2; }
.n-menu-item .n-i { color: var(--c-icoPri); }
.n-menu-item .val { margin-left: auto; color: var(--c-texTer); display: flex; align-items: center; gap: 4px; }
.n-menu-item:hover, .n-menu-item.hl { background: var(--ca-bacIntTra); }
.n-menu-item.danger { color: #eb5757; }   /* Notion's red menu label (live value, not a token) */
.n-menu-divider { height: 1px; margin: 0 12px; background: var(--ca-borSecTra); }
/* Tooltip  [shot] */
.n-tooltip { display: inline-block; background: rgb(15,15,15); color: rgba(255,255,255,.9); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; line-height: 1.4; box-shadow: var(--c-shaOutMd); }
.n-tooltip small { display: block; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 400; }
/* Switch  [shot]: 30 x 18 track, 14px knob */
.n-switch { display: inline-block; vertical-align: middle; width: 30px; height: 18px; border-radius: 9px; background: var(--ca-swiButTeaBg); position: relative; flex: 0 0 auto; transition: background .2s; cursor: pointer; }
.n-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,15,15,.2); transition: left .2s; }
.n-switch.on { background: var(--c-palUiBlu600); }
.n-switch:focus-visible, .n-switch.is-focus { outline: none; box-shadow: var(--c-butBluFocRin); }
.n-switch.on::after { left: 14px; }
/* Text input  [shot] */
.n-input { height: 28px; width: 100%; padding: 4px 10px; border-radius: 6px; border: 0; background: var(--c-bacSec); box-shadow: inset 0 0 0 1px var(--ca-borPriTra); font: inherit; font-size: 14px; color: var(--c-texPri); }
.n-input:focus { outline: 0; box-shadow: var(--c-inpBluFocRin); }
.n-input::placeholder { color: var(--c-texTer); }

/* ---------- People ---------- */
.n-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--c-graIcoAccPri); flex: 0 0 auto; }
.n-avs { display: flex; }
.n-avs .n-av { margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--c-bacPri); }
.n-avs .n-av:first-child { margin-inline-start: 0; }
.n-person { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   .n-v2025 — how Notion looked in the 2025 Help Center screenshots.
   Notion changed these between 2025 and Oct 2026; the study copies of
   2025 screenshots add this class so they match what the screenshot shows.
   ============================================================ */
.n-v2025 .n-table { --n-grid: var(--ca-borPriTra); --n-row: 38.125px; }
.n-v2025 .n-tag        { color: var(--c-palGra800); background: var(--cl-palGra100); border-radius: 3px; }
.n-v2025 .n-tag.brown  { color: var(--c-palBro800); background: var(--cl-palBro100); }
.n-v2025 .n-tag.orange { color: var(--c-palOra800); background: var(--cl-palOra100); }
.n-v2025 .n-tag.yellow { color: var(--c-palYel800); background: var(--cl-palYel100); }
.n-v2025 .n-tag.green  { color: var(--c-palGre800); background: var(--cl-palGre100); }
.n-v2025 .n-tag.blue   { color: var(--c-palBlu800); background: var(--cl-palBlu100); }
.n-v2025 .n-tag.purple { color: var(--c-palPur800); background: var(--cl-palPur100); }
.n-v2025 .n-tag.pink   { color: var(--c-palPin800); background: var(--cl-palPin100); }
.n-v2025 .n-tag.red    { color: var(--c-palRed800); background: var(--cl-palRed100); }
.n-v2025 .n-view[aria-selected="true"] { background: var(--ca-butHovBac); font-weight: 600; }
.n-v2025 .n-sidebar { background: #f7f7f5; }
.n-v2025 .n-side-item[aria-current="page"] { background: rgba(0,0,0,.03); }
.n-v2025 .n-callout { background: var(--c-graBacSec); border-radius: 6px; }
.n-v2025 .n-btn-blue { background: var(--c-palUiBlu600); color: #fff; }
.n-v2025 .n-menu { border-radius: 6px; }
/* 2025-build look in dark mode: the old screenshots are light-only, so dark uses Notion's own dark tokens */
.n-dark .n-v2025 .n-sidebar, .n-dark.n-v2025 .n-sidebar { background: var(--c-bacSec); }
.n-dark .n-v2025 .n-side-item[aria-current="page"], .n-dark.n-v2025 .n-side-item[aria-current="page"] { background: var(--ca-bacIntTra); }


/* ============================================================
   States & motion
   [live] = read from Notion's app (computed transitions, Web Animations, :hover/:active values)
   [est]  = Notion didn't expose it on public pages; our closest choice, clearly marked
   Every state also has a force class (.is-hover / .is-active / .is-focus / .is-disabled)
   so documentation can show all states side by side.
   ============================================================ */

/* Speeds [live] */
.n-tbtn, .n-cbtn, .n-crumb { transition: background 20ms ease-in; }
.n-tool, .n-view, .n-btn, .n-btn-blue > span { transition: background 100ms ease-in-out; }
.n-side-item, .n-ws, .n-pagelink { transition: background 150ms; }
.n-card { transition: background 100ms ease-out; }
.n-link { transition: opacity 100ms ease-in; }
.n-menu-item { transition: background 20ms ease-in; }

/* Hover (5% warm grey) and pressed (10%) [live] */
.n-tbtn.is-hover, .n-cbtn.is-hover, .n-crumb.is-hover, .n-tool:hover, .n-tool.is-hover,
.n-view:hover, .n-view.is-hover, .n-btn:hover, .n-btn.is-hover, .n-side-item.is-hover, .n-ws.is-hover,
.n-pagelink.is-hover, .n-menu-item.is-hover { background: var(--n-hov); }
.n-tbtn:active, .n-tbtn.is-active, .n-cbtn:active, .n-crumb:active, .n-tool:active, .n-tool.is-active,
.n-view:active, .n-view.is-active, .n-btn:active, .n-btn.is-active, .n-side-item:active, .n-side-item.is-active,
.n-pagelink:active, .n-menu-item:active, .n-menu-item.is-active { background: var(--n-pre); }
/* Board card [live]: hover = faint warm tint, pressed = 6% grey */
.n-card:hover, .n-card.is-hover { background: var(--ca-bacSecTra); }
.n-card:active, .n-card.is-active { background: var(--ca-butHovBac); }
.n-card.is-selected, .n-card[aria-selected="true"] { background: var(--ca-palUiBlu200); box-shadow: var(--c-shaBasSm), 0 0 0 1px var(--ca-borSecTra); }
/* Table row [live]: very faint row tint */
.n-tr.is-hover .n-td { background: var(--ca-tabRowHovBac); }
/* Link: hover dims slightly */
.n-link:hover, .n-link.is-hover { opacity: .7; }

/* Keyboard focus [live]: blue ring with a page-coloured gap (--c-butBluFocRin) */
.n-tbtn:focus-visible, .n-tool:focus-visible, .n-view:focus-visible, .n-btn:focus-visible, .n-btn-blue:focus-visible,
.n-side-item:focus-visible, .n-menu-item:focus-visible, .n-card:focus-visible, .n-pagelink:focus-visible, .n-toggle:focus-visible, .n-check:focus-visible, .n-tag:focus-visible,
.is-focus { outline: 2px solid transparent; box-shadow: var(--c-butBluFocRin); }
.n-input.is-focus { box-shadow: var(--c-inpBluFocRin); }

/* Disabled [live]: 40% opacity, not-allowed cursor */
.n-btn[disabled], .n-btn.is-disabled, .n-btn-blue.is-disabled, .n-menu-item.is-disabled, .n-tool.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Menus & popovers open/close [live]: opacity 0 to 1 and scale .96 to 1, 200ms, ease, from the trigger corner */
.n-pop { transform-origin: var(--n-origin, top left); transition: opacity 200ms ease, transform 200ms ease; }
.n-pop[data-state="closed"] { opacity: 0; transform: scale(.96); pointer-events: none; visibility: hidden; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }
.n-pop[data-state="open"] { opacity: 1; transform: scale(1); visibility: visible; }

/* Tooltip [est]: appears after a short pause, fades 100ms */
.n-tip { position: absolute; z-index: 50; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 100ms ease, transform 100ms ease; }
.n-tip.show { opacity: 1; transform: none; }

/* Toast / snackbar [live keyframes; duration est.] */
@keyframes n-snackbar-in { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
.n-snackbar { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 8px; background: rgb(15,15,15); color: rgba(255,255,255,.9); font-size: 14px; box-shadow: var(--c-shaOutMd); animation: n-snackbar-in 250ms ease-out both; }
.n-snackbar b { font-weight: 500; color: #7cb6f5; cursor: pointer; }

/* Loading shimmer [live keyframes] */
@keyframes n-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.n-shimmer { position: relative; overflow: hidden; border-radius: 12px; background: var(--ca-borSecTra); height: 10px; }
.n-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: n-shimmer 1.2s ease-in-out infinite; }
.n-dark .n-shimmer::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* Switch knob, toggle arrow, checkbox [est] */
.n-switch::after { transition: left 200ms ease; }
.n-toggle .n-i { transition: transform 200ms ease; }
.n-toggle-body { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease; }
.n-toggle[aria-expanded="true"] + .n-toggle-body { grid-template-rows: 1fr; }
.n-toggle-body > div { min-height: 0; padding-left: 28px; }
.n-check { transition: background 100ms ease, box-shadow 100ms ease; }

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .n-root *, .n-root *::before, .n-root *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}