/* New look (ui v2) trial. Every selector is under html[data-ui="v2"].
   The build copies this file to a hashed asset and the service worker precaches it,
   so the opt-in look does not 404. The shell still requests it for everyone.
   Rules apply only when html[data-ui="v2"], so the default layout is unchanged.
   Studio (--attio-*) tokens only, plus the optional Slack nav.
   Light Studio sidebar is the default. data-nav="slack" is the dark nav. data-density is dense (default), comfy or grouped.
   In-scope pages set data-v2-scope="1" on their section. Other pages keep v1 content styles inside this shell. */

html[data-ui="v2"] {
  color-scheme: light;
}
html[data-ui="v2"][data-mode="dark"] {
  color-scheme: dark;
}
html[data-ui="v2"] body {
  font-family: var(--attio-font);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.003em;
  background: var(--attio-bg);
  color: var(--attio-text);
}
html[data-ui="v2"] h1,
html[data-ui="v2"] h2,
html[data-ui="v2"] .areaTitle,
html[data-ui="v2"] .uiV2H {
  font-family: var(--attio-font-display);
  letter-spacing: -0.018em;
  font-weight: 650;
}
html[data-ui="v2"] :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--attio-accent);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--attio-focus);
}

/* Shell. The brand picker is hidden: v2 is Studio, light or dark. */
html[data-ui="v2"] #themeToggle .themeGroup:has([data-theme-pick]) {
  display: none !important;
}
html[data-ui="v2"] #sidebar {
  background: var(--attio-bg2);
  border-right: 1px solid var(--attio-line);
  color: var(--attio-text);
}
html[data-ui="v2"] .sbGroup {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--attio-text3);
  padding: 14px 10px 4px;
}
html[data-ui="v2"] .sbLink,
html[data-ui="v2"] .pcrmNav {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--attio-r2);
  color: var(--attio-text3);
  font-size: 13.5px;
  font-weight: 500;
}
html[data-ui="v2"] .sbLink:hover,
html[data-ui="v2"] .pcrmNav:hover {
  background: var(--attio-surface);
  color: var(--attio-text);
}
html[data-ui="v2"] .sbLink.active,
html[data-ui="v2"] .pcrmNav.active {
  background: var(--attio-raised);
  color: var(--attio-text);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--attio-line2), var(--attio-shadow1);
}
html[data-ui="v2"] .sbNavFoot {
  background: var(--attio-bg2);
  border-top-color: var(--attio-line);
}
html[data-ui="v2"] header {
  background: var(--attio-header);
  border-bottom: 1px solid var(--attio-line2);
}
html[data-ui="v2"] #gsearchInput {
  background: var(--attio-bg2);
  border-color: var(--attio-line2);
  color: var(--attio-text);
  border-radius: var(--attio-r2);
}
html[data-ui="v2"] #areaTitle,
html[data-ui="v2"] .areaTitle {
  color: var(--attio-text);
  font-size: 17px;
  font-weight: 650;
}
/* The strip's inline style is the v1 look (dark amber, no side gutter): the new look overrides it. */
html[data-ui="v2"] #previewStrip {
  margin: 8px var(--v2-gutter) 0 !important;
  background: var(--v2-amber-50) !important;
  color: var(--v2-amber-t) !important;
  border-radius: var(--attio-r3);
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-ui="v2"] #uiV2Toggle {
  margin-right: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--attio-r3);
  border: 1px solid var(--attio-line2);
  background: var(--attio-bg);
  color: var(--attio-text2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
html[data-ui="v2"] #uiV2Toggle[aria-pressed="true"] {
  background: var(--attio-accent);
  border-color: var(--attio-accent);
  color: #fff;
}
html[data-ui="v2"] .subnav {
  gap: 4px;
  border-bottom: 1px solid var(--attio-line2);
}
html[data-ui="v2"] .subnav button.on {
  color: var(--attio-text);
  border-bottom-color: var(--attio-accent);
}

/* Optional Slack nav. Active pill is Studio accent-hover so white text stays above 4.5:1 in both modes. */
html[data-ui="v2"][data-nav="slack"] #sidebar {
  background: #3f0e40;
  color: #e6dbe6;
  border-right-color: transparent;
}
html[data-ui="v2"][data-nav="slack"] .sbGroup,
html[data-ui="v2"][data-nav="slack"] .sbLink,
html[data-ui="v2"][data-nav="slack"] .pcrmNav {
  color: #cfc3cf;
}
html[data-ui="v2"][data-nav="slack"] .sbLink:hover,
html[data-ui="v2"][data-nav="slack"] .pcrmNav:hover {
  background: #5b2c5c;
  color: #fff;
}
html[data-ui="v2"][data-nav="slack"] .sbLink.active,
html[data-ui="v2"][data-nav="slack"] .pcrmNav.active {
  background: #245bc2;
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}
html[data-ui="v2"][data-nav="slack"] .sbNavFoot {
  background: #350d36;
  border-top-color: rgba(255, 255, 255, 0.12);
}
html[data-ui="v2"][data-nav="slack"] .sbNavFoot button {
  color: #e6dbe6;
}

/* Page bar: crumbs, density, feedback. Shown on every v2 page, including fallback content. */
html[data-ui="v2"] .uiV2Bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px var(--v2-gutter) 0;
}
html[data-ui="v2"] .uiV2Crumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--attio-text3);
}
html[data-ui="v2"] .uiV2Crumbs a {
  color: var(--attio-accent-hover);
  font-weight: 600;
  text-decoration: none;
}
html[data-ui="v2"] .uiV2Crumbs a:hover {
  text-decoration: underline;
}
html[data-ui="v2"] .uiV2Sep {
  color: var(--attio-text3);
}
html[data-ui="v2"] .uiV2Here {
  color: var(--attio-text);
  font-weight: 650;
}
html[data-ui="v2"] .uiV2Fb {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--attio-bg2);
  border: 1px solid var(--attio-line2);
  border-radius: 999px;
  padding: 3px 6px 3px 12px;
}
html[data-ui="v2"] .uiV2Fb .uiV2Ask {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--attio-text2);
}
html[data-ui="v2"] .uiV2Fb button,
html[data-ui="v2"] .uiV2Seg button {
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--attio-text2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
html[data-ui="v2"] .uiV2Fb button[aria-pressed="true"],
html[data-ui="v2"] .uiV2Seg button[aria-pressed="true"] {
  background: var(--attio-bg);
  color: var(--attio-text);
  border-color: var(--attio-line2);
  box-shadow: var(--attio-shadow1);
}
html[data-ui="v2"] .uiV2Seg {
  display: inline-flex;
  background: var(--attio-surface);
  border-radius: var(--attio-r3);
  padding: 2px;
}
html[data-ui="v2"] .uiV2Note {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--attio-text3);
}
html[data-ui="v2"] .uiV2Why {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
html[data-ui="v2"] .uiV2Why input {
  flex: 1;
  min-width: 180px;
  height: 32px;
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r2);
  background: var(--attio-bg);
  color: var(--attio-text);
  font: inherit;
  padding: 0 10px;
}
html[data-ui="v2"] .uiV2Comment {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-ui="v2"] .uiV2Comment textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r3);
  background: var(--attio-bg);
  color: var(--attio-text);
  font: inherit;
  padding: 8px 10px;
}
html[data-ui="v2"] .uiV2Hint {
  font-size: 12.5px;
  color: var(--attio-text3);
}

/* In-scope content. Fallback pages do not get these rules. */
html[data-ui="v2"] [data-v2-scope="1"] .card,
html[data-ui="v2"] .uiV2Lead,
html[data-ui="v2"] .uiV2SiteHead {
  background: var(--attio-bg);
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r4);
  box-shadow: var(--attio-shadow1);
}
html[data-ui="v2"] .uiV2Lead,
html[data-ui="v2"] .uiV2SiteHead {
  padding: 14px 16px;
  margin-bottom: 16px;
}
html[data-ui="v2"] .uiV2H {
  font-size: 24px;
  margin: 4px 0;
  color: var(--attio-text);
}
html[data-ui="v2"] .uiV2Sub,
html[data-ui="v2"] .uiV2Kpi .uiV2Cap {
  color: var(--attio-text3);
  font-size: 12.5px;
  font-weight: 500;
}
html[data-ui="v2"] .uiV2Kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
html[data-ui="v2"] .uiV2Kpi {
  padding: 14px 16px;
  background: var(--attio-bg);
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r4);
  box-shadow: var(--attio-shadow1);
}
html[data-ui="v2"] .uiV2Kpi .uiV2Val {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
  color: var(--attio-text);
}
html[data-ui="v2"] .uiV2Kpi .uiV2Val a,
html[data-ui="v2"] [data-v2-scope="1"] a.uiV2Item,
html[data-ui="v2"] [data-v2-scope="1"] .tasksTitle a,
html[data-ui="v2"] [data-v2-scope="1"] .pcrmName a,
html[data-ui="v2"] [data-v2-scope="1"] a.wkLink,
html[data-ui="v2"] [data-v2-scope="1"] button.wkLink,
html[data-ui="v2"] [data-v2-scope="1"] a.billRsName,
html[data-ui="v2"] [data-v2-scope="1"] .ptmProp,
html[data-ui="v2"] [data-v2-scope="1"] a.stmtLink {
  color: var(--attio-accent-hover);
  font-weight: 650;
  text-decoration: none;
}
html[data-ui="v2"] [data-v2-scope="1"] a.uiV2Item:hover,
html[data-ui="v2"] [data-v2-scope="1"] .tasksTitle a:hover,
html[data-ui="v2"] [data-v2-scope="1"] .pcrmName a:hover,
html[data-ui="v2"] [data-v2-scope="1"] button.wkLink:hover {
  text-decoration: underline;
}
html[data-ui="v2"] [data-v2-scope="1"] button.wkLink {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html[data-ui="v2"] .uiV2TableWrap,
html[data-ui="v2"] [data-v2-scope="1"] .tblWrap {
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r4);
  overflow: auto;
  background: var(--attio-bg);
}
html[data-ui="v2"] [data-v2-scope="1"] table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--attio-bg);
}
html[data-ui="v2"] [data-v2-scope="1"] th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--attio-bg2);
  color: var(--attio-text3);
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--attio-line2);
  white-space: nowrap;
}
html[data-ui="v2"] [data-v2-scope="1"] td {
  padding: 3px 10px;
  height: 32px;
  border-bottom: 1px solid var(--attio-line);
  vertical-align: middle;
  color: var(--attio-text);
}
html[data-ui="v2"] [data-v2-scope="1"] tr:hover td {
  background: var(--attio-hover);
}
html[data-ui="v2"] [data-v2-scope="1"] td.num,
html[data-ui="v2"] [data-v2-scope="1"] th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html[data-ui="v2"][data-density="comfy"] [data-v2-scope="1"] td {
  padding: 10px 14px;
  height: 56px;
  font-size: 14px;
}
html[data-ui="v2"][data-density="comfy"] [data-v2-scope="1"] th {
  height: 40px;
}
html[data-ui="v2"] [data-v2-scope="1"] tr.uiV2Grp td {
  background: var(--attio-bg2);
  font-weight: 700;
  height: 36px;
  border-bottom: 1px solid var(--attio-line2);
  border-left: 3px solid var(--attio-accent);
}

/* Site file, the round-1 on-site arrangement: title, then the blocks already on the page. */
html[data-ui="v2"] [data-v2-scope="1"] .stTabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--attio-line2);
  margin-bottom: 16px;
}
html[data-ui="v2"] [data-v2-scope="1"] .stTab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--attio-text3);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 10px 12px;
  cursor: pointer;
}
html[data-ui="v2"] [data-v2-scope="1"] .stTab[aria-selected="true"] {
  color: var(--attio-text);
  font-weight: 700;
  border-bottom-color: var(--attio-accent);
}
html[data-ui="v2"] [data-v2-scope="1"] .stSnap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
html[data-ui="v2"] [data-v2-scope="1"] .stQuiet {
  background: var(--attio-bg);
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r4);
  box-shadow: var(--attio-shadow1);
  margin-bottom: 12px;
}
html[data-ui="v2"] [data-v2-scope="1"] .stQuiet > summary {
  min-height: 46px;
  padding: 8px 14px;
  cursor: pointer;
}
html[data-ui="v2"] [data-v2-scope="1"] .stPhotoStrip {
  display: flex;
  gap: 12px;
  overflow: auto;
}
html[data-ui="v2"] [data-v2-scope="1"] .stProw,
html[data-ui="v2"] [data-v2-scope="1"] .stSnapJob {
  padding: 6px 0;
  border-top: 1px solid var(--attio-line);
}

/* Tasks, CRM home, marketing, PM and projects: same type and table rhythm on the markup they already draw. */
html[data-ui="v2"] [data-v2-scope="1"] .tasksCard,
html[data-ui="v2"] [data-v2-scope="1"] .ptmCard,
html[data-ui="v2"] [data-v2-scope="1"] .pcrmCard {
  border: 1px solid var(--attio-line2);
  border-radius: var(--attio-r4);
  background: var(--attio-bg);
  box-shadow: var(--attio-shadow1);
}
html[data-ui="v2"] [data-v2-scope="1"] .tasksTitle {
  font-size: 14.5px;
  font-weight: 650;
}
html[data-ui="v2"] [data-v2-scope="1"] .pcrmTable th,
html[data-ui="v2"] [data-v2-scope="1"] .wkTable th {
  background: var(--attio-bg2);
}
html[data-ui="v2"] #uiV2FeedbackCard h2 {
  font-size: 16px;
}
html[data-ui="v2"] #uiV2FeedbackCard .neg,
html[data-ui="v2"] .uiV2Down {
  color: var(--bad);
  font-weight: 650;
}
html[data-ui="v2"] .uiV2Up {
  color: var(--good);
  font-weight: 650;
}

@media (max-width: 900px) {
  html[data-ui="v2"] .uiV2Kpis {
    grid-template-columns: 1fr 1fr;
  }
  html[data-ui="v2"] [data-v2-scope="1"] .stSnap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  html[data-ui="v2"] .uiV2Kpis {
    grid-template-columns: 1fr;
  }
  html[data-ui="v2"] .uiV2Fb {
    margin-left: 0;
  }
  /* MP-01: the feedback bar is at the bottom of the page on a phone (uiV2BarPlace), without the crumbs. */
  html[data-ui="v2"] .uiV2Bar[data-ui-bar-at="bottom"] {
    margin: 24px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .uiV2Bar[data-ui-bar-at="bottom"] .uiV2Crumbs {
    display: none;
  }
  html[data-ui="v2"] .phoneBar {
    background: var(--attio-bg);
    border-top: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .phoneBar button,
  html[data-ui="v2"] .phoneMoreItem {
    color: var(--attio-text3);
    min-height: 44px;
    font-size: 15px;
  }
  html[data-ui="v2"] .phoneBar button.on {
    background: var(--attio-select);
    color: var(--attio-text);
  }
  html[data-ui="v2"][data-nav="slack"] .phoneBar,
  html[data-ui="v2"][data-nav="slack"] .phoneMore {
    background: #350d36;
    border-color: rgba(255, 255, 255, 0.12);
  }
  html[data-ui="v2"][data-nav="slack"] .phoneBar button,
  html[data-ui="v2"][data-nav="slack"] .phoneMoreItem,
  html[data-ui="v2"][data-nav="slack"] .phoneMoreHd {
    color: #e6dbe6;
  }
  html[data-ui="v2"][data-nav="slack"] .phoneBar button.on {
    background: #245bc2;
    color: #fff;
  }
  html[data-ui="v2"] [data-v2-scope="1"] .tasksCard,
  html[data-ui="v2"] [data-v2-scope="1"] .ptmCard,
  html[data-ui="v2"] [data-v2-scope="1"] .m-card {
    font-size: 15px;
  }
  html[data-ui="v2"] #uiV2Toggle,
  html[data-ui="v2"] .uiV2Fb button,
  html[data-ui="v2"] .uiV2Seg button {
    min-height: 44px;
  }
}
@media print {
  html[data-ui="v2"] #sidebar,
  html[data-ui="v2"] .uiV2Bar,
  html[data-ui="v2"] #uiV2FeedbackCard,
  html[data-ui="v2"] .phoneBar {
    display: none !important;
  }
}

/* ---- src/v2/base.css ---- */
/* v2 design system, part 1: base colours and shared components (mock-up 06 Components, r3/r4/r5.css).
   Every selector is under html[data-ui="v2"] (tools/v2-design_test.mjs fails the build otherwise).
   Base colours are the Studio (--attio-*) values already in src/shell.html. These add the Studio
   pastel tints, the Slack aubergine nav and the component classes (all prefixed v2) so nothing here
   can match v1 markup. Not the Avenu website palette. Print is untouched: components live in
   @media screen, and the report print path never carries a v2 class. */

html[data-ui="v2"] {
  --v2-blue-50: #e9f0fe; --v2-blue-t: #1f57c9; --v2-blue: #266df0;
  --v2-green-50: #e5f6ec; --v2-green-t: #17733f; --v2-green: #22a05a;
  --v2-amber-50: #fdf1db; --v2-amber-t: #8a5800; --v2-amber: #e09b16;
  --v2-violet-50: #f0ebfd; --v2-violet-t: #5f3dc4; --v2-violet: #8061e6;
  --v2-red-50: #fdebec; --v2-red-t: #b42318; --v2-red: #e5484d;
  --v2-teal-50: #e1f5f3; --v2-teal-t: #0c6b66; --v2-teal: #14a39b;
  --v2-pink-50: #fce8f3; --v2-pink-t: #a3266c; --v2-pink: #dd4d9c;
  --v2-grey-50: #eef0f3; --v2-grey-t: #505967; --v2-grey: #a4adba;
  --v2-nav: #3f0e40; --v2-nav-top: #350d36; --v2-nav-text: #e6dbe6; --v2-nav-dim: #cfc3cf; --v2-nav-hover: #5b2c5c;
  --v2-link: var(--attio-accent-hover);
  --v2-sh-lg: 0 4px 12px rgba(28, 29, 31, .08), 0 18px 44px rgba(28, 29, 31, .16);
  --v2-side-w: 240px;
}
html[data-ui="v2"][data-mode="dark"] {
  --v2-blue-50: #1a2436; --v2-blue-t: #9cbcfa;
  --v2-green-50: #15291e; --v2-green-t: #7fd3a4;
  --v2-amber-50: #2c2414; --v2-amber-t: #ecc274;
  --v2-violet-50: #241d38; --v2-violet-t: #c2b1f7;
  --v2-red-50: #321a1b; --v2-red-t: #f5a29d;
  --v2-teal-50: #132826; --v2-teal-t: #7fd6cf;
  --v2-pink-50: #2f1925; --v2-pink-t: #f0a3cb;
  --v2-grey-50: #25272c; --v2-grey-t: #c3c9d2;
  --v2-sh-lg: 0 4px 12px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .55);
}

@media screen {
  /* Links everywhere: accent-hover as text, 6.27:1 on white. */
  html[data-ui="v2"] a.v2Lk,
  html[data-ui="v2"] .v2Lk,
  html[data-ui="v2"] a.uiV2Item {
    color: var(--v2-link);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  html[data-ui="v2"] a.v2Lk:hover,
  html[data-ui="v2"] .v2Lk:hover,
  html[data-ui="v2"] a.uiV2Item:hover { text-decoration: underline; }
  html[data-ui="v2"] .v2Lk.v2Ext::after { content: " \2197"; font-size: 11px; }
  html[data-ui="v2"] button.v2Lk { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; }

  /* Type helpers */
  html[data-ui="v2"] .v2Label { font-size: 12px; font-weight: 600; color: var(--attio-text3); }
  html[data-ui="v2"] .v2Cap { font-size: 12.5px; font-weight: 500; color: var(--attio-text3); }
  html[data-ui="v2"] .v2Num { font-variant-numeric: tabular-nums; text-align: right; }
  html[data-ui="v2"] .v2Row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  html[data-ui="v2"] .v2Grow { flex: 1; min-width: 0; }

  /* Buttons: primary, secondary, ghost, dark, danger; sm and lg (44 px touch); states. */
  html[data-ui="v2"] .v2Btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
    border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 650;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  }
  html[data-ui="v2"] .v2Btn.v2Sm { height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; }
  html[data-ui="v2"] .v2Btn.v2Lg { height: 44px; font-size: 15px; border-radius: 10px; }
  html[data-ui="v2"] .v2Btn.v2Primary { background: var(--attio-accent); color: #fff; box-shadow: 0 1px 2px rgba(28, 29, 31, .12); }
  html[data-ui="v2"] .v2Btn.v2Primary:hover { background: var(--attio-accent-hover); }
  html[data-ui="v2"] .v2Btn.v2Secondary { background: var(--v2-blue-50); color: var(--v2-blue-t); border-color: #cfdcfb; }
  html[data-ui="v2"] .v2Btn.v2Ghost { background: var(--attio-bg); color: var(--attio-text2); border-color: var(--attio-line2); box-shadow: var(--attio-shadow1); }
  html[data-ui="v2"] .v2Btn.v2Dark { background: var(--attio-primary); color: var(--attio-on-primary, #fff); }
  html[data-ui="v2"] .v2Btn.v2Danger { background: var(--attio-bg); color: var(--v2-red-t); border-color: #f3c7c9; }
  html[data-ui="v2"] .v2Btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
  html[data-ui="v2"] .v2Btn:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 1px; box-shadow: 0 0 0 4px var(--attio-focus); }
  html[data-ui="v2"] .v2Btn:disabled,
  html[data-ui="v2"] .v2Btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

  /* Pills: status, stage, category. 6 px radius, dot from --v2-td. */
  html[data-ui="v2"] .v2Pill {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px;
    font-size: 12.5px; font-weight: 550; white-space: nowrap;
    background: var(--v2-tb, var(--v2-grey-50)); color: var(--v2-tf, var(--v2-grey-t));
  }
  html[data-ui="v2"] .v2Pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-td, var(--v2-grey)); flex: none; }
  html[data-ui="v2"] .v2Pill.v2NoDot::before { display: none; }
  html[data-ui="v2"] .v2P-green { --v2-tb: var(--v2-green-50); --v2-tf: var(--v2-green-t); --v2-td: var(--v2-green); }
  html[data-ui="v2"] .v2P-red { --v2-tb: var(--v2-red-50); --v2-tf: var(--v2-red-t); --v2-td: var(--v2-red); }
  html[data-ui="v2"] .v2P-amber { --v2-tb: var(--v2-amber-50); --v2-tf: var(--v2-amber-t); --v2-td: var(--v2-amber); }
  html[data-ui="v2"] .v2P-blue { --v2-tb: var(--v2-blue-50); --v2-tf: var(--v2-blue-t); --v2-td: var(--v2-blue); }
  html[data-ui="v2"] .v2P-violet { --v2-tb: var(--v2-violet-50); --v2-tf: var(--v2-violet-t); --v2-td: var(--v2-violet); }
  html[data-ui="v2"] .v2P-teal { --v2-tb: var(--v2-teal-50); --v2-tf: var(--v2-teal-t); --v2-td: var(--v2-teal); }
  html[data-ui="v2"] .v2P-pink { --v2-tb: var(--v2-pink-50); --v2-tf: var(--v2-pink-t); --v2-td: var(--v2-pink); }
  html[data-ui="v2"] .v2P-grey { --v2-tb: var(--v2-grey-50); --v2-tf: var(--v2-grey-t); --v2-td: var(--v2-grey); }

  /* Counts: neutral, hot (red, unread), new (accent). */
  html[data-ui="v2"] .v2Count {
    display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px;
    background: var(--attio-surface); color: var(--attio-text3); font-size: 11.5px; font-weight: 650;
    align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
  }
  html[data-ui="v2"] .v2Count.v2Hot { background: var(--v2-red-t); color: #fff; font-weight: 750; border-radius: 10px; }
  html[data-ui="v2"] .v2Count.v2New { background: var(--attio-accent); color: #fff; font-weight: 750; border-radius: 10px; }

  /* Tabs: underline, selected = accent (or --v2-tc), count follows. */
  html[data-ui="v2"] .v2Tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--attio-line2); overflow-x: auto; }
  html[data-ui="v2"] .v2Tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; font: inherit; font-weight: 550;
    color: var(--attio-text3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    white-space: nowrap; font-size: 13.5px; background: none; cursor: pointer; text-decoration: none;
  }
  html[data-ui="v2"] .v2Tab[aria-selected="true"] { color: var(--attio-text); font-weight: 700; border-bottom-color: var(--v2-tc, var(--attio-accent)); }
  html[data-ui="v2"] .v2Tab[aria-selected="true"] .v2Count { background: var(--v2-tc, var(--attio-accent)); color: #fff; }

  /* Pill filters (state tabs) and segmented switches */
  html[data-ui="v2"] .v2Stab {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px;
    border: 1px solid var(--attio-line2); font: inherit; font-size: 13px; font-weight: 600;
    color: var(--attio-text2); background: var(--attio-bg); cursor: pointer;
  }
  html[data-ui="v2"] .v2Stab[aria-pressed="true"] { background: var(--attio-accent); border-color: var(--attio-accent); color: #fff; }
  html[data-ui="v2"] .v2Seg { display: inline-flex; background: var(--attio-surface); border-radius: 8px; padding: 2px; gap: 0; }
  html[data-ui="v2"] .v2Seg > button {
    white-space: nowrap; padding: 4px 9px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 550;
    color: var(--attio-text3); background: none; border: 0; cursor: pointer;
  }
  html[data-ui="v2"] .v2Seg > button[aria-pressed="true"] { background: var(--attio-bg); color: var(--attio-text); font-weight: 700; box-shadow: 0 0 0 1px var(--attio-line2), var(--attio-shadow1); }

  /* Cards and icon tiles */
  html[data-ui="v2"] .v2Card { background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow1); padding: 16px; }
  html[data-ui="v2"] .v2CardHead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  html[data-ui="v2"] .v2CardHead h3 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
  html[data-ui="v2"] .v2CardHead .v2R { margin-left: auto; }
  html[data-ui="v2"] .v2Ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; flex: none; background: var(--v2-grey-50); }

  /* Avatars: Studio --tf shades, all at least 5.9:1 with white */
  html[data-ui="v2"] .v2Av { width: 28px; height: 28px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 750; color: #fff; flex: none; background: #505967; }
  html[data-ui="v2"] .v2Av.v2Av-sm { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; }
  html[data-ui="v2"] .v2Av-blue { background: #1f57c9; }
  html[data-ui="v2"] .v2Av-green { background: #17733f; }
  html[data-ui="v2"] .v2Av-amber { background: #8a5800; }
  html[data-ui="v2"] .v2Av-violet { background: #5f3dc4; }
  html[data-ui="v2"] .v2Av-red { background: #b42318; }
  html[data-ui="v2"] .v2Av-teal { background: #0c6b66; }
  html[data-ui="v2"] .v2Av-pink { background: #a3266c; }

  /* KPI tiles with sparklines (A-C03) */
  html[data-ui="v2"] .v2Kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 16px; }
  html[data-ui="v2"] .v2Kpi { padding: 14px 16px; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow1); display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
  html[data-ui="v2"] a.v2Kpi:hover { border-color: var(--attio-line3); }
  html[data-ui="v2"] .v2Kpi .v2KpiV { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin: 4px 0 2px; color: var(--attio-text); font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2Kpi .v2KpiFoot { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
  html[data-ui="v2"] .v2Delta { font-size: 12.5px; font-weight: 650; }
  html[data-ui="v2"] .v2Delta.v2Up { color: var(--v2-green-t); }
  html[data-ui="v2"] .v2Delta.v2Down { color: var(--v2-red-t); }
  html[data-ui="v2"] .v2Delta.v2Flat { color: var(--attio-text3); }
  html[data-ui="v2"] .v2Spark { display: inline-block; vertical-align: middle; flex: none; }
  html[data-ui="v2"] .v2Spark .v2SparkArea { fill: var(--attio-accent); opacity: .12; }
  html[data-ui="v2"] .v2Spark .v2SparkLine { fill: none; stroke: var(--attio-accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  html[data-ui="v2"] .v2Spark .v2SparkDot { fill: var(--attio-accent); }

  /* Needs attention list (A-C04) */
  html[data-ui="v2"] .v2Attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  html[data-ui="v2"] .v2Attn li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2Attn li:first-child { border-top: 0; }
  html[data-ui="v2"] .v2Attn .v2AttnBody { flex: 1; min-width: 0; }
  html[data-ui="v2"] .v2Attn .v2AttnTitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Receivables ageing (A-C05) */
  html[data-ui="v2"] .v2Stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--attio-surface); }
  html[data-ui="v2"] .v2Stack > span { display: block; height: 100%; }
  html[data-ui="v2"] .v2Legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
  html[data-ui="v2"] .v2Legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--attio-text3); }
  html[data-ui="v2"] .v2Legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
  html[data-ui="v2"] .v2Age0 { background: var(--v2-green); }
  html[data-ui="v2"] .v2Age1 { background: var(--v2-amber); }
  html[data-ui="v2"] .v2Age2 { background: var(--v2-pink); }
  html[data-ui="v2"] .v2Age3 { background: var(--v2-red); }
  html[data-ui="v2"] .v2Bar { height: 6px; border-radius: 999px; background: var(--attio-surface); overflow: hidden; min-width: 70px; }
  html[data-ui="v2"] .v2Bar > span { display: block; height: 100%; border-radius: 999px; background: var(--attio-accent); }

  /* Hover card (A-C06) */
  html[data-ui="v2"] .v2Pop {
    position: absolute; z-index: 1300; width: 300px; background: var(--attio-bg); color: var(--attio-text);
    border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--v2-sh-lg); padding: 14px; font-size: 13.5px;
  }
  html[data-ui="v2"] .v2Pop[hidden] { display: none; }
  html[data-ui="v2"] .v2Pop .v2PopTitle { display: block; font-weight: 650; color: var(--v2-link); margin: 2px 0 6px; }
  html[data-ui="v2"] .v2Pop dl { display: grid; grid-template-columns: 96px 1fr; gap: 5px 10px; margin: 8px 0 0; }
  html[data-ui="v2"] .v2Pop dt { color: var(--attio-text3); font-weight: 500; }
  html[data-ui="v2"] .v2Pop dd { margin: 0; }
  html[data-ui="v2"] .v2Pop .v2PopActs { display: flex; gap: 8px; margin-top: 12px; }

  /* Toasts, empty and loading states */
  html[data-ui="v2"] .v2Toast { display: flex; gap: 12px; align-items: flex-start; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 10px; box-shadow: var(--v2-sh-lg); padding: 12px 14px; max-width: 360px; }
  html[data-ui="v2"] .v2Toast .v2Tic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; background: var(--v2-green-t); flex: none; }
  html[data-ui="v2"] .v2Toast.v2Err .v2Tic { background: var(--v2-red-t); }
  html[data-ui="v2"] .v2Toast.v2Warn .v2Tic { background: var(--v2-amber-t); }
  html[data-ui="v2"] .v2Empty { text-align: center; padding: 28px; border: 1px dashed var(--attio-line3); border-radius: 12px; background: var(--attio-bg2); }
  html[data-ui="v2"] .v2Empty .v2Ill { width: 48px; height: 48px; border-radius: 12px; background: var(--v2-blue-50); color: var(--v2-blue-t); margin: 0 auto 12px; display: grid; place-items: center; font-size: 22px; }
  html[data-ui="v2"] .v2Empty p { color: var(--attio-text3); margin: 4px 0 14px; }
  html[data-ui="v2"] .v2Sk { background: linear-gradient(90deg, var(--attio-bg2), var(--attio-surface), var(--attio-bg2)); background-size: 200% 100%; border-radius: 6px; min-height: 10px; }

  /* Breadcrumbs */
  html[data-ui="v2"] .v2Crumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--attio-text3); flex-wrap: wrap; }
  html[data-ui="v2"] .v2Crumbs a { color: var(--v2-link); font-weight: 500; text-decoration: none; }
  html[data-ui="v2"] .v2Crumbs a:hover { text-decoration: underline; }
  html[data-ui="v2"] .v2Crumbs .v2Sep { color: var(--attio-caption); }
  html[data-ui="v2"] .v2Crumbs .v2Here { color: var(--attio-text); font-weight: 650; }
}

/* ---- src/v2/shell.css ---- */
/* v2 design system, part 2: the shell (A-01, mock-ups 01a/01b, 06, 12/12b, 07, 21).
   Light Studio sidebar is the default. html[data-nav="slack"] is the aubergine option (per person).
   Workspace groups are the existing .sbLink menu (role caps, Customise menu and hidden items stay
   as they are); v2 adds the workspace header, # saved views with counts and people around it.
   Top bar: global search trigger (Cmd/Ctrl+K). Phone: bottom bar and More sheet (max-width 700px).
   Everything is screen only; print hides the v2 chrome. */

/* Page gutter: the page bar, the preview strip and the sync strip line up with main's padding. */
html[data-ui="v2"] { --v2-gutter: 22px; --v2-rail-w: 56px; }

/* A-30: a hidden info tooltip takes no layout, so the ones near the right edge cannot scroll the page sideways. */
html[data-ui="v2"] .info:not(:hover):not(.pinned):not(:focus-within) .tip { display: none; }

/* Sidebar width and the #app track always change together (L-1 / L-2): the sticky sidebar must not
   paint over the first pixels of #content. 1024 and up: the 240px sidebar. 701-1023: the icon rail. */
@media screen and (min-width: 1024px) {
  html[data-ui="v2"] #app { grid-template-columns: var(--v2-side-w) minmax(0, 1fr); }
  html[data-ui="v2"] #sidebar { width: var(--v2-side-w); }
}

@media screen {
  /* Sidebar: Studio light (01a / 12) */
  html[data-ui="v2"] #sidebar { padding: 10px 10px 0; }
  html[data-ui="v2"] #content { min-width: 0; }
  html[data-ui="v2"] #sidebar .sbBrand { display: none; }
  html[data-ui="v2"] .v2Ws { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--attio-line2); margin-bottom: 6px; text-decoration: none; color: inherit; cursor: pointer; }
  html[data-ui="v2"] .v2Ws .v2Logo { width: 32px; height: 32px; border-radius: 8px; background: var(--attio-text2); color: var(--attio-bg); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
  html[data-ui="v2"] .v2Ws b { display: block; color: var(--attio-text); font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
  html[data-ui="v2"] .v2Ws .v2WsCap { display: block; color: var(--attio-text3); font-size: 12px; font-weight: 500; }
  html[data-ui="v2"] .v2SGrp {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 10px 4px; border: 0; background: none;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--attio-text3); cursor: pointer; text-align: left;
  }
  html[data-ui="v2"] .v2SGrp::before { content: "\25BE"; font-size: 10px; }
  html[data-ui="v2"] .v2SGrp[aria-expanded="false"]::before { content: "\25B8"; }
  html[data-ui="v2"] .v2SGrp .v2SAdd { margin-left: auto; font-weight: 700; padding: 0 4px; border-radius: 4px; }
  html[data-ui="v2"] .v2SGrp .v2SAdd:hover { background: var(--attio-surface); color: var(--attio-text); }
  html[data-ui="v2"] #sbNavBody[data-v2-collapsed="1"] .sbLink,
  html[data-ui="v2"] #sbNavBody[data-v2-collapsed="1"] .sbGroup { display: none; }
  html[data-ui="v2"] .v2SideSec[data-v2-collapsed="1"] .v2Navi { display: none; }
  html[data-ui="v2"] .sbLink,
  html[data-ui="v2"] .v2Navi { display: flex; align-items: center; gap: 10px; height: 30px; min-height: 30px; padding: 0 10px; border-radius: 6px; color: var(--attio-text3); font-weight: 500; font-size: 13.5px; text-decoration: none; }
  html[data-ui="v2"] .v2Navi:hover { background: var(--attio-surface); color: var(--attio-text); }
  html[data-ui="v2"] .v2Navi.v2Unread,
  html[data-ui="v2"] .sbLink.v2Unread { color: var(--attio-text); font-weight: 700; }
  html[data-ui="v2"] .v2Navi.v2On { background: var(--attio-raised, #fff); color: var(--attio-text); font-weight: 600; box-shadow: 0 0 0 1px var(--attio-line2), var(--attio-shadow1); }
  html[data-ui="v2"] .v2Navi i,
  html[data-ui="v2"] .sbLink > i { width: 18px; text-align: center; font-style: normal; font-size: 13px; opacity: .9; background: none; flex: none; }
  html[data-ui="v2"] .v2Navi .v2NaviName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2Nb { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--v2-red-t); color: #fff; font-size: 11.5px; font-weight: 750; display: inline-grid; place-items: center; flex: none; }
  html[data-ui="v2"] .v2Nb.v2NbQuiet { background: var(--attio-surface); color: var(--attio-text3); font-weight: 650; }
  html[data-ui="v2"] .v2SideEmpty { padding: 2px 10px 6px 38px; font-size: 12.5px; color: var(--attio-text3); }
  /* Workspace icons, one per area, CSS only (the markup is the v1 menu). */
  html[data-ui="v2"] .sbLink[data-group] > i::before { content: "\25A1"; }
  html[data-ui="v2"] .sbLink[data-group="overview"] > i::before { content: "\2302"; }
  html[data-ui="v2"] .sbLink[data-group="propm"] > i::before { content: "\25A6"; }
  html[data-ui="v2"] .sbLink[data-group="financials"] > i::before { content: "$"; }
  html[data-ui="v2"] .sbLink[data-group="operations"] > i::before { content: "\25E7"; }
  html[data-ui="v2"] .sbLink[data-group="tasks"] > i::before { content: "\2713"; }
  html[data-ui="v2"] .sbLink[data-group="marketing"] > i::before { content: "\2709"; }
  html[data-ui="v2"] .sbLink[data-group="pipeline"] > i::before { content: "\25B8"; }
  html[data-ui="v2"] .sbLink[data-group="maintenance"] > i::before { content: "\2692"; }
  html[data-ui="v2"] .sbLink[data-group="financeadmin"] > i::before { content: "\25A4"; }
  html[data-ui="v2"] .sbLink[data-group="portfolio"] > i::before { content: "\25A6"; }
  html[data-ui="v2"] .sbLink[data-group="planning"] > i::before { content: "\2197"; }
  html[data-ui="v2"] .sbLink[data-group="projects"] > i::before { content: "\25A3"; }
  html[data-ui="v2"] .sbLink[data-group="calendar"] > i::before { content: "\25A2"; }
  html[data-ui="v2"] .sbLink[data-group="map"] > i::before { content: "\25CE"; }
  html[data-ui="v2"] .sbLink[data-group="reports"] > i::before { content: "\25A4"; }
  html[data-ui="v2"] .sbLink[data-group="website"] > i::before { content: "\25D0"; }
  html[data-ui="v2"] .sbLink[data-group="admin"] > i::before { content: "\2699"; }
  html[data-ui="v2"] .sbLink[data-group="crm"] > i::before { content: "\2637"; }

  /* Aubergine option (01b / 12b): Slack structure, Studio accent for the selected item. */
  html[data-ui="v2"][data-nav="slack"] #sidebar { background: var(--v2-nav); color: var(--v2-nav-text); border-right-color: transparent; }
  html[data-ui="v2"][data-nav="slack"] .v2Ws { border-bottom-color: rgba(255, 255, 255, .12); }
  html[data-ui="v2"][data-nav="slack"] .v2Ws .v2Logo { background: #fff; color: var(--v2-nav); }
  html[data-ui="v2"][data-nav="slack"] .v2Ws b { color: #fff; }
  html[data-ui="v2"][data-nav="slack"] .v2Ws .v2WsCap,
  html[data-ui="v2"][data-nav="slack"] .v2SGrp,
  html[data-ui="v2"][data-nav="slack"] .v2SideEmpty { color: var(--v2-nav-dim); }
  html[data-ui="v2"][data-nav="slack"] .v2Navi { color: var(--v2-nav-dim); font-size: 14.5px; }
  html[data-ui="v2"][data-nav="slack"] .v2Navi:hover,
  html[data-ui="v2"][data-nav="slack"] .v2SGrp .v2SAdd:hover { background: var(--v2-nav-hover); color: #fff; }
  html[data-ui="v2"][data-nav="slack"] .v2Navi.v2Unread,
  html[data-ui="v2"][data-nav="slack"] .sbLink.v2Unread { color: #fff; font-weight: 750; }
  html[data-ui="v2"][data-nav="slack"] .v2Navi.v2On { background: var(--attio-accent-hover); color: #fff; box-shadow: none; font-weight: 700; }

  /* Top bar: global search trigger, centred, with the Cmd/Ctrl+K hint */
  html[data-ui="v2"] header { gap: 12px; }
  html[data-ui="v2"] #gsearch { display: none; }
  html[data-ui="v2"] .v2Search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; max-width: 620px; height: 32px; margin: 0 auto; padding: 0 10px;
    background: var(--attio-bg2); border: 1px solid var(--attio-line2); border-radius: 6px; color: var(--attio-text3);
    font: inherit; font-size: 13px; cursor: text; text-align: left;
  }
  html[data-ui="v2"] .v2Search:hover { border-color: var(--attio-line3); }
  html[data-ui="v2"] .v2Search .v2SearchTxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2Kbd { margin-left: auto; font-size: 11px; border: 1px solid var(--attio-line2); border-radius: 4px; padding: 0 5px; color: var(--attio-text3); }

  /* Cmd/Ctrl+K palette (A-C01) */
  /* Sits 18% down, clear of the header and breadcrumb. The header search hides while it is open, so there are not two searches on screen. */
  html[data-ui="v2"] .v2Pal { position: fixed; inset: 0; z-index: 1400; display: flex; justify-content: center; align-items: flex-start; padding-top: clamp(96px, 18vh, 200px); background: rgba(17, 18, 20, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  html[data-ui="v2"] .v2Pal[hidden] { display: none; }
  html[data-ui="v2"] body:has(.v2Pal:not([hidden])) #content > header .v2Search { visibility: hidden; }
  html[data-ui="v2"] .v2PalBox { width: min(640px, calc(100vw - 24px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--v2-sh-lg); overflow: hidden; }
  html[data-ui="v2"] .v2PalIn { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2PalIn input { flex: 1; height: 48px; border: 0; outline: 0; background: transparent; color: var(--attio-text); font: inherit; font-size: 15px; }
  html[data-ui="v2"] .v2PalList { overflow: auto; padding: 6px; }
  html[data-ui="v2"] .v2PalGrp { font-size: 12px; font-weight: 600; color: var(--attio-text3); padding: 10px 10px 4px; }
  html[data-ui="v2"] .v2PalItem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--attio-text); text-decoration: none; cursor: pointer; }
  html[data-ui="v2"] .v2PalItem[aria-selected="true"],
  html[data-ui="v2"] .v2PalItem:hover { background: var(--attio-select); }
  html[data-ui="v2"] .v2PalItem .v2PalLabel { font-weight: 600; color: var(--v2-link); }
  html[data-ui="v2"] .v2PalItem .v2PalSub { color: var(--attio-text3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  html[data-ui="v2"] .v2PalNone { padding: 16px; color: var(--attio-text3); font-size: 13px; }
  html[data-ui="v2"] .v2PalFoot { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--attio-line); font-size: 12px; color: var(--attio-text3); }

  /* Page bar: breadcrumbs + density + the feedback pill (A-C10, r4 .fbbar) */
  html[data-ui="v2"] .uiV2Bar .v2Crumbs { margin-right: auto; }
  html[data-ui="v2"] .uiV2Fb { border-radius: 999px; }

  /* Saved view form (small inline dialog in the sidebar) */
  html[data-ui="v2"] .v2SvForm { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; }
  html[data-ui="v2"] .v2SvForm input { height: 30px; border: 1px solid var(--attio-line2); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--attio-bg); color: var(--attio-text); }

  /* Top bar fit (L-4). The header is a size container: its width depends on the sidebar, not the
     viewport. Every child can shrink or keeps its size; the title and the name ellipsis. */
  html[data-ui="v2"] #content > header { container: v2top / inline-size; }
  html[data-ui="v2"] #content > header > * { min-width: 0; }
  html[data-ui="v2"] #areaTitle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] #rsyWrap,
  html[data-ui="v2"] #v2More { flex: none; }
  html[data-ui="v2"] #userBox { flex: 0 1 auto; min-width: 0; margin-left: 0; gap: 8px; }
  html[data-ui="v2"] #userName { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] #userBox > :not(#userName) { flex: none; }
  /* Appearance, Sidebar and Switch back live in the ⋯ menu (Switch back is in the page bar too). */
  html[data-ui="v2"] #themeToggle,
  html[data-ui="v2"] #uiV2Toggle { display: none !important; }
  html[data-ui="v2"] .v2More { position: relative; }
  html[data-ui="v2"] .v2MoreBtn {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 6px;
    border: 1px solid var(--attio-line2); background: var(--attio-bg); color: var(--attio-text2); font: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
  }
  html[data-ui="v2"] .v2MoreBtn:hover,
  html[data-ui="v2"] .v2MoreBtn[aria-expanded="true"] { background: var(--attio-surface); color: var(--attio-text); }
  html[data-ui="v2"] .v2MoreMenu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1300; min-width: 220px; max-width: min(320px, calc(100vw - 24px)); padding: 6px;
    display: flex; flex-direction: column; gap: 2px; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 10px; box-shadow: var(--v2-sh-lg);
  }
  html[data-ui="v2"] .v2MoreMenu[hidden] { display: none; }
  html[data-ui="v2"] .v2MoreHead { padding: 6px 10px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--attio-line); font-size: 12.5px; color: var(--attio-text3); overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2MoreHead b { display: block; color: var(--attio-text); font-size: 13px; font-weight: 650; }
  html[data-ui="v2"] .v2MoreSep { height: 1px; margin: 4px 0; background: var(--attio-line); }
  html[data-ui="v2"] .v2MoreItem {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px;
    background: none; color: var(--attio-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  }
  html[data-ui="v2"] .v2MoreItem:hover,
  html[data-ui="v2"] .v2MoreItem:focus-visible { background: var(--attio-select); }
  html[data-ui="v2"] .v2MoreItem[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--attio-accent); }
  /* Resync and Sign out show in the bar when it is wide, so the menu carries them only when narrow. */
  html[data-ui="v2"] .v2MoreItem[data-v2-more-at="narrow"] { display: none; }

  /* Page bar crumbs and the sync strip (L-3; the #uiV2Bar and #previewStrip gutters are in src/ui-v2.css). */
  html[data-ui="v2"] .uiV2Crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
  html[data-ui="v2"] .uiV2Crumbs > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .uiV2Crumbs > .uiV2Sep { flex: none; }
  html[data-ui="v2"] .uiV2Note { margin: 0; white-space: normal; overflow-wrap: anywhere; }
  html[data-ui="v2"] #previewStrip a { color: inherit; }
  html[data-ui="v2"] #syncStrip { flex-wrap: nowrap; overflow-x: auto; padding: 8px var(--v2-gutter); scrollbar-width: thin; }
  html[data-ui="v2"] #syncStrip > * { flex: none; white-space: nowrap; }
}

/* Header one line from tablet up (v1 also sets nowrap; the phone keeps its wrapped header). */
@media screen and (min-width: 701px) {
  html[data-ui="v2"] #content > header { flex-wrap: nowrap !important; }
  /* A narrow header folds the search box to its icon. */
  @container v2top (max-width: 640px) {
    html[data-ui="v2"] .v2Search { flex: 0 0 32px; width: 32px; margin: 0 0 0 auto; padding: 0; justify-content: center; }
    html[data-ui="v2"] .v2Search .v2SearchTxt,
    html[data-ui="v2"] .v2Search .v2Kbd { display: none; }
  }
}

/* Header narrower than about 1000px (a 1280 viewport with the 240px sidebar is 1040): Resync and Sign
   out move into ⋯, Live updates becomes a dot (its text stays for screen readers, role=status) and
   the name becomes initials (the full name and role are the title and the menu header). */
@container v2top (max-width: 999.98px) {
  html[data-ui="v2"] #rsyBtn,
  html[data-ui="v2"] #logout { display: none !important; }
  html[data-ui="v2"] .v2MoreItem[data-v2-more-at="narrow"] { display: flex; }
  html[data-ui="v2"] #liveStatus {
    display: inline-block; width: 8px; height: 8px; padding: 0; margin-left: 0 !important; border-radius: 50%;
    background: var(--v2-amber); overflow: hidden; white-space: nowrap; text-indent: 16px; flex: none;
  }
  html[data-ui="v2"] #liveStatus:is([data-live="on"], [data-live="updating"]) { background: var(--v2-green); }
  html[data-ui="v2"] #userName[data-v2-initials] {
    display: inline-grid; place-items: center; width: 28px; height: 28px; max-width: none; border-radius: 50%;
    background: var(--attio-surface); font-size: 0; flex: none;
  }
  html[data-ui="v2"] #userName[data-v2-initials]::before { content: attr(data-v2-initials); font-size: 12px; font-weight: 650; color: var(--attio-text2); }
}

/* 701-1023px: a 56px icon rail. Hover or keyboard focus opens it to 240px over the content (the track
   stays 56px, so the page does not move). Replaces the v1 820px stacked menu for the new look. */
@media screen and (min-width: 701px) and (max-width: 1023px) {
  html[data-ui="v2"] #app { grid-template-columns: var(--v2-rail-w) minmax(0, 1fr); }
  html[data-ui="v2"] #sidebar {
    position: sticky; top: 0; height: 100vh; overflow: hidden; flex-wrap: nowrap; z-index: 70;
    width: var(--v2-rail-w); padding: 10px 6px 0; transition: width .14s ease, box-shadow .14s ease;
  }
  html[data-ui="v2"] #sidebar #sbNavBody { display: block; flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 0 0 8px; width: auto; }
  html[data-ui="v2"] #sidebar .sbNavFoot { margin: 0 -6px; width: auto; }
  html[data-ui="v2"] #sidebar:is(:hover, :focus-within) { width: var(--v2-side-w); padding: 10px 10px 0; box-shadow: var(--v2-sh-lg); }
  html[data-ui="v2"] #sidebar:is(:hover, :focus-within) .sbNavFoot { margin: 0 -10px; }
  html[data-ui="v2"] #sidebar:not(:hover):not(:focus-within) :is(.sbGroup, .v2SGrp, .v2SideSec, .sbNavFoot, .sbNavHidden, .v2Nb, #sbHealthDot),
  html[data-ui="v2"] #sidebar:not(:hover):not(:focus-within) .v2Ws > span:not(.v2Logo) { display: none; }
  html[data-ui="v2"] #sidebar:not(:hover):not(:focus-within) .v2Ws { justify-content: center; padding: 8px 0 12px; }
  html[data-ui="v2"] #sidebar:not(:hover):not(:focus-within) .sbLink { justify-content: center; gap: 0; padding: 0; font-size: 0; }
  html[data-ui="v2"] #sidebar:not(:hover):not(:focus-within) .sbLink > i { font-size: 13px; }
}

/* Phone (A-C09): bottom action bar, More sheet with saved views and people, record tiles, stacked tabs. */
@media screen and (max-width: 700px) {
  html[data-ui="v2"] { --v2-gutter: 12px; }
  html[data-ui="v2"] #app { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] #sidebar { width: auto; }
  html[data-ui="v2"] .v2MoreBtn { width: 44px; height: 44px; }
  html[data-ui="v2"] .v2MoreItem { min-height: 44px; font-size: 15px; }
  /* MP-01: the top search button goes on a phone; the bottom bar has Search. */
  html[data-ui="v2"] .v2Search { display: none; }
  html[data-ui="v2"] .v2Kbd { display: none; }
  /* Five slots, same rules as the classic bar (src/shell.html): equal width, able to shrink, 12px label. */
  html[data-ui="v2"] .phoneBar { display: flex; gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  html[data-ui="v2"] .phoneBar button { flex: 1 1 0; min-width: 0; min-height: 56px; border-radius: 10px; font-size: 12px; font-weight: 650; }
  html[data-ui="v2"] .phoneBar .phLbl { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .phoneBar .phAdd .phIco { background: var(--attio-primary); color: var(--attio-on-primary, #fff); }
  html[data-ui="v2"] .phoneMore { border-radius: 16px 16px 0 0; background: var(--attio-bg); box-shadow: var(--v2-sh-lg); }
  html[data-ui="v2"] .v2MoreSec { padding: 8px 12px; border-top: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2MoreSec .v2Navi { height: 44px; font-size: 15px; }
  html[data-ui="v2"] .v2PalBox { max-height: 86vh; }
  html[data-ui="v2"] .v2PalItem { min-height: 44px; }
  html[data-ui="v2"] .v2Tabs { position: sticky; top: 0; z-index: 5; background: var(--attio-bg); }
  html[data-ui="v2"] .v2Tab { min-height: 44px; font-size: 15px; }
  html[data-ui="v2"] .v2Tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html[data-ui="v2"] .v2Tile { background: var(--attio-bg); border: 1px solid var(--attio-line2); border-top: 3px solid var(--v2-tc, var(--attio-line3)); border-radius: 10px; padding: 10px 12px; box-shadow: var(--attio-shadow1); }
  html[data-ui="v2"] .v2Tile .v2KpiV { font-size: 22px; font-weight: 750; margin: 2px 0; }
  html[data-ui="v2"] .v2Tile.v2Bad { --v2-tc: var(--v2-red); }
  html[data-ui="v2"] .v2Tile.v2WarnT { --v2-tc: var(--v2-amber); }
  html[data-ui="v2"] .v2Tile.v2Good { --v2-tc: var(--v2-green); }
  html[data-ui="v2"] .v2Bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--attio-bg); border-top: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2Bbar .v2Btn { flex: 1; justify-content: center; height: 44px; font-size: 15px; border-radius: 10px; }
  html[data-ui="v2"] .v2Kpis { grid-template-columns: 1fr 1fr; }
  html[data-ui="v2"] .v2Pop { width: calc(100vw - 24px); left: 12px !important; }
}

@media print {
  html[data-ui="v2"] .v2NoPrint,
  html[data-ui="v2"] .v2Pal,
  html[data-ui="v2"] .v2Pop,
  html[data-ui="v2"] .v2SplitPane { display: none !important; }
}

/* ---- src/v2/density.css ---- */
/* v2 design system, part 3: table densities (A-C07) for every view (G-9 Inherit tier).
   v2-density.mjs tags qualifying tables with .v2T (header row, not a matrix, not data-m-keep, not a
   report) inside any section the page registry marked with data-v2-tier. The density lives on
   html[data-density]: absent = Dense (32 px), comfy = Comfortable (56 px), grouped = Grouped (site
   group rows), cards = Cards (rows as tiles), split = Split (list left, record right).
   Screen only, so the Board pack / Report builder print path is unchanged (G-8). */

@media screen {
  html[data-ui="v2"] table.v2T { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--attio-bg); font-size: 13px; }
  html[data-ui="v2"] table.v2T th {
    position: sticky; top: 0; z-index: 2; background: var(--attio-bg2); color: var(--attio-text3); text-align: left;
    font-size: 12.5px; font-weight: 600; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--attio-line2); white-space: nowrap;
  }
  html[data-ui="v2"] table.v2T td { padding: 3px 10px; height: 32px; border-bottom: 1px solid var(--attio-line); vertical-align: middle; color: var(--attio-text); }
  html[data-ui="v2"] table.v2T tr:hover td { background: var(--attio-hover); }
  html[data-ui="v2"] table.v2T tr.v2Sel td { background: var(--v2-blue-50); font-weight: 650; }
  html[data-ui="v2"] table.v2T tr.v2Sel td:first-child { box-shadow: inset 3px 0 0 var(--attio-accent); }
  html[data-ui="v2"] table.v2T td.num,
  html[data-ui="v2"] table.v2T th.num { text-align: right; font-variant-numeric: tabular-nums; }

  /* Comfortable: 56 px rows */
  html[data-ui="v2"][data-density="comfy"] table.v2T td { padding: 10px 14px; height: 56px; font-size: 14px; }
  html[data-ui="v2"][data-density="comfy"] table.v2T th { height: 40px; padding: 0 14px; }

  /* Grouped: group header rows (inserted by uiV2GroupTables) */
  html[data-ui="v2"] table.v2T tr.uiV2Grp td { background: var(--attio-bg2); font-weight: 700; height: 36px; border-bottom: 1px solid var(--attio-line2); border-left: 3px solid var(--attio-accent); }

  /* Cards: every row is a tile; labels come from data-label (mobile-ui.mjs mobCardsTable). */
  html[data-ui="v2"][data-density="cards"] table.v2T,
  html[data-ui="v2"][data-density="cards"] table.v2T > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; background: transparent; }
  html[data-ui="v2"][data-density="cards"] table.v2T > thead,
  html[data-ui="v2"][data-density="cards"] table.v2T tr[data-m-head] { display: none; }
  html[data-ui="v2"][data-density="cards"] table.v2T > tbody { grid-column: 1 / -1; }
  html[data-ui="v2"][data-density="cards"] table.v2T tr {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--attio-bg);
    border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"][data-density="cards"] table.v2T tr.uiV2Grp { grid-column: 1 / -1; border: 0; box-shadow: none; padding: 8px 0 0; background: transparent; }
  html[data-ui="v2"][data-density="cards"] table.v2T td { display: flex; gap: 8px; height: auto; padding: 0; border: 0; background: transparent !important; }
  html[data-ui="v2"][data-density="cards"] table.v2T td[data-m-empty] { display: none; }
  /* Sites, Preferred contractors: its pieces (rows, the +N more summary) wrap and never push past the tile. */
  html[data-ui="v2"][data-density="cards"] table.v2T td.mntPrefCell { flex-direction: column; flex-wrap: wrap; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
  html[data-ui="v2"][data-density="cards"] table.v2T .mntPrefs { max-width: none; }
  html[data-ui="v2"][data-density="cards"] table.v2T td[data-m-title] { font-size: 14.5px; font-weight: 650; }
  html[data-ui="v2"][data-density="cards"] table.v2T td[data-label]::before { content: attr(data-label); min-width: 96px; color: var(--attio-text3); font-weight: 500; font-size: 12.5px; }
  html[data-ui="v2"][data-density="cards"] table.v2T td[data-m-act] { margin-top: 6px; }

  /* Split: the section reserves room on the right for the record pane. */
  html[data-ui="v2"][data-density="split"] [data-v2-split="1"] { padding-right: 392px; }
  html[data-ui="v2"][data-density="split"] table.v2T tbody tr { cursor: pointer; }
  html[data-ui="v2"] .v2SplitPane {
    position: fixed; top: 72px; right: 16px; bottom: 16px; width: 372px; z-index: 40; overflow: auto;
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow3); padding: 16px;
  }
  html[data-ui="v2"] .v2SplitPane[hidden] { display: none; }
  html[data-ui="v2"] .v2SplitPane h3 { margin: 4px 0 12px; font-size: 18px; font-weight: 650; letter-spacing: -.012em; }
  html[data-ui="v2"] .v2SplitPane dl { display: grid; grid-template-columns: 120px 1fr; gap: 7px 12px; margin: 0; }
  html[data-ui="v2"] .v2SplitPane dt { color: var(--attio-text3); font-weight: 500; }
  html[data-ui="v2"] .v2SplitPane dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2SplitPane .v2SplitActs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
}

@media screen and (max-width: 900px) {
  /* Split becomes a full-width record under the list on narrow screens. */
  html[data-ui="v2"][data-density="split"] [data-v2-split="1"] { padding-right: 0; }
  html[data-ui="v2"] .v2SplitPane { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; border-radius: 16px 16px 0 0; }
}

/* ---- src/v2/pages.css ---- */
/* v2 design system, part 4: stage A2 Direct pages (mock-ups 01a/01b, 02, 03, 03b, 07, 08, 09).
   Page kit (head, toolbar, filters, bulk bar, column picker, split, page tables .v2PT), finance overview
   and invoices, site file (desktop and the phone layout of mock-up 07), portfolio and work orders.
   Every selector is under html[data-ui="v2"]; the blocks are inserted by v2-pages.mjs with class v2Page.
   v1 duplicates (the site file's own picker and tabs, the work order list while the v2 grid is shown)
   are hidden only on sections a v2 renderer marked with data-v2-direct. Screen only: print unchanged. */

@media screen {
  /* ---- page kit ---- */
  html[data-ui="v2"] .v2Page { margin: 0 0 16px; color: var(--attio-text); }
  html[data-ui="v2"] .v2PHead { margin: 0 0 16px; }
  html[data-ui="v2"] .v2PTitleRow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
  html[data-ui="v2"] .v2Eyebrow { font-size: 13px; font-weight: 600; color: var(--attio-text3); margin-bottom: 2px; }
  html[data-ui="v2"] .v2H1 { font-size: 30px; font-weight: 750; letter-spacing: -.022em; margin: 0; line-height: 1.15; color: var(--attio-text); }
  html[data-ui="v2"] .v2H2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 6px 0 8px; }
  html[data-ui="v2"] .v2PActs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
  html[data-ui="v2"] .v2SubHead { font-size: 15px; font-weight: 700; margin: 24px 0 8px; color: var(--attio-text2); }
  html[data-ui="v2"] .v2Sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-ui="v2"] .v2Right { text-align: right; }
  html[data-ui="v2"] .v2Neg { color: var(--v2-red-t); font-weight: 650; }
  html[data-ui="v2"] .v2Between { justify-content: space-between; }
  html[data-ui="v2"] .v2Foot { margin-top: 8px; }
  html[data-ui="v2"] .v2Held { margin: 6px 0 10px; color: var(--v2-amber-t); }

  html[data-ui="v2"] .v2Grid { display: grid; gap: 16px; margin: 0 0 16px; align-items: start; }
  html[data-ui="v2"] .v2G-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  html[data-ui="v2"] .v2G-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-ui="v2"] .v2Page .v2Card { margin: 0 0 16px; }
  html[data-ui="v2"] .v2Grid > .v2Card,
  html[data-ui="v2"] .v2Col > .v2Card:last-child { margin-bottom: 0; }
  html[data-ui="v2"] .v2Col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html[data-ui="v2"] .v2Col > .v2Card { margin: 0; }

  html[data-ui="v2"] .v2Toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
  html[data-ui="v2"] .v2Stabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
  html[data-ui="v2"] .v2Stab .v2Count { background: var(--attio-surface); }
  html[data-ui="v2"] .v2Stab[aria-pressed="true"] .v2Count { background: rgba(255, 255, 255, .25); color: #fff; }
  html[data-ui="v2"] .v2SearchBox {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; min-width: 220px;
    border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-bg); color: var(--attio-text3);
  }
  html[data-ui="v2"] .v2SearchBox input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--attio-text); flex: 1; min-width: 0; }
  html[data-ui="v2"] .v2SearchBox:focus-within { border-color: var(--attio-accent); box-shadow: 0 0 0 3px var(--attio-focus); }
  html[data-ui="v2"] .v2Filter { position: relative; display: inline-flex; }
  html[data-ui="v2"] .v2Filter select {
    appearance: none; -webkit-appearance: none; height: 32px; padding: 0 28px 0 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--attio-line2); background: var(--attio-bg) linear-gradient(transparent, transparent); color: var(--attio-text2); cursor: pointer;
  }
  html[data-ui="v2"] .v2Filter::after { content: "\25BE"; position: absolute; right: 10px; top: 7px; font-size: 12px; pointer-events: none; color: inherit; }
  html[data-ui="v2"] .v2Filter.v2On select { background: var(--attio-primary); border-color: var(--attio-primary); color: var(--attio-on-primary, #fff); }
  html[data-ui="v2"] .v2Filter.v2On::after { color: var(--attio-on-primary, #fff); }

  html[data-ui="v2"] .v2ColWrap { position: relative; display: inline-flex; }
  html[data-ui="v2"] .v2ColPick {
    position: absolute; right: 0; top: 38px; z-index: 60; width: 300px; padding: 14px; background: var(--attio-bg);
    border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--v2-sh-lg);
  }
  html[data-ui="v2"] .v2ColPick ul { list-style: none; margin: 8px 0 0; padding: 0; }
  html[data-ui="v2"] .v2ColPick li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2ColPick label { display: inline-flex; gap: 8px; align-items: center; font-weight: 550; }
  html[data-ui="v2"] .v2ColPick input { accent-color: var(--attio-accent); width: 16px; height: 16px; }

  html[data-ui="v2"] .v2Bulk {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: 10px;
    background: var(--attio-primary); color: var(--attio-on-primary, #fff); font-size: 14px;
  }
  html[data-ui="v2"] .v2Bulk .v2BulkSub { opacity: .8; font-size: 13px; }
  html[data-ui="v2"] .v2BulkBtn { height: 30px; padding: 0 12px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 650; background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; }
  html[data-ui="v2"] .v2BulkBtn:hover { background: rgba(255, 255, 255, .12); }
  html[data-ui="v2"] .v2BulkBtn:disabled { opacity: .45; cursor: not-allowed; }

  /* Page tables (own class so the global densities do not reshape them) */
  html[data-ui="v2"] .v2TWrap { overflow: auto; border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg); }
  html[data-ui="v2"] .v2TWrap.v2Sticky { max-height: 72vh; }
  html[data-ui="v2"] table.v2PT { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
  html[data-ui="v2"] table.v2PT th {
    position: sticky; top: 0; z-index: 2; background: var(--attio-bg2); color: var(--attio-text3); text-align: left; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] table.v2PT td { padding: 4px 12px; height: 36px; border-bottom: 1px solid var(--attio-line); vertical-align: middle; }
  html[data-ui="v2"] .v2Sticky table.v2PT th:first-child,
  html[data-ui="v2"] .v2Sticky table.v2PT td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
  html[data-ui="v2"] .v2Sticky table.v2PT th:first-child { z-index: 3; background: var(--attio-bg2); }
  html[data-ui="v2"] table.v2PT tbody tr { background: var(--attio-bg); }
  html[data-ui="v2"] table.v2PT tbody tr:hover { background: var(--attio-hover); }
  html[data-ui="v2"] table.v2PT tr.v2Sel { background: var(--v2-blue-50); }
  html[data-ui="v2"] table.v2PT tr.v2Sel td:first-child { box-shadow: inset 3px 0 0 var(--attio-accent); }
  html[data-ui="v2"] table.v2PT .num { text-align: right; font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] table.v2PT.v2Comfy td { height: 52px; padding: 8px 14px; font-size: 14px; }
  html[data-ui="v2"] table.v2PT .v2Chk { width: 36px; padding-right: 0; }
  html[data-ui="v2"] table.v2PT .v2Chk input { width: 16px; height: 16px; accent-color: var(--attio-accent); }
  html[data-ui="v2"] table.v2PT tr.v2GrpRow td { background: var(--attio-bg2); font-weight: 650; height: 40px; }
  html[data-ui="v2"] table.v2PT tr.v2SubRow td { font-weight: 700; background: var(--attio-bg); border-bottom: 2px solid var(--attio-line2); }
  html[data-ui="v2"] table.v2PT tr.v2Total td { background: var(--attio-primary); color: var(--attio-on-primary, #fff); font-weight: 700; height: 44px; border: 0; }
  html[data-ui="v2"] .v2Stack.v2Mix { height: 8px; min-width: 120px; }

  /* Split (list left, record right) */
  html[data-ui="v2"] .v2Split { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.6fr); border: 1px solid var(--attio-line2); border-radius: 12px; background: var(--attio-bg); min-height: 60vh; }
  html[data-ui="v2"] .v2SplitList { padding: 12px; border-right: 1px solid var(--attio-line2); overflow: auto; max-height: 78vh; display: flex; flex-direction: column; gap: 10px; }
  html[data-ui="v2"] .v2SplitList .v2SearchBox { width: 100%; box-sizing: border-box; }
  html[data-ui="v2"] .v2SplitDetail { padding: 20px 24px; min-width: 0; }
  html[data-ui="v2"] .v2SplitDiv, html[data-ui="v2"] .v2SplitGrow { display: none; }
  html[data-ui="v2"] .v2Rec .v2Acts { margin: 12px 0 8px; }
  html[data-ui="v2"] .v2WoPage .v2Rec .v2Tabs { margin: 8px -24px 16px; padding: 0 24px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  html[data-ui="v2"] .v2WoPage .v2Rec .v2Tabs::-webkit-scrollbar { display: none; }
  html[data-ui="v2"] .v2WoPage .v2Split .v2Rec .v2Tabs { margin: 8px 0 16px; padding: 0; }
  /* Work order split (2 Nov 2026): list and job scroll on their own and do not chain to the page;
     the job head (title, Assign, ⋯) stays at the top of its pane. Quick assign and ⋯ popovers. */
  html[data-ui="v2"] .v2WoPage .v2SplitList, html[data-ui="v2"] .v2WoPage .v2SplitDetail { overflow: auto; overscroll-behavior: contain; min-height: 0; }
  html[data-ui="v2"] .v2WoPage .v2SplitDetail { padding-top: 0; }
  html[data-ui="v2"] .v2WoHead { position: sticky; top: 0; z-index: 3; background: var(--attio-bg); padding-top: 20px; padding-bottom: 4px; }
  html[data-ui="v2"] .v2WoActs { position: relative; flex-wrap: wrap; }
  html[data-ui="v2"] .v2WoPop { position: absolute; top: 100%; left: 0; z-index: 20; width: min(420px, 100%); margin-top: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow1); }
  html[data-ui="v2"] .v2WoMenu { left: auto; right: 0; width: 260px; gap: 2px; padding: 6px; }
  html[data-ui="v2"] .v2WoMenuIt { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--attio-text); font: inherit; text-decoration: none; cursor: pointer; }
  html[data-ui="v2"] .v2WoMenuIt:hover, html[data-ui="v2"] .v2WoMenuIt:focus-visible { background: var(--attio-surface); }
  html[data-ui="v2"] .v2WoMenuSub { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
  html[data-ui="v2"] .v2WoAsgList { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; overscroll-behavior: contain; }
  html[data-ui="v2"] .v2WoAsgItem { text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; color: var(--attio-text); cursor: pointer; }
  html[data-ui="v2"] .v2WoAsgItem[aria-selected="true"] { border-color: var(--attio-accent); background: var(--v2-blue-50); }
  html[data-ui="v2"] .v2WoAsgItem:disabled { color: var(--attio-text3); cursor: not-allowed; }
  html[data-ui="v2"] .v2WoAsgDates label { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--attio-text3); }
  html[data-ui="v2"] .v2Facts { display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; margin: 8px 0 0; font-size: 14px; }
  html[data-ui="v2"] .v2Facts dt { color: var(--attio-text3); font-weight: 500; }
  html[data-ui="v2"] .v2Facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2Card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }

  /* ---- finance overview (08) ---- */
  html[data-ui="v2"] .v2Trend { width: 100%; height: 240px; display: block; }
  html[data-ui="v2"] .v2Trend .v2TrGrid { stroke: var(--attio-line); stroke-width: 1; }
  html[data-ui="v2"] .v2Trend .v2TrAx { fill: var(--attio-text3); font-size: 11.5px; font-family: inherit; }
  html[data-ui="v2"] .v2Trend .v2TrArea { fill: var(--attio-accent); opacity: .1; }
  html[data-ui="v2"] .v2Trend .v2TrLine { fill: none; stroke: var(--attio-accent); stroke-width: 2.4; stroke-linejoin: round; }
  html[data-ui="v2"] .v2Trend .v2TrFc { fill: none; stroke: var(--attio-accent); stroke-width: 2.4; stroke-dasharray: 4 5; }
  html[data-ui="v2"] .v2Trend .v2TrDot { fill: var(--attio-accent); }
  html[data-ui="v2"] .v2Fin .v2Legend { margin: 0 0 10px; }

  /* ---- site file (01a / 01b) ---- */
  html[data-ui="v2"] #tab-sitetech[data-v2-direct="site"] > .card > h2,
  html[data-ui="v2"] #tab-sitetech[data-v2-direct="site"] #stBody > div:first-child,
  html[data-ui="v2"] #tab-sitetech[data-v2-direct="site"] #stBody > .stTabs,
  html[data-ui="v2"] #tab-sitetech[data-v2-direct="site"] #stBody > .stHouseChips,
  html[data-ui="v2"] #tab-sitetech[data-v2-direct="site"] #stBody .stOnsiteActs { display: none; }
  html[data-ui="v2"] .v2SiteHead { background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 14px; padding: 18px 20px 0; margin: 0 0 16px; box-shadow: var(--attio-shadow1); }
  html[data-ui="v2"] .v2SiteHead .v2PTitleRow { align-items: flex-start; margin-top: 10px; }
  html[data-ui="v2"] .v2SiteFacts { margin-top: 10px; }
  html[data-ui="v2"] .v2SwitchSite input {
    height: 36px; padding: 0 12px; border-radius: 8px; font: inherit; font-weight: 650; font-size: 14px; min-width: 220px;
    border: 1px solid var(--attio-line2); background: var(--attio-bg); color: var(--attio-text); box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"] .v2SwitchSite .mspList, html[data-ui="v2"] .mspList { background: var(--attio-bg); border-color: var(--attio-line2); }
  html[data-ui="v2"] .v2SiteSearch { margin: 14px 0 6px; }
  html[data-ui="v2"] .v2SiteSearch .v2SearchBox { height: 40px; }
  html[data-ui="v2"] .v2SegDark > button[aria-pressed="true"] { background: var(--attio-primary); color: var(--attio-on-primary, #fff); }
  html[data-ui="v2"] .v2SiteTabs { margin-top: 4px; }
  html[data-ui="v2"] .v2SiteTabs .v2Tabs { border-bottom: 0; }
  html[data-ui="v2"] .v2G-site { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2G-site .v2SpanAll { grid-column: 1 / 3; }
  html[data-ui="v2"] .v2G-site .v2SpanR { grid-row: span 2; }
  html[data-ui="v2"] .v2Rooms, html[data-ui="v2"] .v2Jobs, html[data-ui="v2"] .v2Contr, html[data-ui="v2"] .v2Hits, html[data-ui="v2"] .v2Events { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2Rooms li, html[data-ui="v2"] .v2Jobs li, html[data-ui="v2"] .v2Contr li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2Rooms li:first-child, html[data-ui="v2"] .v2Jobs li:first-child, html[data-ui="v2"] .v2Contr li:first-child { border-top: 0; }
  html[data-ui="v2"] .v2RoomName { font-weight: 600; }
  html[data-ui="v2"] .v2Jobs .v2Btn.v2Lg { width: 100%; justify-content: center; margin-top: 10px; }
  html[data-ui="v2"] .v2Tree, html[data-ui="v2"] .v2Tree ul { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2Tree ul { padding-left: 32px; }
  html[data-ui="v2"] .v2Tree li { margin: 2px 0; }
  html[data-ui="v2"] .v2TreeRoot, html[data-ui="v2"] .v2TreeRow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 14px; background: none; border: 0; color: var(--attio-text); text-align: left; cursor: pointer; }
  html[data-ui="v2"] .v2TreeRow:hover { background: var(--attio-hover); }
  html[data-ui="v2"] .v2TreeRow .v2Count, html[data-ui="v2"] .v2TreeRoot .v2Count { margin-left: auto; }
  html[data-ui="v2"] .v2Fold { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 10px; color: #fff; background: var(--v2-td, var(--v2-grey)); flex: none; }
  html[data-ui="v2"] .v2File .v2Lk { display: block; padding: 5px 8px; border-radius: 6px; font-weight: 550; text-align: left; }
  html[data-ui="v2"] .v2File .v2Lk:hover { background: var(--v2-blue-50); text-decoration: none; }
  html[data-ui="v2"] .v2Photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
  html[data-ui="v2"] .v2Photo { aspect-ratio: 4 / 3; border-radius: 10px; border: 0; display: flex; align-items: flex-end; padding: 8px; cursor: pointer; }
  html[data-ui="v2"] .v2Photo span { background: var(--attio-bg); color: var(--v2-link); font-weight: 650; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Real thumbnails (10 Nov 2026). The coloured block stays underneath as the placeholder, so nothing jumps. */
  html[data-ui="v2"] .v2Photo.v2PhotoImg { position: relative; overflow: hidden; cursor: zoom-in; }
  html[data-ui="v2"] .v2Photo.v2PhotoImg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  html[data-ui="v2"] .v2Photo.v2PhotoImg span { position: relative; }
  html[data-ui="v2"] .v2Ph0 { background: linear-gradient(135deg, #b7cddb, #93a8c8); }
  html[data-ui="v2"] .v2Ph1 { background: linear-gradient(135deg, #b6c2dc, #8f9cc9); }
  html[data-ui="v2"] .v2Ph2 { background: linear-gradient(135deg, #b5b6dc, #9089c8); }
  html[data-ui="v2"] .v2Ph3 { background: linear-gradient(135deg, #bcb0dc, #9a85c6); }
  html[data-ui="v2"] .v2Ph4 { background: linear-gradient(135deg, #c8acd9, #a582c0); }
  html[data-ui="v2"] .v2Ph5 { background: linear-gradient(135deg, #d2a9d6, #b57fbf); }
  html[data-ui="v2"] .v2OnlyPhone, html[data-ui="v2"] .v2PhoneBar { display: none; }
  html[data-ui="v2"][data-nav="slack"] .v2SiteHead .v2Crumbs .v2Here { color: var(--attio-text); }

  /* ---- portfolio (02) ---- */
  html[data-ui="v2"] .v2OccBar { display: inline-flex; align-items: center; gap: 10px; min-width: 170px; }
  html[data-ui="v2"] .v2OccBar .v2Bar { flex: 1; height: 7px; }
  html[data-ui="v2"] .v2SparkWrap.v2Hot .v2SparkLine, html[data-ui="v2"] .v2SparkWrap.v2Hot .v2SparkDot { stroke: var(--v2-red); fill: var(--v2-red); }
  html[data-ui="v2"] .v2SparkWrap.v2Hot .v2SparkLine { fill: none; }
  html[data-ui="v2"] .v2SparkWrap.v2Hot .v2SparkArea { fill: var(--v2-red); }
  html[data-ui="v2"] .v2SparkWrap.v2Cool .v2SparkLine { stroke: var(--v2-green); }
  html[data-ui="v2"] .v2SparkWrap.v2Cool .v2SparkDot, html[data-ui="v2"] .v2SparkWrap.v2Cool .v2SparkArea { fill: var(--v2-green); }
  html[data-ui="v2"] .v2Dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--v2-td); margin-right: 8px; vertical-align: middle; }
  html[data-ui="v2"] .v2PortView.v2Dense table.v2PT td { height: 32px; padding-top: 2px; padding-bottom: 2px; }
  html[data-ui="v2"] .v2PortView:not(.v2Dense) table.v2PT td { height: 52px; }
  html[data-ui="v2"] .v2CardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  html[data-ui="v2"] .v2SiteCard { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
  html[data-ui="v2"] .v2MapBoard { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 16px; border: 1px solid var(--attio-line2); border-radius: 12px; background: var(--attio-bg2); }
  html[data-ui="v2"] .v2MapState { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 12px; min-height: 120px; border-radius: 12px; background: var(--v2-tb); color: var(--v2-tf); }
  html[data-ui="v2"] .v2MapState > b { width: 100%; font-size: 13px; }
  html[data-ui="v2"] .v2MapPin { padding: 3px 9px; border-radius: 999px; background: var(--attio-bg); color: var(--v2-link); font-weight: 650; font-size: 12.5px; text-decoration: none; box-shadow: var(--attio-shadow1); }
  html[data-ui="v2"] .v2MapPin.v2Hot { color: var(--v2-red-t); }

  /* ---- work orders (03 / 03b) ---- */
  html[data-ui="v2"] #tab-maint[data-v2-direct="wo"]:not([data-v2-classic="1"]) > .card,
  html[data-ui="v2"] #tab-maint[data-v2-direct="wo"]:not([data-v2-classic="1"]) > #mntClassic { display: none; }
  html[data-ui="v2"] .v2KpiStrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
  html[data-ui="v2"] .v2KpiTone { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 18px; border-radius: 12px; font: inherit; cursor: pointer; border: 1px solid; }
  html[data-ui="v2"] .v2KpiTone .v2KpiV { font-size: 28px; font-weight: 750; }
  html[data-ui="v2"] .v2KpiTone .v2Label { color: var(--attio-text); font-size: 13.5px; }
  html[data-ui="v2"] .v2T-red { background: var(--v2-red-50); border-color: #f3c7c9; color: var(--v2-red-t); }
  html[data-ui="v2"] .v2T-amber { background: var(--v2-amber-50); border-color: #f2d9a6; color: var(--v2-amber-t); }
  html[data-ui="v2"] .v2T-blue { background: var(--v2-blue-50); border-color: #cfdcfb; color: var(--v2-blue-t); }
  html[data-ui="v2"] .v2T-violet { background: var(--v2-violet-50); border-color: #d9cdf8; color: var(--v2-violet-t); }
  html[data-ui="v2"] .v2T-green { background: var(--v2-green-50); border-color: #bfe5cd; color: var(--v2-green-t); }
  html[data-ui="v2"] .v2ViewTabs { border-bottom: 1px solid var(--attio-line2); margin-bottom: 4px; }
  html[data-ui="v2"] .v2ViewTabs .v2Tabs { border-bottom: 0; }
  html[data-ui="v2"] .v2Prio { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
  html[data-ui="v2"] .v2Prio::before, html[data-ui="v2"] .v2PrioSq { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--v2-td); flex: none; }
  html[data-ui="v2"] .v2Who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  html[data-ui="v2"] .v2Bar.v2Prog { width: 96px; display: inline-block; vertical-align: middle; }
  html[data-ui="v2"] .v2WoCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  html[data-ui="v2"] .v2SplitList .v2WoCards { grid-template-columns: 1fr; }
  html[data-ui="v2"] .v2WoCard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg); cursor: pointer; -webkit-touch-callout: none; }
  html[data-ui="v2"] .v2WoCard:hover { border-color: var(--attio-line3); }
  html[data-ui="v2"] .v2WoCard.v2On { border: 2px solid var(--attio-accent); background: var(--v2-blue-50); }
  html[data-ui="v2"] .v2WoCard .v2WoT { font-weight: 650; font-size: 15px; }
  html[data-ui="v2"] .v2Stepper { display: flex; list-style: none; margin: 4px 0 16px; padding: 0; gap: 4px; }
  html[data-ui="v2"] .v2Stepper li {
    flex: 1; text-align: center; padding: 10px 6px; font-weight: 600; font-size: 13.5px; color: var(--attio-text3); background: var(--attio-surface);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  }
  html[data-ui="v2"] .v2Stepper li:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
  html[data-ui="v2"] .v2Stepper li.v2Done { background: var(--v2-green-t); color: #fff; }
  html[data-ui="v2"] .v2Stepper li.v2Now { background: var(--attio-accent); color: #fff; }
  html[data-ui="v2"] .v2Events li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2Events li:first-child { border-top: 0; }
}

/* Desktop: the work order split has a fixed height (the phone and tablet rules below stack it). */
@media screen and (min-width: 1101px) {
  html[data-ui="v2"] .v2WoPage .v2Split { height: calc(100vh - var(--v2-top, 140px)); min-height: 420px; }
  html[data-ui="v2"] .v2WoPage .v2SplitList { max-height: none; }
  /* The person's own sizes (saved in ui_layouts, v2-work-orders.mjs). The two handles exist only while the panes sit
     side by side, so narrower screens stay stacked. The px limits match V2W_SPLIT; 36% is the old .9fr / 1.6fr. */
  html[data-ui="v2"] .v2WoPage .v2Split { grid-template-columns: clamp(300px, var(--v2-wo-list, 36%), calc(100% - 430px)) 10px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 10px; }
  html[data-ui="v2"] .v2WoPage .v2Split[data-v2-wo-tall] { height: var(--v2-wo-h); }
  html[data-ui="v2"] .v2WoPage .v2SplitList { border-right: 0; }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv, html[data-ui="v2"] .v2WoPage .v2SplitGrow { display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv { cursor: col-resize; border-inline: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2WoPage .v2SplitGrow { grid-column: 1 / -1; cursor: row-resize; border-top: 1px solid var(--attio-line2); border-radius: 0 0 12px 12px; }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv::after, html[data-ui="v2"] .v2WoPage .v2SplitGrow::after { content: ""; border-radius: 2px; background: var(--attio-line2); }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv::after { width: 2px; height: 28px; }
  html[data-ui="v2"] .v2WoPage .v2SplitGrow::after { width: 28px; height: 2px; }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv:hover, html[data-ui="v2"] .v2WoPage .v2SplitGrow:hover { background: var(--attio-hover); }
  html[data-ui="v2"] .v2WoPage .v2SplitDiv:focus-visible, html[data-ui="v2"] .v2WoPage .v2SplitGrow:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: -2px; }
}

@media screen and (max-width: 1100px) {
  html[data-ui="v2"] .v2G-2-1, html[data-ui="v2"] .v2G-1-1, html[data-ui="v2"] .v2G-site { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2G-site .v2SpanAll, html[data-ui="v2"] .v2G-site .v2SpanR { grid-column: auto; grid-row: auto; }
  html[data-ui="v2"] .v2KpiStrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2Split { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2SplitList { border-right: 0; border-bottom: 1px solid var(--attio-line2); max-height: 40vh; }
  html[data-ui="v2"] .v2Photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Export CSV page menu (v2CsvMenuHtml): hidden on wide screens, where the button itself shows. */
@media screen {
  html[data-ui="v2"] .v2PgMenu { display: none; position: relative; }
  html[data-ui="v2"] .v2PgMenu > summary { list-style: none; cursor: pointer; min-width: 44px; justify-content: center; }
  html[data-ui="v2"] .v2PgMenu > summary::-webkit-details-marker { display: none; }
  html[data-ui="v2"] .v2PgMenuList { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; padding: 4px; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 10px; box-shadow: var(--v2-sh-lg); }
  html[data-ui="v2"] .v2PgMenuItem { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--attio-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
}

/* Phone (MP-01, 10 Nov 2026): title row is the title only, density switches hidden (a phone always uses
   Cards), Export CSV in the ⋯ menu. Site file: one plain header with the site switcher and ONE scrolling
   44px tab row; no aubergine band, no breadcrumb row, and no page bar over the bottom nav (+ Add has
   Photo and Work order for the site on screen). */
@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2H1 { font-size: 24px; }
  html[data-ui="v2"] .v2PActs { margin-left: 0; }
  html[data-ui="v2"] .v2Seg[aria-label="Density"], html[data-ui="v2"] .uiV2Bar .uiV2Seg { display: none; }
  html[data-ui="v2"] .v2PActs > [data-v2-pmc-csv], html[data-ui="v2"] .v2PActs > [data-v2-wo-csv], html[data-ui="v2"] .v2PActs > [data-v2-inv-csv] { display: none; }
  html[data-ui="v2"] .v2PgMenu { display: inline-block; margin-left: auto; }
  html[data-ui="v2"] .v2KpiStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2Toolbar .v2SearchBox { min-width: 0; width: 100%; }
  html[data-ui="v2"] .v2Site .v2SiteHead { margin: 0 0 12px; padding: 0; }
  html[data-ui="v2"] .v2Site .v2SiteHead .v2Crumbs { display: none; }
  html[data-ui="v2"] .v2Site .v2SiteHead .v2PTitleRow { margin-top: 0; gap: 8px; }
  html[data-ui="v2"] .v2Site .v2SiteHead .v2PActs .v2Btn { display: none; }
  html[data-ui="v2"] .v2Site .v2SiteHead .v2SwitchSite input { min-height: 44px; max-width: 100%; min-width: 0; }
  html[data-ui="v2"] .v2Site .v2SiteSearch .v2Seg { display: none; }
  html[data-ui="v2"] .v2Site .v2SiteTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  html[data-ui="v2"] .v2Site .v2SiteTabs .v2Tabs { position: static; flex: none; flex-wrap: nowrap; overflow: visible; }
  html[data-ui="v2"] .v2Site .v2SiteTabs .v2Tab { flex: none; min-height: 44px; font-size: 15px; white-space: nowrap; }
  html[data-ui="v2"] .v2Site .v2SiteTabs .v2Grow { display: none; }
  html[data-ui="v2"] .v2Site .v2SiteTabs .v2Seg { flex: none; }
  html[data-ui="v2"] .v2Site .v2SiteTabs .v2Seg button { min-height: 44px; white-space: nowrap; }
  html[data-ui="v2"] .v2Site .v2OnlyDesk { display: none; }
  html[data-ui="v2"] .v2Site .v2OnlyPhone { display: block; }
  html[data-ui="v2"] .v2Site .v2G-site .v2Lib, html[data-ui="v2"] .v2Site .v2G-site .v2SpanAll { display: none; }
  html[data-ui="v2"] .v2Site .v2PhoneBar { display: none; }
  html[data-ui="v2"] .v2Split .v2SplitDetail { padding: 14px; }
  html[data-ui="v2"] .v2Facts { grid-template-columns: 110px 1fr; }
}

/* ---- src/v2/crm.css ---- */
/* v2 design system, stage A3: CRM Home (mock-ups 12 / 12b), Contacts (04b) and the contact record (04c).
   Blocks are inserted by v2-crm.mjs (class v2Page) at the top of tab-crmhome / tab-crmcontacts.
   The CRM's own rail, top bar and list are hidden only on sections v2-crm marked with data-v2-direct,
   and come back with Classic home / Classic grid (data-v2-classic) or while a record is being edited.
   Light Studio nav by default; the aubergine nav (12b) is the existing per-user option in shell.css.
   Every selector is under html[data-ui="v2"]. Screen only: print unchanged. */

@media screen {
  /* ---- v1 duplicates, only on marked sections ---- */
  html[data-ui="v2"] section[data-v2-direct="crmhome"]:not([data-v2-classic="1"]) .pcrmRail,
  html[data-ui="v2"] section[data-v2-direct="crmhome"]:not([data-v2-classic="1"]) .pcrmTopBar,
  html[data-ui="v2"] section[data-v2-direct="crmcontacts"]:not([data-v2-classic="1"]) .pcrmRail,
  html[data-ui="v2"] section[data-v2-direct="crmcontacts"]:not([data-v2-classic="1"]) .pcrmTopBar,
  html[data-ui="v2"] section[data-v2-direct="crmrecord"] .pcrmRail,
  html[data-ui="v2"] section[data-v2-direct="crmrecord"] .pcrmTopBar { display: none; }
  html[data-ui="v2"] section[data-v2-direct="crmhome"]:not([data-v2-classic="1"]) .pcrmCanvas > :not(#pcrmRecord):not(#pcrmModal),
  html[data-ui="v2"] section[data-v2-direct="crmcontacts"]:not([data-v2-classic="1"]) .pcrmCanvas > :not(#pcrmRecord):not(#pcrmModal) { display: none; }
  html[data-ui="v2"] section[data-v2-direct="crmrecord"] #pcrmRecord > .pcrmPageHead,
  html[data-ui="v2"] section[data-v2-direct="crmrecord"] #pcrmRecord > .pcrmTabs { display: none; }
  html[data-ui="v2"] section[data-v2-direct="crmrecord"][data-v2-crm-rec="timeline"] #pcrmRecord > .pcrmHighlights,
  html[data-ui="v2"] section[data-v2-direct="crmrecord"][data-v2-crm-rec="timeline"] #pcrmRecord > .pcrmPageBody { display: none; }
  html[data-ui="v2"] section[data-v2-direct^="crm"]:not([data-v2-classic="1"]) .pcrmApp { display: block; }
  /* One CRM menu (4 Nov 2026, Alex): the top tab bar. The old side menu is gone on every CRM tab, current and future,
     Classic screens included. Classic screens keep .pcrmTopBar, which holds their search. */
  html[data-ui="v2"] .pcrm .pcrmApp > .pcrmRail { display: none; }
  html[data-ui="v2"] .pcrm .pcrmApp { grid-template-columns: minmax(0, 1fr); }
  /* Record counts on the top tab bar (Contacts 2039), set by pcrmSubnavCounts. */
  html[data-ui="v2"] #subnav .pcrmSubCount { margin-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--attio-text3); }
  /* A classic screen fits the page, so its own buttons and the page head stay on screen. */
  html[data-ui="v2"] section[data-v2-classic="1"] .pcrm .pcrmApp { min-width: 0; max-width: 100%; }
  html[data-ui="v2"] section[data-v2-classic="1"] .pcrm input.edit { min-width: 0; max-width: 100%; }

  /* ---- Home (12) ---- */
  html[data-ui="v2"] .v2CrmPage .v2Card .v2CardHead .v2R { display: inline-flex; gap: 14px; align-items: center; margin-left: auto; }
  html[data-ui="v2"] .v2CrmPipe { display: flex; flex-direction: column; }
  html[data-ui="v2"] .v2CrmPipeRow {
    display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 40px 96px; align-items: center; gap: 14px;
    min-height: 44px; border-bottom: 1px solid var(--attio-line); font-size: 15px;
  }
  html[data-ui="v2"] .v2CrmPipeRow:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2CrmPipeBar { height: 10px; }
  html[data-ui="v2"] .v2CrmNum { text-align: right; font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2CrmVal { color: var(--attio-text2); }
  html[data-ui="v2"] .v2CrmTasks, html[data-ui="v2"] .v2CrmSync, html[data-ui="v2"] .v2CrmFeed, html[data-ui="v2"] .v2CrmList { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2CrmTask { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--attio-line); font-size: 15px; }
  html[data-ui="v2"] .v2CrmTask:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2CrmSync li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; }
  html[data-ui="v2"] .v2CrmH3 { margin: 18px 0 8px; font-size: 15px; font-weight: 650; color: var(--attio-text); }
  html[data-ui="v2"] .v2CrmFeed li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--attio-line); font-size: 14px; }
  html[data-ui="v2"] .v2CrmFeed li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2CrmWhen { flex: none; width: 76px; color: var(--attio-text3); font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] table.v2PT.v2CrmLeads td { height: 44px; }

  /* ---- Contacts (04b) ---- */
  html[data-ui="v2"] .v2CrmWho { display: inline-flex; align-items: center; gap: 12px; min-width: 180px; }
  html[data-ui="v2"] .v2CrmWho .v2Av { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
  html[data-ui="v2"] .v2CrmWho > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
  html[data-ui="v2"] .v2CrmOrg { font-size: 13px; }
  html[data-ui="v2"] table.v2PT.v2CrmTable.v2Comfy td { height: 56px; }
  html[data-ui="v2"] table.v2PT.v2CrmTable td { white-space: nowrap; }
  html[data-ui="v2"] .v2CrmFit { display: inline-flex; align-items: center; gap: 10px; }
  html[data-ui="v2"] .v2CrmFit .v2Bar { width: 110px; height: 6px; }
  html[data-ui="v2"] .v2CrmFit b { font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
  html[data-ui="v2"] .v2CrmCard { display: flex; flex-direction: column; gap: 10px; }
  html[data-ui="v2"] .v2CrmPick {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; font: inherit; text-align: left; color: var(--attio-text); cursor: pointer;
  }
  html[data-ui="v2"] .v2CrmPick:hover { background: var(--attio-hover); }
  html[data-ui="v2"] .v2CrmPick.v2On { background: var(--v2-blue-50); border-color: var(--attio-accent); }

  /* ---- Contact record (04c) ---- */
  html[data-ui="v2"] .v2CrmRecHead { padding: 22px 24px 0; margin: 0 0 18px; }
  html[data-ui="v2"] .v2CrmRecTop { align-items: flex-start; gap: 20px; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2CrmBigAv .v2Av { width: 76px; height: 76px; border-radius: 12px; font-size: 26px; }
  html[data-ui="v2"] .v2CrmRecHead .v2H1 { margin: 2px 0 8px; }
  html[data-ui="v2"] .v2CrmRef { display: inline-flex; gap: 6px; align-items: center; padding: 2px 10px; border-radius: 6px; background: var(--attio-surface); font-size: 14px; color: var(--attio-text2); }
  html[data-ui="v2"] .v2CrmContactLine { margin-top: 8px; }
  html[data-ui="v2"] .v2CrmFacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
  html[data-ui="v2"] .v2CrmFact { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg2); min-width: 0; }
  html[data-ui="v2"] .v2CrmFact b { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2CrmRecTabs { margin: 8px -24px 0; padding: 0 24px; border-bottom: 0; }
  html[data-ui="v2"] .v2CrmChips { margin: 0 0 12px; }
  html[data-ui="v2"] .v2CrmTlCard { padding: 16px 22px; }
  html[data-ui="v2"] .v2CrmTlGrp + .v2CrmTlGrp { margin-top: 14px; }
  html[data-ui="v2"] .v2CrmTl { list-style: none; margin: 8px 0 0; padding: 0; }
  html[data-ui="v2"] .v2CrmTlItem { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2CrmTlItem:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2CrmTlIc { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; border: 2px solid currentColor; padding: 0; }
  html[data-ui="v2"] .v2CrmTlIc::before { display: none; }
  html[data-ui="v2"] .v2CrmTlBody { margin-top: 3px; font-size: 15px; color: var(--attio-text2); overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2CrmTlBody .v2Lk { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
  html[data-ui="v2"] .v2CrmSideCard { border-left-width: 4px; }
  html[data-ui="v2"] .v2CrmT-teal { border-left-color: var(--v2-teal); }
  html[data-ui="v2"] .v2CrmT-violet { border-left-color: var(--v2-violet); }
  html[data-ui="v2"] .v2CrmT-green { border-left-color: var(--v2-green); }
  html[data-ui="v2"] .v2CrmT-amber { border-left-color: var(--v2-amber); }
  html[data-ui="v2"] .v2CrmList li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--attio-line); font-size: 14px; }
  html[data-ui="v2"] .v2CrmList li:last-child { border-bottom: 0; }
}

/* ---- Phone: stacked cards, one column, record tiles two across ---- */
@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2CrmPage .v2Grid.v2G-2-1 { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2CrmPipeRow { grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) 30px; }
  html[data-ui="v2"] .v2CrmPipeRow .v2CrmVal { display: none; }
  html[data-ui="v2"] table.v2PT.v2CrmTable thead { display: none; }
  html[data-ui="v2"] table.v2PT.v2CrmTable, html[data-ui="v2"] table.v2PT.v2CrmTable tbody, html[data-ui="v2"] table.v2PT.v2CrmTable tr { display: block; }
  html[data-ui="v2"] table.v2PT.v2CrmTable tr { padding: 10px 12px; border-bottom: 1px solid var(--attio-line2); }
  html[data-ui="v2"] table.v2PT.v2CrmTable td { display: flex; justify-content: space-between; align-items: center; height: auto; padding: 4px 0; border: 0; white-space: normal; }
  html[data-ui="v2"] table.v2PT.v2CrmTable.v2Comfy td { height: auto; }
  html[data-ui="v2"] table.v2PT.v2CrmTable td::before { content: attr(data-label); color: var(--attio-text3); font-size: 12.5px; font-weight: 600; margin-right: 12px; }
  html[data-ui="v2"] table.v2PT.v2CrmTable td:first-child::before { display: none; }
  html[data-ui="v2"] .v2Sticky table.v2PT.v2CrmTable td:first-child { position: static; }
  html[data-ui="v2"] .v2CrmRecHead { padding: 16px 16px 0; }
  html[data-ui="v2"] .v2CrmRecTop { flex-wrap: wrap; }
  html[data-ui="v2"] .v2CrmBigAv .v2Av { width: 52px; height: 52px; font-size: 18px; }
  html[data-ui="v2"] .v2CrmFacts { grid-template-columns: 1fr 1fr; gap: 10px; }
  html[data-ui="v2"] .v2CrmRecTabs { margin: 8px -16px 0; padding: 0 16px; }
  html[data-ui="v2"] .v2CrmChips { flex-wrap: nowrap; overflow-x: auto; }
  html[data-ui="v2"] .v2CrmTlIc { width: 34px; height: 34px; font-size: 14px; }
  /* The top bar's Resync opens the Resync panel, which the phone layout hides (4 Nov 2026, Alex). */
  html[data-ui="v2"] .pcrmTopBar [data-pcrm-top-resync] { display: none; }
}

/* ---- src/v2/work.css ---- */
/* v2 design system, stage A3 Work pages: Tasks board (mock-up 05, v2-tasks.mjs) and Marketing campaigns
   and projects (mock-up 13, v2-marketing.mjs). Every selector is under html[data-ui="v2"]. The v1 tasks
   board is hidden only while #tab-tasks carries data-v2-direct="tasks" without data-v2-classic (Board and
   By site); List and Calendar show it. My work orders (mntMyWork) always stays. Screen only: print unchanged. */

@media screen {
  /* ---- Tasks: v1 board hidden behind the v2 board ---- */
  html[data-ui="v2"] #tab-tasks[data-v2-direct="tasks"]:not([data-v2-classic="1"]) #tasksRoot > :not(.mntMyWork):not(.tasksWoPanel) { display: none; }
  html[data-ui="v2"] #tab-tasks[data-v2-direct="tasks"] #tasksRoot > .tasksHead { display: none; }

  html[data-ui="v2"] .v2TbBar .v2SearchBox { flex: 1; min-width: 240px; }
  html[data-ui="v2"] .v2TbChip {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px;
    border: 1px solid var(--attio-line2); background: var(--attio-bg); color: var(--attio-text); font: inherit; font-weight: 600; cursor: pointer;
  }
  html[data-ui="v2"] .v2TbChip.v2TbHot { color: var(--v2-red-t); border-color: #f3c7c9; }
  html[data-ui="v2"] .v2TbChip .v2Dot { width: 7px; height: 7px; border-radius: 50%; margin: 0; }
  html[data-ui="v2"] .v2TbChip[aria-pressed="true"] { background: var(--attio-primary); color: var(--attio-on-primary, #fff); border-color: var(--attio-primary); }
  html[data-ui="v2"] .v2TbChip:focus-visible, html[data-ui="v2"] .v2TbCat:focus-visible, html[data-ui="v2"] .v2TbMore:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 1px; }
  html[data-ui="v2"] .v2TbActive { margin-top: 0; }
  html[data-ui="v2"] .v2TbOn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 7px;
    background: var(--attio-primary); color: var(--attio-on-primary, #fff); font-weight: 650; font-size: 13.5px;
  }
  html[data-ui="v2"] .v2TbOn button { background: none; border: 0; color: inherit; font: inherit; font-size: 15px; cursor: pointer; padding: 0 4px; }
  html[data-ui="v2"] .v2TbCats { display: flex; gap: 8px; flex-wrap: wrap; }
  html[data-ui="v2"] .v2TbCat { cursor: pointer; border: 1px solid transparent; font: inherit; font-size: 13px; }
  html[data-ui="v2"] .v2TbCat[aria-pressed="true"] { border-color: var(--v2-tf); box-shadow: 0 0 0 1px var(--v2-tf); }

  html[data-ui="v2"] .v2TbBoard { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
  html[data-ui="v2"] .v2TbCol { background: var(--attio-bg2); border: 1px solid var(--attio-line2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  html[data-ui="v2"] .v2TbColHead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
  html[data-ui="v2"] .v2TbColHead h3 { margin: 0; font-size: 15px; font-weight: 700; }
  html[data-ui="v2"] .v2TbColHead .v2Dot { width: 10px; height: 10px; border-radius: 50%; margin: 0; }
  html[data-ui="v2"] .v2TbAdd { margin-left: auto; font-size: 13.5px; }
  html[data-ui="v2"] .v2TbEmpty { padding: 8px 4px; }
  html[data-ui="v2"] .v2TbCard {
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 10px; padding: 12px 12px 12px 14px;
    box-shadow: var(--attio-shadow1); display: flex; flex-direction: column; gap: 8px;
  }
  html[data-ui="v2"] .v2TbCard.v2TbLate { box-shadow: inset 3px 0 0 var(--v2-red), var(--attio-shadow1); }
  html[data-ui="v2"] .v2TbTop { display: flex; align-items: flex-start; gap: 8px; }
  html[data-ui="v2"] .v2TbTitle { flex: 1; color: var(--attio-text); font-weight: 650; font-size: 14.5px; line-height: 1.35; text-decoration: none; }
  html[data-ui="v2"] .v2TbTitle:hover { text-decoration: underline; }
  html[data-ui="v2"] .v2TbMore {
    width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--attio-line2); background: var(--attio-bg);
    color: var(--attio-text2); cursor: pointer; font-weight: 700; line-height: 1; flex: none;
  }
  html[data-ui="v2"] .v2TbMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--attio-text3); font-size: 13px; line-height: 1.5; }
  html[data-ui="v2"] .v2TbMeta .v2Lk { font-size: 13px; }
  html[data-ui="v2"] .v2TbSep { color: var(--attio-text3); }
  html[data-ui="v2"] .v2TbOver { color: var(--v2-red-t); font-weight: 650; }
  html[data-ui="v2"] .v2TbRec { color: var(--attio-text2); }
  html[data-ui="v2"] .v2TbPills { display: flex; gap: 6px; flex-wrap: wrap; }
  html[data-ui="v2"] .v2TbSites { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  html[data-ui="v2"] .v2TbSiteCards, html[data-ui="v2"] .v2TbColCards { display: flex; flex-direction: column; gap: 10px; }
  html[data-ui="v2"] .v2TbClassic { margin: 4px 0 12px; }

  /* ---- Marketing ---- */
  html[data-ui="v2"] table.v2MktT td .v2Cap .v2Lk { font-size: 12.5px; }
  html[data-ui="v2"] .v2MktWho { display: inline-flex; align-items: center; gap: 8px; }
  html[data-ui="v2"] .v2MktBoard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; }
  html[data-ui="v2"] .v2MktCol { background: var(--attio-bg2); border: 1px solid var(--attio-line2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  html[data-ui="v2"] .v2MktCol header { display: flex; align-items: center; gap: 8px; }
  html[data-ui="v2"] .v2MktCol h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
  html[data-ui="v2"] .v2MktCol .v2Dot { width: 10px; height: 10px; border-radius: 50%; margin: 0; }
  html[data-ui="v2"] .v2MktCard { background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 10px; padding: 12px; box-shadow: var(--attio-shadow1); display: flex; flex-direction: column; gap: 6px; }
  html[data-ui="v2"] .v2MktTl { border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg); padding: 10px 14px; }
  html[data-ui="v2"] .v2MktTlScale { display: flex; justify-content: space-between; margin-left: 32%; color: var(--attio-text3); font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2MktTlRow { display: grid; grid-template-columns: 32% 1fr; align-items: center; min-height: 40px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2MktTlRow:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2MktTlName { padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2MktTlTrack { position: relative; height: 22px; }
  html[data-ui="v2"] .v2MktTlBar { position: absolute; top: 4px; height: 14px; border-radius: 5px; background: var(--v2-td); }
  html[data-ui="v2"] .v2MktTlToday { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--v2-red); opacity: .6; }
  html[data-ui="v2"] .v2MktCal { border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg); padding: 12px; }
  html[data-ui="v2"] .v2MktGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--attio-line); border: 1px solid var(--attio-line); border-radius: 8px; overflow: hidden; margin-top: 10px; }
  html[data-ui="v2"] .v2MktDh { background: var(--attio-bg2); font-size: 12px; font-weight: 650; color: var(--attio-text3); padding: 6px 8px; }
  html[data-ui="v2"] .v2MktDay { background: var(--attio-bg); min-height: 86px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  html[data-ui="v2"] .v2MktDay.v2Off { background: var(--attio-bg2); }
  html[data-ui="v2"] .v2MktDay.v2Today .v2MktDn { background: var(--attio-accent); color: #fff; border-radius: 6px; padding: 0 6px; }
  html[data-ui="v2"] .v2MktDn { font-size: 12px; font-weight: 650; color: var(--attio-text2); align-self: flex-start; }
  html[data-ui="v2"] .v2MktEv { font-size: 12px; border-radius: 5px; padding: 2px 6px; background: var(--v2-tb); color: var(--v2-tf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2MktEv .v2Lk { font-size: 12px; }
  html[data-ui="v2"] .v2MktLower { margin-top: 16px; }
  html[data-ui="v2"] .v2MktVac { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2MktVac li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2MktVac li:last-child { border-bottom: 0; }

  /* ---- phone ---- */
  @media (max-width: 700px) {
    html[data-ui="v2"] .v2TbBoard, html[data-ui="v2"] .v2MktBoard { grid-template-columns: repeat(4, 84vw); scroll-snap-type: x mandatory; }
    html[data-ui="v2"] .v2TbCol, html[data-ui="v2"] .v2MktCol { scroll-snap-align: start; }
    html[data-ui="v2"] .v2TbBar .v2SearchBox { min-width: 100%; }
    html[data-ui="v2"] .v2TbActive .v2TbCats { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    html[data-ui="v2"] .v2MktLower { grid-template-columns: 1fr; }
    html[data-ui="v2"] .v2MktTlScale { margin-left: 40%; }
    html[data-ui="v2"] .v2MktTlRow { grid-template-columns: 40% 1fr; }
    html[data-ui="v2"] .v2MktDay { min-height: 54px; }
    html[data-ui="v2"] .v2MktEv { font-size: 0; height: 6px; padding: 0; }
  }
}

/* ---- src/v2/projects.css ---- */
/* v2 design system: stage A3 Project management (mock-ups 14 Projects and 15 Project detail).
   Fees list (A-38) and Plan with the Gantt (A-39), drawn by src/js/v2-projects.mjs into v2Page blocks.
   Every selector is under html[data-ui="v2"]; v1 duplicates are hidden only on sections the v2
   renderer marked with data-v2-direct (Plan keeps the v1 task editor, #wkForm_pmwork, visible, and
   Classic view puts the v1 plan back). Screen only: print is unchanged. */

@media screen {
  /* ---- Fees list (14) ---- */
  html[data-ui="v2"] #tab-pmprojects[data-v2-direct="pmprojects"] > .card > h2,
  html[data-ui="v2"] #tab-pmprojects[data-v2-direct="pmprojects"] #pmBody > .kpiGrid { display: none; }
  html[data-ui="v2"] .v2PjNav { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2PjNav .v2Tab { text-decoration: none; color: var(--attio-text2); padding: 8px 14px; font-weight: 600; border-bottom: 2px solid transparent; }
  html[data-ui="v2"] .v2PjNav .v2Tab[aria-current="page"] { color: var(--attio-text); border-bottom-color: var(--attio-accent); }
  html[data-ui="v2"] .v2PjT td { vertical-align: middle; }
  html[data-ui="v2"] .v2PjProg { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
  html[data-ui="v2"] .v2PjProg .v2Bar { width: 80px; }
  html[data-ui="v2"] .v2PjBoard { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; margin: 0 0 16px; }
  html[data-ui="v2"] .v2PjCol { background: var(--attio-surface); border-radius: 12px; padding: 10px; min-width: 0; }
  html[data-ui="v2"] .v2PjCard { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 12px; }
  html[data-ui="v2"] .v2PjTl { position: relative; margin: 0 0 16px; }
  html[data-ui="v2"] .v2PjTlRow { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 0; height: 34px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2PjTlName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
  html[data-ui="v2"] .v2PjTlTrack { position: relative; height: 100%; }
  html[data-ui="v2"] .v2PjTlBar { position: absolute; top: 9px; height: 16px; border-radius: 6px; background: var(--v2-blue); }
  html[data-ui="v2"] .v2PjTlBar.v2P-violet { background: var(--v2-violet); }
  html[data-ui="v2"] .v2PjTlBar.v2P-amber { background: var(--v2-amber); }
  html[data-ui="v2"] .v2PjTlBar.v2P-green { background: var(--v2-green); }
  html[data-ui="v2"] .v2PjTlBar.v2P-grey { background: var(--v2-grey); }
  html[data-ui="v2"] .v2PjTlToday { position: absolute; top: 0; bottom: -1px; width: 2px; background: var(--v2-red); z-index: 1; }
  html[data-ui="v2"] .v2PjBars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 10px; }
  html[data-ui="v2"] .v2PjBarCol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
  html[data-ui="v2"] .v2PjBarV { display: block; width: 70%; max-width: 40px; border-radius: 6px 6px 2px 2px; background: var(--v2-blue); }
  html[data-ui="v2"] .v2PjBarV.v2PjFc { background: var(--v2-blue-50); box-shadow: inset 0 0 0 1px rgba(38, 109, 240, .25); }
  html[data-ui="v2"] .v2PjMiles { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2PjMiles li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2PjMiles li:first-child { border-top: 0; }
  html[data-ui="v2"] .v2PjMiles li > .v2Cap:first-child { width: 52px; flex: none; }
  html[data-ui="v2"] .v2PjSub { display: block; }

  /* ---- Plan / project detail (15) ---- */
  html[data-ui="v2"] #tab-pmwork[data-v2-direct="pmwork"]:not([data-v2-classic="1"]) #wkPmRoot .wkCard > :not([id^="wkForm_"]) { display: none; }
  html[data-ui="v2"] #tab-pmwork[data-v2-direct="pmwork"]:not([data-v2-classic="1"]) #wkPmRoot .wkCard { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
  html[data-ui="v2"] .v2PjFacts { gap: 14px; margin: -6px 0 12px; }
  html[data-ui="v2"] .v2PjFacts b { color: var(--attio-text); }
  html[data-ui="v2"] .v2PjPick { margin: 0 0 8px; }
  html[data-ui="v2"] .v2PjPlan .v2Tabs { margin-bottom: 12px; }
  html[data-ui="v2"] .v2PjChip {
    height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--attio-line2); background: var(--attio-bg);
    color: var(--attio-text); font: inherit; font-weight: 600; cursor: pointer;
  }
  html[data-ui="v2"] .v2PjChip[aria-pressed="true"] { background: var(--attio-text); border-color: var(--attio-text); color: var(--attio-bg); }
  html[data-ui="v2"] .v2PjChip:focus-visible,
  html[data-ui="v2"] .v2PjBar:focus-visible,
  html[data-ui="v2"] .v2PjMs:focus-visible,
  html[data-ui="v2"] .v2PjPhase:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; }
  html[data-ui="v2"] .v2PjLegCrit { background: var(--attio-bg); box-shadow: 0 0 0 2px var(--v2-red); }
  html[data-ui="v2"] .v2PjLegToday { background: var(--v2-red); width: 2px !important; }

  html[data-ui="v2"] .v2PjGantt {
    display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--attio-line2); border-radius: 12px;
    background: var(--attio-bg); overflow: hidden; margin: 0 0 16px;
  }
  html[data-ui="v2"] .v2PjGLeft { border-right: 1px solid var(--attio-line2); min-width: 0; }
  html[data-ui="v2"] .v2PjGHead { height: 40px; display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--attio-text3); border-bottom: 1px solid var(--attio-line2); background: var(--attio-surface); }
  html[data-ui="v2"] .v2PjGRow { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 32px; border-bottom: 1px solid var(--attio-line); white-space: nowrap; overflow: hidden; }
  html[data-ui="v2"] .v2PjGRow .v2Grow { overflow: hidden; text-overflow: ellipsis; }
  html[data-ui="v2"] .v2PjPhase { width: 100%; padding-left: 16px; border: 0; border-bottom: 1px solid var(--attio-line); background: rgba(250, 250, 251, .8); font: inherit; font-weight: 700; color: var(--attio-text); text-align: left; cursor: pointer; }
  html[data-ui="v2"] .v2PjGRight { overflow-x: auto; min-width: 0; }
  html[data-ui="v2"] .v2PjGInner { position: relative; }
  html[data-ui="v2"] .v2PjScale { position: relative; padding: 0; }
  html[data-ui="v2"] .v2PjScale span { position: absolute; top: 0; height: 40px; line-height: 40px; padding-left: 10px; border-left: 1px solid var(--attio-line); white-space: nowrap; overflow: hidden; }
  html[data-ui="v2"] .v2PjGBody { position: relative; }
  html[data-ui="v2"] .v2PjGrid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--attio-line); }
  html[data-ui="v2"] .v2PjBand { position: absolute; left: 0; right: 0; height: 36px; background: rgba(250, 250, 251, .8); border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2PjBar {
    position: absolute; height: 18px; border: 0; border-radius: 6px; padding: 0 6px; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700;
    text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer; background: var(--v2-blue); z-index: 2;
  }
  html[data-ui="v2"] .v2PjBar.v2P-teal { background: var(--v2-teal-t); }
  html[data-ui="v2"] .v2PjBar.v2P-violet { background: var(--v2-violet-t); }
  html[data-ui="v2"] .v2PjBar.v2P-amber { background: var(--v2-amber-t); }
  html[data-ui="v2"] .v2PjBar.v2P-blue { background: var(--v2-blue-t); }
  html[data-ui="v2"] .v2PjBar.v2P-green { background: var(--v2-green-t); }
  html[data-ui="v2"] .v2PjBar.v2P-pink { background: var(--v2-pink-t); }
  html[data-ui="v2"] .v2PjBar.v2P-red { background: var(--v2-red-t); }
  html[data-ui="v2"] .v2PjBar.v2PjCrit { box-shadow: 0 0 0 2px var(--attio-bg), 0 0 0 4px var(--v2-red); }
  html[data-ui="v2"] .v2PjMs { position: absolute; width: 14px; height: 14px; padding: 0; border: 0; background: var(--attio-text); transform: rotate(45deg); cursor: pointer; z-index: 2; }
  html[data-ui="v2"] .v2PjMs.v2PjCrit { box-shadow: 0 0 0 2px var(--attio-bg), 0 0 0 4px var(--v2-red); }
  html[data-ui="v2"] .v2PjMsL { position: absolute; white-space: nowrap; z-index: 2; }
  html[data-ui="v2"] .v2PjSlip { position: absolute; white-space: nowrap; font-size: 12.5px; z-index: 2; text-decoration: underline; }
  html[data-ui="v2"] .v2PjToday { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--v2-red); z-index: 3; pointer-events: none; }
  html[data-ui="v2"] .v2PjDeps { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
  html[data-ui="v2"] .v2PjDeps marker path { fill: var(--attio-text3); }
  html[data-ui="v2"] .v2PjDep { fill: none; stroke: var(--attio-text3); stroke-width: 1.5; }
  html[data-ui="v2"] .v2PjDep.v2PjCrit { stroke: var(--v2-red); }

  html[data-ui="v2"] .v2PjG3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2PjKv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; margin: 0; }
  html[data-ui="v2"] .v2PjKv dt { color: var(--attio-text2); }
  html[data-ui="v2"] .v2PjKv dd { margin: 0; font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2PjPva,
  html[data-ui="v2"] .v2PjPeople { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2PjPva li,
  html[data-ui="v2"] .v2PjPeople li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2PjPva li:first-child,
  html[data-ui="v2"] .v2PjPeople li:first-child { border-top: 0; }
  html[data-ui="v2"] .v2PjPvaL { width: 110px; flex: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

  /* ---- phone ---- */
  @media (max-width: 700px) {
    html[data-ui="v2"] .v2PjG3,
    html[data-ui="v2"] .v2PjPage .v2G-2-1 { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="v2"] .v2PjGantt { grid-template-columns: 150px minmax(0, 1fr); }
    html[data-ui="v2"] .v2PjGRow { padding: 0 8px 0 14px; }
    html[data-ui="v2"] .v2PjGRow > .v2Cap { display: none; }
    html[data-ui="v2"] .v2PjTlRow { grid-template-columns: 130px minmax(0, 1fr); }
    html[data-ui="v2"] .v2PjBars { gap: 4px; }
  }
}

/* ---- src/v2/pm.css ---- */
/* v2 design system: stage A3 Avenu PM pages (mock-ups 16, 17, 20, 21). The PM sub-tab strip
   (v2-pm-nav.mjs), Home tiles, inspections strip and grouped property table, Tenancies, Documents,
   the tenancy record and the phone property. Every selector is under html[data-ui="v2"]; the v1 PM
   screen (#ptmRoot) is hidden only while a v2 PM page other than Properties is up (data-v2-direct="pm").
   Screen only: print unchanged. */

@media screen {
  /* ---- sub-tab strip (A-PM1) ---- */
  html[data-ui="v2"] #tab-propm[data-v2-direct="pm"]:not([data-v2-pm-sub="properties"]) > #ptmRoot { display: none; }
  html[data-ui="v2"] .v2PmPage { color: var(--attio-text); }
  html[data-ui="v2"] .v2PmTabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--attio-line2); margin: 0 0 18px; }
  html[data-ui="v2"] .v2PmTab {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -1px; font-size: 15px; font-weight: 550;
    color: var(--attio-text2); text-decoration: none; border-bottom: 2px solid transparent;
  }
  html[data-ui="v2"] .v2PmTab:hover { color: var(--attio-text); text-decoration: none; }
  html[data-ui="v2"] .v2PmTab[aria-current="page"] { color: var(--attio-text); font-weight: 700; border-bottom-color: var(--attio-accent); }
  html[data-ui="v2"] .v2PmTab:focus-visible { outline: 2px solid var(--attio-focus); outline-offset: 2px; }
  html[data-ui="v2"] .v2PmPage .v2PHead { margin-bottom: 12px; }
  html[data-ui="v2"] .v2PmPage .v2PHead + .v2PmTabs { margin-top: 0; }

  /* ---- Home tiles (16) ---- */
  html[data-ui="v2"] .v2PmcTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
  html[data-ui="v2"] .v2PmcTile {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--attio-line2); border-top: 4px solid var(--attio-line3);
    border-radius: 12px; background: var(--attio-bg); color: var(--attio-text); text-decoration: none; min-width: 0;
  }
  html[data-ui="v2"] a.v2PmcTile:hover { background: var(--attio-hover); text-decoration: none; }
  html[data-ui="v2"] .v2PmcTile .v2Label { font-size: 13px; font-weight: 600; color: var(--attio-text2); }
  html[data-ui="v2"] .v2PmcTile .v2KpiV { font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
  html[data-ui="v2"] .v2PmcT-red { border-top-color: var(--v2-red); }
  html[data-ui="v2"] .v2PmcT-amber { border-top-color: var(--v2-amber); }
  html[data-ui="v2"] .v2PmcT-blue { border-top-color: var(--v2-blue); }
  html[data-ui="v2"] .v2PmcT-green { border-top-color: var(--v2-green); }

  html[data-ui="v2"] .v2PmcStrip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
  html[data-ui="v2"] .v2PmcChip {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--attio-line2); border-radius: 999px;
    background: var(--attio-bg); color: var(--attio-text); font-weight: 600; font-size: 14px; text-decoration: none;
  }
  html[data-ui="v2"] .v2PmcChip:hover { background: var(--attio-hover); text-decoration: none; }

  html[data-ui="v2"] table.v2PmcHomeT td { height: 52px; }
  html[data-ui="v2"] table.v2PmcHomeT tr.v2GrpRow td:first-child { box-shadow: inset 3px 0 0 var(--attio-accent); }
  html[data-ui="v2"] .v2PmcN { font-weight: 700; }
  html[data-ui="v2"] .v2PmcN-red { color: var(--v2-red-t); font-weight: 700; }
  html[data-ui="v2"] .v2PmcN-amber { color: var(--v2-amber-t); font-weight: 700; }
  html[data-ui="v2"] .v2PmcOk { color: var(--v2-green-t); font-weight: 650; }
  html[data-ui="v2"] .v2PmcPropCard { display: flex; flex-direction: column; gap: 8px; }

  html[data-ui="v2"] .v2PmcAttnCard { margin-top: 16px; }
  html[data-ui="v2"] .v2PmcAttn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 24px; }
  html[data-ui="v2"] .v2PmcAttn li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--attio-line); min-width: 0; }
  html[data-ui="v2"] .v2PmcAttn .v2Grow { display: flex; flex-direction: column; min-width: 0; }

  /* ---- Tenancies (17) ---- */
  html[data-ui="v2"] table.v2PmcTenT td { height: 40px; }
  html[data-ui="v2"] table.v2PmcTenT.v2Comfy td { height: 52px; }
  html[data-ui="v2"] .v2PmcTerm { display: inline-flex; align-items: center; gap: 10px; min-width: 120px; font-variant-numeric: tabular-nums; color: var(--attio-text2); }
  html[data-ui="v2"] .v2PmcTerm .v2Bar { width: 72px; min-width: 72px; height: 6px; }
  html[data-ui="v2"] .v2PmcTenCard { display: flex; flex-direction: column; gap: 8px; }
  html[data-ui="v2"] .v2PmcSplitRow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--attio-line2);
    border-radius: 10px; background: var(--attio-bg); color: var(--attio-text); font: inherit; cursor: pointer;
  }
  html[data-ui="v2"] .v2PmcSplitRow:hover { background: var(--attio-hover); }
  html[data-ui="v2"] .v2PmcSplitRow.v2On { border-color: var(--attio-accent); box-shadow: inset 3px 0 0 var(--attio-accent); background: var(--v2-blue-50); }

  /* ---- Tenancy record (20) ---- */
  html[data-ui="v2"] .v2PmcLine { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 14px; }
  html[data-ui="v2"] .v2PmcG3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2PmcDetail { margin-top: 16px; }
  html[data-ui="v2"] .v2PmcTermRow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
  html[data-ui="v2"] .v2PmcTermRow .v2PmcTerm { flex: 1; }
  html[data-ui="v2"] .v2PmcTermRow .v2PmcTerm .v2Bar { flex: 1; width: auto; }
  html[data-ui="v2"] .v2PmcContacts, html[data-ui="v2"] .v2PmcDocs, html[data-ui="v2"] .v2PmcInv { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2PmcContacts li, html[data-ui="v2"] .v2PmcDocs li, html[data-ui="v2"] .v2PmcInv li {
    display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--attio-line); min-width: 0;
  }
  html[data-ui="v2"] .v2PmcContacts li:first-child, html[data-ui="v2"] .v2PmcDocs li:first-child, html[data-ui="v2"] .v2PmcInv li:first-child { border-top: 0; }

  /* ---- Phone property (21) ---- */
  html[data-ui="v2"] .v2PmcPhone .v2SearchBox { display: flex; width: 100%; box-sizing: border-box; height: 44px; margin: 8px 0 12px; }
  html[data-ui="v2"] .v2PmcTiles2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2PmcRooms ul { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2PmcRooms li a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--attio-line); color: var(--attio-text2); text-decoration: none; }
  html[data-ui="v2"] .v2PmcRooms li a .v2Grow { display: flex; flex-direction: column; gap: 6px; }
  html[data-ui="v2"] .v2PmcRoomNo {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 10px;
    background: var(--v2-teal-t); color: #fff; font-weight: 700;
  }
  html[data-ui="v2"] .v2PmcPhoneBar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  html[data-ui="v2"] .v2PmcCall {
    display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 48px; padding: 4px 12px; border-radius: 12px;
    background: var(--v2-blue-50); border: 1px solid var(--attio-line2); color: var(--v2-blue-t); font-weight: 650;
  }
  html[data-ui="v2"] .v2PmcCall .v2PmcCallNum { font-weight: 700; color: var(--v2-blue-t); }
  html[data-ui="v2"] .v2PmcPhoneBar .v2Btn { justify-content: center; min-height: 48px; }
}

@media screen and (max-width: 1100px) {
  html[data-ui="v2"] .v2PmcG3 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2PmTabs { flex-wrap: nowrap; overflow-x: auto; }
  html[data-ui="v2"] .v2PmTab { padding: 10px 12px; white-space: nowrap; }
  html[data-ui="v2"] .v2PmcTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2PmcPhone .v2H1 { font-size: 26px; }
  html[data-ui="v2"] .v2PmcPhone .v2PmcPhoneBar {
    position: sticky; bottom: 0; z-index: 5; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--attio-bg);
    border-top: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .v2PmcAttn { grid-template-columns: minmax(0, 1fr); }
}

/* ---- src/v2/pm-ops.css ---- */
/* v2 design system: stage A3 Avenu PM › Arrears (mock-up 18) and Inspections (mock-up 19).
   Blocks are inserted by v2-pm-ops.mjs inside the PM v2 page (v2-pm-nav.mjs, class v2Page); the sub-tab
   strip and hiding the v1 PM screen are in pm.css. Every selector is under html[data-ui="v2"].
   Screen only: print is unchanged. */

@media screen {
  /* ---- arrears ---- */
  html[data-ui="v2"] .v2ArT td { height: 52px; }
  html[data-ui="v2"] .v2ArAge { display: inline-flex; width: 84px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--attio-line); vertical-align: middle; }
  html[data-ui="v2"] .v2ArAge > span { display: block; height: 100%; }
  html[data-ui="v2"] .v2ArAge.v2ArNil { background: var(--attio-line); }
  html[data-ui="v2"] .v2ArStageBtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
  html[data-ui="v2"] .v2ArStageBtn:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; border-radius: 999px; }
  html[data-ui="v2"] table.v2PT tfoot tr.v2ArTotal td {
    background: var(--attio-text); color: var(--attio-bg); font-weight: 700; height: 52px; border-bottom: 0;
    font-variant-numeric: tabular-nums;
  }
  html[data-ui="v2"] .v2ArDetail { margin-top: 16px; }
  html[data-ui="v2"] .v2ArLedger { list-style: none; margin: 8px 0 0; padding: 0; }
  html[data-ui="v2"] .v2ArLedger li { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2ArLedger li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2ArLedger li > .v2Cap:first-child { width: 52px; flex: none; }
  html[data-ui="v2"] .v2ArLedger li .v2Grow { display: flex; flex-direction: column; min-width: 0; }
  html[data-ui="v2"] .v2ArForm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
  html[data-ui="v2"] .v2ArForm label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--attio-text3); }
  html[data-ui="v2"] .v2ArForm .v2ArNote { grid-column: 1 / -1; }
  html[data-ui="v2"] .v2ArForm input,
  html[data-ui="v2"] .v2ArForm select {
    height: 34px; padding: 0 10px; border: 1px solid var(--attio-line2); border-radius: 8px;
    background: var(--attio-bg); color: var(--attio-text); font: inherit; font-size: 13.5px;
  }
  html[data-ui="v2"] .v2ArForm input:focus-visible,
  html[data-ui="v2"] .v2ArForm select:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 1px; }

  /* ---- inspections ---- */
  html[data-ui="v2"] .v2InsTiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
  html[data-ui="v2"] .v2InsTile {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; cursor: pointer;
    padding: 14px 16px; background: var(--attio-bg); color: var(--attio-text); font: inherit;
    border: 1px solid var(--attio-line2); border-top: 4px solid var(--v2-grey); border-radius: 12px; box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"] .v2InsTile .v2KpiV { font-size: 26px; font-weight: 750; line-height: 1.2; }
  html[data-ui="v2"] .v2InsTile-red { border-top-color: var(--v2-red); }
  html[data-ui="v2"] .v2InsTile-amber { border-top-color: var(--v2-amber); }
  html[data-ui="v2"] .v2InsTile-blue { border-top-color: var(--v2-blue); }
  html[data-ui="v2"] .v2InsTile[aria-pressed="true"] { background: var(--v2-blue-50); border-color: var(--attio-accent); box-shadow: 0 0 0 1px var(--attio-accent); }
  html[data-ui="v2"] .v2InsTile:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; }
  html[data-ui="v2"] .v2InsMain { align-items: stretch; }
  html[data-ui="v2"] .v2InsCalWrap { min-width: 0; }
  html[data-ui="v2"] .v2InsCalWrap > .v2Toolbar { margin-top: 0; }
  html[data-ui="v2"] .v2InsMonth { font-size: 17px; font-weight: 700; margin: 0 8px 0 0; }
  html[data-ui="v2"] .v2InsCal {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--attio-line2); border-radius: 12px;
    overflow: hidden; background: var(--attio-bg);
  }
  html[data-ui="v2"] .v2InsDow { padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--attio-text2); background: var(--attio-bg2); border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2InsDay { min-height: 104px; padding: 6px 8px; border-right: 1px solid var(--attio-line); border-bottom: 1px solid var(--attio-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  html[data-ui="v2"] .v2InsDay:nth-child(7n + 7) { border-right: 0; }
  html[data-ui="v2"] .v2InsWeek .v2InsDay { min-height: 260px; }
  html[data-ui="v2"] .v2InsOut .v2InsNum { color: var(--attio-text3); opacity: .6; }
  html[data-ui="v2"] .v2InsToday { background: var(--v2-blue-50); }
  html[data-ui="v2"] .v2InsToday .v2InsNum { color: var(--v2-blue-t); font-weight: 700; }
  html[data-ui="v2"] .v2InsNum { font-size: 12.5px; color: var(--attio-text2); }
  html[data-ui="v2"] .v2InsEv {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 0; text-align: left;
    padding: 3px 7px; border: 0; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  html[data-ui="v2"] .v2InsEvT { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2InsEv:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 1px; }
  html[data-ui="v2"] .v2InsEv-overdue { background: var(--v2-red-50); color: var(--v2-red-t); }
  html[data-ui="v2"] .v2InsEv-due { background: var(--v2-amber-50); color: var(--v2-amber-t); }
  html[data-ui="v2"] .v2InsEv-booked { background: var(--v2-blue-50); color: var(--v2-blue-t); }
  html[data-ui="v2"] .v2InsEv-done { background: var(--v2-green-50); color: var(--v2-green-t); }
  html[data-ui="v2"] i.v2InsDot.v2InsEv-overdue { background: var(--v2-red); }
  html[data-ui="v2"] i.v2InsDot.v2InsEv-due { background: var(--v2-amber); }
  html[data-ui="v2"] i.v2InsDot.v2InsEv-booked { background: var(--v2-blue); }
  html[data-ui="v2"] i.v2InsDot.v2InsEv-done { background: var(--v2-green); }
  html[data-ui="v2"] .v2InsInbox { margin: 0; }
  html[data-ui="v2"] .v2InsRv { list-style: none; margin: 8px 0 0; padding: 0; }
  html[data-ui="v2"] .v2InsRv li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2InsRv li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2InsRvT { font-size: 15px; font-weight: 650; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; }
  html[data-ui="v2"] .v2InsFind { gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  html[data-ui="v2"] .v2InsCycle { margin-top: 16px; }

  /* ---- phone (mock-up 21 conventions: stacked, scrolling tables, compact calendar) ---- */
  @media (max-width: 700px) {
    html[data-ui="v2"] .v2ArForm { grid-template-columns: 1fr; }
    html[data-ui="v2"] .v2ArDetail,
    html[data-ui="v2"] .v2InsMain { grid-template-columns: 1fr; }
    html[data-ui="v2"] .v2ArT td { height: 44px; }
    html[data-ui="v2"] .v2InsTiles { grid-template-columns: 1fr 1fr; }
    html[data-ui="v2"] .v2InsDay { min-height: 58px; padding: 4px; }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEvT { display: none; }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEv { height: 8px; padding: 0; border-radius: 4px; }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEv-overdue { background: var(--v2-red); }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEv-due { background: var(--v2-amber); }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEv-booked { background: var(--v2-blue); }
    html[data-ui="v2"] .v2InsCal:not(.v2InsWeek) .v2InsEv-done { background: var(--v2-green); }
    html[data-ui="v2"] .v2InsWeek { grid-template-columns: 1fr; }
    html[data-ui="v2"] .v2InsWeek .v2InsDow { display: none; }
    html[data-ui="v2"] .v2InsWeek .v2InsDay { min-height: 0; border-right: 0; }
    html[data-ui="v2"] .v2InsRv li { flex-wrap: wrap; }
  }
}

/* ---- src/v2/settings.css ---- */
/* v2 design system, stage A3: Settings (mock-ups 10 Users & roles, 11 Feature flags & integrations).
   Blocks are inserted by v2-settings.mjs with class v2Page. The v1 cards the v2 page replaces are hidden
   only while #tab-admin carries data-v2-direct="settings" and the sub-view in data-v2-stg:
   users keeps the Team access card's invite row (its table is replaced), flags keeps the director-only
   New look feedback card, other shows every v1 card unchanged. Every selector is under
   html[data-ui="v2"]. Screen only: print unchanged. */

@media screen {
  /* ---- which v1 cards show per sub-view ---- */
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="users"] > .card:not([data-v2-stg-card="team"]),
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="users"] > .card[data-v2-stg-card="team"] > h2,
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="users"] #adminTeam,
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="flags"] > .card:not([data-v2-stg-card="feedback"]) { display: none; }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="users"] > .card[data-v2-stg-card="team"] { margin-top: 0; }

  /* ---- tab strip ---- */
  html[data-ui="v2"] .v2StgTabs { margin: 4px 0 18px; overflow-x: auto; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2StgTabs .v2Tab { white-space: nowrap; text-decoration: none; }
  html[data-ui="v2"] .v2StgTabs button.v2Tab { background: none; border: 0; font: inherit; cursor: pointer; }

  /* ---- users & roles ---- */
  html[data-ui="v2"] .v2StgNote {
    margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; color: var(--attio-text2);
    background: var(--v2-blue-50); border: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .v2StgNote b { color: var(--attio-text); margin-right: 6px; }
  html[data-ui="v2"] .v2StgPage .v2Toolbar .v2Stabs { margin: 0; }
  html[data-ui="v2"] table.v2StgPeople td { height: 52px; }
  html[data-ui="v2"] .v2StgWho { display: inline-flex; align-items: center; gap: 10px; }
  html[data-ui="v2"] .v2StgWho b { font-weight: 650; color: var(--v2-link); }
  html[data-ui="v2"] .v2StgWarn { color: var(--v2-amber-t); }
  html[data-ui="v2"] .v2StgActs { white-space: nowrap; text-align: right; }
  html[data-ui="v2"] .v2StgPage button.v2Lk { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--v2-link); }
  html[data-ui="v2"] .v2StgPage button.v2Lk.v2StgDanger { color: var(--v2-red-t); }
  html[data-ui="v2"] .v2StgSwitch {
    position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 999px;
    background: var(--attio-line2); vertical-align: middle;
  }
  html[data-ui="v2"] .v2StgSwitch > span {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--attio-bg); box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"] .v2StgSwitch.v2On { background: var(--attio-primary); }
  html[data-ui="v2"] .v2StgSwitch.v2On > span { left: 18px; }
  html[data-ui="v2"] .v2StgPair { margin-top: 16px; }
  html[data-ui="v2"] .v2StgList { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2StgList > li {
    display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--attio-line); font-size: 13.5px; color: var(--attio-text2);
  }
  html[data-ui="v2"] .v2StgList > li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2StgMatrix .v2CardHead { gap: 12px; }
  html[data-ui="v2"] .v2StgPage .v2Mid { text-align: center; }
  html[data-ui="v2"] .v2StgFull { color: var(--v2-green-t); font-weight: 700; }
  html[data-ui="v2"] .v2StgPart { color: var(--v2-amber-t); }
  html[data-ui="v2"] .v2StgNone { color: var(--attio-text3); }

  /* ---- feature flags ---- */
  html[data-ui="v2"] table.v2StgFlags td { height: 48px; }
  html[data-ui="v2"] .v2StgPage .v2Mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  html[data-ui="v2"] table.v2StgFlags tr.v2Sel,
  html[data-ui="v2"] table.v2StgFlags tr.v2StgDetail { background: var(--v2-blue-50); }
  html[data-ui="v2"] table.v2StgFlags tr.v2Sel > td:first-child { box-shadow: inset 3px 0 0 var(--attio-primary); }
  html[data-ui="v2"] .v2StgRelease > button[disabled] { cursor: default; opacity: 1; }
  html[data-ui="v2"] .v2StgFlagCard .v2CardHead { flex-wrap: wrap; gap: 8px; }

  /* ---- integrations ---- */
  html[data-ui="v2"] .v2StgIntHead { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 12px; }
  html[data-ui="v2"] .v2StgIntHead .v2H2 { margin: 0; font-size: 18px; }
  html[data-ui="v2"] .v2StgInts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  html[data-ui="v2"] .v2StgPage .v2StgInt { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 150px; }
  html[data-ui="v2"] .v2StgIntTop { display: flex; align-items: flex-start; gap: 12px; }
  html[data-ui="v2"] .v2StgLogo {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 10px; font-weight: 700; font-size: 15px;
  }
  html[data-ui="v2"] .v2StgLogo.v2Av-grey { background: var(--v2-grey-50); color: var(--v2-grey-t); }
  html[data-ui="v2"] .v2StgIntName { font-size: 16px; font-weight: 650; text-align: left; }
  html[data-ui="v2"] .v2StgIntFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

  /* ---- A-46 Other settings: the v1 cards as Studio cards (mock-ups 10 / 11). Look only: every control,
     id and handler inside the cards is the v1 one. ---- */
  html[data-ui="v2"] .v2StgIndex { flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] {
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: 12px; box-shadow: var(--attio-shadow1);
    padding: 20px 22px; margin: 0 0 16px; color: var(--attio-text);
  }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] > h2 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; padding: 0 0 12px;
    border-bottom: 1px solid var(--attio-line); font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] > h2 .sub {
    flex: 1 1 260px; font-size: 13px; font-weight: 400; color: var(--attio-caption); text-align: right;
  }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] h3 { font-size: 14px; font-weight: 650; color: var(--attio-text); }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--attio-line); border-radius: 10px; overflow: hidden; }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] th { background: var(--attio-bg2); color: var(--attio-text2); font-weight: 600; }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] .note { background: var(--attio-bg2); border: 1px solid var(--attio-line); border-radius: 10px; color: var(--attio-text2); }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] input:not([type="checkbox"]):not([type="radio"]),
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] select { border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-bg); color: var(--attio-text); }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] button:not(.saveBtn) { border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-bg); color: var(--attio-text); }
  html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] .saveBtn { border-radius: 8px; background: var(--attio-primary); border-color: var(--attio-primary); color: #fff; }

  @media (max-width: 1100px) {
    html[data-ui="v2"] .v2StgInts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* ---- phone: stacked cards, tables scroll sideways, strip scrolls ---- */
  @media (max-width: 700px) {
    html[data-ui="v2"] .v2StgPage .v2G-1-1 { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="v2"] .v2StgInts { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="v2"] .v2StgPage .v2TWrap { overflow-x: auto; }
    html[data-ui="v2"] .v2StgPage .v2SearchBox { min-width: 0; width: 100%; }
    html[data-ui="v2"] .v2StgPage .v2Toolbar .v2Stabs { flex-wrap: nowrap; overflow-x: auto; }
    html[data-ui="v2"] .v2StgPage .v2PActs { width: 100%; }
    html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] { padding: 16px; overflow-x: auto; }
    html[data-ui="v2"] #tab-admin[data-v2-direct="settings"][data-v2-stg="other"] > .card[data-v2-stg-card] > h2 .sub { text-align: left; flex-basis: 100%; }
  }
}

/* ---- src/v2/patterns.css ---- */
/* v2 design system, stage A4: Pattern and Inherit views (v2-patterns.mjs). The v1 content of every
   view without a Direct mock-up, restyled in the nearest mocked layout from data-v2-layout on its
   section: dense (03), comfortable (04b), grouped (17), home (12), projects (14), timeline (04c),
   board (05), split (03b), kpi (08), record (20), doclib (01a), settings (10/11), calendar (19) and
   inherit (06: shell, tokens, tables). Studio tokens only. Screen only, so the Board pack and
   Report builder print path is unchanged (G-8). */

@media screen {
  /* ---- page head and toolbar (every Pattern / Inherit view) ---- */
  html[data-ui="v2"] .v2PatHead { margin: 0 0 16px; }
  html[data-ui="v2"] .v2PatHead .v2PHead { margin-bottom: 4px; }
  html[data-ui="v2"] .v2PatTools { margin: 10px 0 0; align-items: center; }
  html[data-ui="v2"] .v2PatTools .v2SearchBox { min-width: 260px; }
  html[data-ui="v2"] tr.v2PatHide { display: none; }
  html[data-ui="v2"] table.v2T tr.v2PatGrp td {
    background: var(--attio-bg2); height: 36px; font-weight: 650; color: var(--attio-text);
    border-bottom: 1px solid var(--attio-line2); border-left: 3px solid var(--attio-accent);
  }
  html[data-ui="v2"] tr.v2PatGrp .v2Count { margin-left: 6px; }

  /* ---- v1 content in the Studio components (mock-up 06) ---- */
  html[data-ui="v2"] [data-v2-layout] .card {
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: var(--attio-r4);
    box-shadow: var(--attio-shadow1); padding: 16px; color: var(--attio-text);
  }
  html[data-ui="v2"] [data-v2-layout] .card > h2,
  html[data-ui="v2"] [data-v2-layout] .card > summary {
    font-family: var(--attio-font-display); font-size: 15px; font-weight: 650; letter-spacing: -.01em;
    color: var(--attio-text); margin: 0 0 12px; text-transform: none;
  }
  html[data-ui="v2"] [data-v2-layout] .sub,
  html[data-ui="v2"] [data-v2-layout] .note,
  html[data-ui="v2"] [data-v2-layout] .dim { color: var(--attio-text3); font-size: 12.5px; font-weight: 500; }
  html[data-ui="v2"] [data-v2-layout] .grid2 { gap: 16px; }
  html[data-ui="v2"] [data-v2-layout] .kpiGrid { gap: 12px; margin-bottom: 16px; }
  html[data-ui="v2"] [data-v2-layout] .kpiGrid > * {
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: var(--attio-r4);
    box-shadow: var(--attio-shadow1); padding: 14px 16px;
  }
  html[data-ui="v2"] [data-v2-layout] .kpi .label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--attio-text3); }
  html[data-ui="v2"] [data-v2-layout] .kpi .value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--attio-text); }
  html[data-ui="v2"] [data-v2-layout] .chipRow { display: flex; flex-wrap: wrap; gap: 6px; }
  html[data-ui="v2"] [data-v2-layout] .chipRow > button {
    height: 28px; padding: 0 10px; border: 1px solid var(--attio-line2); border-radius: 999px;
    background: var(--attio-bg); color: var(--attio-text3); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  html[data-ui="v2"] [data-v2-layout] .chipRow > button:is(.active, .on, [aria-pressed="true"]) { background: var(--v2-blue-50); color: var(--v2-blue-t); border-color: transparent; }
  html[data-ui="v2"] [data-v2-layout] :is(button:not([class]), button.btn, button.tblBtn) {
    min-height: 30px; padding: 0 12px; border: 1px solid var(--attio-line3); border-radius: var(--attio-r3);
    background: var(--attio-bg); color: var(--attio-text); font: 600 13px var(--attio-font); cursor: pointer;
  }
  html[data-ui="v2"] [data-v2-layout] :is(button:not([class]), button.btn, button.tblBtn):hover { background: var(--attio-hover); }
  html[data-ui="v2"] [data-v2-layout] button.saveBtn {
    min-height: 30px; padding: 0 12px; border: 1px solid var(--attio-accent); border-radius: var(--attio-r3);
    background: var(--attio-accent); color: #fff; font: 600 13px var(--attio-font); cursor: pointer;
  }
  html[data-ui="v2"] [data-v2-layout] button.saveBtn:hover { background: var(--attio-accent-hover); }
  html[data-ui="v2"] [data-v2-layout] :is(input.edit, select.edit, input[type="search"]:not([data-v2-q])) {
    min-height: 32px; border: 1px solid var(--attio-line2); border-radius: var(--attio-r3);
    background: var(--attio-bg); color: var(--attio-text); font: 13.5px var(--attio-font); padding: 0 10px;
  }

  /* ---- comfortable (04b): 52 px rows unless the person picked a density ---- */
  html[data-ui="v2"]:not([data-density]) [data-v2-layout="comfortable"] table.v2T td { height: 52px; padding: 8px 14px; font-size: 14px; }
  html[data-ui="v2"]:not([data-density]) [data-v2-layout="comfortable"] table.v2T th { height: 38px; padding: 0 14px; }
  html[data-ui="v2"] [data-v2-layout="comfortable"] table.v2T td:first-child { font-weight: 600; }

  /* ---- home (12): my work left, activity right ---- */
  html[data-ui="v2"] [data-v2-layout="home"] .hubGrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
  html[data-ui="v2"] [data-v2-layout="home"] .hubCard {
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: var(--attio-r4); box-shadow: var(--attio-shadow1); padding: 14px 16px;
  }

  /* ---- projects (14) and board (05): columns are soft grey lanes, items are white cards ---- */
  html[data-ui="v2"] [data-v2-layout="board"] .grid2 > .card,
  html[data-ui="v2"] [data-v2-layout="projects"] .grid2 > .card { background: var(--attio-bg2); }
  html[data-ui="v2"] [data-v2-layout="board"] table.v2T th:first-child,
  html[data-ui="v2"] [data-v2-layout="board"] table.v2T td:first-child { position: sticky; left: 0; z-index: 1; background: var(--attio-bg); }
  html[data-ui="v2"] [data-v2-layout="board"] table.v2T th:first-child { z-index: 3; background: var(--attio-bg2); }

  /* ---- timeline (04c): a rail and a dot per row ---- */
  html[data-ui="v2"] [data-v2-layout="timeline"] table.v2T td:first-child { position: relative; padding-left: 30px; }
  html[data-ui="v2"] [data-v2-layout="timeline"] table.v2T td:first-child::before {
    content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--attio-line2);
  }
  html[data-ui="v2"] [data-v2-layout="timeline"] table.v2T td:first-child::after {
    content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
    background: var(--attio-bg); border: 2px solid var(--attio-accent);
  }

  /* ---- split (03b): room for the record pane while it is open ---- */
  html[data-ui="v2"] body:has(#v2SplitPane:not([hidden])) [data-v2-layout="split"] { padding-right: 392px; }
  html[data-ui="v2"] [data-v2-layout="split"] table.v2T tbody tr { cursor: pointer; }

  /* ---- kpi (08) and record (20) ---- */
  html[data-ui="v2"] [data-v2-layout="kpi"] .chartBox { border-radius: var(--attio-r3); }
  html[data-ui="v2"] [data-v2-layout="record"] > .card:first-of-type > h2 { font-size: 20px; }

  /* ---- doclib (01a) and settings (10/11) ---- */
  html[data-ui="v2"] [data-v2-layout="doclib"] :is(.dhTable, .dhTableWrap) { border-radius: var(--attio-r4); }
  html[data-ui="v2"] [data-v2-layout="doclib"] .dhTable th { background: var(--attio-bg2); color: var(--attio-text3); font-weight: 600; font-size: 12.5px; }
  html[data-ui="v2"] [data-v2-layout="doclib"] .dhTable td { border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] [data-v2-layout="settings"] .card + .card { margin-top: 12px; }

  /* ---- calendar (19): the v1 month grid in the Inspections style ---- */
  html[data-ui="v2"] .v2CalMonth { margin-bottom: 20px !important; }
  html[data-ui="v2"] .v2CalTitle {
    font-family: var(--attio-font-display) !important; font-size: 16px !important; font-weight: 650;
    letter-spacing: -.01em !important; text-transform: none !important; color: var(--attio-text) !important; margin-bottom: 8px !important;
  }
  html[data-ui="v2"] .v2CalHead {
    gap: 0 !important; margin: 0 !important; background: var(--attio-bg2);
    border: 1px solid var(--attio-line2); border-bottom: 0; border-radius: 12px 12px 0 0;
  }
  html[data-ui="v2"] .v2CalHead > div { text-align: left !important; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--attio-text3); }
  html[data-ui="v2"] .v2CalGrid { gap: 0 !important; border: 1px solid var(--attio-line2); border-radius: 0 0 12px 12px; overflow: hidden; background: var(--attio-bg); }
  html[data-ui="v2"] .v2CalGrid > div { border-right: 1px solid var(--attio-line); border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2CalCell {
    min-height: 96px !important; padding: 6px 8px !important; border-radius: 0 !important; background: var(--attio-bg) !important;
    border-top: 0 !important; border-left: 0 !important; border-right: 1px solid var(--attio-line) !important; border-bottom: 1px solid var(--attio-line) !important;
  }
  html[data-ui="v2"] .v2CalDay { font-size: 12.5px !important; font-weight: 600; color: var(--attio-text3); }
  html[data-ui="v2"] .v2CalPast .v2CalDay { color: var(--attio-caption); }
  html[data-ui="v2"] .v2CalToday { background: var(--v2-blue-50) !important; }
  html[data-ui="v2"] .v2CalToday .v2CalDay { color: var(--v2-blue-t); font-weight: 700; }
  html[data-ui="v2"] .v2CalEv {
    font-size: 12px !important; font-weight: 600; margin-top: 4px; padding: 2px 6px; border-radius: 6px;
    background: var(--v2-blue-50); color: var(--v2-blue-t);
  }
  html[data-ui="v2"] .v2CalMore { font-size: 11.5px !important; margin-top: 2px; }
}

@media screen and (max-width: 700px) {
  /* Phone (A-C09): the head stacks, links scroll sideways, search takes the full width. */
  html[data-ui="v2"] .v2PatHead .v2PTitleRow { flex-wrap: wrap; }
  html[data-ui="v2"] .v2PatHead .v2PActs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2PatTools .v2SearchBox { min-width: 0; flex: 1 1 100%; }
  html[data-ui="v2"] [data-v2-layout="home"] .hubGrid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] body:has(#v2SplitPane:not([hidden])) [data-v2-layout="split"] { padding-right: 0; }
  html[data-ui="v2"] .v2CalCell { min-height: 52px !important; padding: 4px !important; }
  html[data-ui="v2"] .v2CalEv { font-size: 0 !important; height: 6px; padding: 0; }
}

/* ---- src/v2/overlays.css ---- */
/* v2 design system, stage A4 (A-55): drawers and modals in the split-pane detail style of mock-up
   03b with the buttons and focus states of mock-up 06. v2-overlays.mjs tags every overlay it knows
   with data-v2-ovl="modal|card|drawer|inline|sheet|pop|lightbox". Look only: position, size, open and
   close stay as the v1 code sets them. !important only where v1 sets the same property inline.
   Screen only (G-8). */

@media screen {
  html[data-ui="v2"] [data-v2-ovl="modal"] { background: rgba(28, 29, 31, .28) !important; }
  html[data-ui="v2"] dialog[data-v2-ovl]::backdrop { background: rgba(28, 29, 31, .28); }

  /* Cards, drawers, sheets and popovers: the Studio surface. */
  html[data-ui="v2"] :is([data-v2-ovl="card"], [data-v2-ovl="drawer"], [data-v2-ovl="sheet"], [data-v2-ovl="pop"]) {
    background: var(--attio-bg) !important; color: var(--attio-text) !important; font-family: var(--attio-font) !important;
    border: 1px solid var(--attio-line2) !important; box-shadow: var(--attio-shadow3) !important;
  }
  html[data-ui="v2"] [data-v2-ovl="card"] { border-radius: 12px !important; }
  html[data-ui="v2"] [data-v2-ovl="drawer"] { border-radius: 12px; }
  html[data-ui="v2"] .dhDrawer[data-v2-ovl="drawer"] { border-radius: 12px 0 0 12px; border-right: 0 !important; }
  html[data-ui="v2"] [data-v2-ovl="sheet"] { border-radius: 16px 16px 0 0; border-bottom: 0 !important; }
  html[data-ui="v2"] [data-v2-ovl="pop"] { border-radius: 10px !important; }

  /* Header: title, then a rule, like the 03b detail pane. */
  html[data-ui="v2"] :is([data-v2-ovl="card"], [data-v2-ovl="drawer"]) :is(h2, h3):first-child,
  html[data-ui="v2"] :is([data-v2-ovl="card"], [data-v2-ovl="drawer"]) :is(.tasksDlgHead, .dhDrawerTop, .pcrmDrawerHead) {
    font-family: var(--attio-font-display); letter-spacing: -.012em; font-weight: 650; color: var(--attio-text);
  }
  html[data-ui="v2"] :is([data-v2-ovl="card"], [data-v2-ovl="drawer"]) > :is(h2, h3):first-child { font-size: 17px; margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] :is([data-v2-ovl="card"], [data-v2-ovl="drawer"]) :is(label, legend, .dim) { color: var(--attio-text3); }

  /* Inline drawers (rows and blocks that open in place). */
  html[data-ui="v2"] [data-v2-ovl="inline"] { border-top-color: var(--attio-line2) !important; }
  html[data-ui="v2"] tr[data-v2-ovl="inline"] > td { background: var(--attio-bg2) !important; box-shadow: inset 3px 0 0 var(--attio-accent); padding: 12px 16px !important; }
  html[data-ui="v2"] div[data-v2-ovl="inline"] { background: var(--attio-bg2); border-radius: var(--attio-r3); padding-left: 12px; padding-right: 12px; }

  /* Buttons (mock-up 06): secondary by default, primary for save/submit, red for delete. */
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button:not([class]), button.saveBtn, button.btn, button.dhBtn, button.delBtn, button.dhDangerBtn, button[type="submit"]) {
    min-height: 32px; padding: 0 12px; border-radius: var(--attio-r3) !important; font-family: var(--attio-font) !important;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button:not([class]), button.btn, button.dhBtn) {
    background: var(--attio-bg); color: var(--attio-text); border: 1px solid var(--attio-line3);
  }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button:not([class]), button.btn, button.dhBtn):hover { background: var(--attio-hover); }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button.saveBtn, button[type="submit"]) {
    background: var(--attio-accent); color: #fff; border: 1px solid var(--attio-accent);
  }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button.saveBtn, button[type="submit"]):hover { background: var(--attio-accent-hover); }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button.delBtn, button.dhDangerBtn) { background: var(--v2-red-t) !important; color: #fff !important; border: 1px solid var(--v2-red-t); }
  html[data-ui="v2"] [data-v2-ovl] :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--attio-accent); outline-offset: 1px; box-shadow: 0 0 0 4px var(--attio-focus);
  }
  html[data-ui="v2"] [data-v2-ovl] button:disabled { opacity: .5; cursor: default; }

  /* Fields. */
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    border: 1px solid var(--attio-line2) !important; border-radius: var(--attio-r3) !important;
    background: var(--attio-bg) !important; color: var(--attio-text) !important; font-family: var(--attio-font) !important;
  }
}

@media screen and (max-width: 700px) {
  /* Phone: drawers and cards go edge to edge, like the 07 / 21 phone screens. */
  html[data-ui="v2"] [data-v2-ovl="drawer"] { border-radius: 0; }
  html[data-ui="v2"] [data-v2-ovl]:not([data-v2-ovl="lightbox"]) :is(button:not([class]), button.saveBtn, button.btn, button.dhBtn) { min-height: 44px; }
}

/* ---- src/v2/doc-viewer.css ---- */
/* v2 design system, stage A5 (Section B): the document preview panel from v2-doc-viewer.mjs. A pane
   beside the list on desktop (the 03b split-pane detail style, 01a library preview header: type pill,
   file name, caption, Open), full screen on a phone (A-B09). Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] .v2dv {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 940; width: min(46vw, 760px); min-width: 360px;
    display: flex; flex-direction: column; background: var(--attio-bg); color: var(--attio-text);
    border-left: 1px solid var(--attio-line2); box-shadow: var(--attio-shadow3); font-family: var(--attio-font);
  }
  html[data-ui="v2"] .v2dv:focus { outline: none; }
  html[data-ui="v2"] body[data-v2dv-open] main { padding-right: min(46vw, 760px); }
  html[data-ui="v2"] .v2dvHead {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px solid var(--attio-line);
  }
  html[data-ui="v2"] .v2dvTitle { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
  html[data-ui="v2"] .v2dvName { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-ui="v2"] .v2dvTools { display: flex; align-items: center; gap: 4px; flex: none; }
  html[data-ui="v2"] .v2dvPos { margin-right: 4px; white-space: nowrap; }
  html[data-ui="v2"] .v2dvMeta { padding: 6px 14px 8px; color: var(--attio-text3); font-size: 12px; }
  html[data-ui="v2"] .v2dvMeta:empty { display: none; }
  html[data-ui="v2"] .v2dvZoom { display: flex; align-items: center; gap: 4px; padding: 0 14px 8px; }
  html[data-ui="v2"] .v2dvZoom[hidden] { display: none; }
  html[data-ui="v2"] .v2dvZoomVal { min-width: 44px; text-align: center; }
  html[data-ui="v2"] .v2dvBody { flex: 1; min-height: 0; overflow: auto; background: var(--attio-bg2); border-top: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2dvLoading { padding: 24px 16px; }
  html[data-ui="v2"] .v2dvFrame { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; background: var(--attio-surface); }
  html[data-ui="v2"] .v2dvImgBox { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 12px; overflow: auto; }
  html[data-ui="v2"] .v2dvImg[data-zoom="fit"] { max-width: 100%; height: auto; }
  html[data-ui="v2"] .v2dvImg[data-zoom="set"] { max-width: none; height: auto; }
  html[data-ui="v2"] .v2dvImg { border-radius: var(--attio-r3); box-shadow: var(--attio-shadow1); background: var(--attio-bg); }
  html[data-ui="v2"] .v2dvMedia { display: block; width: calc(100% - 24px); margin: 12px; }
  html[data-ui="v2"] .v2dvText {
    margin: 0; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; font-family: var(--attio-font-mono);
    font-size: 12.5px; line-height: 1.55; background: var(--attio-bg);
  }
  html[data-ui="v2"] .v2dvDocx {
    max-width: 760px; margin: 12px auto; padding: 28px 34px; background: var(--attio-bg); border: 1px solid var(--attio-line2);
    border-radius: var(--attio-r3); box-shadow: var(--attio-shadow1); font-size: 13.5px; line-height: 1.6;
  }
  html[data-ui="v2"] .v2dvDocx :is(h2, h3, h4, h5, h6) { font-family: var(--attio-font-display); margin: 1em 0 .4em; }
  html[data-ui="v2"] .v2dvDocx p { margin: 0 0 .6em; white-space: pre-wrap; }
  html[data-ui="v2"] .v2dvDocx ul { margin: 0 0 .6em 1.2em; padding: 0; }
  html[data-ui="v2"] .v2dvTable { border-collapse: collapse; margin: .4em 0 .8em; width: 100%; }
  html[data-ui="v2"] .v2dvTable td { border: 1px solid var(--attio-line3); padding: 4px 8px; vertical-align: top; }
  html[data-ui="v2"] .v2dvGridWrap { padding: 8px; overflow: auto; }
  html[data-ui="v2"] .v2dvGrid { border-collapse: collapse; font-size: 12px; background: var(--attio-bg); }
  html[data-ui="v2"] .v2dvGrid :is(th, td) { border: 1px solid var(--attio-line2); padding: 3px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  html[data-ui="v2"] .v2dvGrid th { background: var(--attio-bg2); color: var(--attio-text3); font-weight: 500; position: sticky; top: 0; }
  html[data-ui="v2"] .v2dvSheetTabs { display: flex; gap: 2px; padding: 8px 8px 0; overflow-x: auto; }
  html[data-ui="v2"] .v2dvSheetTab {
    border: 1px solid var(--attio-line2); border-bottom: 0; border-radius: var(--attio-r2) var(--attio-r2) 0 0;
    background: var(--attio-bg2); color: var(--attio-text3); padding: 4px 10px; font-size: 12px; cursor: pointer;
  }
  html[data-ui="v2"] .v2dvSheetTab[aria-selected="true"] { background: var(--attio-bg); color: var(--attio-text); font-weight: 600; }
  html[data-ui="v2"] .v2dvSheet[hidden] { display: none; }
  html[data-ui="v2"] .v2dvCard {
    margin: 32px auto; max-width: 360px; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px;
    background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: var(--attio-r4); box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"] .v2dvCardIcon { font-size: 30px; line-height: 1; }
  html[data-ui="v2"] [aria-current="true"]:is([data-stopen], [data-v2-doc], [data-fadopen], [data-v2dv-ten], [data-dh-act="view"]) {
    background: var(--attio-select); border-radius: var(--attio-r2); box-shadow: inset 2px 0 0 var(--attio-accent);
  }
  html[data-ui="v2"] :is([data-stopen], [data-v2-doc], [data-fadopen], [data-v2dv-ten], [data-dh-act="view"]):focus-visible {
    outline: 2px solid var(--attio-focus); outline-offset: 1px;
  }
}

@media screen and (max-width: 760px) {
  /* Phone: tap opens the preview full screen; Open hands the file to iOS. */
  html[data-ui="v2"] .v2dv { width: 100vw; min-width: 0; border-left: 0; z-index: 1200; }
  html[data-ui="v2"] body[data-v2dv-open] main { padding-right: 0; }
  html[data-ui="v2"] body[data-v2dv-open] { overflow: hidden; }
  html[data-ui="v2"] .v2dvHead { padding-top: calc(10px + env(safe-area-inset-top)); }
  html[data-ui="v2"] .v2dvTools .v2Btn { min-height: 44px; min-width: 44px; }
  html[data-ui="v2"] .v2dvPos { display: none; }
  html[data-ui="v2"] .v2dvDocx { margin: 0; border: 0; border-radius: 0; padding: 18px 16px; }
}

/* ---- src/v2/work-blocks.css ---- */
/* v2 design system, final round: Work area content blocks (v2-work-blocks.mjs) under the Pattern page
   heads of My space (12), Spaces (14), Approvals (03), Meetings (04c) and Transitions checklist (05).
   Studio tokens only. Screen only, so print is unchanged (G-8). */

@media screen {
  html[data-ui="v2"] .v2WbList,
  html[data-ui="v2"] .v2WbFeed { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2WbList li,
  html[data-ui="v2"] .v2WbFeed li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--attio-line); min-width: 0; }
  html[data-ui="v2"] .v2WbList li:last-child,
  html[data-ui="v2"] .v2WbFeed li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2WbList .v2Lk,
  html[data-ui="v2"] .v2WbFeed .v2Lk { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2WbWhen { flex: none; white-space: nowrap; }
  html[data-ui="v2"] .v2WbFeed li { align-items: flex-start; }
  html[data-ui="v2"] .v2WbDot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--attio-accent); }

  html[data-ui="v2"] .v2WbBar { display: inline-block; width: 96px; height: 6px; border-radius: 3px; background: var(--attio-bg2); overflow: hidden; vertical-align: middle; }
  html[data-ui="v2"] .v2WbBar > i { display: block; height: 100%; background: var(--attio-accent); border-radius: 3px; }
  html[data-ui="v2"] .v2WbProg { white-space: nowrap; }
  html[data-ui="v2"] .v2WbProg .v2Cap { margin-left: 6px; }

  html[data-ui="v2"] .v2WbBoard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
  html[data-ui="v2"] .v2WbBoard.v2WbBoard-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
  html[data-ui="v2"] .v2WbBoard.v2WbBoard-1 { grid-template-columns: minmax(220px, 480px); }
  html[data-ui="v2"] .v2WbCol { background: var(--attio-bg2); border: 1px solid var(--attio-line2); border-radius: var(--attio-r4); padding: 10px; min-width: 0; }
  html[data-ui="v2"] .v2WbCol > h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; }
  html[data-ui="v2"] .v2WbCard { padding: 10px 12px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
  html[data-ui="v2"] .v2WbCard .v2Lk { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; text-align: left; cursor: pointer; overflow-wrap: anywhere; }

  html[data-ui="v2"] .v2WbApvT .v2WbChk { width: 32px; text-align: center; }
  html[data-ui="v2"] .v2WbApvT .v2Lk { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }

  html[data-ui="v2"] .v2WbTlGrp + .v2WbTlGrp { margin-top: 14px; }
  html[data-ui="v2"] .v2WbTl { list-style: none; margin: 6px 0 0; padding: 0; }
  html[data-ui="v2"] .v2WbTlItem { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2WbTlItem:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2WbTlIc { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--attio-bg2); border: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2WbTlItem .v2Lk { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
}

@media screen and (max-width: 720px) {
  html[data-ui="v2"] .v2WbBoard,
  html[data-ui="v2"] .v2WbBoard.v2WbBoard-3 { grid-template-columns: repeat(4, 84vw); scroll-snap-type: x mandatory; }
  html[data-ui="v2"] .v2WbCol { scroll-snap-align: start; }
}

/* ---- src/v2/fin-blocks.css ---- */
/* v2 design system, final round: finance Pattern blocks (v2-fin-blocks.mjs, mock-up 08) on P&L,
   Budget vs actual, Budget and Ratios. Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] .v2FinBlock { margin: 0 0 16px; }
  html[data-ui="v2"] .v2FinBlock .v2Card { margin-bottom: 16px; }
  html[data-ui="v2"] .v2FinBlock table.v2PT td .v2Spark { display: block; }
  html[data-ui="v2"] .v2FbBarCell { width: 28%; min-width: 80px; }
  html[data-ui="v2"] .v2FbBar {
    display: block; height: 8px; border-radius: 4px; background: var(--attio-accent); opacity: .8;
  }
  html[data-ui="v2"] .v2FbBar.v2FbBarNeg { background: var(--v2-red-t); }
  /* Mark paid (A-M11): the inline request form under the invoices bulk bar and the approvals card. */
  html[data-ui="v2"] .v2MpForm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px;
    border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-surface); color: var(--attio-text);
  }
  html[data-ui="v2"] .v2MpForm label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--attio-text2); }
  html[data-ui="v2"] .v2MpForm input { font: inherit; padding: 4px 6px; border: 1px solid var(--attio-line2); border-radius: 6px; background: var(--attio-bg); color: var(--attio-text); }
  html[data-ui="v2"] .v2MpCard { margin: 16px 0; }
  html[data-ui="v2"] .v2MpActs { gap: 8px; margin-top: 10px; }

  /* Overview "Monthly income & expenses" (polish C-1..C-4, v2-chart-theme.mjs): totals line, 320px
     chart, "Show as table", and the income mix strip (the .v2Stack.v2Mix look, stream tints, 1px gaps). */
  html[data-ui="v2"] .v2OvTotals { margin: -4px 0 10px; font-size: 12.5px; color: var(--attio-text3); font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2OvTotals:empty { display: none; }
  html[data-ui="v2"] #ovMonthlyBox { height: 320px; }
  html[data-ui="v2"] .v2OvTable { margin-top: 10px; }
  html[data-ui="v2"] .v2OvTable > summary { cursor: pointer; width: max-content; font-size: 13px; font-weight: 600; color: var(--v2-link); }
  html[data-ui="v2"] .v2OvTable .v2TWrap { margin-top: 8px; max-height: 360px; overflow: auto; }
  html[data-ui="v2"] .v2OvPhone { display: none; }
  html[data-ui="v2"] table.v2FbMonths td.v2Neg { color: var(--v2-red-t); }
  html[data-ui="v2"] .v2IncMix { margin-top: 14px; }
  html[data-ui="v2"] .v2IncMixHd { font-size: 13px; font-weight: 650; color: var(--attio-text); margin-bottom: 6px; }
  html[data-ui="v2"] .v2Stack.v2IncMixBar { gap: 1px; background: var(--attio-bg); }
  html[data-ui="v2"] .v2IncMix0 { background: var(--v2-blue-t); }
  html[data-ui="v2"] .v2IncMix1 { background: var(--v2-teal-t); }
  html[data-ui="v2"] .v2IncMix2 { background: var(--v2-violet-t); }
  html[data-ui="v2"] .v2IncMix3 { background: var(--v2-amber-t); }
  html[data-ui="v2"] .v2IncMix4 { background: var(--v2-grey-t); }
  html[data-ui="v2"] .v2IncMixLegend { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--attio-text2); white-space: nowrap; overflow-x: auto; }
  html[data-ui="v2"] .v2IncMixLegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
  html[data-ui="v2"] .v2IncMixLegend b { color: var(--attio-text); font-weight: 650; font-variant-numeric: tabular-nums; }
}

/* Phone: the chart stays hidden (.chartBox, src/shell.html); the last 12 months show as a table instead. */
@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2OvTable { display: none; }
  html[data-ui="v2"] .v2OvPhone { display: block; margin-top: 4px; }
}

/* ---- src/v2/records.css ---- */
/* Record pages (v2-records.mjs): A-05 Residents & funding, A-29 Head leases / Lease terms / Investors /
   Development and A-30 Site statement, after mock-ups 17 / 20: header with eyebrow, title and status
   chips, a row of header facts, tabs, then a grid of cards. Only under html[data-ui="v2"]. */
html[data-ui="v2"] .v2Rx { margin: 0 0 16px; padding: 18px 20px 20px; border: 1px solid var(--attio-line); border-radius: 12px; background: var(--attio-bg); box-shadow: var(--attio-shadow1); }
html[data-ui="v2"] .v2RxHead { display: flex; gap: 16px; align-items: flex-start; }
html[data-ui="v2"] .v2RxTitleRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 2px 0 6px; }
html[data-ui="v2"] .v2RxTitle { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--attio-text); }
html[data-ui="v2"] .v2RxFacts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
html[data-ui="v2"] .v2RxFact b { font-weight: 600; color: var(--attio-text); }
html[data-ui="v2"] .v2RxSub { margin-top: 6px; }
html[data-ui="v2"] .v2Rx .v2Tabs { margin: 14px 0 0; }
html[data-ui="v2"] .v2RxBody { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
html[data-ui="v2"] .v2RxBody > .v2Empty { grid-column: 1 / -1; }
html[data-ui="v2"] .v2RxLinks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
html[data-ui="v2"] .v2RxT td:first-child { color: var(--attio-text2); }
html[data-ui="v2"] #tab-residents tr[data-resx], html[data-ui="v2"] #tab-leases table tr, html[data-ui="v2"] #tab-lterms table tr,
html[data-ui="v2"] #tab-lessors table tr, html[data-ui="v2"] #tab-siteecon table tr { cursor: pointer; }
@media (max-width: 720px) {
  html[data-ui="v2"] .v2Rx { padding: 14px; }
  html[data-ui="v2"] .v2RxHead { flex-direction: column; }
  html[data-ui="v2"] .v2RxTitle { font-size: 20px; }
  /* minmax(0, 1fr): a plain 1fr column grows to the widest statement table and pushes the page sideways. */
  html[data-ui="v2"] .v2RxBody { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2RxBody > * { min-width: 0; }
  /* A-30 on a phone: the classic statement below the record keeps the screen width; its wide tables
     scroll sideways inside their card, the fixed-width cards and site picker shrink to fit. */
  html[data-ui="v2"] #tab-sitestmt .card { min-width: 0 !important; max-width: 100%; }
  html[data-ui="v2"] #tab-sitestmt table { display: block; max-width: 100%; overflow-x: auto; }
  html[data-ui="v2"] #tab-sitestmt select { min-width: 0 !important; max-width: 100%; }
}

/* ---- src/v2/maint-blocks.css ---- */
/* New look Maintenance › Suppliers (A-15, mock-ups 04b / 04c) and Assets & compliance (A-16, mock-ups
   03 / 01a): contractor table and record, read-only Contact sync card, spend tiles, the site-file style
   section tabs and the Building specs card (src/js/v2-maint-blocks.mjs). Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] .v2MbContr td { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; }
  html[data-ui="v2"] .v2MbContr tr[data-v2-mb-row] { cursor: default; }
  html[data-ui="v2"] .v2MbContr tr.v2Sel td { background: var(--attio-select); }
  html[data-ui="v2"] .v2MbName { gap: 8px; align-items: center; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2MbContr .v2Num, html[data-ui="v2"] .v2MbRec .v2Num { text-align: right; }
  html[data-ui="v2"] .v2MbRec { margin: 0 0 16px; padding: 16px 18px; }
  html[data-ui="v2"] .v2MbRec .v2PTitleRow { gap: 14px; align-items: flex-start; }
  html[data-ui="v2"] .v2MbRec .v2H1 { font-size: 22px; margin: 2px 0 6px; }
  html[data-ui="v2"] .v2MbBigAv .v2Av { width: 44px; height: 44px; font-size: 16px; }
  html[data-ui="v2"] .v2RecFacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; }
  html[data-ui="v2"] .v2RecFacts > div {
    display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--attio-line2); border-radius: var(--attio-r3); background: var(--attio-bg2); min-width: 0;
  }
  html[data-ui="v2"] .v2RecFacts b { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2MbRecBody { margin-top: 14px; }
  html[data-ui="v2"] .v2MbSync, html[data-ui="v2"] .v2MbSpecs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
  html[data-ui="v2"] .v2MbSync li, html[data-ui="v2"] .v2MbSpecs li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2MbSync li:last-child, html[data-ui="v2"] .v2MbSpecs li:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2MbCs { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--attio-line); }
  html[data-ui="v2"] .v2MbCs .v2MbCsFacts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 8px; }
  html[data-ui="v2"] .v2MbATabs { margin: 0 0 14px; }
  html[data-ui="v2"] .v2MbComp td { padding-top: 6px; padding-bottom: 6px; }
  html[data-ui="v2"] .v2MbSpend { margin-bottom: 12px; }
  /* MC-15: the contractor chips in the classic list. Each pair is at least 4.5:1, light and dark (tools/contractors-mobile_test.mjs). */
  html[data-ui="v2"] .tag.mcChip { border-color: transparent; }
  html[data-ui="v2"] .tag.mcChip-green { background: var(--v2-green-50); color: var(--v2-green-t); }
  html[data-ui="v2"] .tag.mcChip-amber { background: var(--v2-amber-50); color: var(--v2-amber-t); }
  html[data-ui="v2"] .tag.mcChip-red { background: var(--v2-red-50); color: var(--v2-red-t); }
  html[data-ui="v2"] .tag.mcChip-grey { background: var(--v2-grey-50); color: var(--v2-grey-t); }
  /* MC-16: History in the contractor sheet and record. */
  html[data-ui="v2"] .mcHist { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--v2-grey-50); color: var(--v2-grey-t); }
  html[data-ui="v2"] .mcHist :is(b, .dim, .label) { color: var(--v2-grey-t); }
  html[data-ui="v2"] .mcHistList { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
  html[data-ui="v2"] .mcHist .neg { color: var(--v2-red-t); }
  html[data-ui="v2"] .mcHistBtn { font-size: 12px; padding: 3px 10px; }
}

@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2MbSuppliers .v2G-2-1, html[data-ui="v2"] .v2MbAssets .v2G-2-1 { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2RecFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="v2"] .v2MbATabs .v2Tabs { overflow-x: auto; }

  /* MC-13: the Suppliers table as stacked rows, as the CRM tables do; the record and the classic list stay inside 390 px. */
  html[data-ui="v2"] table.v2PT.v2MbContr thead { display: none; }
  html[data-ui="v2"] table.v2PT.v2MbContr, html[data-ui="v2"] table.v2PT.v2MbContr tbody, html[data-ui="v2"] table.v2PT.v2MbContr tr { display: block; }
  html[data-ui="v2"] table.v2PT.v2MbContr tr { padding: 10px 12px; border-bottom: 1px solid var(--attio-line2); }
  html[data-ui="v2"] table.v2PT.v2MbContr td { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; padding: 4px 0; border: 0; white-space: normal; }
  html[data-ui="v2"] table.v2PT.v2MbContr td::before { content: attr(data-label); color: var(--attio-text3); font-size: 12.5px; font-weight: 600; flex: none; }
  html[data-ui="v2"] table.v2PT.v2MbContr td:first-child::before { display: none; }
  html[data-ui="v2"] .v2Sticky table.v2PT.v2MbContr td:first-child { position: static; }
  html[data-ui="v2"] .v2MbName { flex-wrap: wrap; min-width: 0; }
  html[data-ui="v2"] .v2MbChips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
  html[data-ui="v2"] #tab-maintcontr { overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2MbRec { padding: 14px 12px; }
  html[data-ui="v2"] .v2MbRec .v2PTitleRow { flex-wrap: wrap; }
  html[data-ui="v2"] .v2MbRec .v2PActs { flex-wrap: wrap; width: 100%; }
  html[data-ui="v2"] .v2MbRec .v2Tabs { overflow-x: auto; }
  html[data-ui="v2"] :is(.v2MbContr, .v2MbRec, #tab-maintcontr td) a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  html[data-ui="v2"] .mcNameCell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  html[data-ui="v2"] .mcChips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

  /* MC-08: the New / Edit contractor form as a bottom sheet. The box scrolls; the action bar stays on screen, clear of the safe area. */
  html[data-ui="v2"] #mntModal.mntSheet { align-items: flex-end !important; }
  html[data-ui="v2"] #mntModal.mntSheet .mntModalBox {
    box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: 92vh !important; max-height: 92dvh !important;
    padding: 16px 16px 0 !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  }
  html[data-ui="v2"] #mntModal.mntSheet .mntModalActs {
    position: sticky; bottom: 0; z-index: 5; margin: 14px -16px 0 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    background: var(--attio-bg); border-top: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] #mntModal.mntSheet .mntModalActs button { flex: 1 1 0; min-height: 44px; }
  html[data-ui="v2"] #mntModal.mntSheet .mcfTrades { max-height: none !important; overflow: visible !important; }
  html[data-ui="v2"] #mntModal.mntSheet .mcfTrades label { min-height: 44px; }
}

/* ---- src/v2/ops-tables.css ---- */
/* New look Operations › Rooms & residents (A-04, mock-up 17: group rows, room tiles), Care providers
   (A-06), Business development (A-07) and Administration › Main contacts (A-19) comfortable tables
   (mock-up 04b), from src/js/v2-ops-tables.mjs. Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] .v2OtBlock .v2Toolbar { margin: 0 0 12px; }
  html[data-ui="v2"] table.v2PT.v2OtRooms td { height: 36px; vertical-align: middle; }
  html[data-ui="v2"] table.v2PT.v2OtRooms tr.v2OtGrp td {
    background: var(--attio-bg2); border-left: 3px solid var(--attio-accent); font-weight: 600; height: 34px;
  }
  html[data-ui="v2"] table.v2PT.v2OtRooms tr.v2OtGrp .v2OtOcc { float: right; font-weight: 500; }
  html[data-ui="v2"] table.v2PT.v2OtComfy td { height: 56px; vertical-align: middle; white-space: nowrap; }
  html[data-ui="v2"] table.v2PT.v2OtComfy tr.v2Sel td { background: var(--attio-select); }
  html[data-ui="v2"] table.v2PT.v2OtBd tr[data-v2-ot-bd] { cursor: pointer; }
  html[data-ui="v2"] .v2OtName { gap: 10px; align-items: center; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2OtName .v2Col0 { display: grid; gap: 2px; min-width: 0; }
  html[data-ui="v2"] .v2OtName .v2Lk { font-weight: 600; text-align: left; }
  html[data-ui="v2"] .v2OtFit { display: inline-flex; align-items: center; gap: 10px; }
  html[data-ui="v2"] .v2OtFit .v2Bar { width: 110px; height: 6px; }
  html[data-ui="v2"] .v2OtFit b { font-variant-numeric: tabular-nums; min-width: 30px; }
  html[data-ui="v2"] .v2OtTiles { display: grid; gap: 14px; }
  html[data-ui="v2"] .v2OtHouse.v2OtHide, html[data-ui="v2"] .v2OtTile.v2OtHide { display: none; }
  html[data-ui="v2"] .v2OtHouseHd { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-weight: 600; }
  html[data-ui="v2"] .v2OtTileRow { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  html[data-ui="v2"] .v2OtTile {
    display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: var(--attio-r3); border: 1px solid var(--attio-line2);
    border-left-width: 4px; background: var(--attio-bg); color: var(--attio-text); font: inherit; cursor: pointer;
  }
  html[data-ui="v2"] .v2OtTile span { font-size: 12px; color: var(--attio-text3); }
  html[data-ui="v2"] .v2OtTile .v2OtWho { color: var(--attio-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2OtTile:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; }
  html[data-ui="v2"] .v2OtT-green { border-left-color: var(--v2-green); }
  html[data-ui="v2"] .v2OtT-blue { border-left-color: var(--v2-blue); }
  html[data-ui="v2"] .v2OtT-amber { border-left-color: var(--v2-amber); }
  html[data-ui="v2"] .v2OtT-grey { border-left-color: var(--attio-line2); }

  /* A-19 Main contacts merge (Critiq 13 Nov 2026). One view (MC-01): once the New look block is in
     (data-v2-direct="a-19") the classic heading, search row (#facSearch, #facRefresh, #facCount stay as
     hidden aliases), #facReadiness box and #facGroups grid are hidden. #facEditor stays the editor. */
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] > .card > h2,
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] > .card > .chipRow,
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] #facReadiness,
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] #facGroups { display: none; }
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] > .card { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
  /* MC-05: the head's search row (search, toggles, Refresh, Last synced) sticks to the top while the list scrolls. */
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] > .v2PatHead { display: contents; }
  html[data-ui="v2"] #tab-facontacts[data-v2-direct="a-19"] > .v2PatHead > .v2PatTools {
    position: sticky; top: 0; z-index: 5; margin: 10px 0 16px; padding: 8px 0; background: var(--attio-bg); border-bottom: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .v2OtFacTools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
  html[data-ui="v2"] .v2OtFacSync { white-space: nowrap; }
  html[data-ui="v2"] .v2OtWarn { color: var(--v2-amber-t); font-weight: 600; }
  /* MC-04: Invoicing readiness card above the table. */
  html[data-ui="v2"] .v2OtReady { margin: 0 0 12px; padding: 10px 14px; }
  html[data-ui="v2"] .v2OtReadySum { font-size: 13.5px; }
  html[data-ui="v2"] .v2OtReadyChips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
  html[data-ui="v2"] .v2OtChip { border: 0; background: none; padding: 0; border-radius: 999px; cursor: pointer; font: inherit; }
  html[data-ui="v2"] .v2OtChip.v2On .v2Pill { box-shadow: 0 0 0 2px var(--attio-accent); }
  html[data-ui="v2"] .v2OtChip:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; }
  html[data-ui="v2"] .v2OtReadyList { margin: 8px 0 0; }
  html[data-ui="v2"] .v2OtReadyList summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--attio-text2); }
  html[data-ui="v2"] .v2OtReadyList ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; max-height: 260px; overflow: auto; }
  html[data-ui="v2"] .v2OtReadyList li { margin: 3px 0; }
  html[data-ui="v2"] .v2OtReadyOk { margin: 6px 0 0; }
  /* MC-02: the billing workbench table. */
  html[data-ui="v2"] table.v2OtFac td.v2Num { font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] table.v2OtFac .v2OtFacNm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  html[data-ui="v2"] table.v2OtFac .v2OtName > .v2Btn { margin-left: auto; }
  html[data-ui="v2"] table.v2OtFac .utilitiesEmailWarn { color: var(--v2-amber-t); font-size: 12px; font-weight: 600; }
  html[data-ui="v2"] table.v2OtFac .v2OtCtl,
  html[data-ui="v2"] #facEditor .v2OtFacBillEd .v2OtCtl {
    font: inherit; font-size: 12.5px; max-width: 220px; padding: 4px 6px; border: 1px solid var(--attio-line2); border-radius: 6px; background: var(--attio-bg); color: var(--attio-text);
  }
  html[data-ui="v2"] table.v2OtFac input.ptEmail { width: 190px; }
  html[data-ui="v2"] .v2OtFacBillEd .rrcNoteFlag,
  html[data-ui="v2"] .v2OtFacBillEd .ptEmailFlag,
  html[data-ui="v2"] table.v2OtFac .rrcNoteFlag,
  html[data-ui="v2"] table.v2OtFac .ptEmailFlag { font-size: 11.5px; margin-top: 3px; }
  html[data-ui="v2"] table.v2OtFac .facRowState,
  html[data-ui="v2"] .v2OtFacBillEd .facRowState { margin-top: 3px; min-height: 1em; }
  html[data-ui="v2"] table.v2OtFac .v2OtBillTog { display: none; }
  /* Under 1440 px the RRC fields live in the editor (the same draft and the same row Save). */
  html[data-ui="v2"] #facEditor .v2OtFacBillEd { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--attio-line2); }
  html[data-ui="v2"] #facEditor .v2OtFacBillEd h4 { margin: 0 0 8px; font-size: 13px; }
  html[data-ui="v2"] .v2OtFacBillGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: start; }
  html[data-ui="v2"] .v2OtFacBillF { display: grid; gap: 3px; }
  html[data-ui="v2"] .v2OtFacBillF .v2OtCtl { width: 100%; max-width: none; }
}

/* MC-02: Contact stays pinned while the wide table scrolls sideways (not on the phone cards).
   The table scrolls inside a box that fits the screen (header row sticks to its top), with a twin
   horizontal bar above it that sticks just under the head's sticky search row (v2otFacScrollInit). */
@media screen and (min-width: 761px) {
  html[data-ui="v2"] .v2OtFacScroll { overflow: auto; max-height: calc(100vh - 230px); max-height: max(320px, calc(100dvh - 230px)); }
  html[data-ui="v2"] .v2OtFacTop {
    position: sticky; top: var(--v2-ot-fac-top, 0px); z-index: 4; overflow-x: auto; overflow-y: hidden; height: 16px; margin: 0 0 4px; background: var(--attio-bg);
  }
  html[data-ui="v2"] .v2OtFacTopSp { height: 1px; }
  html[data-ui="v2"] table.v2OtFac th:first-child,
  html[data-ui="v2"] table.v2OtFac td:first-child { position: sticky; left: 0; z-index: 1; background: var(--attio-bg); }
  html[data-ui="v2"] table.v2OtFac thead th:first-child { z-index: 3; }
  html[data-ui="v2"] table.v2OtFac tr.v2Sel td:first-child { background: var(--attio-select); }
}

@media print {
  html[data-ui="v2"] .v2OtFacTop { display: none; }
}

/* Columns 7, 9 and 11-16 (Utilities email, Plan manager, RRC ... Save) fold into the editor under 1440 px. */
@media screen and (max-width: 1439px) {
  html[data-ui="v2"] table.v2OtFac .v2OtFold { display: none; }
}
@media screen and (min-width: 1440px) {
  html[data-ui="v2"] #facEditor .v2OtFacBillEd { display: none; }
}

@media screen and (max-width: 760px) {
  html[data-ui="v2"] table.v2PT.v2OtComfy td { white-space: normal; height: auto; }
  html[data-ui="v2"] .v2OtTileRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* MC-06: Main contacts as one card per contact (no twin scrollbar, no sideways scroll). */
  html[data-ui="v2"] .v2OtFacWrap { border: 0; background: none; overflow: visible; max-height: none; }
  html[data-ui="v2"] .v2OtFacTop { display: none; }
  html[data-ui="v2"] table.v2OtFacCards,
  html[data-ui="v2"] table.v2OtFacCards tbody { display: block; width: 100%; }
  html[data-ui="v2"] table.v2OtFacCards thead { display: none; }
  html[data-ui="v2"] table.v2OtFacCards tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin: 0 0 10px; padding: 12px;
    border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg);
  }
  html[data-ui="v2"] table.v2OtFacCards td { display: block; height: auto; padding: 0; border: 0; white-space: normal; background: none; }
  html[data-ui="v2"] table.v2OtFacCards td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--attio-text3); }
  html[data-ui="v2"] table.v2OtFacCards td.v2OtFacName { grid-column: 1 / -1; }
  html[data-ui="v2"] table.v2OtFacCards td.v2OtFacName::before { content: none; }
  html[data-ui="v2"] table.v2OtFacCards td.v2OtNoCard { display: none; }
  html[data-ui="v2"] table.v2OtFacCards td.v2OtBillTog { display: block; grid-column: 1 / -1; }
  html[data-ui="v2"] table.v2OtFacCards tr.v2OtBillOpen td.v2OtBill { display: block; }
  html[data-ui="v2"] table.v2OtFacCards .telLink { display: inline-block; min-height: 44px; line-height: 44px; }
  html[data-ui="v2"] table.v2OtFacCards .v2OtName > .v2Btn,
  html[data-ui="v2"] table.v2OtFacCards td.v2OtBillTog .v2Btn { min-height: 44px; }
  html[data-ui="v2"] table.v2OtFacCards .v2OtCtl { max-width: 100%; width: 100%; }
  /* The card's Billing fields hold the RRC controls on a phone; the editor keeps the CRM fields. */
  html[data-ui="v2"] #facEditor .v2OtFacBillEd { display: none; }
}

/* ---- src/v2/doc-layouts.css ---- */
/* New look Review queue (A-18, mock-up 03b split view), Administration › Documents (A-23) and Policies &
   Procedures / Templates (A-54) document libraries (mock-up 01a), from src/js/v2-doc-layouts.mjs.
   The v1 markup is hidden only while the v2 block is on the section (data-v2-direct); every v1 control
   stays in the DOM, and the v2 buttons press it. Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] #tab-reviewqueue[data-v2-direct="review"] > :not(.v2Page),
  html[data-ui="v2"] #tab-fadocs[data-v2-direct="fadocs"] > :not(.v2Page),
  html[data-ui="v2"] [data-v2-direct="dochub"] .dhRoot .dhTableWrap,
  html[data-ui="v2"] [data-v2-direct="dochub"] .dhRoot .dhCats { display: none; }

  /* A-18 split list (03b) */
  html[data-ui="v2"] .v2DlReview .v2Stabs { margin: 0 0 12px; }
  html[data-ui="v2"] .v2DlItems { display: grid; gap: 8px; }
  html[data-ui="v2"] .v2DlItem {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; padding: 12px 14px; text-align: left; font: inherit; color: inherit;
    border: 1px solid var(--attio-line2); border-radius: 10px; background: var(--attio-bg); cursor: pointer;
  }
  html[data-ui="v2"] .v2DlItem:hover { border-color: var(--attio-line3); }
  html[data-ui="v2"] .v2DlItem.v2On { border: 2px solid var(--attio-accent); background: var(--v2-blue-50); padding: 11px 13px; }
  html[data-ui="v2"] .v2DlItem:focus-visible { outline: 2px solid var(--attio-accent); outline-offset: 2px; }
  html[data-ui="v2"] .v2DlItemTop { display: flex; align-items: center; gap: 8px; min-width: 0; }
  html[data-ui="v2"] .v2DlItemT { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2DlItemS { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2DlSq { width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--v2-td, var(--v2-grey)); }
  html[data-ui="v2"] .v2DlRec .v2H1 { font-size: 22px; margin: 4px 0 8px; }
  html[data-ui="v2"] .v2DlRecTop { align-items: center; flex-wrap: wrap; min-width: 0; }
  html[data-ui="v2"] .v2DlRec .v2Acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
  html[data-ui="v2"] .v2DlAtts { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; min-width: 0; }
  html[data-ui="v2"] .v2DlAtts .v2Lk { text-align: left; }
  html[data-ui="v2"] .v2DlResolved { margin-top: 16px; }
  /* A long unbroken filename, subject or address wraps; it never sets the width of the page. */
  html[data-ui="v2"] .v2DlReview,
  html[data-ui="v2"] .v2DlReview .v2Split,
  html[data-ui="v2"] .v2DlRec { min-width: 0; max-width: 100%; }
  html[data-ui="v2"] .v2DlReview .v2Facts { grid-template-columns: 130px minmax(0, 1fr); }
  html[data-ui="v2"] .v2DlReview .v2Facts dd,
  html[data-ui="v2"] .v2DlAtts .v2Lk,
  html[data-ui="v2"] .v2DlRec .v2H1 { overflow-wrap: anywhere; min-width: 0; }

  /* A-23 / A-54 library (01a) */
  html[data-ui="v2"] .v2DlGrid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr); gap: 16px; align-items: start; margin: 0 0 16px; }
  html[data-ui="v2"] .v2DlLibBox { display: grid; gap: 10px; }
  html[data-ui="v2"] .v2DlLibBox .v2SearchBox { width: 100%; box-sizing: border-box; }
  html[data-ui="v2"] .v2DlFiles { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; display: grid; gap: 2px; }
  html[data-ui="v2"] .v2DlFile { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
  html[data-ui="v2"] .v2DlFile .v2Lk { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2DlFile.v2On { background: var(--v2-blue-50); }
  html[data-ui="v2"] .v2DlPrev { flex: none; border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--attio-text3); font: inherit; }
  html[data-ui="v2"] .v2DlPrev:hover { background: var(--attio-hover); color: var(--attio-text); }
  html[data-ui="v2"] .v2DlRootRow { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; }
  html[data-ui="v2"] .v2DlFileHead { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
  html[data-ui="v2"] .v2DlName { font-size: 19px; margin: 0 0 4px; overflow-wrap: anywhere; }
  html[data-ui="v2"] .v2DlBadge {
    flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 6px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--v2-red, #c0392b); background: var(--attio-bg2); border: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .v2DlSum { margin: 10px 0 0; line-height: 1.5; }
  html[data-ui="v2"] .v2DlNote { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--attio-r3); background: var(--attio-bg2); border: 1px solid var(--attio-line2); }
  html[data-ui="v2"] .v2DlFix { margin: 0 0 12px; }
  html[data-ui="v2"] .v2DlFix .v2Row { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
  html[data-ui="v2"] .v2DlField { display: grid; gap: 4px; }
  html[data-ui="v2"] .v2DlField input, html[data-ui="v2"] .v2DlField select {
    height: 34px; padding: 0 10px; border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-bg); color: var(--attio-text); font: inherit;
  }
  html[data-ui="v2"] .v2DlSel .v2Card { box-shadow: none; }
  html[data-ui="v2"] .v2DlDhActs .dhBtn { margin: 0; }
}

/* Laptop widths: Attachments stacks under Destination, so the detail column keeps room to wrap. */
@media screen and (max-width: 1360px) {
  html[data-ui="v2"] .v2DlReview .v2G-2-1 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 760px) {
  html[data-ui="v2"] .v2DlGrid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2DlFiles { padding-left: 16px; }
  html[data-ui="v2"] .v2DlRec .v2Acts .v2Btn { flex: 1 1 auto; }
}

/* ---- src/v2/crm-more.css ---- */
/* v2 design system: CRM Organisations / Deals / Leads (A-52, mock-ups 04b, 04c, 05) and Business development /
   Templates / Audit log / Settings (A-53, 04b, 10). Blocks are inserted by src/js/v2-crm-more.mjs (class v2Page)
   at the top of the open tab-crm* section. The CRM's own rail, top bar and list are hidden only on sections it
   marked with data-v2-direct, and come back with Classic screen (data-v2-classic). A deal, organisation or lead
   record reuses the crmrecord rules in crm.css. Studio tokens only. Every selector is under html[data-ui="v2"].
   Screen only: print unchanged. */

@media screen {
  /* ---- v1 duplicates, only on marked sections ---- */
  html[data-ui="v2"] section:is([data-v2-direct="crmorgs"], [data-v2-direct="crmdeals"], [data-v2-direct="crmleads"], [data-v2-direct="crmrecord"], [data-v2-direct="crmbd"], [data-v2-direct="crmsteps"], [data-v2-direct="crmaudit"], [data-v2-direct="crmsettings"]):not([data-v2-classic="1"]) :is(.pcrmRail, .pcrmTopBar),
  html[data-ui="v2"] section:is([data-v2-direct="crmorgs"], [data-v2-direct="crmdeals"], [data-v2-direct="crmleads"], [data-v2-direct="crmrecord"], [data-v2-direct="crmbd"], [data-v2-direct="crmsteps"], [data-v2-direct="crmaudit"], [data-v2-direct="crmsettings"]):not([data-v2-classic="1"]) .pcrmCanvas > :not(#pcrmRecord):not(#pcrmModal) { display: none; }

  /* ---- shared ---- */
  html[data-ui="v2"] .v2CmPage .v2CmBar, html[data-ui="v2"] .v2CmWork .v2CmBar { flex-wrap: wrap; gap: 10px; }
  html[data-ui="v2"] .v2CmBar .v2Stabs { margin: 0; }
  html[data-ui="v2"] .v2CmOpen {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: var(--v2-link);
  }
  html[data-ui="v2"] .v2CmOpen:hover { text-decoration: underline; }
  html[data-ui="v2"] :is(.v2CmOpen, .v2CmMove select):focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--attio-focus); border-radius: 4px; }
  html[data-ui="v2"] .v2CmDash { color: var(--attio-text3); }
  html[data-ui="v2"] .v2CmNum { font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2CmOwner { display: inline-flex; align-items: center; gap: 6px; }

  /* ---- comfortable tables (04b) ---- */
  html[data-ui="v2"] table.v2PT.v2CmTable.v2Comfy td { height: 56px; }
  html[data-ui="v2"] table.v2PT.v2CmTable td { white-space: nowrap; }
  html[data-ui="v2"] .v2CmWho { display: inline-flex; align-items: center; gap: 12px; min-width: 180px; }
  html[data-ui="v2"] .v2CmWho .v2Av { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
  html[data-ui="v2"] .v2CmWho > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
  html[data-ui="v2"] .v2CmFit { display: inline-flex; align-items: center; gap: 8px; }
  html[data-ui="v2"] .v2CmFit .v2Bar { width: 90px; height: 6px; }
  html[data-ui="v2"] .v2CmFit b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
  html[data-ui="v2"] table.v2PT.v2CmTable.v2CmDense td { height: 36px; font-size: 13.5px; white-space: normal; }
  html[data-ui="v2"] table.v2PT.v2CmTable.v2CmDense td:first-child { white-space: nowrap; }

  /* ---- deals board (05) ---- */
  html[data-ui="v2"] .v2CmBoard {
    position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px;
  }
  html[data-ui="v2"] .v2CmCol { background: var(--attio-bg2); border: 1px solid var(--attio-line2); border-radius: 14px; padding: 12px; min-width: 0; }
  html[data-ui="v2"] .v2CmColHead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  html[data-ui="v2"] .v2CmColHead h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--attio-text); }
  html[data-ui="v2"] .v2CmTotal { margin-left: auto; font-size: 13px; color: var(--attio-text2); font-variant-numeric: tabular-nums; }
  html[data-ui="v2"] .v2CmCards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  html[data-ui="v2"] .v2CmCard {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--attio-line2); border-radius: 10px;
    background: var(--attio-bg); box-shadow: var(--attio-shadow1);
  }
  html[data-ui="v2"] .v2CmCardTitle { font-size: 14.5px; }
  html[data-ui="v2"] .v2CmCardRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
  html[data-ui="v2"] .v2CmCardNext { font-size: 12.5px; }
  html[data-ui="v2"] .v2CmMove select {
    width: 100%; height: 30px; border: 1px solid var(--attio-line2); border-radius: 8px; background: var(--attio-bg); color: var(--attio-text2); font: inherit; font-size: 13px;
  }
  html[data-ui="v2"] .v2CmEmpty { padding: 6px 2px; }

  /* ---- A-53 frame (10) ---- */
  html[data-ui="v2"] .v2CmMain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html[data-ui="v2"] .v2CmMain > .v2Card { margin: 0; }
  html[data-ui="v2"] .v2CmSet { list-style: none; margin: 0; padding: 0; }
  html[data-ui="v2"] .v2CmSetRow {
    display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 4px 16px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--attio-line); font-size: 14px;
  }
  html[data-ui="v2"] .v2CmSetRow:last-child { border-bottom: 0; }
  html[data-ui="v2"] .v2CmSetLabel { font-weight: 600; color: var(--attio-text); }
  html[data-ui="v2"] .v2CmSetVal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  html[data-ui="v2"] .v2CmSetNote { grid-column: 2; }
}

/* ---- Phone (390): stacked rows, board scrolls sideways with snap ---- */
@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2CmBoard { grid-auto-columns: 84%; scroll-snap-type: x mandatory; }
  html[data-ui="v2"] .v2CmCol { scroll-snap-align: start; }
  html[data-ui="v2"] .v2CmSetRow { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="v2"] .v2CmSetNote { grid-column: 1; }
  html[data-ui="v2"] table.v2PT.v2CmTable thead { display: none; }
  html[data-ui="v2"] table.v2PT.v2CmTable, html[data-ui="v2"] table.v2PT.v2CmTable tbody, html[data-ui="v2"] table.v2PT.v2CmTable tr { display: block; }
  html[data-ui="v2"] table.v2PT.v2CmTable tr { padding: 10px 12px; border-bottom: 1px solid var(--attio-line2); }
  html[data-ui="v2"] table.v2PT.v2CmTable td { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; padding: 4px 0; border: 0; white-space: normal; }
  html[data-ui="v2"] table.v2PT.v2CmTable.v2Comfy td, html[data-ui="v2"] table.v2PT.v2CmTable.v2CmDense td { height: auto; }
  html[data-ui="v2"] table.v2PT.v2CmTable td::before { content: attr(data-label); color: var(--attio-text3); font-size: 12.5px; font-weight: 600; }
  html[data-ui="v2"] table.v2PT.v2CmTable td:first-child::before { display: none; }
  html[data-ui="v2"] .v2Sticky table.v2PT.v2CmTable td:first-child { position: static; }
}

/* ---- src/v2/phone.css ---- */
/* New look phone record pages (A-C09, mock-ups 07 / 21) and the phone document preview (A-B09).
   Record pages (mobile-ui.mjs mobV2RecordApply marks them data-v2-rec-page): a bottom action bar built
   from the record's own header actions, key facts as 2-column record tiles, tabs stacked. The bar is
   phone only; desktop never shows it. Studio tokens only. Screen only (G-8). */

@media screen {
  html[data-ui="v2"] .v2RecBar { display: none; }
  html[data-ui="v2"] .v2RecTiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
  html[data-ui="v2"] .v2RecTile {
    display: grid; gap: 2px; padding: 10px 12px; background: var(--attio-bg); border: 1px solid var(--attio-line2);
    border-radius: var(--attio-r3); box-shadow: var(--attio-shadow1); min-width: 0;
  }
  html[data-ui="v2"] .v2RecTile b { font-size: 18px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-ui="v2"] .v2RecTile-red b { color: var(--v2-red); }
  html[data-ui="v2"] .v2RecTile-amber b { color: var(--v2-amber); }
  html[data-ui="v2"] .v2RecTile-green b { color: var(--v2-green); }
  html[data-ui="v2"] .v2RecTile-blue b { color: var(--attio-accent); }
  /* A-B09: the preview panel is full screen whenever the viewer opened it on a phone. */
  html[data-ui="v2"] .v2dv[data-v2dv-phone="1"] { left: 0; right: 0; width: 100vw; min-width: 0; border-left: 0; z-index: 1200; }
}

@media screen and (max-width: 700px) {
  html[data-ui="v2"] .v2RecBar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; position: sticky; bottom: 0; z-index: 60;
    margin: 16px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--attio-bg); border-top: 1px solid var(--attio-line2);
  }
  html[data-ui="v2"] .v2RecBar .v2Btn { justify-content: center; width: 100%; min-height: 48px; }
  html[data-ui="v2"] [data-v2-rec-page] .v2PActs > button, html[data-ui="v2"] [data-v2-rec-page] .v2PActs > a:not([href^="tel:"]) { display: none; }
  html[data-ui="v2"] .v2RecTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="v2"] [data-v2-rec-page] :is(.v2CrmFacts, .v2PmcLine, .v2RecFacts) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-ui="v2"] [data-v2-rec-page] :is(.v2CrmFact, .v2PmcLine > span, .v2RecFacts > div) {
    display: grid; gap: 2px; padding: 8px 10px; background: var(--attio-bg); border: 1px solid var(--attio-line2); border-radius: var(--attio-r3); min-width: 0;
  }
}

@media screen and (max-width: 600px) {
  /* Stacked tabs: one full-width row per tab, the open one marked on the left. */
  html[data-ui="v2"] [data-v2-rec-page] .v2Tabs { display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: visible; border-bottom: 0; }
  html[data-ui="v2"] [data-v2-rec-page] .v2Tabs .v2Tab {
    width: 100%; text-align: left; justify-content: space-between; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--attio-line2); border-radius: var(--attio-r2); background: var(--attio-bg);
  }
  html[data-ui="v2"] [data-v2-rec-page] .v2Tabs .v2Tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--attio-accent); background: var(--attio-select); }
}