/* ============================================================================
   Talentport Team Portal: new desktop + iPad shell (Desktop D0).

   EVERY selector in this file starts with html.tp-desk2 or html.tp-ipad
   (tests/desk2-css-scope.test.mjs enforces it). html.tp-desk2 is only set when
   the Worker says this person's "New desktop layout" switch is on, so with the
   switch off this file matches nothing: today's desktop and the iOS app stay
   pixel-identical. Tokens follow SHELL_SPEC.md.

   DESIGN TOKENS (Polish B1, 29 Sep 2026). Every desk2 page, and the Social
   rebuild, builds from these custom properties on html.tp-desk2. Don't add a
   raw font size, button height or control radius: use a token.

   Type scale (the only font sizes this file may use; tests/desk2-type-scale
   enforces it, with a short documented exception list):
     --d2-t-26  large title: Home and dashboards only (weight 700)
     --d2-t-20  title: a person, client or record heading; stat numbers (700)
     --d2-t-17  headline: card, inspector, sheet and confirm titles (600-700)
     --d2-t-15  toolbar title (600); iPad row and button text
     --d2-t-13  body: rows, buttons, inputs, menus (400-600)
     --d2-t-12  secondary: meta lines, captions, times (400-500)
     --d2-t-11  label: group headers, badges, pills, kickers (600-700)

   Controls (one family):
     --d2-btn-h     28px  standard push button, popup, search field
     --d2-btn-h-sm  24px  small button; segmented-control segment; chip
     --d2-btn-h-lg  32px  full-width inspector and confirm buttons
     --d2-radius     7px  every control (buttons, popups, segments' track uses
                          --d2-radius + 1px, segments --d2-radius - 1px)
     --d2-edge      hairline edge + 1px drop, instead of a 1px grey border
     --d2-edge-y    the same edge on the yellow primary
     --d2-seg-track background of a segmented control
     --d2-toolbar   toolbar height on a computer (52px; iPad keeps 64pt)
   iPad (html.tp-ipad) overrides the control heights to keep 44pt targets.
   ============================================================================ */

html.tp-desk2 {
  --d2-y: #F5C500;
  --d2-ink: #111;
  --d2-bg: #F4F4EF;
  --d2-card: #FFFFFF;
  --d2-line: #E3E3DC;
  --d2-line2: #EFEFE9;
  --d2-mute: #73736D;
  --d2-pill: #FFF4B9;
  --d2-soft: #ECECE5;
  --d2-red: #D6362B;
  --d2-green: #1E9A4B;
  --d2-amber: #E0A100;
  --d2-side: 248px;
  --d2-top: var(--d2-toolbar);
  --d2-row: 28px;
  --d2-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --d2-shadow: 0 18px 50px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
  /* Polish B1: type scale */
  --d2-t-26: 26px;
  --d2-t-20: 20px;
  --d2-t-17: 17px;
  --d2-t-15: 15px;
  --d2-t-13: 13px;
  --d2-t-12: 12px;
  --d2-t-11: 11px;
  /* Polish B1: controls */
  --d2-btn-h: 28px;
  --d2-btn-h-sm: 24px;
  --d2-btn-h-lg: 32px;
  --d2-radius: 7px;
  --d2-edge: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 1.5px rgba(0, 0, 0, .07);
  --d2-edge-y: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1.5px rgba(0, 0, 0, .1);
  --d2-seg-track: #EBEBE4;
  --d2-toolbar: 52px;
}

/* Narrow windows keep today's mobile-web layout; the new shell is 769px+. */
@media (max-width: 768px) {
  html.tp-desk2 .d2-el { display: none !important; }
}

@media (min-width: 769px) {
  /* ---- frame --------------------------------------------------------------- */
  html.tp-desk2 #app-shell:not(.hidden),
  html.tp-desk2 #app-shell.nav-collapsed:not(.hidden) { padding-left: var(--d2-side); background: var(--d2-bg); }
  html.tp-desk2.d2-side-collapsed #app-shell:not(.hidden),
  html.tp-desk2.d2-side-collapsed #app-shell.nav-collapsed:not(.hidden) { padding-left: 0; }
  html.tp-desk2 #app-shell > .app-header,
  html.tp-desk2 #app-shell > .mobile-bottom-nav,
  html.tp-desk2 #mobile-more-sheet,
  html.tp-desk2 #view-as-banner { display: none !important; }
  html.tp-desk2 .app-main { padding: 24px 28px 40px; }
  /* Polish B1: content starts at the toolbar title's edge at every width (it
     used to centre once the window passed ~1700px, so the two edges drifted). */
  html.tp-desk2 .app-main { margin-left: 0; margin-right: 0; }
  /* .app-main is width: 100% with auto margins; make room for the inspector instead of sliding under it. */
  html.tp-desk2.d2-insp-open .app-main { margin-right: 360px; margin-left: 0; width: calc(100% - 360px); }

  /* The top bar owns the page title and, for staff, the one Clock in. */
  html.tp-desk2 #greeting-text,
  html.tp-desk2 #greeting-date { display: none; }
  html.tp-desk2 body:not(.role-owner) #clock-panel .clock-actions { display: none; }

  /* Full-height views lose the 64px top bar from their height budget. */
  html.tp-desk2 .chats-layout { height: calc(100dvh - var(--d2-top) - 48px); }
  html.tp-desk2 #view-holly .hc { height: calc(100dvh - var(--d2-top) - 64px); }

  /* ---- sidebar -------------------------------------------------------------- */
  html.tp-desk2 #d2-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
    width: var(--d2-side); background: var(--d2-card); border-right: 1px solid var(--d2-line);
    display: flex; flex-direction: column; font-family: var(--d2-font);
  }
  html.tp-desk2.d2-side-collapsed #d2-sidebar { display: none; }
  html.tp-desk2 .d2-logo { height: var(--d2-top); flex: 0 0 var(--d2-top); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 22px; }
  html.tp-desk2 .d2-logo img { width: 114px; height: auto; display: block; }
  html.tp-desk2 .d2-scroll {
    flex: 1 1 auto; overflow-y: auto; padding: 2px 10px 16px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  }
  html.tp-desk2 .d2-scroll::-webkit-scrollbar { display: none; }
  html.tp-desk2 .d2-item {
    display: flex; align-items: center; gap: 9px; height: var(--d2-row); margin: 0; padding: 0 10px;
    border-radius: var(--d2-radius); color: #1d1d1b; text-decoration: none; font-size: var(--d2-t-13); font-weight: 500;
  }
  html.tp-desk2 .d2-item:hover { background: rgba(0, 0, 0, .04); }
  html.tp-desk2 .d2-item.is-active { background: var(--d2-pill); font-weight: 600; color: var(--d2-ink); }
  html.tp-desk2 .d2-item:focus-visible,
  html.tp-desk2 .d2-glabel:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 1px; }
  html.tp-desk2 .d2-ico { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: #55554f; flex: 0 0 16px; }
  html.tp-desk2 .d2-ico svg { width: 16px; height: 16px; }
  html.tp-desk2 .d2-item.is-active .d2-ico { color: var(--d2-ink); }
  html.tp-desk2 .d2-holly-tile { width: 16px; height: 16px; border-radius: 4.5px; background: var(--d2-y); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; }
  html.tp-desk2 .d2-holly-tile svg { width: 11px; height: 11px; }
  html.tp-desk2 .d2-lbl { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2-badge {
    min-width: 16px; height: 16px; padding: 0 2px; border-radius: 0; background: none; color: #8a8a82;
    font-size: var(--d2-t-12); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: flex-end;
  }
  html.tp-desk2 .d2-badge.is-hot { color: var(--d2-ink); font-weight: 700; }
  html.tp-desk2 .d2-badge.is-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--d2-y); color: transparent; overflow: hidden; }
  html.tp-desk2 .d2-badge[hidden] { display: none; }
  html.tp-desk2 .d2-group { margin-top: 12px; }
  html.tp-desk2 .d2-primary { margin-top: 0; }
  html.tp-desk2 .d2-glabel {
    width: 100%; height: 22px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: var(--d2-radius); background: none; cursor: pointer;
    font: 600 var(--d2-t-11)/1 var(--d2-font); letter-spacing: 0; text-transform: none; color: #8d8d85;
  }
  /* The fold chevron shows on hover (macOS "Show / Hide"), or while folded. */
  html.tp-desk2 .d2-glabel .d2-chev { opacity: 0; transition: opacity .12s, transform .15s; }
  html.tp-desk2 .d2-glabel:hover .d2-chev,
  html.tp-desk2 .d2-glabel:focus-visible .d2-chev,
  html.tp-desk2 .d2-group.is-folded .d2-chev { opacity: 1; }
  html.tp-desk2 .d2-glabel > span:first-child { flex: 1 1 auto; text-align: left; }
  html.tp-desk2 .d2-chev { display: inline-flex; color: #8d8d85; transition: transform .15s; }
  html.tp-desk2 .d2-group.is-folded .d2-chev { transform: rotate(-90deg); }
  html.tp-desk2 .d2-chev svg { width: 12px; height: 12px; }
  html.tp-desk2 .d2-group.is-folded .d2-gitems { display: none; }
  html.tp-desk2 .d2-gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--d2-y); }
  html.tp-desk2 .d2-gdot[hidden] { display: none; }
  html.tp-desk2 .d2-you { flex: 0 0 auto; border-top: 1px solid var(--d2-line); padding: 8px 10px 10px; display: flex; align-items: center; gap: 4px; }
  /* One account row: avatar, name, role. Opens the account menu (Profile, Settings, View as). */
  html.tp-desk2 .d2-acct {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--d2-radius);
    background: none; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink);
  }
  html.tp-desk2 .d2-acct:hover,
  html.tp-desk2 .d2-acct[aria-expanded="true"] { background: rgba(0, 0, 0, .04); }
  html.tp-desk2 .d2-acct.is-active { background: var(--d2-pill); }
  html.tp-desk2 .d2-acct .d2-avatar.is-acct { width: 28px; height: 28px; flex: 0 0 28px; cursor: inherit; background: #FFF1B0; }
  html.tp-desk2 .d2-acct-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  html.tp-desk2 .d2-acct-main b { font-size: var(--d2-t-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2-acct-main small { font-size: var(--d2-t-11); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2-acct-gear.is-active { background: var(--d2-pill); color: var(--d2-ink); }

  /* ---- top bar -------------------------------------------------------------- */
  html.tp-desk2 #d2-topbar {
    position: sticky; top: 0; z-index: 30; height: var(--d2-top); flex: 0 0 var(--d2-top);
    display: flex; align-items: center; gap: 10px; padding: 0 16px 0 28px;
    background: rgba(251, 251, 248, .94); border-bottom: 1px solid var(--d2-line); font-family: var(--d2-font);
  }
  html.tp-desk2 .d2-title { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d2-title-text { font-size: var(--d2-t-15); font-weight: 600; letter-spacing: -.01em; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--d2-ink); }
  html.tp-desk2 .d2-sub { font-size: var(--d2-t-11); color: var(--d2-mute); line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2-iconbtn {
    width: var(--d2-btn-h); height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; background: none; color: #4a4a45;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
  }
  html.tp-desk2 .d2-iconbtn:hover { background: rgba(0, 0, 0, .05); }
  html.tp-desk2 .d2-side-open { display: none; }
  html.tp-desk2.d2-side-collapsed .d2-side-open { display: inline-flex; }
  html.tp-desk2 .d2-search {
    width: 220px; height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; background: #EBEAE4; color: #8a8a82;
    display: flex; align-items: center; gap: 6px; padding: 0 6px 0 9px; font: 400 var(--d2-t-13) var(--d2-font); cursor: pointer; flex: 0 1 220px;
  }
  html.tp-desk2 .d2-search-lbl { flex: 1 1 auto; text-align: left; }
  html.tp-desk2 kbd {
    font: 500 var(--d2-t-11)/15px var(--d2-font); color: #6b6b64; background: #fff; border: 1px solid #d9d8d0;
    border-radius: 4px; padding: 0 4px; white-space: nowrap;
  }
  html.tp-desk2 .d2-clock {
    height: var(--d2-btn-h); border-radius: 14px; background: #EBEAE4; display: flex; align-items: center; gap: 7px;
    padding: 0 3px 0 12px; font-size: var(--d2-t-12); color: var(--d2-ink); white-space: nowrap; flex: 0 0 auto;
  }
  html.tp-desk2 .d2-clock.is-viewing .d2-cbtn { opacity: .42; }
  html.tp-desk2 .d2-dot { width: 8px; height: 8px; border-radius: 50%; background: #b9b9b1; flex: 0 0 8px; }
  html.tp-desk2 .d2-dot.is-working { background: var(--d2-green); }
  html.tp-desk2 .d2-dot.is-break { background: var(--d2-amber); }
  html.tp-desk2 .d2-dot.is-late { background: var(--d2-red); }
  html.tp-desk2 .d2-cstat { font-weight: 600; }
  html.tp-desk2 .d2-ctime { color: var(--d2-mute); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d2-cnote { color: var(--d2-mute); padding-right: 10px; }
  html.tp-desk2 .d2-cbtn {
    height: 22px; border-radius: 11px; border: 0; box-shadow: var(--d2-edge); background: #fff; color: var(--d2-ink);
    display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; font: 500 var(--d2-t-12) var(--d2-font); cursor: pointer;
  }
  html.tp-desk2 .d2-cbtn.is-primary { background: var(--d2-y); box-shadow: var(--d2-edge-y); color: #000; font-weight: 600; }
  html.tp-desk2 .d2-cbtn:disabled { cursor: not-allowed; }
  html.tp-desk2 .d2-teamnow {
    height: var(--d2-btn-h); border: 0; background: none; display: flex; align-items: center; gap: 6px; padding: 0 9px 0 0;
    font: 400 var(--d2-t-12) var(--d2-font); color: #4a4a45; cursor: pointer; font-variant-numeric: tabular-nums;
  }
  html.tp-desk2 .d2-teamnow b { font-weight: 700; }
  html.tp-desk2 .d2-sep { color: var(--d2-mute); }
  html.tp-desk2 .d2-viewas {
    height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; color: var(--d2-ink);
    display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; font: 500 var(--d2-t-13) var(--d2-font); cursor: pointer; flex: 0 0 auto;
  }
  html.tp-desk2 .d2-viewas.is-on { background: #FFE38A; box-shadow: 0 0 0 .5px #C9A93A, 0 1px 1.5px rgba(0, 0, 0, .08); }
  html.tp-desk2 .d2-bell {
    position: relative; width: 30px; height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; background: none; color: #4a4a45;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
  }
  html.tp-desk2 .d2-bell:hover { background: rgba(0, 0, 0, .05); }
  html.tp-desk2 .d2-bell-badge {
    position: absolute; top: -3px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 8px;
    background: var(--d2-y); color: #000; border: 1.5px solid #fbfbf8; font: 700 var(--d2-t-11)/14px var(--d2-font); box-sizing: content-box;
    display: inline-flex; align-items: center; justify-content: center;
  }
  html.tp-desk2 .d2-bell-badge[hidden] { display: none; }
  html.tp-desk2 .d2-avatar {
    width: var(--d2-btn-h); height: var(--d2-btn-h); border-radius: 50%; border: 0; padding: 0; overflow: hidden; cursor: pointer; flex: 0 0 auto;
    background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center;
  }
  html.tp-desk2 .d2-avatar img,
  html.tp-desk2 .d2-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d2-initials { font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 #d2-topbar button:focus-visible,
  html.tp-desk2 #d2-sidebar button:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 2px; }

  /* ---- View-as banner -------------------------------------------------------- */
  html.tp-desk2 #d2-viewas-banner {
    height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 28px;
    background: #FFE38A; border-bottom: 1px solid #E9C94A; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink);
    position: sticky; top: var(--d2-top); z-index: 29;
  }
  html.tp-desk2 #d2-viewas-banner[hidden] { display: none; }
  html.tp-desk2 #d2-viewas-banner > span { flex: 1 1 auto; }
  html.tp-desk2 .d2-btn {
    height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; color: var(--d2-ink);
    display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; font: 500 var(--d2-t-13) var(--d2-font); cursor: pointer;
  }

  /* Home's greeting: the one large title, in the content (Polish B1). */
  html.tp-desk2 #view-home > #d2-large-title.d2-large {
    display: block !important; max-width: 1200px; margin: 0 0 14px; font: 700 var(--d2-t-26)/1.2 var(--d2-font);
    letter-spacing: -.02em; color: var(--d2-ink);
  }
}

/* ---- layer: popovers, palette, inspector, sheets, toasts (any width) ---------- */
html.tp-desk2 #d2-layer { font-family: var(--d2-font); color: var(--d2-ink); }
html.tp-desk2 .d2-pop {
  position: fixed; z-index: 200; background: #fff; border: 1px solid var(--d2-line); border-radius: 14px;
  box-shadow: var(--d2-shadow); padding: 12px 0; max-height: calc(100dvh - 90px); overflow-y: auto;
}
html.tp-desk2 .d2-pop-head { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; }
html.tp-desk2 .d2-pop-head h3 { font-size: var(--d2-t-17); font-weight: 700; margin: 0; flex: 1 1 auto; }
html.tp-desk2 .d2-muted,
html.tp-desk2 .d2-note { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 2px 0 0; }
html.tp-desk2 .d2-note { padding: 10px 16px 2px; border-top: 1px solid var(--d2-line2); margin-top: 6px; }
html.tp-desk2 .d2-link { border: 0; background: none; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; padding: 4px; }
html.tp-desk2 .d2-seg { display: inline-flex; margin: 0 16px 8px; padding: 2px; border-radius: calc(var(--d2-radius) + 1px); background: var(--d2-seg-track); }
html.tp-desk2 .d2-seg button { border: 0; background: none; height: var(--d2-btn-h-sm); padding: 0 12px; border-radius: calc(var(--d2-radius) - 1px); font: 500 var(--d2-t-13) var(--d2-font); color: #3b3b37; cursor: pointer; white-space: nowrap; }
html.tp-desk2 .d2-seg button.is-on { background: #fff; color: var(--d2-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
/* Pop-up button (Polish B1): a native <select> drawn as a Mac pop-up, in place of
   filter chips that wrap. The page's chips stay in the DOM, hidden (.d2-popped). */
html.tp-desk2 .d2-poprow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; min-width: 0; }
html.tp-desk2 .d2-poprow.is-inline,
html.tp-desk2 .d2n-bar .d2-poprow,
html.tp-desk2 .d3-bar .d2-poprow,
html.tp-desk2 .d2t-bar .d2-poprow { margin: 0; }
html.tp-desk2 .d2-popped[hidden] { display: none !important; }
html.tp-desk2 .d2-popup { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0; font: 400 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
html.tp-desk2 .d2-popup-lbl { white-space: nowrap; }
html.tp-desk2 .d2-popup select {
  -webkit-appearance: none; appearance: none; height: var(--d2-btn-h); min-width: 0; max-width: 260px; margin: 0; padding: 0 26px 0 10px;
  border: 0; border-radius: var(--d2-radius); box-shadow: var(--d2-edge); color: var(--d2-ink); cursor: pointer; text-overflow: ellipsis;
  font: 500 var(--d2-t-13) var(--d2-font);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M1.5 4.5 4.5 1.5 7.5 4.5M1.5 7.5 4.5 10.5 7.5 7.5' fill='none' stroke='%2355554f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 8px 11px;
}
html.tp-desk2 .d2-popup select:hover { background-color: #F7F7F3; }
html.tp-desk2 .d2-popup select:focus { outline: none; }
html.tp-desk2 .d2-popup select:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 1px; }
html.tp-desk2 .d2-kicker { font: 700 var(--d2-t-11)/1 var(--d2-font); letter-spacing: .09em; text-transform: uppercase; color: var(--d2-mute); padding: 10px 16px 6px; }
html.tp-desk2 .d2-empty { color: var(--d2-mute); font-size: var(--d2-t-13); padding: 12px 16px; margin: 0; }
html.tp-desk2 .d2-nrow {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 9px 16px; border: 0; border-top: 1px solid var(--d2-line2);
  background: #fff; text-align: left; cursor: pointer; font-family: var(--d2-font);
}
html.tp-desk2 .d2-nrow:hover { background: var(--d2-bg); }
html.tp-desk2 .d2-ntile { width: 34px; height: 34px; border-radius: 10px; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
html.tp-desk2 .d2-nrow.is-unread .d2-ntile { background: var(--d2-pill); }
html.tp-desk2 .d2-nbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.tp-desk2 .d2-ntitle { font-size: var(--d2-t-13); font-weight: 600; color: var(--d2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d2-nmeta { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d2-ntime { white-space: nowrap; font-size: var(--d2-t-12); color: var(--d2-mute); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html.tp-desk2 .d2-udot { width: 8px; height: 8px; border-radius: 50%; background: var(--d2-y); }
html.tp-desk2 .d2-pop-foot {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 10px 16px 2px; border: 0; border-top: 1px solid var(--d2-line2);
  background: none; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer;
}
html.tp-desk2 .d2-pop-foot kbd { margin-left: auto; }
html.tp-desk2 .d2-mhead { display: flex; gap: 12px; align-items: center; padding: 4px 16px 12px; border-bottom: 1px solid var(--d2-line2); margin-bottom: 6px; }
html.tp-desk2 .d2-mhead b { display: block; font-size: var(--d2-t-15); }
html.tp-desk2 .d2-mhead small { display: block; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d2-avatar-lg { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
html.tp-desk2 .d2-mrow {
  width: 100%; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 0; background: none;
  font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; text-align: left;
}
html.tp-desk2 .d2-mrow span { flex: 1 1 auto; }
html.tp-desk2 .d2-mrow:hover { background: var(--d2-bg); }
html.tp-desk2 .d2-mdiv { height: 1px; background: var(--d2-line2); margin: 6px 0; }
html.tp-desk2 .d2-find { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--d2-bg); color: var(--d2-mute); }
html.tp-desk2 .d2-find input { border: 0; background: none; outline: none; font: 400 var(--d2-t-13) var(--d2-font); flex: 1 1 auto; min-width: 0; }
html.tp-desk2 .d2-plist { max-height: 320px; overflow-y: auto; }
html.tp-desk2 .d2-prow { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 16px; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--d2-font); }
html.tp-desk2 .d2-prow:hover { background: var(--d2-pill); }
html.tp-desk2 .d2-prow b { display: block; font-size: var(--d2-t-13); font-weight: 600; }
html.tp-desk2 .d2-prow small { display: block; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d2-pav { width: 28px; height: 28px; border-radius: 50%; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-12) var(--d2-font); flex: 0 0 28px; }

/* ⌘K palette */
html.tp-desk2 .d2-palette-wrap { position: fixed; inset: 0; z-index: 210; background: rgba(17, 17, 17, .26); }
html.tp-desk2 .d2-palette {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%); width: min(640px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--d2-line); border-radius: 14px; box-shadow: var(--d2-shadow); overflow: hidden;
}
html.tp-desk2 .d2-pal-input { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--d2-line2); }
html.tp-desk2 .d2-find input:focus { border: 0; outline: none; box-shadow: none; }
html.tp-desk2 .d2-pal-input input,
html.tp-desk2 .d2-pal-input input:focus { flex: 1 1 auto; border: 0; outline: none; box-shadow: none; padding: 0; font: 400 var(--d2-t-17) var(--d2-font); background: none; min-width: 0; }
html.tp-desk2 .d2-pal-results { max-height: min(420px, calc(100dvh - 260px)); overflow-y: auto; padding-bottom: 6px; }
html.tp-desk2 .d2-pal-row { width: 100%; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 0; background: none; cursor: pointer; font: 400 var(--d2-t-15) var(--d2-font); text-align: left; color: var(--d2-ink); }
html.tp-desk2 .d2-pal-row.is-sel,
html.tp-desk2 .d2-pal-row:hover { background: var(--d2-pill); }
html.tp-desk2 .d2-pal-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--d2-bg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; }
html.tp-desk2 .d2-pal-ico.is-holly { background: var(--d2-y); }
html.tp-desk2 .d2-pal-lbl { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d2-pal-meta { color: var(--d2-mute); font-size: var(--d2-t-12); }
html.tp-desk2 .d2-pal-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d2-pal-foot kbd { margin-right: 3px; }
html.tp-desk2 .d2-pal-note { margin-left: auto; }

/* Inspector: 360px on the right, beside the page (Mail-style). */
html.tp-desk2 .d2-inspector {
  position: fixed; top: var(--d2-top); right: 0; bottom: 0; width: 360px; z-index: 35; background: #fff;
  border-left: 1px solid var(--d2-line); display: flex; flex-direction: column;
}
html.tp-desk2 .d2-insp-head { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--d2-line2); }
html.tp-desk2 .d2-insp-head h3 { flex: 1 1 auto; margin: 0; font-size: var(--d2-t-17); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d2-insp-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; }

/* Sheets and confirms sit above everything, including the top bar. */
html.tp-desk2 .d2-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(17, 17, 17, .32); display: flex; align-items: center; justify-content: center; padding: 16px; }
html.tp-desk2 .d2-modal { background: #fff; border-radius: 16px; box-shadow: var(--d2-shadow); max-height: calc(100dvh - 64px); overflow-y: auto; outline: none; }
html.tp-desk2 .d2-sheet .d2-modal { width: min(560px, 100%); }
html.tp-desk2 .d2-sheet-head { display: flex; align-items: center; padding: 14px 12px 10px 20px; border-bottom: 1px solid var(--d2-line2); }
html.tp-desk2 .d2-sheet-head h3 { flex: 1 1 auto; margin: 0; font-size: var(--d2-t-17); font-weight: 700; }
html.tp-desk2 .d2-sheet-body { padding: 16px 20px 20px; }
html.tp-desk2 .d2-confirm .d2-modal { width: min(380px, 100%); padding: 22px 20px 16px; text-align: center; }
html.tp-desk2 .d2-confirm-title { font-size: var(--d2-t-17); font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
html.tp-desk2 .d2-confirm-body { font-size: var(--d2-t-13); color: var(--d2-mute); margin: 0 0 16px; }
html.tp-desk2 .d2-confirm-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
html.tp-desk2 .d2-bigbtn { height: var(--d2-btn-h-lg); border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
html.tp-desk2 .d2-bigbtn.is-primary { background: var(--d2-y); box-shadow: var(--d2-edge-y); color: #000; font-weight: 600; }
html.tp-desk2 .d2-bigbtn.is-danger { background: #fff; box-shadow: 0 0 0 .5px #E7A9A3, 0 1px 1.5px rgba(0, 0, 0, .06); color: var(--d2-red); font-weight: 600; }
html.tp-desk2 .d2-bigbtn.is-plain { box-shadow: none; }
html.tp-desk2 .d2-keys-group { margin-bottom: 10px; }
html.tp-desk2 .d2-keys .d2-kicker { padding-left: 0; }
html.tp-desk2 .d2-keys-row { display: flex; justify-content: space-between; align-items: center; height: 32px; border-bottom: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }

/* Toasts: one black pill, bottom centre, optional Undo. The portal's shared
   toast() element adopts the same look under the new layout. */
html.tp-desk2 .d2-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; }
html.tp-desk2 .d2-toast { display: flex; align-items: center; gap: 14px; background: var(--d2-ink); color: #fff; border-radius: 999px; padding: 10px 18px; font: 500 var(--d2-t-13) var(--d2-font); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
html.tp-desk2 .d2-toast.is-error { background: var(--d2-red); }
html.tp-desk2 .d2-toast button { border: 0; background: none; color: var(--d2-y); font: 700 var(--d2-t-13) var(--d2-font); cursor: pointer; padding: 0; }
html.tp-desk2 #toast.toast { background: var(--d2-ink); color: #fff; border-radius: 999px; border-left: 0; font-family: var(--d2-font); }
html.tp-desk2 #toast.toast.error { background: var(--d2-red); }

/* ---- Feedback P0 (notify, html.tp-notify): the toolbar carries confirmations
   on the Mac and desktop. Subtitle slot: a transient crossfades over the page's
   own subtitle for 2.5s, then fades back (150ms). Undo: a toolbar button for
   the call's own time (8s by default). Sizes use the type tokens. ------------ */
html.tp-desk2.tp-notify .d2-sub.nt-sub { position: relative; }
html.tp-desk2.tp-notify .d2-sub.nt-sub .nt-sub-base,
html.tp-desk2.tp-notify .d2-sub.nt-sub .nt-sub-tr { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s, transform .15s; }
html.tp-desk2.tp-notify .d2-sub.nt-sub .nt-sub-tr { position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; gap: 4px; color: var(--d2-ink); opacity: 0; transform: translateY(4px); }
html.tp-desk2.tp-notify .d2-sub.nt-sub.is-tr .nt-sub-base { opacity: 0; transform: translateY(-4px); }
html.tp-desk2.tp-notify .d2-sub.nt-sub.is-tr .nt-sub-tr { opacity: 1; transform: none; }
html.tp-desk2.tp-notify .nt-sub-tr .nt-glyph { display: inline-flex; flex: none; }
html.tp-desk2.tp-notify .nt-sub-tr svg { width: 11px; height: 11px; }
html.tp-desk2.tp-notify .nt-sub-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2.tp-notify .d2-nt-undo {
  flex: 0 0 auto; height: var(--d2-btn-h); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border: 0; border-radius: var(--d2-radius); background: #fff; box-shadow: var(--d2-edge); color: var(--d2-ink);
  font: 500 var(--d2-t-13) var(--d2-font); cursor: pointer;
}
html.tp-desk2.tp-notify .d2-nt-undo svg { width: 15px; height: 15px; }
html.tp-desk2.tp-notify .d2-nt-undo:hover { background: #fafaf7; }
html.tp-desk2.tp-notify .d2-nt-undo:focus-visible { outline: 2px solid var(--d2-y); outline-offset: 2px; }
html.tp-desk2.tp-notify .d2-nt-undo.is-new { animation: nt-pop .32s cubic-bezier(.34, 1.36, .64, 1), nt-pulse 1.2s ease-out; }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-undo { font-size: var(--d2-t-15); padding: 0 14px; border-radius: 12px; }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-undo svg { width: 20px; height: 20px; }
/* Phase 4: iPad keeps Undo and Redo in the toolbar while the stack isn't
   empty; one that can't run now is aria-disabled (still focusable). */
html.tp-desk2.tp-notify .d2-nt-undo[aria-disabled="true"] { color: var(--d2-mute); box-shadow: none; background: transparent; cursor: default; }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-redo { margin-left: -4px; }
html.tp-desk2.tp-notify .nt-rowerr { font: 500 var(--d2-t-12)/16px var(--d2-font); }
html.tp-desk2.tp-notify .nt-rowerr-b { min-height: 24px; padding: 0 10px; border-radius: 12px; }
html.tp-ipad.tp-desk2.tp-notify .nt-rowerr { font-size: var(--d2-t-13); }
html.tp-ipad.tp-desk2.tp-notify .nt-rowerr-b { min-height: 44px; padding: 0 14px; border-radius: 22px; }
/* Phase 3: Details (owners) and the decision sheet in the desktop type scale; iPad keeps the alert's iOS sizes. */
html.tp-desk2.tp-notify .nt-det-b { font: 600 var(--d2-t-12)/16px var(--d2-font); }
html.tp-desk2.tp-notify .nt-det-c { font-size: var(--d2-t-11); }
html.tp-ipad.tp-desk2.tp-notify .nt-det-b { min-height: 44px; font-size: var(--d2-t-13); }
html.tp-desk2.tp-notify .nt-sheet { border-radius: var(--d2-radius); font-family: var(--d2-font); }
html.tp-desk2.tp-notify .nt-sheet .nt-alert-title { font: 700 var(--d2-t-13)/18px var(--d2-font); }
html.tp-desk2.tp-notify .nt-sheet .nt-alert-msg { font: 400 var(--d2-t-12)/17px var(--d2-font); }
html.tp-desk2.tp-notify .nt-sheet .nt-alert-b { min-height: var(--d2-btn-h); font: 600 var(--d2-t-13)/18px var(--d2-font); }
html.tp-ipad.tp-desk2.tp-notify .nt-alert-title { font-size: var(--d2-t-17); }
html.tp-ipad.tp-desk2.tp-notify .nt-alert-msg,
html.tp-ipad.tp-desk2.tp-notify .nt-alert-b { font-size: var(--d2-t-15); }
html.tp-desk2.tp-notify .nt-err-a { height: 24px; margin: -3px 0; padding: 0 10px; border-radius: 12px; }
html.tp-ipad.tp-desk2.tp-notify .nt-err-a { height: 44px; margin: -12px 0; padding: 0 16px; border-radius: 22px; }
/* The notice and banners in the desktop type scale (iPad keeps 15). */
html.tp-desk2.tp-notify .nt-err { width: min(480px, calc(100vw - 32px)); font: 500 var(--d2-t-13)/18px var(--d2-font); padding: 10px 6px 10px 12px; border-radius: 12px; }
html.tp-desk2.tp-notify .nt-err-x { width: 24px; height: 24px; margin: -3px 0; }
html.tp-desk2.tp-notify .nt-p-mac .nt-banner-title,
html.tp-desk2.tp-notify .nt-p-mac .nt-banner-body { font-size: var(--d2-t-13); line-height: 17px; }
html.tp-desk2.tp-notify .nt-p-mac .nt-banner-meta { font-size: var(--d2-t-11); line-height: 17px; }
html.tp-desk2.tp-notify .nt-p-mac .nt-av { font-size: var(--d2-t-11); }
html.tp-desk2.tp-notify .nt-p-mac .nt-banner-head,
html.tp-desk2.tp-notify .nt-p-mac .nt-banner-n { font-size: var(--d2-t-11); line-height: 15px; }
html.tp-ipad.tp-desk2.tp-notify .nt-p-ipad .nt-banner-head { font-size: var(--d2-t-13); }
html.tp-ipad.tp-desk2.tp-notify .nt-p-ipad .nt-banner-x { opacity: 0; }
html.tp-ipad.tp-desk2.tp-notify .nt-p-ipad .nt-banner-x:focus-visible { opacity: 1; }
html.tp-desk2.tp-notify .nt-hud { font-size: var(--d2-t-15); }
html.tp-ipad.tp-desk2.tp-notify .nt-err { width: min(520px, calc(100vw - 32px)); font-size: var(--d2-t-15); line-height: 20px; padding: 12px 8px 12px 14px; border-radius: 16px; }
html.tp-ipad.tp-desk2.tp-notify .nt-err-x { width: 44px; height: 44px; margin: -12px -4px -12px 0; }
/* Feedback P2: field errors on the new desktop and iPad, on the type scale.
   The focus ring stays the desk2 ink outline, outside the red ring. */
html.tp-desk2.tp-notify .nt-ferr { font: 500 var(--d2-t-13)/18px var(--d2-font) !important; color: var(--d2-red) !important; }
html.tp-desk2.tp-notify .nt-invalid,
html.tp-desk2.tp-notify .nt-invalid:hover,
html.tp-desk2.tp-notify .nt-invalid:focus { box-shadow: 0 0 0 2px var(--d2-red) !important; border-color: var(--d2-red) !important; }
html.tp-desk2.tp-notify .nt-invalid:focus,
html.tp-desk2.tp-notify .nt-invalid:focus-visible { outline: 2px solid var(--d2-ink) !important; outline-offset: 3px !important; }
html.tp-desk2.tp-notify .nt-flabel, html.tp-desk2.tp-notify .nt-flabel * { color: var(--d2-red) !important; }
html.tp-desk2.tp-notify .nt-invalid:not(input):not(select):not(textarea) { border-radius: var(--d2-radius); }
/* Side-by-side fields (Leave's first / last day) stay top-aligned when one grows a footer. */
html.tp-desk2.tp-notify .d2l-dates { align-items: start; }
@media (prefers-reduced-motion: reduce) {
  html.tp-desk2.tp-notify .d2-sub.nt-sub .nt-sub-base,
  html.tp-desk2.tp-notify .d2-sub.nt-sub .nt-sub-tr { transform: none; }
  html.tp-desk2.tp-notify .d2-nt-undo.is-new { animation: none; }
}

/* Feedback P6: guidance on the type scale. The Mac and the desktop get the
   13/12 popover and a 12 tooltip; the iPad keeps 15/13 and 44 targets. The
   View-as capsule takes the toolbar's View as place while viewing. */
html.tp-desk2.tp-notify .nt-pop { max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px 10px; border-radius: 10px; }
html.tp-desk2.tp-notify .nt-pop-t { font: 600 var(--d2-t-13)/17px var(--d2-font); }
html.tp-desk2.tp-notify .nt-pop-b { font: 400 var(--d2-t-12)/16px var(--d2-font); }
html.tp-ipad.tp-desk2.tp-notify .nt-pop { padding: 11px 14px 12px; border-radius: 14px; }
html.tp-ipad.tp-desk2.tp-notify .nt-pop-t { font-size: var(--d2-t-15); line-height: 20px; }
html.tp-ipad.tp-desk2.tp-notify .nt-pop-b { font-size: var(--d2-t-13); line-height: 18px; }
html.tp-desk2.tp-notify .nt-tip { font: 400 var(--d2-t-12)/16px var(--d2-font); }
html.tp-desk2.tp-notify .nt-info { width: 24px; height: 24px; margin: -4px -4px -4px 0; }
html.tp-desk2.tp-notify .nt-info svg { width: 16px; height: 16px; }
html.tp-ipad.tp-desk2.tp-notify .nt-info { width: 44px; height: 44px; margin: -10px -10px -10px 0; }
html.tp-ipad.tp-desk2.tp-notify .nt-info svg { width: 20px; height: 20px; }
html.tp-desk2.tp-notify .nt-here { gap: 6px; }
html.tp-desk2.tp-notify .nt-here-g { width: auto; height: auto; background: none; border-radius: 0; color: #4a4a45; }
html.tp-desk2.tp-notify .nt-here-g svg { width: 18px; height: 18px; }
html.tp-desk2.tp-notify .nt-here-t { font: 500 var(--d2-t-13) var(--d2-font); color: #4a4a45; white-space: nowrap; }
html.tp-desk2.tp-notify .d2h-shift .nt-here-t { white-space: normal; }
html.tp-ipad.tp-desk2.tp-notify .nt-here-t { font-size: var(--d2-t-15); }
html.tp-desk2.tp-notify .nt-vas { height: var(--d2-btn-h); flex: 0 1 auto; min-width: 0; border-radius: calc(var(--d2-btn-h) / 2); font: 500 var(--d2-t-13) var(--d2-font); }
html.tp-desk2.tp-notify .nt-vas-x { height: calc(var(--d2-btn-h) - 6px); border-radius: calc((var(--d2-btn-h) - 6px) / 2); font: 600 var(--d2-t-12) var(--d2-font); }
html.tp-ipad.tp-desk2.tp-notify .nt-vas { height: 44px; border-radius: 22px; padding: 0 4px 0 14px; font-size: var(--d2-t-15); }
html.tp-ipad.tp-desk2.tp-notify .nt-vas-x { height: 36px; border-radius: 18px; padding: 0 16px; font-size: var(--d2-t-15); }
html.tp-desk2.tp-notify #d2-viewas-banner { display: none !important; }

/* Feedback P5: progress (SYSTEM.md §3). The step card on the type scale, the
   toolbar activity ring (iPad, desk2, Mac) with its popover of running jobs,
   and the running job in the Mac subtitle (slot: View-as > job > transient). */
html.tp-desk2.tp-notify .nt-job-card { border-color: var(--d2-line); border-radius: 10px; font: 400 var(--d2-t-13)/18px var(--d2-font); box-shadow: var(--d2-edge); border: 0; }
html.tp-desk2.tp-notify .nt-job-where,
html.tp-desk2.tp-notify .nt-job-note { font-size: var(--d2-t-12); }
html.tp-desk2.tp-notify .nt-job-steps { font-size: var(--d2-t-12); }
html.tp-desk2.tp-notify .nt-job-b { min-height: var(--d2-btn-h-sm); border-radius: var(--d2-radius); font: 600 var(--d2-t-12)/16px var(--d2-font); }
html.tp-ipad.tp-desk2.tp-notify .nt-job-card { font-size: var(--d2-t-15); line-height: 20px; border-radius: 14px; }
html.tp-ipad.tp-desk2.tp-notify .nt-job-note,
html.tp-ipad.tp-desk2.tp-notify .nt-job-steps,
html.tp-ipad.tp-desk2.tp-notify .nt-job-where { font-size: var(--d2-t-13); }
html.tp-ipad.tp-desk2.tp-notify .nt-job-b { min-height: 44px; padding: 0 16px; border-radius: 22px; font-size: var(--d2-t-15); }
html.tp-desk2.tp-notify .d2-nt-jobs {
  position: relative; flex: 0 0 auto; width: var(--d2-btn-h); height: var(--d2-btn-h); display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--d2-radius); background: transparent; color: var(--d2-ink); cursor: pointer; padding: 0;
}
html.tp-desk2.tp-notify .d2-nt-jobs:hover { background: var(--d2-soft); }
html.tp-desk2.tp-notify .d2-nt-jobs:focus-visible { outline: 2px solid var(--d2-y); outline-offset: 2px; }
html.tp-desk2.tp-notify .d2-nt-jobs[aria-expanded="true"] { background: var(--d2-pill); }
html.tp-desk2.tp-notify .d2-nt-jobs .is-spin { animation: nt-spin .9s linear infinite; }
html.tp-desk2.tp-notify .d2-nt-jobs .nt-ring-arc { transition: stroke-dashoffset .3s ease; }
html.tp-desk2.tp-notify .d2-nt-jobs.is-bad { color: var(--d2-red); }
html.tp-desk2.tp-notify .d2-nt-jobs-n {
  position: absolute; top: 0; right: -2px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px;
  background: var(--d2-ink); color: #fff; font: 700 var(--d2-t-11)/14px var(--d2-font); text-align: center;
}
html.tp-ipad.tp-desk2.tp-notify .d2-nt-jobs { width: 44px; height: 44px; border-radius: 12px; }
html.tp-desk2.tp-notify .d2-nt-pop {
  position: fixed; z-index: 10001; width: 320px; box-sizing: border-box; padding: 6px;
  border-radius: 12px; background: rgba(252, 252, 249, .97); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .16); color: var(--d2-ink); font: 400 var(--d2-t-13)/18px var(--d2-font);
  animation: nt-popin .2s cubic-bezier(.32, .72, 0, 1);
}
html.tp-desk2.tp-notify .d2-nt-pop:focus { outline: none; }
html.tp-desk2.tp-notify .d2-nt-pop::before {
  content: ""; position: absolute; top: -6px; left: calc(var(--nt-pop-arrow, 160px) - 6px); width: 12px; height: 12px; transform: rotate(45deg);
  background: rgba(252, 252, 249, .97); box-shadow: -.5px -.5px 0 rgba(0, 0, 0, .12);
}
html.tp-desk2.tp-notify .d2-nt-pop-hd { padding: 6px 8px 4px; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2.tp-notify .d2-nt-pop-hd b { font-weight: 600; }
html.tp-desk2.tp-notify .d2-nt-jlist { list-style: none; margin: 0; padding: 0; max-height: min(380px, calc(100vh - 120px)); overflow: auto; }
html.tp-desk2.tp-notify .d2-nt-jrow { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 8px; }
html.tp-desk2.tp-notify .d2-nt-jrow + .d2-nt-jrow { border-top: 1px solid var(--d2-line); border-radius: 0; }
html.tp-desk2.tp-notify .d2-nt-jrow .nt-ring { margin-top: 1px; }
html.tp-desk2.tp-notify .d2-nt-jmain { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
html.tp-desk2.tp-notify .d2-nt-jmain b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2.tp-notify .d2-nt-jsub { font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2.tp-notify .d2-nt-jrow.is-stalled .d2-nt-jsub,
html.tp-desk2.tp-notify .d2-nt-jrow.is-failed .d2-nt-jsub,
html.tp-desk2.tp-notify .d2-nt-jrow.is-partial .d2-nt-jsub { color: var(--d2-ink); }
html.tp-desk2.tp-notify .d2-nt-jbar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--d2-soft); overflow: hidden; }
html.tp-desk2.tp-notify .d2-nt-jbar i { display: block; height: 100%; background: var(--d2-y); border-radius: 2px; transition: width .3s ease; }
html.tp-desk2.tp-notify .d2-nt-jbar.is-ind i { animation: nt-ind 1.4s ease-in-out infinite; }
html.tp-desk2.tp-notify .d2-nt-jacts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
html.tp-desk2.tp-notify .d2-nt-jb { min-height: var(--d2-btn-h-sm); padding: 0 8px; border: 0; border-radius: var(--d2-radius); background: transparent; color: var(--d2-ink); font: 500 var(--d2-t-12)/16px var(--d2-font); cursor: pointer; }
html.tp-desk2.tp-notify .d2-nt-jb:hover { background: var(--d2-soft); }
html.tp-desk2.tp-notify .d2-nt-jb.is-pri { background: var(--d2-y); color: #000; font-weight: 600; }
html.tp-desk2.tp-notify .d2-nt-jb:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 1px; }
html.tp-desk2.tp-notify .d2-nt-jnone { margin: 0; padding: 8px; color: var(--d2-mute); }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-pop { width: 360px; border-radius: 16px; font-size: var(--d2-t-15); line-height: 20px; }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-jsub { font-size: var(--d2-t-13); }
html.tp-ipad.tp-desk2.tp-notify .d2-nt-jb { min-height: 44px; padding: 0 12px; font-size: var(--d2-t-15); }
html.tp-desk2.tp-notify .d2-sub.nt-sub-job .nt-sub-jobt { display: flex; align-items: center; gap: 5px; color: var(--d2-ink); }
html.tp-desk2.tp-notify .d2-sub.nt-sub-job .nt-ring-sub { width: 11px; height: 11px; vertical-align: 0; }
html.tp-desk2.tp-notify .d2-sub.nt-sub-job .nt-ring-sub svg { animation: nt-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  html.tp-desk2.tp-notify .d2-nt-pop { animation: none; }
  html.tp-desk2.tp-notify .d2-nt-jobs .is-spin,
  html.tp-desk2.tp-notify .d2-sub.nt-sub-job .nt-ring-sub svg { animation-duration: 2.4s; }
  html.tp-desk2.tp-notify .d2-nt-jbar.is-ind i { animation: none; width: 100% !important; opacity: .45; }
}
@media (prefers-reduced-transparency: reduce) {
  html.tp-desk2.tp-notify .d2-nt-pop, html.tp-desk2.tp-notify .d2-nt-pop::before { background: #fcfcf9; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  html.tp-desk2.tp-notify .d2-nt-pop { box-shadow: 0 0 0 1px #111, 0 10px 30px rgba(0, 0, 0, .16); }
}

html.tp-desk2 .d2-concealed { filter: blur(7px); user-select: none; }
html.tp-desk2 .d2-flash { box-shadow: 0 0 0 3px var(--d2-y) !important; transition: box-shadow .3s; }

/* ---- Settings panes (they also render for owners on today's desktop, so
   only the new-layout polish lives here; the markup works unstyled) ---------- */
html.tp-desk2 .d2set-modes { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
html.tp-desk2 .d2set-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: var(--d2-t-13); }
html.tp-desk2 .d2set-table th { text-align: left; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .09em; text-transform: uppercase; color: var(--d2-mute); padding: 8px 6px; border-bottom: 1px solid var(--d2-line); }
html.tp-desk2 .d2set-table td { padding: 8px 6px; border-bottom: 1px solid var(--d2-line2); vertical-align: middle; }
html.tp-desk2 .d2set-pill { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--d2-soft); font: 600 var(--d2-t-11) var(--d2-font); }
html.tp-desk2 .d2set-pill.is-on { background: #E4F5EA; color: #17753A; }
html.tp-desk2 .d2set-danger { color: var(--d2-red); }

/* ---- iPad layout (html.tp-ipad): split view, 44pt targets, never Clock in ---- */
html.tp-ipad #btn-clock-in { display: none !important; }
/* --d2-top folds in env(safe-area-inset-top) so the sticky top bar clears the
   iOS status bar / notch in the native app; every sub-header, the inspector,
   Holly's columns, the EOD rail and the 100dvh panes key off --d2-top, so they
   clear it too. env() is 0 on plain web and iPad Safari, so nothing changes
   there — the base is still 64pt. */
html.tp-ipad.tp-desk2 {
  --d2-row: 44px;
  --d2-top: calc(64px + env(safe-area-inset-top));
  --d2-btn-h: 44px;
  --d2-btn-h-sm: 44px;
  --d2-btn-h-lg: 44px;
  --d2-radius: 10px;
}
html.tp-ipad.tp-desk2 .d2-bigbtn { font-size: var(--d2-t-15); }
html.tp-ipad.tp-desk2 .d2-item { font-size: var(--d2-t-17); gap: 12px; }
html.tp-ipad.tp-desk2 .d2-ico { width: 22px; height: 22px; flex-basis: 22px; }
html.tp-ipad.tp-desk2 .d2-ico svg { width: 22px; height: 22px; }
html.tp-ipad.tp-desk2 .d2-glabel { height: 36px; }
html.tp-ipad.tp-desk2 .d2-glabel .d2-chev { opacity: 1; }
html.tp-ipad.tp-desk2 .d2-holly-tile { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; }
html.tp-ipad.tp-desk2 .d2-holly-tile svg { width: 14px; height: 14px; }
html.tp-ipad.tp-desk2 .d2-badge { font-size: var(--d2-t-15); }
html.tp-ipad.tp-desk2 .d2-acct { height: 52px; }
html.tp-ipad.tp-desk2 .d2-iconbtn,
html.tp-ipad.tp-desk2 .d2-bell { width: 44px; height: 44px; }
html.tp-ipad.tp-desk2 .d2-avatar { width: 36px; height: 36px; }
html.tp-ipad.tp-desk2 .d2-search { width: 44px; flex: 0 0 44px; height: 44px; padding: 0; justify-content: center; }
html.tp-ipad.tp-desk2 .d2-search-lbl,
html.tp-ipad.tp-desk2 .d2-search kbd { display: none; }
html.tp-ipad.tp-desk2 .d2-clock { height: 44px; border-radius: 22px; }
html.tp-ipad.tp-desk2 .d2-cbtn { height: 36px; border-radius: 18px; font-size: var(--d2-t-15); }
html.tp-ipad.tp-desk2 .d2-viewas,
html.tp-ipad.tp-desk2 .d2-teamnow { height: 44px; }
html.tp-ipad.tp-desk2 .d2-mrow,
html.tp-ipad.tp-desk2 .d2-pal-row { height: 44px; }
html.tp-ipad.tp-desk2 .d2-nrow { min-height: 52px; }
/* Safe-area: pad the top bar and the sidebar logo so their content clears the
   status bar (the bar/logo box already grew via --d2-top). Landscape side
   insets: the top bar's right controls and the fixed sidebar touch the screen
   edges, so pad those too. All env() values are 0 on plain web. */
html.tp-ipad.tp-desk2 #d2-topbar { padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 20px; }
html.tp-ipad.tp-desk2 #d2-sidebar { padding-left: env(safe-area-inset-left); }
html.tp-ipad.tp-desk2 .d2-logo { padding-top: env(safe-area-inset-top); }
html.tp-ipad.tp-desk2 .d2-title-text { font-size: var(--d2-t-17); }
html.tp-ipad.tp-desk2 .d2-inspector { width: 340px; }

/* Portrait: the sidebar hides behind the sidebar button and slides over a
   dimmed page. Landscape keeps it beside the content. */
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 #app-shell:not(.hidden),
  html.tp-ipad.tp-desk2 #app-shell.nav-collapsed:not(.hidden) { padding-left: 0; }
  html.tp-ipad.tp-desk2 #d2-sidebar { display: flex; transform: translateX(-100%); transition: transform .2s; box-shadow: none; }
  html.tp-ipad.tp-desk2.d2-side-open #d2-sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(17, 17, 17, .26); }
  html.tp-ipad.tp-desk2 .d2-side-open { display: inline-flex; }
  html.tp-ipad.tp-desk2 .d2-side-toggle { display: none; }
  html.tp-ipad.tp-desk2 .d2-clock:has(.d2-cnote) .d2-cstat { display: none; }
  html.tp-ipad.tp-desk2 .d2-teamnow .d2-sep,
  html.tp-ipad.tp-desk2 .d2-teamnow .d2-sep ~ span { display: none; }
}

/* Dialog buttons: the portal's global :focus ring is too heavy inside a small confirm. */
html.tp-desk2 .d2-bigbtn:focus { outline: none; box-shadow: none; }
html.tp-desk2 .d2-bigbtn:focus-visible,
html.tp-desk2 .d2-modal .d2-bigbtn[data-cancel]:focus { outline: 2px solid var(--d2-ink); outline-offset: 2px; }

/* ============================================================================
   Desktop D1: Home, Notifications, Chats, Holly + Nexus. Same scoping rule:
   every selector starts with html.tp-desk2 or html.tp-ipad. Layout lives
   inside min-width: 769px, where the new shell is shown.
   ============================================================================ */
@media (min-width: 769px) {
  /* ---- shared card kit --------------------------------------------------------- */
  html.tp-desk2 .d2h-card {
    background: var(--d2-card); border: 1px solid var(--d2-line); border-radius: 16px; padding: 16px 18px;
    font-family: var(--d2-font); color: var(--d2-ink); display: block; text-align: left; width: 100%; box-sizing: border-box;
  }
  html.tp-desk2 .d2h-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 32px; }
  html.tp-desk2 .d2h-head h3 { flex: 1 1 auto; margin: 0; font-size: var(--d2-t-17); font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
  html.tp-desk2 .d2h-sub { font-size: var(--d2-t-12); font-weight: 400; color: var(--d2-mute); }
  html.tp-desk2 .d2h-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--d2-soft); font: 700 var(--d2-t-11)/20px var(--d2-font); justify-content: center; }
  html.tp-desk2 .d2h-link {
    border: 0; background: none; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    min-height: var(--d2-btn-h); padding: 0 5px; border-radius: var(--d2-radius); white-space: nowrap;
  }
  html.tp-desk2 .d2h-link:hover { background: rgba(0, 0, 0, .05); }
  html.tp-desk2 .d2h-link kbd { margin-left: 4px; }
  html.tp-desk2 .d2h-btn {
    height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; color: var(--d2-ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; font: 500 var(--d2-t-13) var(--d2-font); white-space: nowrap; flex: 0 0 auto;
  }
  html.tp-desk2 .d2h-btn:hover { background: #F7F7F3; }
  html.tp-desk2 .d2h-btn:disabled { opacity: .45; cursor: default; }
  html.tp-desk2 .d2h-btn.is-primary { background: var(--d2-y); box-shadow: var(--d2-edge-y); color: #000; font-weight: 600; }
  html.tp-desk2 .d2h-btn.is-danger,
  html.tp-desk2 .d2n-iact.is-danger { color: var(--d2-red); }
  html.tp-desk2 .d2h-tile {
    width: 36px; height: 36px; border-radius: 10px; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; color: var(--d2-ink);
  }
  html.tp-desk2 .d2h-tile.is-big { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; background: var(--d2-pill); }
  html.tp-desk2 .d2h-tile.is-leave { background: #FFF4B9; }
  html.tp-desk2 .d2h-tile.is-client { background: #E8EEF9; }
  html.tp-desk2 .d2h-tile.is-social { background: #EFEAF8; }
  html.tp-desk2 .d2h-tile.is-pay,
  html.tp-desk2 .d2h-tile.is-ok { background: #E4F5EA; }
  html.tp-desk2 .d2h-tile.is-ann { background: var(--d2-pill); }
  html.tp-desk2 .d2h-dmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html.tp-desk2 .d2h-dmain > b { font-size: var(--d2-t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2h-meta { font-size: var(--d2-t-12); color: var(--d2-mute); line-height: 1.4; }
  html.tp-desk2 .d2h-kick { font: 700 var(--d2-t-11)/1.3 var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); }
  html.tp-desk2 .d2h-empty { color: var(--d2-mute); font-size: var(--d2-t-13); margin: 4px 0; }
  html.tp-desk2 .d2h-foot { margin: 10px 0 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2h-note { margin: 10px 0 0; font-size: var(--d2-t-12); color: var(--d2-mute); text-align: center; }
  html.tp-desk2 .d2h-warn { color: #94600C; }
  html.tp-desk2 .d2h-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--d2-soft); font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-ink); white-space: nowrap; }
  html.tp-desk2 .d2h-pill.is-ok { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d2h-pill.is-amber { background: #FFF1D6; color: #94600C; }
  html.tp-desk2 .d2h-cel-ico { font-size: var(--d2-t-17); line-height: 1; }
  html.tp-desk2 .d2h-cel.is-soon .d2h-cel-ico { background: var(--d2-pill); }
  html.tp-desk2 .d2h-cel.is-today { background: #FFFBE6; border-radius: 12px; margin: 0 -10px; width: calc(100% + 20px); padding-left: 10px; padding-right: 10px; border-top-color: transparent; }
  html.tp-desk2 .d2h-cel.is-today .d2h-cel-ico { background: var(--d2-y); }
  html.tp-desk2 .d2h-pill.is-today { background: var(--d2-y); color: #000; }
  html.tp-desk2 .d2h-udot { width: 8px; height: 8px; border-radius: 50%; background: var(--d2-y); flex: 0 0 8px; }
  html.tp-desk2 .d2h-udot.is-on { background: var(--d2-green); }
  html.tp-desk2 .d2h-udot.is-off { background: #c9c9c1; }
  html.tp-desk2 .d2h-row {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--d2-line2); background: none;
    text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink);
  }
  html.tp-desk2 .d2h-head + .d2h-row,
  html.tp-desk2 .d2h-head + .d2h-dlist .d2h-drow:first-child { border-top: 0; }
  html.tp-desk2 .d2h-row.is-static { cursor: default; }
  html.tp-desk2 button.d2h-row:hover { background: #FAFAF7; }
  /* Member roster ("Who's working"): name + status per row, a status dot before
     the label, and a Message button. Reuses .d2h-row / .d2-dot; only the inline
     dot needs a flex meta so its 8px box shows. */
  html.tp-desk2 .d2h-tnrow .d2h-meta { display: inline-flex; align-items: center; gap: 6px; }

  /* ---- Home ----------------------------------------------------------------------- */
  html.tp-desk2 #view-home > :not(#d2-home) { display: none !important; }
  html.tp-desk2 .d2-home { max-width: 1200px; margin: 0; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2h-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html.tp-desk2 .d2h-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  html.tp-desk2 .d2h-qbar { display: flex; align-items: center; gap: 12px; margin: -6px 0 14px; min-height: 32px; }
  html.tp-desk2 .d2h-qbar p { flex: 1 1 auto; margin: 0; font-size: var(--d2-t-13); color: #44443f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2h-qbar b { color: var(--d2-ink); font-weight: 600; }
  html.tp-desk2 .d2h-needs { padding-bottom: 8px; }
  html.tp-desk2 .d2h-drow {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px; margin: 0 -18px; border-top: 1px solid var(--d2-line2); cursor: pointer;
  }
  html.tp-desk2 .d2h-drow:hover { background: #FAFAF7; }
  html.tp-desk2 .d2h-drow.is-sel { background: #FFFBE6; }
  html.tp-desk2 .d2h-enter { font-size: var(--d2-t-11); }
  html.tp-desk2 .d2h-tns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  html.tp-desk2 .d2h-tn { background: var(--d2-bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .d2h-tn b { font-size: var(--d2-t-20); font-weight: 700; line-height: 1; margin-top: 6px; }
  html.tp-desk2 .d2h-tn span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2h-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  html.tp-desk2 .d2h-shot { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; font-family: var(--d2-font); min-width: 0; }
  html.tp-desk2 .d2h-shot-img { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--d2-bg); border: 1px solid var(--d2-line); }
  html.tp-desk2 .d2h-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d2h-shot b { font-size: var(--d2-t-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
  html.tp-desk2 .d2h-shot span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2h-line { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  html.tp-desk2 .d2h-line.is-util { cursor: default; padding: 12px 16px; }
  html.tp-desk2 .d2h-evd { width: 40px; flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
  html.tp-desk2 .d2h-evd span { font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .06em; color: var(--d2-red); }
  html.tp-desk2 .d2h-evd b { font-size: var(--d2-t-20); font-weight: 600; }
  html.tp-desk2 .d2h-ev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2h-head + .d2h-ev { border-top: 0; }
  html.tp-desk2 .d2h-src { font: 700 var(--d2-t-11)/22px var(--d2-font); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; text-align: center; background: #E8EEF9; color: #2D5A9A; }
  html.tp-desk2 .d2h-src.is-ms { background: #E6F1FA; color: #1D5E94; }
  html.tp-desk2 .d2h-evleave { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px 10px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2h-biz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html.tp-desk2 .d2h-bizc { border: 0; background: var(--d2-bg); border-radius: 12px; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2h-bizc b { font-size: var(--d2-t-26); font-weight: 700; margin-top: 6px; }
  html.tp-desk2 .d2h-bizc b.is-masked { letter-spacing: .3em; color: var(--d2-mute); font-size: var(--d2-t-17); }
  html.tp-desk2 .d2h-bizc small { font-size: var(--d2-t-13); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d2h-shift { display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, #FFFBE6, #fff 70%); }
  html.tp-desk2 .d2h-shift.is-working { background: linear-gradient(90deg, #EEF8F1, #fff 70%); }
  html.tp-desk2 .d2h-big { font-size: var(--d2-t-20) !important; font-weight: 700 !important; letter-spacing: -.01em; }
  html.tp-desk2 .d2h-shift .d2h-meta { white-space: normal; }
  html.tp-desk2 .d2h-shift-side { flex: 0 0 auto; max-width: 240px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
  html.tp-desk2 .d2h-shift-side .d2h-pill { background: var(--d2-y); color: #000; }
  html.tp-desk2 .d2h-shift-side .d2h-pill svg { transform: rotate(-90deg); }
  html.tp-desk2 .d2h-task { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--d2-line2); background: none; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2h-head + .d2h-task { border-top: 0; }
  html.tp-desk2 .d2h-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #bdbdb4; flex: 0 0 22px; }
  html.tp-desk2 .d2h-qcard .d2h-quote { margin: 8px 0 6px; font-size: var(--d2-t-17); font-weight: 600; line-height: 1.35; }
  html.tp-desk2 .d2h-qcard .d2h-meta { margin: 0; }
  html.tp-desk2 .d2h-bals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
  html.tp-desk2 .d2h-bal { background: var(--d2-bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .d2h-bal span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2h-bal b { font-size: var(--d2-t-26); font-weight: 700; }
  html.tp-desk2 .d2h-bal small { font-size: var(--d2-t-13); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d2h-insp h4 { margin: 6px 0 4px; font-size: var(--d2-t-17); }
  html.tp-desk2 .d2h-insp .d2-bigbtn { width: 100%; margin-top: 16px; }
  html.tp-desk2 .d2-scrim.is-wide .d2-modal { width: min(1040px, 100%); }

  /* ---- Notifications page ----------------------------------------------------------- */
  html.tp-desk2 .d2-notifs { max-width: 1000px; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2.d2-insp-open .d2-notifs { max-width: none; }
  html.tp-desk2 .d2n-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  html.tp-desk2 .d2n-bar .d2-seg { margin: 0; }
  html.tp-desk2 .d2n-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .d2n-chip { height: var(--d2-btn-h-sm); padding: 0 10px; border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d2n-chip.is-on { background: var(--d2-ink); box-shadow: none; color: #fff; }
  html.tp-desk2 .d2n-sp { flex: 1 1 auto; }
  html.tp-desk2 .d2n-list { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; overflow: hidden; }
  html.tp-desk2 .d2n-list > .d2h-empty { padding: 18px; margin: 0; }
  html.tp-desk2 .d2n-group { font: 700 var(--d2-t-11)/1 var(--d2-font); letter-spacing: .09em; text-transform: uppercase; color: var(--d2-mute); padding: 14px 16px 8px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2n-group:first-child { border-top: 0; }
  html.tp-desk2 .d2n-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 16px; border-top: 1px solid var(--d2-line2); cursor: pointer; }
  html.tp-desk2 .d2n-group + .d2n-row { border-top: 0; }
  html.tp-desk2 .d2n-row:hover { background: #FAFAF7; }
  html.tp-desk2 .d2n-row.is-sel,
  html.tp-desk2 .d2n-row.is-picked { background: #FFFBE6; }
  html.tp-desk2 .d2n-check { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #bdbdb4; background: #fff; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 20px; }
  html.tp-desk2 .d2n-check.is-on { background: var(--d2-ink); border-color: var(--d2-ink); color: #fff; }
  html.tp-desk2 .d2n-tile { width: 34px; height: 34px; border-radius: 10px; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
  html.tp-desk2 .d2n-row.is-unread .d2n-tile { background: var(--d2-pill); }
  html.tp-desk2 .d2n-tile.is-holly { background: var(--d2-y) !important; }
  html.tp-desk2 .d2n-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .d2n-main b { font-size: var(--d2-t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2n-main span { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2n-type { font: 600 var(--d2-t-11)/22px var(--d2-font); padding: 0 9px; border-radius: 999px; background: var(--d2-soft); white-space: nowrap; }
  html.tp-desk2 .d2n-acts { display: none; gap: 6px; }
  html.tp-desk2 .d2n-row:hover .d2n-acts,
  html.tp-desk2 .d2n-row.is-sel .d2n-acts { display: inline-flex; }
  html.tp-desk2 .d2n-row:hover .d2n-type,
  html.tp-desk2 .d2n-row.is-sel .d2n-type { display: none; }
  html.tp-desk2 .d2n-time { width: 64px; text-align: right; font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; }
  html.tp-desk2 .d2n-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d2-y); flex: 0 0 8px; }
  html.tp-desk2 .d2n-dot.is-read { background: transparent; }
  html.tp-desk2 .d2n-keys { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 10px 2px; }
  html.tp-desk2 .d2n-keys kbd { margin-right: 2px; }
  html.tp-desk2 .d2n-ibody { background: var(--d2-bg); border-radius: 12px; padding: 12px; font-size: var(--d2-t-13); margin-top: 12px; overflow-wrap: anywhere; }
  html.tp-desk2 .d2n-iacts { border-top: 1px solid var(--d2-line2); margin-top: 16px; padding-top: 8px; }
  html.tp-desk2 .d2n-iact { width: 100%; height: 36px; display: flex; align-items: center; gap: 10px; border: 0; background: none; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; padding: 0; }

  /* ---- Notification settings (Settings → Notifications) ------------------------------ */
  html.tp-desk2 #settings-pane-notifications > #notifications-panel { display: none; }
  html.tp-desk2 #settings-pane-notifications { max-width: 1100px; }
  html.tp-desk2 .d2-notifset { font-family: var(--d2-font); color: var(--d2-ink); display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d2s-crumbs { display: flex; align-items: center; justify-content: space-between; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2s-crumbs span { display: inline-flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d2s-status { color: #17753A; }
  html.tp-desk2 .d2s-browser { display: flex; align-items: center; gap: 12px; }
  html.tp-desk2 .d2s-grid { gap: 14px; }
  html.tp-desk2 .d2s-grid .d2h-col { gap: 14px; }
  html.tp-desk2 .d2s-row {
    width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border: 0; border-top: 1px solid var(--d2-line2);
    background: none; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); cursor: pointer;
  }
  html.tp-desk2 .d2h-head + .d2s-row,
  html.tp-desk2 .d2s-devices .d2s-row:first-child,
  html.tp-desk2 .d2-hi .d2h-kick + .d2s-row { border-top: 0; }
  html.tp-desk2 .d2s-row.is-static { cursor: default; }
  html.tp-desk2 .d2s-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .d2s-main b { font-size: var(--d2-t-15); font-weight: 500; }
  html.tp-desk2 .d2s-main span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2s-new { display: inline-flex; height: 18px; align-items: center; padding: 0 7px; border-radius: 999px; background: var(--d2-pill); font: 700 var(--d2-t-11) var(--d2-font); color: #94600C; vertical-align: 1px; }
  html.tp-desk2 .d2s-switch { position: relative; width: 40px; height: 24px; border-radius: 12px; border: 0; background: #E3E3DC; cursor: pointer; flex: 0 0 40px; padding: 0; transition: background .15s; }
  html.tp-desk2 .d2s-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
  html.tp-desk2 .d2s-switch.is-on { background: #34C759; }
  html.tp-desk2 .d2s-switch.is-on::after { transform: translateX(16px); }
  html.tp-desk2 .d2s-switch:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 2px; }
  /* Feedback P7: the Quiet card on Settings → Notifications (Apple-style messages on). */
  html.tp-desk2 .tpq-card .tpq-field { cursor: default; }
  html.tp-desk2 .tpq-card .tpq-input {
    flex: 0 1 auto; min-width: 0; max-width: 60%; height: var(--d2-btn-h); padding: 0 8px; border: 1px solid var(--d2-line); border-radius: var(--d2-radius);
    background: #fff; font: var(--d2-t-13) var(--d2-font); color: var(--d2-ink);
  }
  html.tp-desk2 .tpq-card .tpq-input:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 1px; }
  html.tp-desk2 .tpq-card .tpq-status { margin: 8px 0 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .tpq-card .tpq-status:empty { display: none; }
  html.tp-desk2.tp-notify .d2n-time { width: auto; min-width: 64px; }

  /* ---- Chats: three panes, edge to edge -------------------------------------------- */
  html.tp-desk2[data-d2-view="groups"] .app-main { padding: 0; }
  html.tp-desk2 .chats-layout {
    height: calc(100dvh - var(--d2-top)); border: 0; border-radius: 0; grid-template-columns: 320px minmax(0, 1fr); min-height: 0;
  }
  html.tp-desk2 .chats-layout.has-thread { grid-template-columns: 320px minmax(0, 1fr) 340px; }
  html.tp-desk2 #d2-viewas-banner:not([hidden]) ~ #main-content .chats-layout { height: calc(100dvh - var(--d2-top) - 41px); }
  html.tp-desk2 .chats-list-pane { border-right: 1px solid var(--d2-line); }
  /* Chat polish (1 Oct 2026): the inbox header reads like Messages. The top
     bar carries the "Chats" title; the column has the search field on its own
     full-width row, then the All / Unread segmented control with the compose
     button beside it. The pane is a grid and the inbox's own children join it
     (display: contents), so the segmented control (rendered inside the inbox)
     and the compose button (in the header) share a row. Nothing in the header
     can shrink or overlap: rows size to their content. */
  html.tp-desk2 .chats-layout { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
  html.tp-desk2 .chats-layout.has-thread { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) 340px; }
  html.tp-desk2 .chats-list-pane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: max-content; align-content: start; min-width: 280px; }
  html.tp-desk2 .chats-list-pane > *,
  html.tp-desk2 .chats-list-pane > #chats-inbox > * { grid-column: 1 / -1; min-width: 0; }
  html.tp-desk2 .chats-list-pane > #chats-inbox:not([hidden]) { display: contents; }
  html.tp-desk2 .chats-list-pane .chats-search { grid-row: 1; margin: 12px 12px 0; }
  html.tp-desk2 .chats-list-pane .chats-list-header { grid-row: 2; grid-column: 2; position: static; align-self: center; padding: 0 12px 0 10px; border: 0; background: none; z-index: auto; }
  html.tp-desk2 .chats-list-pane .chats-list-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.tp-desk2 .chats-list-pane > #chats-inbox > .tp-inbox-chips { grid-row: 2; grid-column: 1; align-self: center; margin: 10px 0 10px 12px; }
  html.tp-desk2 #chats-section-oversight { padding: 0 16px; }
  html.tp-desk2 .chats-detail-pane .tp-page-title[role="button"] { cursor: pointer; }
  html.tp-desk2 .tp-inbox-row.active .tp-inbox-main { background: var(--d2-pill); }
  html.tp-desk2 .tp-person-row.d2-kbd .tp-inbox-main { background: var(--d2-pill); }

  /* ---- Holly + Nexus: Nexus column | conversation | "This thread" ---------------------- */
  html.tp-desk2.d2-holly-cols .app-main { padding: 0 0 0 300px; }
  html.tp-desk2.d2-holly-cols #view-holly .hc { height: calc(100dvh - var(--d2-top)); max-width: none; margin: 0; padding: 0 28px; background: #fff; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-head { max-width: 820px; width: 100%; margin: 0 auto; padding-top: 10px; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-list > *,
  html.tp-desk2.d2-holly-cols #view-holly .hc-composer > * { max-width: 820px; margin-left: auto; margin-right: auto; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-composer { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2.d2-holly-cols #view-holly [data-hc-threads] { visibility: hidden; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-card { max-width: 600px; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-bubble { max-width: 70%; }
  html.tp-desk2.d2-holly-cols #holly-nexus {
    position: fixed; inset: var(--d2-top) auto 0 var(--d2-side); width: 300px; z-index: 25; visibility: visible; background: none; transition: none;
  }
  html.tp-desk2.d2-holly-cols.d2-side-collapsed #holly-nexus { left: 0; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-panel {
    position: absolute; inset: 0; width: auto; transform: none; transition: none; box-shadow: none; padding-top: 8px;
    border-right: 1px solid var(--d2-line); background: var(--d2-bg);
  }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-title { font-size: var(--d2-t-20); letter-spacing: -.5px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-dots { display: none; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-top,
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-sub { padding-left: 16px; padding-right: 16px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-search,
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-seg { margin-left: 16px; margin-right: 16px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-seg { margin-bottom: 10px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-pane { padding-left: 16px; padding-right: 16px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card { cursor: pointer; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card.is-current { border-color: var(--d2-y); box-shadow: 0 0 0 1px var(--d2-y); }
  /* An automation's detail opens in the middle pane, beside the column. */
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-adetail-wrap {
    position: fixed; top: var(--d2-top); bottom: 0; left: calc(var(--d2-side) + 300px); right: 0; width: auto; background: #fff; border-left: 0;
  }
  html.tp-desk2.d2-holly-cols.d2-side-collapsed #holly-nexus .nexus-adetail-wrap { left: 300px; }
  html.tp-desk2.d2-holly-cols.d2-insp-open #holly-nexus .nexus-adetail-wrap { right: 360px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-adetail { max-width: 760px; margin: 0 auto; }
  html.tp-desk2 .d2-hi .d2h-kick { margin: 16px 0 6px; }
  html.tp-desk2 .d2-hi .d2h-kick:first-child { margin-top: 0; }
  html.tp-desk2 .d2hi-status { display: flex; align-items: center; gap: 10px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d2hi-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d6d6ce; flex: 0 0 14px; }
  html.tp-desk2 .d2hi-spin.is-busy { border-color: var(--d2-y); border-right-color: transparent; }
  html.tp-desk2 .d2hi-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  html.tp-desk2 .d2-hi .d2h-tile { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  /* Image thumbnail in the Files panel: fills the tile, opens full-size on click. */
  html.tp-desk2 .d2hi-thumb { padding: 0; overflow: hidden; }
  html.tp-desk2 .d2hi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d2hi-thumb.is-loading { background: var(--d2-soft); }
}

/* ---- iPad: the same screens at 44pt; the inspector and chat info float ---------------- */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d2h-btn,
  html.tp-ipad.tp-desk2 .d2h-link,
  html.tp-ipad.tp-desk2 .d2n-chip { min-height: 44px; height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d2h-drow,
  html.tp-ipad.tp-desk2 .d2h-row,
  html.tp-ipad.tp-desk2 .d2h-task,
  html.tp-ipad.tp-desk2 .d2s-row { min-height: 52px; }
  html.tp-ipad.tp-desk2 .d2n-row { min-height: 60px; }
  /* 44pt hit area around a 28pt box. */
  html.tp-ipad.tp-desk2 .d2n-check { width: 44px; height: 44px; flex-basis: 44px; margin: -8px; border: 8px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1.5px #bdbdb4; border-radius: 12px; }
  html.tp-ipad.tp-desk2 .d2n-check.is-on { border-color: transparent; box-shadow: none; }
  html.tp-ipad.tp-desk2 .d2n-bar .d2-seg button { height: 44px; padding: 0 16px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d2n-acts { display: none !important; }
  html.tp-ipad.tp-desk2 .d2n-type { display: inline-flex !important; }
  html.tp-ipad.tp-desk2 .d2s-switch { width: 51px; height: 31px; border-radius: 16px; flex-basis: 51px; }
  html.tp-ipad.tp-desk2 .d2s-switch::after { width: 27px; height: 27px; }
  html.tp-ipad.tp-desk2 .d2s-switch.is-on::after { transform: translateX(20px); }
  html.tp-ipad.tp-desk2 .d2h-bizc,
  html.tp-ipad.tp-desk2 .d2h-shot { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2h-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d2h-shot:nth-child(n+5) { display: none; }
  /* The inspector floats over the page on iPad instead of pushing it. */
  html.tp-ipad.tp-desk2.d2-insp-open .app-main { margin-right: 0; width: 100%; }
  html.tp-ipad.tp-desk2 .d2-inspector { box-shadow: -12px 0 32px rgba(0, 0, 0, .14); }
  html.tp-ipad.tp-desk2.d2-holly-cols.d2-insp-open #holly-nexus .nexus-adetail-wrap { right: 0; }
  /* Chat info / threads float as a popover-width panel so the conversation keeps its room. */
  html.tp-ipad.tp-desk2 .chats-layout,
  html.tp-ipad.tp-desk2 .chats-layout.has-thread { grid-template-columns: 300px minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .chats-thread-pane {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 80%); z-index: 20; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); background: #fff;
  }
  html.tp-ipad.tp-desk2 .tp-inbox-main { min-height: 64px; }
  html.tp-ipad.tp-desk2.d2-holly-cols .app-main { padding-left: 280px; }
  html.tp-ipad.tp-desk2.d2-holly-cols #holly-nexus { width: 280px; }
  html.tp-ipad.tp-desk2.d2-holly-cols #holly-nexus .nexus-adetail-wrap { left: calc(var(--d2-side) + 280px); }
  html.tp-ipad.tp-desk2.d2-holly-cols #view-holly .hc { padding: 0 18px; }
  html.tp-ipad.tp-desk2.d2-holly-cols #view-holly .hc-bubble { max-width: 82%; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d2h-grid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2h-qbar { margin-top: 0; }
  html.tp-ipad.tp-desk2 .chats-layout,
  html.tp-ipad.tp-desk2 .chats-layout.has-thread { grid-template-columns: 280px minmax(0, 1fr); }
  html.tp-ipad.tp-desk2.d2-holly-cols #holly-nexus { left: 0; width: 260px; }
  html.tp-ipad.tp-desk2.d2-holly-cols .app-main { padding-left: 260px; }
  html.tp-ipad.tp-desk2.d2-holly-cols #holly-nexus .nexus-adetail-wrap { left: 260px; }
  html.tp-ipad.tp-desk2 .d2n-type { display: none !important; }
  html.tp-ipad.tp-desk2 .d2s-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Desktop D2: the staff loop (Tasks, End of day, Leave, Requests). Same rule:
   every selector starts with html.tp-desk2 or html.tp-ipad, and layout lives
   inside min-width: 769px, where the new shell is shown. Each page renders at
   the top of its own <section> (.d2-on) and today's markup beneath it hides.
   ============================================================================ */
@media (min-width: 769px) {
  /* ---- today's markup steps aside for the new page -------------------------------- */
  html.tp-desk2 #view-tasks.d2-on:not(.d2-board) > :not(#d2-tasks-page),
  html.tp-desk2 #view-tasks.d2-on.d2-board > :not(#d2-tasks-page):not(#tasks-toolbar-row):not(#kanban),
  html.tp-desk2 #view-eod.d2-on:not(.d2-builder) > :not(#d2-eod-page),
  html.tp-desk2 #view-eod.d2-on.d2-builder > :not(#d2-eod-page):not(#eod-builder),
  html.tp-desk2 #view-leave.d2-on > :not(#d2-leave-page),
  html.tp-desk2 #view-requests.d2-on > :not(#d2-requests-page) { display: none !important; }
  html.tp-desk2 #view-tasks.d2-board #kanban .task-delete,
  html.tp-desk2 #view-tasks.d2-board #kanban .task-archive { display: none !important; }
  html.tp-desk2 #view-tasks.d2-board #tasks-toolbar-row { margin: 0 0 12px; }
  html.tp-desk2 #view-tasks.d2-board #kanban .task-card { cursor: pointer; }

  html.tp-desk2 .d2-page { font-family: var(--d2-font); color: var(--d2-ink); max-width: 1100px; }
  html.tp-desk2.d2-insp-open .d2-page { max-width: none; }
  html.tp-desk2 .d2t-loading { color: var(--d2-mute); font-size: var(--d2-t-13); padding: 28px 4px; }
  html.tp-desk2 .d2t-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; min-height: 36px; }
  html.tp-desk2 .d2t-bar .d2-seg { margin: 0; }
  html.tp-desk2 .d2t-seg button { height: var(--d2-btn-h-sm); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-seg button span { color: var(--d2-mute); font-weight: 500; margin-left: 3px; }
  html.tp-desk2 .d2t-search { display: flex; align-items: center; gap: 6px; height: var(--d2-btn-h); padding: 0 9px; border-radius: var(--d2-radius); background: #fff; border: 0; box-shadow: var(--d2-edge); color: var(--d2-mute); flex: 1 1 120px; min-width: 110px; max-width: 280px; }
  html.tp-desk2.d2-insp-open .d2t-search kbd { display: none; }
  html.tp-desk2.d2-insp-open .d2t-bar .d2h-btn kbd { display: none; }
  html.tp-desk2 .d2t-search input,
  html.tp-desk2 .d2t-search input:focus { border: 0; outline: none; box-shadow: none; background: none; padding: 0; min-width: 0; flex: 1 1 auto; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2h-btn.is-on { background: var(--d2-pill); box-shadow: 0 0 0 .5px #D9C35A, 0 1px 1.5px rgba(0, 0, 0, .06); }
  html.tp-desk2 .d2h-btn.is-icon { width: var(--d2-btn-h); padding: 0; justify-content: center; }
  html.tp-desk2 .d2h-btn.is-big { height: var(--d2-btn-h-lg); font-size: var(--d2-t-13); padding: 0 14px; }
  html.tp-desk2 .d2h-btn kbd,
  html.tp-desk2 .d2t-bulk kbd { font-size: var(--d2-t-11); padding: 0 4px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .15); background: rgba(255, 255, 255, .6); line-height: 16px; }
  html.tp-desk2 .d2t-ro { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #FFF1D6; color: #6B4B08; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-note,
  html.tp-desk2 .d2t-muted { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 4px 0; line-height: 1.45; }
  html.tp-desk2 .d2t-warn { font-size: var(--d2-t-13); color: #94600C; background: #FFF1D6; padding: 8px 12px; border-radius: 10px; }
  html.tp-desk2 .d2t-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
  html.tp-desk2 .d2t-chip { height: var(--d2-btn-h-sm); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d2t-chip:not(:has(.d2t-av)) { padding-left: 10px; }
  html.tp-desk2 .d2t-chip.is-on,
  html.tp-desk2 .d2t-chip.is-dark { background: var(--d2-ink); box-shadow: none; color: #fff; }
  html.tp-desk2 .d2t-chip span { color: inherit; opacity: .6; font-weight: 500; }
  html.tp-desk2 .d2t-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
  html.tp-desk2 .d2t-stat { text-align: left; border: 1px solid var(--d2-line); background: #fff; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; font-family: var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d2t-stats.is-static .d2t-stat { cursor: default; }
  html.tp-desk2 .d2t-stat b { font-size: var(--d2-t-20); font-weight: 700; }
  html.tp-desk2 .d2t-stat span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2t-stat.is-alert b { color: var(--d2-red); }
  html.tp-desk2 .d2t-stat.is-on { border-color: var(--d2-y); box-shadow: 0 0 0 1px var(--d2-y); }
  html.tp-desk2 .d2t-filterline { font-size: var(--d2-t-13); color: var(--d2-mute); margin: -4px 0 10px; }
  html.tp-desk2 .d2t-group h3,
  html.tp-desk2 .d2e-h,
  html.tp-desk2 .d2r-group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 2px 8px; font-size: var(--d2-t-15); font-weight: 700; }
  html.tp-desk2 .d2t-group:first-child h3 { margin-top: 4px; }
  html.tp-desk2 .d2t-group h3.is-alert { color: var(--d2-red); }
  html.tp-desk2 .d2t-group h3 span,
  html.tp-desk2 .d2e-h span,
  html.tp-desk2 .d2r-group h3 span { font-size: var(--d2-t-12); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d2e-h .d2h-link { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-card { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; overflow: hidden; }
  html.tp-desk2 .d2t-li + .d2t-li,
  html.tp-desk2 .d2e-hrow + .d2e-hrow,
  html.tp-desk2 .d2e-prow + .d2e-prow,
  html.tp-desk2 .d2l-row + .d2l-row,
  html.tp-desk2 .d2t-card > .ios2-swipe + .ios2-swipe,
  html.tp-desk2 .d2t-card > .d2r-row + .d2r-row { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2t-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 14px; cursor: pointer; position: relative; background: #fff; }
  html.tp-desk2 .d2t-row:hover { background: #FAFAF7; }
  html.tp-desk2 .d2t-row.is-sel,
  html.tp-desk2 .d2t-row.is-open,
  html.tp-desk2 .d2t-row.is-picked { background: #FFFBE6; }
  html.tp-desk2 .d2t-row.is-open::before,
  html.tp-desk2 .d2t-row.is-picked::before,
  html.tp-desk2 .d2r-row.is-open::before,
  html.tp-desk2 .d2e-hrow.is-open::before,
  html.tp-desk2 .d2e-prow.is-open::before,
  html.tp-desk2 .d2l-row.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--d2-y); }
  html.tp-desk2 .d2t-pick { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; border: 1.5px solid #bdbdb4; background: #fff; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; }
  html.tp-desk2 .d2t-row:hover .d2t-pick,
  html.tp-desk2 .d2t-row.is-sel .d2t-pick,
  html.tp-desk2 .d2t-pick:focus-visible,
  html.tp-desk2 .d2t-list:has(.d2t-pick.is-on) .d2t-pick { opacity: 1; }
  html.tp-desk2 .d2t-pick.is-on { opacity: 1; background: var(--d2-y); border-color: var(--d2-y); color: #000; }
  html.tp-desk2 .d2t-check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1.5px solid #bdbdb4; background: #fff; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
  html.tp-desk2 .d2t-check:hover:not(:disabled) { border-color: var(--d2-green); }
  html.tp-desk2 .d2t-check.is-done { background: var(--d2-green); border-color: var(--d2-green); }
  html.tp-desk2 .d2t-check:disabled { opacity: .45; cursor: default; }
  html.tp-desk2 .d2t-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html.tp-desk2 .d2t-main > b { font-size: var(--d2-t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2t-main > span { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
  html.tp-desk2 .d2t-main > span.is-red { color: var(--d2-red); }
  html.tp-desk2 .d2t-row.is-done .d2t-main > b { text-decoration: line-through; color: var(--d2-mute); font-weight: 500; }
  html.tp-desk2 .d2t-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 2px; }
  html.tp-desk2 .d2t-dot.is-urgent { background: var(--d2-red); }
  html.tp-desk2 .d2t-dot.is-high { background: var(--d2-amber); }
  html.tp-desk2 .d2t-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--d2-soft); font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-ink); white-space: nowrap; flex: 0 0 auto; border: 0; }
  html.tp-desk2 .d2t-pill.is-red { background: #FCE4E1; color: #B0271D; }
  html.tp-desk2 .d2t-pill.is-yellow { background: var(--d2-pill); color: #6B5200; }
  html.tp-desk2 .d2t-pill.is-green { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d2t-pill.is-blue { background: #E8EEF9; color: #2D5A9A; }
  html.tp-desk2 .d2t-pill.is-grey { background: var(--d2-soft); color: #55554f; }
  html.tp-desk2 .d2t-pill.is-dark { background: var(--d2-ink); color: var(--d2-y); font-size: var(--d2-t-11); height: 18px; letter-spacing: .06em; }
  html.tp-desk2 .d2t-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); color: #3b3b36; background: #F2EBC8; }
  html.tp-desk2 .d2t-av.is-xs { width: 24px; height: 24px; flex-basis: 24px; font-size: var(--d2-t-11); }
  html.tp-desk2 .d2t-av.is-none { background: none; }
  html.tp-desk2 .d2t-av-0 { background: #FFF1B8; } html.tp-desk2 .d2t-av-1 { background: #E3ECFA; }
  html.tp-desk2 .d2t-av-2 { background: #E2F4E8; } html.tp-desk2 .d2t-av-3 { background: #F7E4EC; }
  html.tp-desk2 .d2t-av-4 { background: #ECE6F8; } html.tp-desk2 .d2t-av-5 { background: #EEEEE7; }
  html.tp-desk2 .d2t-chev { color: #b5b5ad; display: inline-flex; flex: 0 0 auto; }
  html.tp-desk2 .d2t-empty { background: #fff; border: 1px dashed var(--d2-line); border-radius: 16px; padding: 32px 20px; text-align: center; color: var(--d2-mute); display: flex; flex-direction: column; align-items: center; gap: 8px; }
  html.tp-desk2 .d2t-empty p { margin: 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-empty.is-small { padding: 16px; }
  /* Multi-select: the toolbar turns into a black selection bar. */
  html.tp-desk2 .d2t-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; background: var(--d2-ink); color: #fff; border-radius: 12px; padding: 6px 8px; }
  html.tp-desk2 .d2t-bulk-n { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--d2-t-13); padding: 0 10px 0 4px; margin-right: auto; }
  html.tp-desk2 .d2t-bulk-n svg { background: var(--d2-y); color: #000; border-radius: 5px; padding: 1px; }
  html.tp-desk2 .d2t-bulk button { height: var(--d2-btn-h); display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: var(--d2-radius); border: 1px solid #3a3a36; background: #1d1d1b; color: #fff; font: 600 var(--d2-t-13) var(--d2-font); cursor: pointer; }
  html.tp-desk2 .d2t-bulk button:hover { background: #2a2a27; }
  html.tp-desk2 .d2t-bulk button.is-danger { background: #fff; color: var(--d2-red); border-color: #fff; }
  html.tp-desk2 .d2t-bulk button.is-plain { border-color: transparent; background: none; color: #bdbdb4; }
  html.tp-desk2 .d2t-bulk kbd { background: #fff; color: #000; }

  /* The inspector's contents (task, report, leave request). */
  html.tp-desk2 .d2t-insp h4,
  html.tp-desk2 .d2e-report h4 { margin: 2px 0 2px; font-size: var(--d2-t-20); font-weight: 700; line-height: 1.25; }
  html.tp-desk2 .d2t-ask { display: inline-flex; align-items: center; gap: 6px; height: var(--d2-btn-h); padding: 0 11px; border-radius: var(--d2-radius); border: 0; background: var(--d2-pill); font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; margin: 8px 0 4px; }
  html.tp-desk2 .d2t-status { display: flex; margin: 12px 0 8px; }
  html.tp-desk2 .d2t-status button { flex: 1 1 0; padding: 0 4px; height: var(--d2-btn-h-sm); white-space: nowrap; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2t-status button:disabled { cursor: default; }
  html.tp-desk2 .d2t-fields { display: flex; flex-direction: column; }
  html.tp-desk2 .d2t-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-field > span { color: var(--d2-mute); flex: 0 0 auto; }
  html.tp-desk2 .d2t-field > select,
  html.tp-desk2 .d2t-field > input { border: 0; background: none; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); text-align: right; min-width: 0; max-width: 60%; padding: 4px 0; cursor: pointer; }
  html.tp-desk2 .d2t-field > select:focus,
  html.tp-desk2 .d2t-field > input:focus { outline: 2px solid var(--d2-y); outline-offset: 2px; border-radius: 6px; box-shadow: none; }
  html.tp-desk2 .d2t-field.is-stack { flex-direction: column; align-items: stretch; border: 0; gap: 6px; margin: 0 0 12px; }
  html.tp-desk2 .d2t-field.is-stack > span { font-weight: 600; color: var(--d2-ink); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-field.is-stack > span small { font-weight: 400; color: var(--d2-mute); }
  html.tp-desk2 .d2t-field.is-stack > input,
  html.tp-desk2 .d2t-field.is-stack > select,
  html.tp-desk2 .d2t-field.is-stack > textarea { max-width: none; text-align: left; font-weight: 400; border: 1px solid var(--d2-line); border-radius: 10px; padding: 9px 12px; background: #fff; font: 400 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .d2t-insp .d2-kicker,
  html.tp-desk2 .d2e-report .d2-kicker,
  html.tp-desk2 .d2r-details .d2-kicker,
  html.tp-desk2 .d2t-new .d2-kicker { padding: 18px 0 6px; display: flex; justify-content: space-between; }
  html.tp-desk2 .d2t-text,
  html.tp-desk2 .d2e-text { font-size: var(--d2-t-13); line-height: 1.5; margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .d2e-text.is-box { border: 1px solid var(--d2-line); border-radius: 12px; padding: 10px 12px; }
  html.tp-desk2 .d2t-sub { display: flex; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2t-sub.is-done .d2t-sublink { text-decoration: line-through; color: var(--d2-mute); }
  html.tp-desk2 .d2t-sublink { border: 0; background: none; padding: 0; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; text-align: left; }
  html.tp-desk2 .d2t-thread { display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .d2t-bubble { max-width: 88%; align-self: flex-start; }
  html.tp-desk2 .d2t-bubble p { margin: 0; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--d2-line); background: #fff; font-size: var(--d2-t-13); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .d2t-bubble span { display: block; font-size: var(--d2-t-12); color: var(--d2-mute); margin: 3px 4px 0; }
  html.tp-desk2 .d2t-bubble.is-mine { align-self: flex-end; text-align: right; }
  html.tp-desk2 .d2t-bubble.is-mine p { background: var(--d2-ink); color: #fff; border-color: var(--d2-ink); text-align: left; }
  html.tp-desk2 .d2t-compose { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0 0; }
  html.tp-desk2 .d2t-compose textarea { flex: 1 1 auto; resize: vertical; min-height: 40px; border: 1px solid var(--d2-line); border-radius: 12px; padding: 9px 12px; font: 400 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .d2t-send { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--d2-y); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
  html.tp-desk2 .d2t-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-top: 1px solid var(--d2-line2); margin-top: 18px; padding-top: 10px; }
  html.tp-desk2 .d2t-danger { border: 0; background: none; padding: 6px 0; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-red); cursor: pointer; }
  html.tp-desk2 .d2t-danger.is-inline { padding: 0 6px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-picked { display: flex; flex-direction: column; }
  html.tp-desk2 .d2t-picked div { display: flex; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--d2-line2); font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d2t-picked svg { background: var(--d2-y); border-radius: 5px; }
  /* New task sheet */
  html.tp-desk2 .d2t-newtitle { width: 100%; height: 44px; border: 1.5px solid var(--d2-y); border-radius: 12px; padding: 0 12px; font: 400 var(--d2-t-15) var(--d2-font); box-shadow: 0 0 0 3px rgba(245, 197, 0, .18); }
  html.tp-desk2 .d2t-chip-pick { position: relative; overflow: hidden; padding-left: 10px; }
  html.tp-desk2 .d2t-chip-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  html.tp-desk2 .d2t-avstrip { display: flex; gap: 10px; flex-wrap: wrap; }
  html.tp-desk2 .d2t-avpick { border: 0; background: none; padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d2t-avpick .d2t-av { width: 38px; height: 38px; flex-basis: 38px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2t-avpick.is-on .d2t-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--d2-y); background: var(--d2-ink); color: var(--d2-y); }
  html.tp-desk2 .d2t-avpick.is-on span { font-weight: 700; }
  html.tp-desk2 .d2t-more { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-top: 1px solid var(--d2-line2); border-bottom: 1px solid var(--d2-line2); background: none; padding: 10px 0; margin-top: 14px; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2t-more b { display: block; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-more small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2t-sheetbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  html.tp-desk2 .d2-mrow.is-on { font-weight: 700; }
  html.tp-desk2 .d2t-filtermenu { margin: -8px -20px -12px; }

  /* ---- End of day --------------------------------------------------------------------------- */
  html.tp-desk2 .d2e-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
  html.tp-desk2 .d2e-state { font-size: var(--d2-t-20); font-weight: 700; margin: 6px 0 4px; letter-spacing: -.01em; }
  html.tp-desk2 .d2e-note { font-size: var(--d2-t-13); color: var(--d2-mute); margin: 6px 0 0; line-height: 1.45; }
  html.tp-desk2 .d2e-note.is-warn { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .d2e-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
  html.tp-desk2 .d2e-btns .d2e-note { flex: 1 1 180px; margin: 0; }
  html.tp-desk2 .d2e-meter,
  html.tp-desk2 .d2l-meter { height: 6px; border-radius: 3px; background: var(--d2-soft); overflow: hidden; display: flex; margin: 10px 0 4px; }
  html.tp-desk2 .d2e-meter i,
  html.tp-desk2 .d2l-meter i { display: block; height: 100%; background: var(--d2-y); }
  html.tp-desk2 .d2l-meter i.is-pend { background: repeating-linear-gradient(135deg, var(--d2-y) 0 4px, #fff 4px 7px); }
  html.tp-desk2 .d2l-meter.is-dark i:first-child { background: var(--d2-y); }
  html.tp-desk2 .d2e-ok { color: #17753A; font-size: var(--d2-t-13); margin: 10px 0 0; }
  html.tp-desk2 .d2e-facts { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 6px; }
  html.tp-desk2 .d2e-fact { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2e-fact:first-child { border-top: 0; }
  html.tp-desk2 .d2e-fact > .d2e-ftext { flex: 1 1 auto; display: flex; flex-direction: column; }
  html.tp-desk2 .d2e-fact b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d2e-fact small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2e-hrow { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 6px 16px; border: 0; background: #fff; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); position: relative; }
  html.tp-desk2 .d2e-hrow:hover { background: #FAFAF7; }
  html.tp-desk2 .d2e-hrow.is-open,
  html.tp-desk2 .d2e-hrow.is-sel { background: #FFFBE6; }
  html.tp-desk2 .d2e-hrow > b { width: 92px; flex: 0 0 92px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2e-line { flex: 1 1 auto; min-width: 0; font-size: var(--d2-t-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2e-daynav { display: inline-flex; gap: 6px; }
  html.tp-desk2 .d2e-daypick { position: relative; overflow: hidden; }
  html.tp-desk2 .d2e-daypick input,
  html.tp-desk2 .d2e-daypick select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
  html.tp-desk2 .d2e-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  html.tp-desk2 .d2e-cols .d2e-h { margin-top: 0; }
  html.tp-desk2 .d2e-prow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px; border: 0; background: #fff; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); position: relative; }
  html.tp-desk2 .d2e-prow.is-btn { cursor: pointer; }
  html.tp-desk2 .d2e-prow.is-btn:hover { background: #FAFAF7; }
  html.tp-desk2 .d2e-prow.is-open,
  html.tp-desk2 .d2e-prow.is-sel { background: #FFFBE6; }
  html.tp-desk2 .d2e-sdot { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c1; display: inline-block; }
  html.tp-desk2 .d2e-sdot.is-on { background: var(--d2-green); }
  html.tp-desk2 .d2e-builderbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 14px; border-radius: 14px; background: var(--d2-ink); color: #fff; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2e-builderbar span { flex: 1 1 auto; }
  html.tp-desk2 #view-eod.d2-builder > #eod-builder { display: block; }
  html.tp-desk2 .d2e-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2e-kv > span { color: var(--d2-mute); flex: 0 0 auto; }
  html.tp-desk2 .d2e-kv > b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
  html.tp-desk2 .d2e-prios { margin: 4px 0 0; padding-left: 20px; font-size: var(--d2-t-13); line-height: 1.6; }
  /* The form: step rail | the real form's section cards; Review & send lives in the inspector. */
  html.tp-desk2 .d2e-formwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
  html.tp-desk2 .d2e-rail { position: sticky; top: calc(var(--d2-top) + 12px); display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .d2e-rail .d2h-kick { margin: 0 0 8px; }
  html.tp-desk2 .d2e-step { display: flex; align-items: center; gap: 10px; min-height: 38px; border: 0; background: none; border-radius: 10px; padding: 0 10px; text-align: left; font: 500 var(--d2-t-13) var(--d2-font); color: #55554f; cursor: pointer; }
  html.tp-desk2 .d2e-step:hover { background: #fff; }
  html.tp-desk2 .d2e-step.is-now { background: var(--d2-pill); color: var(--d2-ink); font-weight: 700; }
  html.tp-desk2 .d2e-num { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1.5px solid #bdbdb4; display: inline-flex; align-items: center; justify-content: center; font-size: var(--d2-t-12); font-weight: 700; color: var(--d2-ink); background: #fff; }
  html.tp-desk2 .d2e-step.is-done .d2e-num { background: var(--d2-green); border-color: var(--d2-green); color: #fff; }
  html.tp-desk2 .d2e-step.is-now .d2e-num { background: var(--d2-ink); border-color: var(--d2-ink); color: #fff; }
  html.tp-desk2 .d2e-rail .d2e-note { padding: 10px; }
  html.tp-desk2 .d2e-rail .d2h-link { align-self: flex-start; margin-left: 4px; }
  html.tp-desk2 .d2e-form { display: block; margin: 0; }
  html.tp-desk2 .d2e-form #eod-form-fields { display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d2e-form .eod-actions { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.tp-desk2 .d2e-form .eod-card { background: #fff; border: 1px solid var(--d2-line); border-top: 1px solid var(--d2-line); border-radius: 16px; padding: 18px 20px; margin: 0; box-shadow: none; scroll-margin-top: calc(var(--d2-top) + 16px); }
  html.tp-desk2 .d2e-form .eod-card.d2e-current { border-color: #E9D57A; box-shadow: 0 0 0 1px #E9D57A; }
  html.tp-desk2 .d2e-form .eod-section-heading { font-size: var(--d2-t-17); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .d2e-form .eod-card.d2e-current .eod-section-heading::after { content: 'Current'; font: 600 var(--d2-t-11)/20px var(--d2-font); padding: 0 8px; border-radius: 999px; background: var(--d2-pill); color: #6B5200; }
  html.tp-desk2 .d2e-sum { display: none; align-items: center; gap: 12px; }
  html.tp-desk2 .d2e-sum b { font-size: var(--d2-t-15); flex: 0 0 auto; }
  html.tp-desk2 .d2e-sumtext { flex: 1 1 auto; min-width: 0; font-size: var(--d2-t-13); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2e-sumtick { width: 22px; height: 22px; border-radius: 50%; background: var(--d2-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
  html.tp-desk2 .d2e-form .eod-card.d2e-folded { padding-top: 12px; padding-bottom: 12px; }
  html.tp-desk2 .d2e-form .eod-card.d2e-folded > :not(.d2e-sum) { display: none !important; }
  html.tp-desk2 .d2e-form .eod-card.d2e-folded > .d2e-sum { display: flex; }
  html.tp-desk2 .d2e-next { display: flex; justify-content: flex-end; margin-top: 14px; }
  html.tp-desk2 .d2e-form .eod-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  html.tp-desk2 .d2e-form .eod-section-grid > .full-width,
  html.tp-desk2 .d2e-form .eod-section-grid > .ios2-cond { grid-column: 1 / -1; }
  html.tp-desk2 .d2e-form label > span,
  html.tp-desk2 .d2e-form .priorities-label { display: block; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); margin-bottom: 6px; }
  html.tp-desk2 .d2e-form textarea,
  html.tp-desk2 .d2e-form input[type="text"],
  html.tp-desk2 .d2e-form input[type="number"],
  html.tp-desk2 .d2e-form select { border: 1px solid var(--d2-line); border-radius: 10px; font: 400 var(--d2-t-13) var(--d2-font); padding: 9px 12px; width: 100%; box-sizing: border-box; background: #fff; }
  html.tp-desk2 .d2e-form .ios2-native-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  html.tp-desk2 .d2e-form .ios2-cond-hidden { display: none !important; }
  html.tp-desk2 .d2e-form .ios2-scale { display: flex; flex-wrap: wrap; gap: 6px; position: relative; padding-bottom: 20px; }
  html.tp-desk2 .d2e-form .ios2-scale button { flex: 1 1 0; min-width: 36px; height: var(--d2-btn-h-lg); border: 1px solid var(--d2-line); border-radius: var(--d2-radius); background: #fff; font: 600 var(--d2-t-13) var(--d2-font); cursor: pointer; color: var(--d2-ink); }
  html.tp-desk2 .d2e-form .ios2-scale button:hover { border-color: #bdbdb4; }
  html.tp-desk2 .d2e-form .ios2-scale button.is-on { background: var(--d2-y); border-color: var(--d2-y); }
  html.tp-desk2 .d2e-form .ios2-scale.is-yes_no { display: inline-flex; background: #EBEBE4; padding: 2px; border-radius: 10px; gap: 0; width: 240px; }
  html.tp-desk2 .d2e-form .ios2-scale.is-yes_no button { border: 0; background: none; height: var(--d2-btn-h); border-radius: calc(var(--d2-radius) - 1px); color: var(--d2-mute); }
  html.tp-desk2 .d2e-form .ios2-scale.is-yes_no button.is-on { background: #fff; color: var(--d2-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  html.tp-desk2 .d2e-form .ios2-scale small { position: absolute; left: 0; bottom: 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2e-form .ios2-scale small.is-end { left: auto; right: 0; }
  html.tp-desk2 .d2e-form .ios2-stepper { display: flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d2e-form .ios2-stepper button { width: var(--d2-btn-h-lg); height: var(--d2-btn-h-lg); border: 1px solid var(--d2-line); border-radius: var(--d2-radius); background: #fff; font: 600 var(--d2-t-17) var(--d2-font); cursor: pointer; flex: 0 0 var(--d2-btn-h-lg); }
  html.tp-desk2 .d2e-form .ios2-stepper input { text-align: center; }
  html.tp-desk2 .d2e-form .ios2-suggest { margin-top: 6px; border: 0; background: var(--d2-pill); border-radius: 999px; height: 26px; padding: 0 10px; font: 600 var(--d2-t-12) var(--d2-font); cursor: pointer; }
  html.tp-desk2 .d2e-form .ios2-mic { display: none; }
  html.tp-desk2 .d2e-form .eod-section-grid > label:has(.ios2-scale.is-rating_10) { grid-column: 1 / -1; }
  html.tp-desk2 .d2e-form .ios2-mic svg { width: 13px; height: 13px; vertical-align: -2px; }
  html.tp-desk2 .d2e-form .ios2-ico-inline { width: 14px; height: 14px; }
  html.tp-desk2 .d2e-form .priority-input { margin-bottom: 6px; }
  html.tp-desk2 .d2e-review { display: flex; flex-direction: column; }
  html.tp-desk2 .d2e-rrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; border: 0; border-bottom: 1px solid var(--d2-line2); background: none; padding: 0; text-align: left; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d2e-rrow b { font-weight: 600; }
  html.tp-desk2 .d2e-rrow span { color: var(--d2-mute); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2e-rrow span.is-done { color: var(--d2-ink); }
  html.tp-desk2 .d2e-callout { background: #FFF8D6; border: 1px solid #F0DE8A; border-radius: 12px; padding: 12px 14px; font-size: var(--d2-t-13); line-height: 1.45; margin: 16px 0 10px; }
  html.tp-desk2 .d2e-reviewwrap { display: flex; flex-direction: column; min-height: 100%; }
  html.tp-desk2 .d2-inspector .d2e-sendbar { position: sticky; bottom: -16px; margin: auto -18px -16px; padding: 12px 18px; background: #fff; border-top: 1px solid var(--d2-line2); display: flex; gap: 8px; }
  html.tp-desk2 .d2e-sendbar .d2h-btn { height: var(--d2-btn-h-lg); }
  html.tp-desk2 .d2e-sendbar .is-primary { flex: 1 1 auto; justify-content: center; }

  /* ---- Leave --------------------------------------------------------------------------------- */
  html.tp-desk2 .d2l-bals { display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .d2l-bal { padding: 6px 0 8px; }
  html.tp-desk2 .d2l-balhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  html.tp-desk2 .d2l-balhead b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d2l-balhead span { font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2l-balhead big { font-size: var(--d2-t-26); font-weight: 700; color: var(--d2-ink); margin-right: 3px; }
  html.tp-desk2 .is-neg { color: var(--d2-red) !important; }
  html.tp-desk2 .d2l-needs { display: flex; flex-direction: column; gap: 10px; }
  html.tp-desk2 .d2l-need { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; padding: 14px 16px; cursor: pointer; }
  html.tp-desk2 .d2l-need:hover { border-color: #d6d6ce; }
  html.tp-desk2 .d2l-need.is-open,
  html.tp-desk2 .d2l-need.is-sel { border-color: var(--d2-y); box-shadow: 0 0 0 1px var(--d2-y); }
  html.tp-desk2 .d2l-needhead,
  html.tp-desk2 .d2l-who { display: flex; align-items: center; gap: 12px; }
  html.tp-desk2 .d2l-line { margin: 10px 0 0; font-size: var(--d2-t-13); color: #44443f; }
  html.tp-desk2 .d2l-clash,
  html.tp-desk2 .d2l-warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--d2-t-13); color: #94600C; }
  html.tp-desk2 .d2l-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
  html.tp-desk2 .d2l-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px; background: #fff; cursor: pointer; position: relative; border: 0; width: 100%; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2l-row:hover { background: #FAFAF7; }
  html.tp-desk2 .d2l-row.is-open,
  html.tp-desk2 .d2l-row.is-sel { background: #FFFBE6; }
  html.tp-desk2 .d2l-row.is-btn { border-bottom: 1px solid var(--d2-line2); padding-left: 0; padding-right: 0; }
  html.tp-desk2 .d2l-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; color: #55554f; }
  html.tp-desk2 .d2l-wait { font-size: var(--d2-t-12); color: #94600C; }
  html.tp-desk2 .d2l-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; }
  html.tp-desk2 .d2l-wk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; min-height: 76px; }
  html.tp-desk2 .d2l-wk span { font-size: var(--d2-t-11); color: var(--d2-mute); font-weight: 600; }
  html.tp-desk2 .d2l-wk b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d2l-wk div { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
  html.tp-desk2 .d2l-wk.is-today { background: var(--d2-pill); }
  html.tp-desk2 .d2l-wk.is-weekend { opacity: .5; }
  html.tp-desk2 .d2l-dotav { width: 24px; height: 24px; border-radius: 50%; background: #F2EBC8; border: 1.5px solid #F2EBC8; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); font-style: normal; color: #3b3b36; }
  html.tp-desk2 .d2l-dotav.is-pending { background: #fff; border: 1.5px dashed #C9A300; }
  html.tp-desk2 .d2l-wk em,
  html.tp-desk2 .d2l-cellavs em { font-size: var(--d2-t-11); color: var(--d2-mute); font-style: normal; }
  html.tp-desk2 .d2l-calbar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
  html.tp-desk2 .d2l-calbar h3 { margin: 0 4px; font-size: var(--d2-t-17); font-weight: 700; }
  html.tp-desk2 .d2l-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  html.tp-desk2 .d2l-calh { text-align: center; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); padding: 4px 0; }
  html.tp-desk2 .d2l-cell { min-height: 88px; border: 1px solid var(--d2-line); background: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2l-cell:hover { border-color: #d6d6ce; }
  html.tp-desk2 .d2l-cell.is-weekend { background: #F7F7F3; }
  html.tp-desk2 .d2l-cell.is-weekend .d2l-cellhead b,
  html.tp-desk2 .d2l-cell.is-past .d2l-cellhead b { color: #a3a39b; }
  html.tp-desk2 .d2l-cell.is-sel { border-color: var(--d2-y); box-shadow: 0 0 0 1.5px var(--d2-y); }
  html.tp-desk2 .d2l-cellhead { display: flex; align-items: center; justify-content: space-between; }
  html.tp-desk2 .d2l-cellhead b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2l-cell.is-today .d2l-cellhead b { background: var(--d2-ink); color: #fff; border-radius: 999px; padding: 1px 8px; }
  html.tp-desk2 .d2l-cellhead small { font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .d2l-cellavs { display: flex; flex-wrap: wrap; gap: 3px; }
  html.tp-desk2 .d2l-owner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: start; }
  html.tp-desk2 .d2l-balrow { display: flex; align-items: center; gap: 10px; min-height: 36px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .d2l-balrow .d2l-bname { flex: 1 1 auto; }
  html.tp-desk2 .d2l-balrow small { width: 64px; text-align: right; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .d2l-liab { display: flex; flex-direction: column; gap: 6px; background: var(--d2-bg); cursor: pointer; }
  html.tp-desk2 .d2l-liab b { font-size: var(--d2-t-26); font-weight: 700; }
  html.tp-desk2 .d2l-liablink { font-weight: 700; font-size: var(--d2-t-13); display: inline-flex; align-items: center; gap: 4px; }
  html.tp-desk2 .d2l-card { background: var(--d2-bg); border-radius: 14px; padding: 14px 16px; margin: 12px 0 6px; }
  html.tp-desk2 .d2l-card h4 { margin: 4px 0 8px; font-size: var(--d2-t-20); font-weight: 700; }
  html.tp-desk2 .d2l-balline { display: flex; justify-content: space-between; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2l-balline b { color: var(--d2-ink); }
  html.tp-desk2 .d2l-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  html.tp-desk2 .d2-bigbtn.is-wide { width: 100%; margin-top: 8px; }
  html.tp-desk2 .d2-scrim.is-doc .d2-modal { width: min(1040px, 100%); height: calc(100dvh - 64px); display: flex; flex-direction: column; }
  html.tp-desk2 .d2-scrim.is-doc .d2-sheet-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  html.tp-desk2 .d2l-doc { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; }
  html.tp-desk2 .d2l-dochead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  html.tp-desk2 .d2l-docbody { flex: 1 1 auto; min-height: 320px; background: #EDEDE7; border-radius: 12px; overflow: auto; display: flex; align-items: center; justify-content: center; }
  html.tp-desk2 .d2l-docbody img { max-width: 100%; max-height: 100%; object-fit: contain; }
  html.tp-desk2 .d2l-docbody iframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; }
  html.tp-desk2 .d2l-req { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin: -16px -20px -20px; min-height: 420px; }
  html.tp-desk2 .d2l-sum { background: var(--d2-bg); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--d2-line2); border-bottom-left-radius: 16px; }
  html.tp-desk2 .d2l-sumtitle { font-size: var(--d2-t-15); font-weight: 700; }
  html.tp-desk2 .d2l-sumbar { height: 4px; border-radius: 2px; background: #E3E3DC; margin: 4px 0 10px; overflow: hidden; }
  html.tp-desk2 .d2l-sumbar i { display: block; height: 100%; background: var(--d2-y); }
  html.tp-desk2 .d2l-sum .d2h-kick { margin-top: 6px; }
  html.tp-desk2 .d2l-sumval { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2l-sumstep { border: 0; background: none; padding: 8px 8px; margin: 0 -8px; border-radius: 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2l-sumstep:disabled { cursor: default; opacity: .55; }
  html.tp-desk2 .d2l-sumstep.is-now { background: #fff; }
  html.tp-desk2 .d2l-sumstep b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2l-sumstep small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2l-stepbox { padding: 18px 22px; display: flex; flex-direction: column; }
  html.tp-desk2 .d2l-step { flex: 1 1 auto; }
  html.tp-desk2 .d2l-step h2 { font-size: var(--d2-t-20); margin: 4px 0 14px; }
  html.tp-desk2 .d2l-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.tp-desk2 .d2l-tile { border: 1px solid var(--d2-line); background: #fff; border-radius: 12px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2l-tile b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d2l-tile span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2l-tile.is-on { border-color: var(--d2-y); box-shadow: 0 0 0 1.5px var(--d2-y); background: #FFFBE6; }
  html.tp-desk2 .d2l-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html.tp-desk2 .d2l-daycount { display: flex; align-items: center; gap: 12px; background: var(--d2-bg); border-radius: 12px; padding: 12px 14px; }
  html.tp-desk2 .d2l-daycount b { font-size: var(--d2-t-26); }
  html.tp-desk2 .d2l-daycount span { font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2l-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--d2-line); border-radius: 12px; padding: 10px 12px; }
  html.tp-desk2 .d2l-fileico { width: 36px; height: 36px; border-radius: 8px; background: #FCE4E1; color: #B0271D; font: 700 var(--d2-t-11) var(--d2-font); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
  html.tp-desk2 .d2l-drop { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 1.5px dashed #C9C9BF; border-radius: 12px; font-size: var(--d2-t-13); color: #55554f; cursor: pointer; background: #fff; }
  html.tp-desk2 .d2l-drop.is-over { border-color: var(--d2-y); background: #FFFBE6; }
  html.tp-desk2 .d2l-drop.is-busy { opacity: .6; cursor: progress; }

  /* ---- Requests: queue | conversation | details, edge to edge -------------------------------- */
  html.tp-desk2[data-d2-view="requests"] .app-main { padding: 0; }
  html.tp-desk2 .d2p-requests { max-width: none; }
  html.tp-desk2 .d2r-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100dvh - var(--d2-top)); background: #fff; }
  html.tp-desk2 #d2-viewas-banner:not([hidden]) ~ #main-content .d2r-grid { height: calc(100dvh - var(--d2-top) - 41px); }
  html.tp-desk2 .d2r-queue { border-right: 1px solid var(--d2-line); background: var(--d2-bg); overflow-y: auto; padding: 14px 14px 20px; min-height: 0; }
  html.tp-desk2 .d2r-qbar { display: flex; gap: 6px; margin-bottom: 10px; }
  html.tp-desk2 .d2r-qbar .d2t-search { max-width: none; }
  html.tp-desk2 .d2r-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 4px; padding: 0 14px 4px; }
  html.tp-desk2 .d2r-chips .d2t-chip { flex: 0 0 auto; }
  html.tp-desk2 .d2r-group h3 { margin: 14px 2px 6px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d2r-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; cursor: pointer; background: #fff; position: relative; }
  html.tp-desk2 .d2r-row:hover { background: #FAFAF7; }
  html.tp-desk2 .d2r-row.is-open,
  html.tp-desk2 .d2r-row.is-sel { background: #FFFBE6; }
  html.tp-desk2 .d2r-logo { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); color: #3b3b36; }
  html.tp-desk2 .d2r-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
  html.tp-desk2 .d2r-trail small { font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .d2r-prod { display: inline-flex; height: 18px; align-items: center; padding: 0 6px; border-radius: 5px; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .06em; background: #E8EEF9; color: #2D5A9A; margin-right: 6px; }
  html.tp-desk2 .d2r-trail .d2r-prod { margin-right: 0; }
  html.tp-desk2 .d2r-prod.is-blncd { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d2r-prod.is-wrkfrce { background: #FFF1D6; color: #94600C; }
  html.tp-desk2 .d2r-prod.is-aiassist { background: #EFEAF8; color: #5B3C9A; }
  html.tp-desk2 .d2r-unclaimed { width: 100%; display: flex; align-items: center; gap: 12px; border: 1px solid #EBD77A; background: var(--d2-pill); border-radius: 14px; padding: 10px 12px; margin: 8px 0 4px; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2r-scope { margin-top: 12px; }
  html.tp-desk2 .d2r-open { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .d2r-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--d2-mute); font-size: var(--d2-t-13); text-align: center; padding: 24px; }
  html.tp-desk2 .d2r-empty p { margin: 0; }
  html.tp-desk2 .d2r-frame { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1 1 auto; min-height: 0; height: 100%; }
  html.tp-desk2 .d2r-convo { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--d2-line); }
  html.tp-desk2 .d2r-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2r-head > div { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d2r-kick { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2r-kick b { color: var(--d2-ink); }
  html.tp-desk2 .d2r-head h2 { margin: 4px 0 0; font-size: var(--d2-t-20); font-weight: 700; line-height: 1.25; }
  html.tp-desk2 .d2r-detailsbtn { display: none; }
  html.tp-desk2 .d2r-band { display: flex; align-items: center; gap: 8px; padding: 9px 20px; background: var(--d2-y); color: #000; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2r-band[hidden] { display: none; }
  html.tp-desk2 .d2r-scroll { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 0; background: #FCFCFA; }
  html.tp-desk2 .d2r-event { display: flex; align-items: center; gap: 10px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2r-event::before,
  html.tp-desk2 .d2r-event::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--d2-line); }
  html.tp-desk2 .d2r-msg { max-width: 72%; align-self: flex-start; display: flex; flex-direction: column; gap: 3px; }
  html.tp-desk2 .d2r-msg p { margin: 0; padding: 10px 13px; border-radius: 16px; background: #fff; border: 1px solid var(--d2-line); font-size: var(--d2-t-13); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .d2r-who { font-size: var(--d2-t-12); color: var(--d2-mute); padding: 0 4px; }
  html.tp-desk2 .d2r-msg.is-team,
  html.tp-desk2 .d2r-msg.is-internal { align-self: flex-end; align-items: flex-end; }
  html.tp-desk2 .d2r-msg.is-team p { background: var(--d2-ink); color: #fff; border-color: var(--d2-ink); }
  html.tp-desk2 .d2r-msg.is-internal p { background: #FFF8D6; border: 1.5px dashed #D9B400; color: var(--d2-ink); }
  html.tp-desk2 .d2r-msg.is-internal p svg { vertical-align: -2px; }
  html.tp-desk2 .d2r-compose { border-top: 1px solid var(--d2-line2); padding: 10px 20px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .d2r-compose.is-ro p { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .d2r-modes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  html.tp-desk2 .d2r-mode { margin: 0; }
  html.tp-desk2 .d2r-mode button { height: var(--d2-btn-h-sm); display: inline-flex; align-items: center; gap: 5px; }
  html.tp-desk2 .d2r-dest { margin: 0; font-size: var(--d2-t-12); color: var(--d2-mute); display: flex; align-items: center; gap: 5px; }
  html.tp-desk2 .d2r-dest[hidden],
  html.tp-desk2 .d2r-intline[hidden] { display: none; }
  html.tp-desk2 .d2r-intline { margin: 0; font-size: var(--d2-t-13); color: #6B5200; display: flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d2r-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.tp-desk2 .d2r-cbox { display: flex; align-items: flex-end; gap: 10px; }
  html.tp-desk2 .d2r-cbox textarea { flex: 1 1 auto; min-height: 64px; max-height: 200px; resize: vertical; border: 1px solid var(--d2-line); border-radius: 14px; padding: 10px 13px; font: 400 var(--d2-t-13) var(--d2-font); background: #fff; }
  html.tp-desk2 .d2r-cbox .d2h-btn { height: var(--d2-btn-h-lg); padding: 0 14px; font-size: var(--d2-t-13); }
  /* Internal note: four signals at once, so it can't be missed. */
  html.tp-desk2 .d2r-frame.is-internal .d2r-compose { background: #FFF8D6; border-top: 3px solid var(--d2-y); }
  html.tp-desk2 .d2r-frame.is-internal .d2r-cbox textarea { border: 1.5px dashed #C9A300; background: #FFFCEB; }
  html.tp-desk2 .d2r-details { overflow-y: auto; padding: 14px 18px 20px; min-height: 0; background: #fff; }
  html.tp-desk2 .d2r-dhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
  html.tp-desk2 .d2r-dclose { display: none; }
  html.tp-desk2 .d2r-strow { display: flex; align-items: center; justify-content: space-between; min-height: 40px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2r-strow > span { color: var(--d2-mute); }
  html.tp-desk2 .d2r-stbtn { cursor: pointer; height: 26px; }
  html.tp-desk2 .d2r-stbtn:disabled { cursor: default; }
  html.tp-desk2 .d2r-sthelp { margin: 0 0 8px; }
  html.tp-desk2 .d2r-stmenu { border: 1px solid var(--d2-line); border-radius: 12px; overflow: hidden; margin: 0 0 10px; box-shadow: var(--d2-shadow); }
  html.tp-desk2 .d2r-stmenu[hidden] { display: none; }
  html.tp-desk2 .d2r-stopt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-top: 1px solid var(--d2-line2); background: #fff; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2r-stopt:first-child { border-top: 0; }
  html.tp-desk2 .d2r-stopt:hover { background: #FAFAF7; }
  html.tp-desk2 .d2r-stopt span { flex: 1 1 auto; display: flex; flex-direction: column; }
  html.tp-desk2 .d2r-stopt b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2r-stopt small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2r-stdot { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c1; flex: 0 0 9px; }
  html.tp-desk2 .d2r-stdot.is-triaged { background: var(--d2-y); }
  html.tp-desk2 .d2r-stdot.is-in_progress { background: #3B7BE0; }
  html.tp-desk2 .d2r-stdot.is-blocked { background: var(--d2-red); }
  html.tp-desk2 .d2r-stdot.is-done { background: var(--d2-green); }
  html.tp-desk2 .d2r-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; border-top: 1px solid var(--d2-line2); padding: 6px 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2r-field > span { color: var(--d2-mute); flex: 1 0 100%; font-size: var(--d2-t-12); display: flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d2r-field select,
  html.tp-desk2 .d2r-field input { flex: 1 1 140px; min-width: 0; height: 34px; border: 1px solid var(--d2-line); border-radius: 10px; padding: 0 10px; font: 400 var(--d2-t-13) var(--d2-font); background: #fff; }
  html.tp-desk2 .d2r-prog { list-style: none; margin: 0; padding: 0; font-size: var(--d2-t-13); color: var(--d2-mute); display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .d2r-prog b { color: var(--d2-ink); }
}
@media (min-width: 769px) and (max-width: 1280px) {
  /* Narrower windows: the details pane opens over the conversation when asked. */
  html.tp-desk2 .d2r-frame { grid-template-columns: minmax(0, 1fr); position: relative; }
  html.tp-desk2 .d2r-detailsbtn { display: inline-flex; }
  html.tp-desk2 .d2r-details { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 90%); box-shadow: -12px 0 32px rgba(0, 0, 0, .14); z-index: 5; }
  html.tp-desk2 .d2r-grid.is-details .d2r-details { display: block; }
  html.tp-desk2 .d2r-dclose { display: inline-flex; }
  html.tp-desk2 .d2r-grid { grid-template-columns: 320px minmax(0, 1fr); }
  html.tp-desk2 .d2e-top,
  html.tp-desk2 .d2e-cols,
  html.tp-desk2 .d2l-owner { grid-template-columns: minmax(0, 1fr); }
}

/* ---- iPad: the same pages at 44pt, swipe on rows, EOD as a stepped sheet ------------------------ */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d2t-row,
  html.tp-ipad.tp-desk2 .d2r-row,
  html.tp-ipad.tp-desk2 .d2l-row,
  html.tp-ipad.tp-desk2 .d2e-hrow,
  html.tp-ipad.tp-desk2 .d2e-prow { min-height: 60px; }
  html.tp-ipad.tp-desk2 .d2t-check { width: 44px; height: 44px; flex-basis: 44px; margin: -8px; border: 10px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1.5px #bdbdb4; }
  html.tp-ipad.tp-desk2 .d2t-check.is-done { border-color: transparent; box-shadow: none; background: var(--d2-green); width: 28px; height: 28px; flex-basis: 28px; margin: 0; }
  html.tp-ipad.tp-desk2 .d2t-search { height: 44px; }
  html.tp-ipad.tp-desk2 .d2t-seg button,
  html.tp-ipad.tp-desk2 .d2t-status button,
  html.tp-ipad.tp-desk2 .d2r-mode button { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d2t-chip { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d2h-btn.is-icon { width: 44px; }
  html.tp-ipad.tp-desk2 .d2t-field,
  html.tp-ipad.tp-desk2 .d2e-kv,
  html.tp-ipad.tp-desk2 .d2e-rrow,
  html.tp-ipad.tp-desk2 .d2e-step,
  html.tp-ipad.tp-desk2 .d2r-stopt { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2t-danger,
  html.tp-ipad.tp-desk2 .d2t-ask,
  html.tp-ipad.tp-desk2 .d2r-stbtn,
  html.tp-ipad.tp-desk2 .d2e-daypick { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2r-field select,
  html.tp-ipad.tp-desk2 .d2r-field input,
  html.tp-ipad.tp-desk2 .d2l-cell { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2r-field select,
  html.tp-ipad.tp-desk2 .d2r-field input { height: 44px; }
  html.tp-ipad.tp-desk2 .d2l-cell { min-height: 76px; }
  /* reveal-and-tap swipe rows (never full-swipe), as the iOS app */
  html.tp-ipad.tp-desk2 .ios2-swipe { position: relative; overflow: hidden; }
  html.tp-ipad.tp-desk2 .ios2-swipe-acts { position: absolute; top: 0; bottom: 0; display: flex; }
  html.tp-ipad.tp-desk2 .ios2-swipe-acts.is-left { left: 0; }
  html.tp-ipad.tp-desk2 .ios2-swipe-acts.is-right { right: 0; }
  html.tp-ipad.tp-desk2 .ios2-swipe-main { position: relative; background: #fff; transition: transform .2s; z-index: 1; }
  html.tp-ipad.tp-desk2 .d2t-act { min-width: 84px; border: 0; color: #fff; font: 600 var(--d2-t-15) var(--d2-font); cursor: pointer; }
  html.tp-ipad.tp-desk2 .d2t-act.is-start { background: #3B7BE0; }
  html.tp-ipad.tp-desk2 .d2t-act.is-blocked { background: var(--d2-red); }
  html.tp-ipad.tp-desk2 .d2t-act.is-done { background: var(--d2-green); }
  html.tp-ipad.tp-desk2 .d2t-act.is-mine { background: var(--d2-ink); }
  /* EOD: a stepped sheet */
  html.tp-ipad.tp-desk2 .d2-scrim.is-tall .d2-modal { width: min(720px, 100%); height: calc(100dvh - 64px); display: flex; flex-direction: column; }
  html.tp-ipad.tp-desk2 .d2-scrim.is-tall .d2-sheet-body { flex: 1 1 auto; overflow-y: auto; }
  html.tp-ipad.tp-desk2 .d2e-steps .eod-card:not(.d2e-step-on) { display: none; }
  html.tp-ipad.tp-desk2 .d2e-steps .d2e-sum,
  html.tp-ipad.tp-desk2 .d2e-steps .d2e-next,
  html.tp-ipad.tp-desk2 .d2e-steps .eod-section-heading { display: none !important; }
  html.tp-ipad.tp-desk2 .d2e-steps .eod-card { border: 0; padding: 0; }
  html.tp-ipad.tp-desk2 .d2e-steps .eod-card.d2e-current { box-shadow: none; }
  html.tp-ipad.tp-desk2 .d2e-steps .ios2-scale button { height: 56px; font-size: var(--d2-t-17); }
  html.tp-ipad.tp-desk2 .d2e-steps .ios2-mic { display: block; font-size: var(--d2-t-12); color: var(--d2-mute); margin: 6px 0 0; }
  html.tp-ipad.tp-desk2 .d2e-steps .ios2-scale.is-yes_no { width: 100%; }
  html.tp-ipad.tp-desk2 .d2e-steps .ios2-scale.is-yes_no button { height: 44px; }
  html.tp-ipad.tp-desk2 .d2e-steps .ios2-stepper button { width: 44px; height: 44px; flex-basis: 44px; }
  html.tp-ipad.tp-desk2 .d2e-steps .eod-section-grid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2e-prog { display: flex; gap: 4px; margin: 0 0 12px; }
  html.tp-ipad.tp-desk2 .d2e-prog i { flex: 1 1 0; height: 4px; border-radius: 2px; background: #E3E3DC; }
  html.tp-ipad.tp-desk2 .d2e-prog i.is-done { background: var(--d2-ink); }
  html.tp-ipad.tp-desk2 .d2e-prog i.is-now { background: var(--d2-y); }
  html.tp-ipad.tp-desk2 .d2e-stephead h2 { font-size: var(--d2-t-20); margin: 4px 0 14px; }
  html.tp-ipad.tp-desk2 .d2e-stepbtns { display: flex; gap: 8px; justify-content: space-between; position: sticky; bottom: -20px; background: #fff; padding: 12px 0 4px; margin-top: 16px; border-top: 1px solid var(--d2-line2); }
  html.tp-ipad.tp-desk2 .d2e-stepbtns .is-primary { flex: 1 1 auto; justify-content: center; }
  /* Requests on iPad: queue and conversation side by side; details as a popover from the header. */
  html.tp-ipad.tp-desk2 .d2r-grid { grid-template-columns: 300px minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2r-frame { grid-template-columns: minmax(0, 1fr); position: relative; }
  html.tp-ipad.tp-desk2 .d2r-detailsbtn { display: inline-flex; }
  html.tp-ipad.tp-desk2 .d2r-details { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 90%); box-shadow: -12px 0 32px rgba(0, 0, 0, .14); z-index: 5; }
  html.tp-ipad.tp-desk2 .d2r-grid.is-details .d2r-details { display: block; }
  html.tp-ipad.tp-desk2 .d2r-dclose { display: inline-flex; width: 44px; height: 44px; }
  html.tp-ipad.tp-desk2 .d2l-req { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d2r-grid { grid-template-columns: 280px minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2e-top,
  html.tp-ipad.tp-desk2 .d2e-cols,
  html.tp-ipad.tp-desk2 .d2l-owner { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2t-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d2l-req { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d2l-sum { display: none; }
  html.tp-ipad.tp-desk2 .d2l-cell { min-height: 64px; padding: 6px; }
}

/* ============================================================================
   Desktop D3: people (Team & people, Coaching and My coaching, Payroll,
   Knowledge, Compliance). Same rule: every selector starts with html.tp-desk2
   or html.tp-ipad, and layout lives inside min-width: 769px, where the new
   shell is shown. Each page renders at the top of its own <section> (.d2-on)
   and today's markup beneath it hides. The Compliance DM panes stay today's,
   shown under the page when their segment is on (.d3-show).
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-team.d2-on > :not(#d2-team-page),
  html.tp-desk2 #view-coaching.d2-on > :not(#d2-coaching-page),
  html.tp-desk2 #view-payroll.d2-on > :not(#d2-payroll-page),
  html.tp-desk2 #view-knowledge.d2-on > :not(#d2-knowledge-page),
  html.tp-desk2 #view-compliance.d2-on > :not(#d2-compliance-page):not(.d3-show) { display: none !important; }
  html.tp-desk2 #view-compliance.d2-on > .d3-show { display: block !important; margin-top: 14px; }
  /* A member's My coaching: today's markup (#coaching-member) steps aside for the new page. */
  html.tp-desk2 #view-coaching.d2-on.coaching-member-mode > #d2-coaching-page { display: block !important; }
  html.tp-desk2 #view-coaching.d2-on.coaching-member-mode > #coaching-member { display: none !important; }
  html.tp-desk2 #view-compliance.d2-on > .d3-show .compliance-section-header { display: none; }

  html.tp-desk2 .d3-page { max-width: 1240px; }
  html.tp-desk2.d2-insp-open .d3-page { max-width: none; }
  html.tp-desk2 .d3-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; min-height: 36px; }
  html.tp-desk2 .d3-grow { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d3-seg { margin: 0; }
  html.tp-desk2 .d3-seg button { height: var(--d2-btn-h-sm); font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-seg.is-small button { padding: 0 10px; min-width: 32px; }
  html.tp-desk2 .d3-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
  html.tp-desk2 .d3-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: calc(var(--d2-top) + 16px); max-height: calc(100dvh - var(--d2-top) - 48px); overflow-y: auto; padding: 2px 2px 12px; }
  html.tp-desk2 .d3-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d3-side > *,
  html.tp-desk2 .d3-main > * { flex-shrink: 0; }
  html.tp-desk2 .d3-search { max-width: none; flex: 0 0 auto; }
  html.tp-desk2 .d3-side .d2t-chips { margin: 0; }
  html.tp-desk2 .d3-kick,
  html.tp-desk2 .d3-page .d2h-kick { font: 700 var(--d2-t-11)/1.3 var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
  html.tp-desk2 .d3-h { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: var(--d2-t-15); font-weight: 700; }
  html.tp-desk2 .d3-h .d2h-link { margin-left: auto; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-h.is-alert { color: var(--d2-red); }
  html.tp-desk2 .d3-foot { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 4px 2px; }
  html.tp-desk2 .d3-meta { font-size: var(--d2-t-13); color: var(--d2-mute); margin: 0 2px; }
  html.tp-desk2 .d3-note { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 8px 0; line-height: 1.45; }
  html.tp-desk2 .d3-text { font-size: var(--d2-t-13); line-height: 1.5; white-space: pre-wrap; margin: 0 0 12px; }
  html.tp-desk2 .d3-empty { text-align: center; color: var(--d2-mute); padding: 36px 16px; font-size: var(--d2-t-13); background: #fff; border: 1px dashed var(--d2-line); border-radius: 16px; }
  html.tp-desk2 .d3-empty p { margin: 8px 0 12px; }
  html.tp-desk2 .d3-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--d2-soft); font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-ink); white-space: nowrap; flex: 0 0 auto; }
  html.tp-desk2 .d3-pill.is-good,
  html.tp-desk2 .d3-pill.is-pay-paid { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d3-pill.is-bad,
  html.tp-desk2 .d3-pill.is-pay-failed { background: #FBE7E5; color: #B42D23; }
  html.tp-desk2 .d3-pill.is-amber,
  html.tp-desk2 .d3-pill.is-pay-approved { background: #FFF1C2; color: #7A5B00; }
  html.tp-desk2 .d3-pill.is-blue,
  html.tp-desk2 .d3-pill.is-pay-reviewed { background: #E6EEF8; color: #2D5A9A; }
  html.tp-desk2 .d3-pill.is-dark { background: var(--d2-ink); color: #fff; }
  html.tp-desk2 .d3-tag { display: inline-flex; height: 18px; align-items: center; padding: 0 6px; border-radius: 5px; background: var(--d2-pill); color: #6b5200; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .06em; text-transform: uppercase; }
  html.tp-desk2 .d3-danger { border: 0; background: none; color: var(--d2-red); font: 500 var(--d2-t-13) var(--d2-font); cursor: pointer; padding: 5px 6px; border-radius: var(--d2-radius); min-height: var(--d2-btn-h); text-align: left; }
  html.tp-desk2 .d3-danger:hover { background: #FDF1F0; }
  html.tp-desk2 .d3-danger.is-small { font-size: var(--d2-t-12); margin-left: auto; }
  html.tp-desk2 .d3-dangers { display: flex; gap: 24px; padding: 4px 4px 12px; }
  html.tp-desk2 .d3-row-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  html.tp-desk2 .d3-bignum { font-size: var(--d2-t-26); font-weight: 700; letter-spacing: -.02em; margin: 2px 0 4px; line-height: 1.1; }
  html.tp-desk2 .d3-bignum small { font-size: var(--d2-t-13); font-weight: 500; color: var(--d2-mute); letter-spacing: 0; }
  html.tp-desk2 .d3-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 14px; }
  html.tp-desk2 .d3-kv { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-kv > span { color: var(--d2-mute); }
  html.tp-desk2 .d3-kv > b { font-weight: 600; overflow-wrap: anywhere; }
  html.tp-desk2 .d3-kv .is-bad { color: var(--d2-red); }
  html.tp-desk2 .d3-kvbox { background: var(--d2-bg); border-radius: 14px; padding: 8px 14px; margin: 10px 0 14px; }
  html.tp-desk2 .d3-lock { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: var(--d2-t-12); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d3-prog { display: block; height: 6px; border-radius: 3px; background: #ECECE5; overflow: hidden; flex: 0 0 90px; }
  html.tp-desk2 .d3-prog > i { display: block; height: 100%; border-radius: 3px; background: var(--d2-green); }
  html.tp-desk2 .d3-prog.is-wide { flex: 0 0 160px; }
  html.tp-desk2 .d3-prog.is-wide > i { background: var(--d2-y); }
  html.tp-desk2 .d3-prog.is-done > i { background: var(--d2-green); }
  html.tp-desk2 .d3-bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: var(--d2-t-12); padding: 3px 0; }
  html.tp-desk2 .d3-bar-row.is-wide { grid-template-columns: 130px minmax(0, 1fr) 52px; }
  html.tp-desk2 .d3-bar-row > span { color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d3-bar-row > b { text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d3-bar-row .d3-prog { flex: none; }

  /* rows (buttons) */
  html.tp-desk2 .d3-prow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; background: #fff; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); position: relative; }
  html.tp-desk2 .d3-prow + .d3-prow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-prow:hover { background: #FAFAF7; }
  html.tp-desk2 .d3-prow.is-static { cursor: default; min-height: 48px; }
  html.tp-desk2 .d3-prow.is-sel,
  html.tp-desk2 .d3-prow.is-open { background: #FFFBE6; }
  html.tp-desk2 .d3-prow.is-open::before,
  html.tp-desk2 .d3-krow.is-open::before,
  html.tp-desk2 .d3-trow.is-open > td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--d2-y); }
  html.tp-desk2 .d3-pmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html.tp-desk2 .d3-pmain > b { font-size: var(--d2-t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d3-pmain > span { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d3-pmain > span.is-bad { color: var(--d2-red); }
  html.tp-desk2 .d3-avwrap { position: relative; display: inline-flex; flex: 0 0 auto; }
  html.tp-desk2 .d3-sdot { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c1; display: inline-block; flex: 0 0 9px; }
  html.tp-desk2 .d3-avwrap .d3-sdot { position: absolute; right: -1px; bottom: -1px; border: 2px solid #fff; box-sizing: content-box; }
  html.tp-desk2 .d3-sdot.is-working { background: var(--d2-green); }
  html.tp-desk2 .d3-sdot.is-on_break { background: var(--d2-amber); }
  html.tp-desk2 .d3-sdot.is-on_leave { background: #4A6FA5; }
  html.tp-desk2 .d3-score { min-width: 30px; height: 22px; padding: 0 7px; border-radius: 7px; font: 700 var(--d2-t-12)/22px var(--d2-font); text-align: center; background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d3-score.is-ok { background: #FFF1C2; color: #7A5B00; }
  html.tp-desk2 .d3-score.is-low { background: #FBE7E5; color: #B42D23; }
  html.tp-desk2 .d2t-av.d3-av-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d2t-av.d3-av-xl { width: 64px; height: 64px; flex-basis: 64px; font-size: var(--d2-t-20); }

  /* tables */
  html.tp-desk2 .d3-tablewrap { overflow-x: auto; }
  html.tp-desk2 .d3-table { width: 100%; border-collapse: collapse; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-table th { text-align: left; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); padding: 12px 10px; border-bottom: 1px solid var(--d2-line); white-space: nowrap; }
  html.tp-desk2 .d3-table td { padding: 10px; border-top: 1px solid var(--d2-line2); vertical-align: middle; }
  html.tp-desk2 .d3-table tr:first-child td { border-top: 0; }
  html.tp-desk2 .d3-table .d3-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.tp-desk2 .d3-table .d3-num small { color: var(--d2-mute); font-size: var(--d2-t-11); }
  html.tp-desk2 .d3-table .is-good { color: #17753A; }
  html.tp-desk2 .d3-table .is-low { color: #B42D23; }
  html.tp-desk2 .d3-table .is-mute,
  html.tp-desk2 .d3-table .d3-mute { color: var(--d2-mute); }
  html.tp-desk2 .d3-trow { cursor: pointer; }
  html.tp-desk2 .d3-trow > td:first-child { position: relative; }
  html.tp-desk2 .d3-trow:hover { background: #FAFAF7; }
  html.tp-desk2 .d3-trow.is-open,
  html.tp-desk2 .d3-trow.is-picked { background: #FFFBE6; }
  html.tp-desk2 .d3-tperson { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  html.tp-desk2 .d3-tperson .d3-pill { margin-left: 2px; }
  html.tp-desk2 .d3-clip { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* inspector bits */
  html.tp-desk2 .d3-insp { display: flex; flex-direction: column; min-height: 100%; font-family: var(--d2-font); }
  html.tp-desk2 .d3-ihead { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
  html.tp-desk2 .d3-ihead > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .d3-ihead b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d3-ifoot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 14px; margin-top: auto; }
  html.tp-desk2 .d3-ifoot.is-stack { flex-direction: column; align-items: stretch; }
  html.tp-desk2 .d3-ifoot.is-stack .d2h-btn { justify-content: center; }
  html.tp-desk2 .d3-ifoot.is-stack .d3-danger { text-align: center; }
  html.tp-desk2 .d3-ifoot.is-stick { position: sticky; bottom: -16px; background: #fff; padding-bottom: 12px; }
  html.tp-desk2 .d3-ifoot.is-stick .d2h-btn.is-big { flex: 1 1 auto; justify-content: center; }
  html.tp-desk2 .d3-owner-note { display: flex; gap: 8px; align-items: flex-start; background: var(--d2-bg); border-radius: 12px; padding: 10px 12px; font-size: var(--d2-t-13); color: #44443f; margin-top: 12px; }
  html.tp-desk2 .d3-menu { padding: 6px; }
  html.tp-desk2 .d3-menu-item { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); text-align: left; }
  html.tp-desk2 .d3-menu-item span { flex: 1 1 auto; display: flex; flex-direction: column; }
  html.tp-desk2 .d3-menu-item small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-menu-item:hover,
  html.tp-desk2 .d3-menu-item:focus-visible { background: var(--d2-pill); outline: none; }
  html.tp-desk2 .d3-menu-item.is-danger { color: var(--d2-red); }
  html.tp-desk2 .d3-menu-sep { height: 1px; background: var(--d2-line2); margin: 4px 0; }
  html.tp-desk2 .d3-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--d2-t-13); color: var(--d2-mute); margin: 12px 0 0; }
  html.tp-desk2 .d3-field input { height: 38px; border: 1px solid var(--d2-line); border-radius: 10px; padding: 0 10px; font: 400 var(--d2-t-15) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-li-form .d3-seg { display: flex; flex-wrap: wrap; }

  /* ---- Team ---- */
  html.tp-desk2 .d3-wait { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; overflow: hidden; }
  html.tp-desk2 .d3-wait-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
  html.tp-desk2 .d3-wait-row + .d3-wait-row { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-wait-main { flex: 1 1 auto; min-width: 0; border: 0; background: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; font-family: var(--d2-font); color: var(--d2-ink); padding: 0; }
  html.tp-desk2 .d3-wait-main span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-phead { display: flex; align-items: center; gap: 18px; }
  html.tp-desk2 .d3-phead-main { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d3-phead-main h2 { margin: 0; font-size: var(--d2-t-20); letter-spacing: -.01em; }
  html.tp-desk2 .d3-phead-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  html.tp-desk2 .d3-status { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
  html.tp-desk2 .d3-card { padding: 14px 16px; }
  html.tp-desk2 .d3-goal { font-size: var(--d2-t-15); font-weight: 600; margin: 0 0 6px; line-height: 1.35; }
  html.tp-desk2 .d3-goal.is-big { font-size: var(--d2-t-20); }

  /* ---- Coaching ---- */
  html.tp-desk2 .d3-frow { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 0; }
  html.tp-desk2 .d3-frow + .d3-frow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-frow-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 0 6px 14px; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-duecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.tp-desk2 .d3-duecard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--d2-line); border-radius: 14px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); text-align: left; }
  html.tp-desk2 .d3-duecard b { font-size: var(--d2-t-13); margin-top: 4px; }
  html.tp-desk2 .d3-duecard span { font-size: var(--d2-t-12); }
  html.tp-desk2 .d3-duecard .is-bad { color: var(--d2-red); }
  html.tp-desk2 .d3-fresh { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--d2-green); }
  html.tp-desk2 .d3-fresh.is-warn { background: var(--d2-amber); }
  html.tp-desk2 .d3-fresh.is-bad { background: var(--d2-red); }
  html.tp-desk2 .d3-mhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  html.tp-desk2 .d3-mhead h2 { margin: 0; font-size: var(--d2-t-20); letter-spacing: -.01em; }
  html.tp-desk2 .d3-goalrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
  html.tp-desk2 .d3-goalhead { display: flex; align-items: center; justify-content: space-between; }
  html.tp-desk2 .d3-minis { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; align-items: center; }
  html.tp-desk2 .d3-minis b { display: block; font-size: var(--d2-t-26); }
  html.tp-desk2 .d3-minis > div { min-width: 0; }
  html.tp-desk2 .d3-minis span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-timeline { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 22px; }
  html.tp-desk2 .d3-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--d2-line); }
  html.tp-desk2 .d3-cnote { position: relative; background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; overflow: hidden; }
  html.tp-desk2 .d3-cnote::before { content: ''; position: absolute; left: -20px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #c9c9c1; }
  html.tp-desk2 .d3-timeline .d3-cnote { overflow: visible; }
  html.tp-desk2 .d3-timeline .d3-cnote:first-child::before { background: var(--d2-y); }
  html.tp-desk2 .d3-cnote.is-open { border-color: var(--d2-y); box-shadow: 0 0 0 1px var(--d2-y); }
  html.tp-desk2 .d3-note-main { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; font-family: var(--d2-font); color: var(--d2-ink); border-radius: 16px; }
  html.tp-desk2 .d3-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-note-vis { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-note-who { color: var(--d2-mute); }
  html.tp-desk2 .d3-note-body { font-size: var(--d2-t-13); line-height: 1.45; margin: 0; white-space: pre-wrap; }
  html.tp-desk2 .d3-follow { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 8px 10px 8px 12px; border-radius: 12px; background: #FFFBE6; border: 1px solid #F3E3A0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-follow > span { flex: 1 1 auto; }
  html.tp-desk2 .d3-follow.is-bad { background: #FFF6E0; }
  html.tp-desk2 .d3-mycoach { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  html.tp-desk2 .d3-mycoach-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  html.tp-desk2 .d3-mynote .d3-note-body { margin-top: 8px; }
  html.tp-desk2 .d3-about h3 { margin: 0 0 8px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d3-about p { font-size: var(--d2-t-13); line-height: 1.5; margin: 0 0 10px; }

  /* ---- Payroll ---- */
  html.tp-desk2 .d3-period { font-size: var(--d2-t-13); height: var(--d2-btn-h); }
  html.tp-desk2 .d3-paysum { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 24px; align-items: center; margin: 0 0 12px; }
  html.tp-desk2 .d3-paybar { display: flex; gap: 3px; height: 10px; }
  html.tp-desk2 .d3-paybar i,
  html.tp-desk2 .d3-legend i { display: block; border-radius: 3px; background: #8a8a8a; }
  html.tp-desk2 .d3-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-legend span { display: inline-flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d3-legend i { width: 10px; height: 10px; }
  html.tp-desk2 .d3-paybar .is-reviewed,
  html.tp-desk2 .d3-legend .is-reviewed { background: #3d6ea5; }
  html.tp-desk2 .d3-paybar .is-approved,
  html.tp-desk2 .d3-legend .is-approved { background: #e0b400; }
  html.tp-desk2 .d3-paybar .is-paid,
  html.tp-desk2 .d3-legend .is-paid { background: #2e9e5b; }
  html.tp-desk2 .d3-paybar .is-failed,
  html.tp-desk2 .d3-legend .is-failed { background: #c0392b; }
  html.tp-desk2 .d3-adminnote { font-size: var(--d2-t-13); color: #6B4B08; margin: 10px 0 0; }
  html.tp-desk2 .d3-failcard { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: #FDF1F0; border: 1px solid #F1C4C0; color: #8E241C; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-failcard > span { flex: 1 1 auto; }
  html.tp-desk2 .d3-pickcol { width: 36px; }
  html.tp-desk2 .d3-paytable .d2t-pick { opacity: 1; }
  html.tp-desk2 .d3-page.has-bulk { padding-bottom: 76px; }
  html.tp-desk2 .d3-bulkbar {
    position: fixed; left: calc(var(--d2-side) + 28px); right: 28px; bottom: 16px; z-index: 25; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; padding: 10px 12px 10px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); font-size: var(--d2-t-13); color: #44443f;
  }
  html.tp-desk2.d2-side-collapsed .d3-bulkbar { left: 28px; }
  html.tp-desk2.d2-insp-open .d3-bulkbar { right: 388px; }
  html.tp-desk2 .d3-bulkbar b { color: var(--d2-ink); }
  html.tp-desk2 .d3-rnum { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-rnum small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-prow .d3-pmain .d3-prog { margin-top: 6px; width: 160px; flex: none; }
  html.tp-desk2 .d3-failband { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #FDF1F0; color: #8E241C; font-size: var(--d2-t-13); margin: 0 0 10px; }
  html.tp-desk2 .d3-ihead .d3-pill { margin-left: auto; }
  html.tp-desk2 .d3-lis { display: flex; flex-direction: column; border: 1px solid var(--d2-line); border-radius: 14px; padding: 4px 12px; margin: 0 0 12px; }
  html.tp-desk2 .d3-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  html.tp-desk2 .d3-li + .d3-li { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-lis .d2h-link { margin: 4px 0; white-space: normal; text-align: left; color: #7A5B00; }
  html.tp-desk2 .d3-net { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; padding: 6px 0 12px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-net .d2h-kick { margin: 0 auto 0 0; }
  html.tp-desk2 .d3-net b { font-size: var(--d2-t-26); }
  html.tp-desk2 .d3-net small { color: var(--d2-mute); font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-bankbtn { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 12px 0; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-bankbtn > span { flex: 1 1 auto; display: flex; flex-direction: column; }
  html.tp-desk2 .d3-bankbtn small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-bank { border: 1px solid var(--d2-line); border-radius: 14px; padding: 10px 14px; margin: 12px 0; }
  html.tp-desk2 .d3-tsrows { display: flex; flex-direction: column; border: 1px solid var(--d2-line); border-radius: 14px; overflow: hidden; }
  html.tp-desk2 .d3-tsrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr 52px; gap: 8px; padding: 8px 12px; align-items: center; font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-tsrow + .d3-tsrow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-tsrow.is-head { background: var(--d2-bg); font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); }
  html.tp-desk2 .d3-tsrow > span { display: flex; flex-direction: column; }
  html.tp-desk2 .d3-tsrow small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-tsrow small.is-bad { color: var(--d2-red); }

  /* ---- Knowledge ---- */
  html.tp-desk2 .d3-know { grid-template-columns: 220px minmax(0, 1fr); }
  html.tp-desk2 .d3-cats { display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .d3-cat { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); text-align: left; }
  html.tp-desk2 .d3-cat span { flex: 1 1 auto; }
  html.tp-desk2 .d3-cat b { font-size: var(--d2-t-12); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d3-cat:hover { background: #fff; }
  html.tp-desk2 .d3-cat.is-on { background: var(--d2-pill); font-weight: 700; }
  html.tp-desk2 .d3-tofinish { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px; }
  html.tp-desk2 .d3-tofinish .d3-pmain > span,
  html.tp-desk2 .d3-tofinish .d3-pmain > b { white-space: normal; }
  html.tp-desk2 .d3-ring { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--d2-y) calc(var(--p) * 1%), #ECECE5 0); position: relative; }
  html.tp-desk2 .d3-ring > span { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); }
  html.tp-desk2 .d3-kgroup { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  html.tp-desk2 .d3-krow { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; background: #fff; }
  html.tp-desk2 .d3-krow + .d3-krow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-krow:hover { background: #FAFAF7; }
  html.tp-desk2 .d3-krow.is-open { background: #FFFBE6; }
  html.tp-desk2 .d3-krow.is-hidden .d3-pmain > b { color: var(--d2-mute); }
  html.tp-desk2 .d3-krow.is-dragging { opacity: .45; }
  html.tp-desk2 .d3-krow.is-drop-before { box-shadow: inset 0 3px 0 var(--d2-y); }
  html.tp-desk2 .d3-krow.is-drop-after { box-shadow: inset 0 -3px 0 var(--d2-y); }
  html.tp-desk2 .d3-grip { display: inline-flex; align-items: center; justify-content: center; width: 28px; align-self: stretch; color: var(--d2-mute); cursor: grab; padding-left: 6px; }
  html.tp-desk2 .d3-kmain { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 6px 8px 14px; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-krow .d3-grip + .d3-kmain { padding-left: 4px; }
  html.tp-desk2 .d3-done { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--d2-t-13) var(--d2-font); color: #17753A; white-space: nowrap; }
  html.tp-desk2 .d3-req { color: #8A6A00; }
  html.tp-desk2 .d3-hid { color: var(--d2-mute); font-style: italic; }
  html.tp-desk2 .d3-order { display: inline-flex; gap: 2px; }
  html.tp-desk2 .d3-order .d2-iconbtn:disabled { opacity: .28; cursor: default; }
  html.tp-desk2 .d3-table td.d3-nowrap { white-space: nowrap; }
  html.tp-desk2 .d3-comprow .d3-pmain > span { white-space: normal; }
  html.tp-desk2 .d3-pct { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d3-reader-tools { display: flex; justify-content: flex-end; gap: 4px; margin: -8px -6px 4px; }
  html.tp-desk2 .d3-reader-title { font-size: var(--d2-t-20); line-height: 1.25; margin: 0 0 8px; letter-spacing: -.01em; }
  html.tp-desk2 .d3-hidnote { display: flex; align-items: center; gap: 6px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-preview { position: relative; border: 1px solid var(--d2-line); border-radius: 14px; overflow: hidden; height: 300px; background: var(--d2-bg); margin: 4px 0 10px; }
  html.tp-desk2.d3-insp-wide .d3-preview { height: calc(100dvh - var(--d2-top) - 330px); min-height: 360px; }
  html.tp-desk2 .d3-preview iframe { width: 100%; height: 100%; border: 0; display: block; }
  html.tp-desk2 .d3-preview-tag { position: absolute; top: 8px; right: 8px; font: 600 var(--d2-t-11) var(--d2-font); background: rgba(255, 255, 255, .92); border: 1px solid var(--d2-line); border-radius: 999px; padding: 2px 8px; color: var(--d2-mute); }
  html.tp-desk2 .d3-file { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
  html.tp-desk2 .d3-openlink { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--d2-ink); text-decoration: none; }
  html.tp-desk2 .d3-openlink > span { display: flex; flex-direction: column; }
  html.tp-desk2 .d3-openlink small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-donebar { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 12px; background: #E4F5EA; color: #17753A; font: 600 var(--d2-t-13) var(--d2-font); }
  /* Full-page reader (⌘⇧F): the reader takes the whole content area; the library waits underneath. */
  html.tp-desk2.d3-insp-wide .d2-inspector { width: calc(100vw - var(--d2-side)); border-left: 0; }
  html.tp-desk2.d3-insp-wide.d2-side-collapsed .d2-inspector { width: 100vw; }
  html.tp-desk2.d3-insp-wide .d3-reader { max-width: 980px; margin: 0 auto; width: 100%; }

  /* ---- Compliance ---- */
  html.tp-desk2 .d3-health { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--d2-t-13); color: #44443f; width: auto; }
  html.tp-desk2 .d3-health b { color: var(--d2-ink); font-size: var(--d2-t-15); }
  html.tp-desk2 .d3-shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 6px; }
  html.tp-desk2 .d3-shotcard { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; cursor: pointer; text-align: left; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-shotcard:hover { border-color: #cfcfc6; }
  html.tp-desk2 .d3-shotcard.is-alert { border-color: #F1C4C0; background: #FFFCFB; }
  html.tp-desk2 .d3-shotcard.is-sel { box-shadow: 0 0 0 2px var(--d2-y); }
  html.tp-desk2 .d3-shotimg { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--d2-bg); border: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-shotimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d3-noshot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--d2-t-13); color: var(--d2-mute); background: repeating-linear-gradient(135deg, #F4F4EF 0 10px, #ECECE5 10px 20px); }
  html.tp-desk2 .d3-shotfoot { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
  html.tp-desk2 .d3-restlist { margin-top: 8px; }
  html.tp-desk2 .d3-daychips { display: flex; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .d3-daychips .d2t-chip { padding: 0 12px; }
  html.tp-desk2 .d3-hourcard { padding: 12px 14px; }
  html.tp-desk2 .d3-hstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 16px; }
  html.tp-desk2 .d3-hstrip i { display: block; border-radius: 3px; background: #E3E3DC; }
  html.tp-desk2 .d3-hstrip i:nth-child(4n+1) { margin-left: 2px; }
  html.tp-desk2 .d3-hstrip i.is-ok { background: var(--d2-green); }
  html.tp-desk2 .d3-hstrip i.is-bad { background: var(--d2-red); }
  html.tp-desk2 .d3-hlabels { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d3-capgrid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.tp-desk2 .d3-capgrid.is-S { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  html.tp-desk2 .d3-capgrid.is-L { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html.tp-desk2 .d3-cap { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--d2-line); background: var(--d2-bg); padding: 0; cursor: pointer; }
  html.tp-desk2 .d3-cap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d3-cap.is-sel,
  html.tp-desk2 .d3-cap:focus-visible { outline: 3px solid var(--d2-y); outline-offset: 1px; }
  html.tp-desk2 .d3-cap.is-failed { cursor: default; background: #FDF1F0; border-color: #F1C4C0; padding: 10px; }
  html.tp-desk2 .d3-cap.is-failed b { display: flex; align-items: center; gap: 4px; font: 600 var(--d2-t-13) var(--d2-font); color: #B42D23; }
  html.tp-desk2 .d3-captime { position: absolute; left: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(17, 17, 17, .78); color: #fff; font: 600 var(--d2-t-11)/18px var(--d2-font); }
  html.tp-desk2 .d3-cap.is-failed .d3-captime { background: var(--d2-red); }
  html.tp-desk2 .d3-cmpbar { margin: 4px 0 0; }
  html.tp-desk2 .d3-cmp { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: start; }
  html.tp-desk2 .d3-cmphead { padding: 10px 14px; }
  html.tp-desk2 .d3-cmphead .d3-bar { margin: 0 0 8px; min-height: 28px; }
  html.tp-desk2 .d3-cmphead select { height: 30px; border: 1px solid var(--d2-line); border-radius: 8px; font: 600 var(--d2-t-13) var(--d2-font); padding: 0 6px; background: #fff; }
  html.tp-desk2 .d3-cmphour { text-align: right; padding-top: 10px; display: flex; flex-direction: column; }
  html.tp-desk2 .d3-cmphour span { font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .d3-cmpcell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html.tp-desk2 .d3-cmpcell .d3-captime { font-size: var(--d2-t-11); left: 4px; bottom: 4px; padding: 0 4px; }
  html.tp-desk2 .d3-cmpcell .d3-cap.is-failed { padding: 4px; }
  html.tp-desk2 .d3-cmpcell .d3-cap.is-failed b { font-size: var(--d2-t-11); }
  html.tp-desk2 .d3-sharelist { max-height: 340px; overflow-y: auto; margin-top: 10px; }
  html.tp-desk2 .d3-share .d3-search { margin-top: 8px; }
}

/* The lightbox fills the window, at any width. */
html.tp-desk2 .d2-scrim.d3-lb { background: #0b0b0b; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; color: #fff; outline: none; }
html.tp-desk2 .d3-lb-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #161616; flex: 0 0 auto; }
html.tp-desk2 .d3-lb-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.tp-desk2 .d3-lb-title b { font-size: var(--d2-t-15); }
html.tp-desk2 .d3-lb-title span { font-size: var(--d2-t-12); color: #bdbdb4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d3-lb-tools { display: flex; align-items: center; gap: 4px; }
html.tp-desk2 .d3-lb-btn { height: var(--d2-btn-h); min-width: var(--d2-btn-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #fff; font: 600 var(--d2-t-13) var(--d2-font); cursor: pointer; }
html.tp-desk2 .d3-lb-btn:hover { background: rgba(255, 255, 255, .16); }
html.tp-desk2 .d3-lb-btn.is-share { background: var(--d2-y); color: #000; }
html.tp-desk2 .d3-lb-pct { min-width: 46px; text-align: center; font: 600 var(--d2-t-13) var(--d2-font); color: #bdbdb4; font-variant-numeric: tabular-nums; }
html.tp-desk2 .d3-lb-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
html.tp-desk2 .d3-lb-stage.is-zoomed { cursor: grab; }
html.tp-desk2 .d3-lb-img { max-width: calc(100% - 140px); max-height: calc(100% - 24px); object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; touch-action: none; }
html.tp-desk2 .d3-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: #fff; cursor: pointer; font: 600 var(--d2-t-12) var(--d2-font); padding: 0; }
html.tp-desk2 .d3-lb-nav { z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html.tp-desk2 .d3-lb-nav svg { width: 48px; height: 48px; border-radius: 50%; background: rgba(17, 17, 17, .62); padding: 12px; box-sizing: border-box; }
html.tp-desk2 .d3-lb-nav:hover svg { background: rgba(17, 17, 17, .82); }
html.tp-desk2 .d3-lb-hint { z-index: 2; }
html.tp-desk2 .d3-lb-nav:disabled { opacity: .25; cursor: default; }
html.tp-desk2 .d3-lb-nav.is-prev { left: 18px; }
html.tp-desk2 .d3-lb-nav.is-next { right: 18px; }
html.tp-desk2 .d3-lb-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(17, 17, 17, .82); border-radius: 10px; padding: 6px 12px; font-size: var(--d2-t-12); color: #d6d6ce; white-space: nowrap; }
html.tp-desk2 .d3-lb-hint kbd { background: #2a2a2a; color: #fff; border-color: #444; }
html.tp-desk2 .d3-lb-strip { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 16px 14px; overflow-x: auto; background: #161616; }
html.tp-desk2 .d3-lb-thumb { position: relative; flex: 0 0 104px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #2a2a2a; padding: 0; cursor: pointer; }
html.tp-desk2 .d3-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .75; }
html.tp-desk2 .d3-lb-thumb.is-on { border-color: var(--d2-y); }
html.tp-desk2 .d3-lb-thumb.is-on img { opacity: 1; }
html.tp-desk2 .d3-lb-thumb > span { position: absolute; left: 4px; bottom: 4px; font: 600 var(--d2-t-11)/15px var(--d2-font); background: rgba(17, 17, 17, .8); color: #fff; padding: 0 5px; border-radius: 5px; }
html.tp-desk2 .d3-lb-thumb.is-failed { cursor: default; background: #4a1a16; }
html.tp-desk2 .d3-lb-thumb.is-failed > span { background: var(--d2-red); }

/* ---- iPad: the same pages at 44pt; no drag, no multi-select, no day compare ---------------- */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d3-prow,
  html.tp-ipad.tp-desk2 .d3-kmain,
  html.tp-ipad.tp-desk2 .d3-frow-main { min-height: 60px; }
  html.tp-ipad.tp-desk2 .d3-cat,
  html.tp-ipad.tp-desk2 .d3-seg button,
  html.tp-ipad.tp-desk2 .d3-danger,
  html.tp-ipad.tp-desk2 .d3-menu-item,
  html.tp-ipad.tp-desk2 .d3-lb-btn,
  html.tp-ipad.tp-desk2 .d3-bankbtn,
  html.tp-ipad.tp-desk2 .d3-cmphead select { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .d3-seg button { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d3-wait-main { min-height: 44px; justify-content: center; }
  html.tp-ipad.tp-desk2 .d3-lb-btn { min-width: 44px; }
  html.tp-ipad.tp-desk2 .d3-order .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d3-krow > .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d3-reader-tools .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d3-mhead .d2-iconbtn { width: 44px; height: 44px; }
  html.tp-ipad.tp-desk2 .d3-trow td { padding-top: 14px; padding-bottom: 14px; }
  html.tp-ipad.tp-desk2 .d3-split { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
  html.tp-ipad.tp-desk2 .d3-know { grid-template-columns: 200px minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d3-bulkbar { left: calc(var(--d2-side) + 16px); right: 16px; }
  html.tp-ipad.tp-desk2.d2-side-collapsed .d3-bulkbar { left: 16px; }
  html.tp-ipad.tp-desk2.d2-insp-open .d3-bulkbar { right: 376px; }
  html.tp-ipad.tp-desk2 .d3-shotgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  html.tp-ipad.tp-desk2 .d3-capgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d3-lb-nav svg { width: 56px; height: 56px; }
  html.tp-ipad.tp-desk2 .d3-lb-img { max-width: calc(100% - 150px); }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d3-split { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d3-side { position: static; max-height: none; overflow: visible; }
  html.tp-ipad.tp-desk2 .d3-team .d3-side .d3-plist,
  html.tp-ipad.tp-desk2 .d3-coach .d3-side > .d2t-card:last-of-type { max-height: 300px; overflow-y: auto; }
  html.tp-ipad.tp-desk2 .d3-mycoach,
  html.tp-ipad.tp-desk2 .d3-goalrow,
  html.tp-ipad.tp-desk2 .d3-paysum { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d3-about { display: none; }
  html.tp-ipad.tp-desk2 .d3-cats { flex-direction: row; flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .d3-capgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d3-lb-nav { top: auto; bottom: 16px; transform: none; }
  html.tp-ipad.tp-desk2 .d3-bulkbar { left: 16px; }
  html.tp-ipad.tp-desk2.d2-insp-open .d3-bulkbar { display: none; }
  html.tp-ipad.tp-desk2 .d3-lb-img { max-width: calc(100% - 24px); max-height: calc(100% - 110px); }
}

/* ============================================================================
   Desktop D4: clients and money (Clients, Sign with the full-window field
   editor, Reports). Same rule: every selector starts with html.tp-desk2 or
   html.tp-ipad, and layout lives inside min-width: 769px, where the new shell
   is shown. Each page renders at the top of its own <section> (.d2-on) and
   today's markup beneath it hides.
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-clients.d2-on > :not(#d2-clients-page),
  html.tp-desk2 #view-esign.d2-on > :not(#d2-esign-page),
  html.tp-desk2 #view-reports.d2-on > :not(#d2-reports-page) { display: none !important; }
  html.tp-desk2 .d4-page { max-width: 1320px; }
  html.tp-desk2 .d4-page .d2t-search { max-width: 320px; }
  html.tp-desk2 .d4-inline { margin: 0; }
  html.tp-desk2 .d4-mt { margin-top: 16px !important; }
  html.tp-desk2 .d4-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  html.tp-desk2 .d4-msg { font-size: var(--d2-t-13); margin: 10px 0 0; }
  html.tp-desk2 .d4-msg.is-good { color: #17753A; }
  html.tp-desk2 .d4-msg.is-bad { color: var(--d2-red); }
  html.tp-desk2 .d4-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; text-align: right; }
  html.tp-desk2 .d4-trail b { font-size: var(--d2-t-15); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d4-trail small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d2t-stat.is-hot { background: #FFFBE6; border-color: #F2DB7A; }
  html.tp-desk2 .d2t-stat.is-hot b { color: var(--d2-ink); }
  html.tp-desk2 .d4-sq { width: var(--d2-btn-h-lg); height: var(--d2-btn-h-lg); padding: 0; justify-content: center; flex: 0 0 var(--d2-btn-h-lg); }
  html.tp-desk2 .d2t-ro.is-bad { background: #FBE7E5; color: #8E241C; }

  /* client "logos" and product pills (the iOS tones) */
  html.tp-desk2 .d4-logo { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-13) var(--d2-font); letter-spacing: .02em; background: #111; color: #F5C500; }
  html.tp-desk2 .d4-logo.is-big { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; font-size: var(--d2-t-20); }
  html.tp-desk2 .d4-logo-1 { background: #dfe7f1; color: #2d4a6b; } html.tp-desk2 .d4-logo-2 { background: #e3ebdc; color: #3d5a2e; }
  html.tp-desk2 .d4-logo-3 { background: #f4e3d9; color: #7a3f1d; } html.tp-desk2 .d4-logo-4 { background: #ece4f4; color: #5b3d7a; }
  html.tp-desk2 .d4-logo-5 { background: #e6f0ef; color: #1f5c57; }
  html.tp-desk2 .d3-tperson .d4-logo { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; font-size: var(--d2-t-11); }
  html.tp-desk2 .d4-prods { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
  html.tp-desk2 .d4-prod { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--d2-soft); color: #44443f; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .04em; }
  html.tp-desk2 .d4-prod.is-wrkfrce { background: #111; color: #F5C500; }
  html.tp-desk2 .d4-prod.is-netwrk { background: #EEE8FB; color: #5B3FA8; }
  html.tp-desk2 .d4-prod.is-blncd { background: #E4F2E9; color: #1F6B3E; }
  html.tp-desk2 .d4-prod.is-aiassist { background: #FFF1B8; color: #6B5200; }
  html.tp-desk2 .d4-prod.is-bookkeeping { background: #E6EEF8; color: #2D5A9A; }

  /* ---- Clients: the list beside the page (Mail-style) ---- */
  html.tp-desk2 .d4-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
  html.tp-desk2.d2-insp-open .d4-split { grid-template-columns: 320px minmax(0, 1fr); }
  html.tp-desk2 .d4-listcol { position: sticky; top: calc(var(--d2-top) + 16px); max-height: calc(100dvh - var(--d2-top) - 48px); overflow-y: auto; padding: 2px; min-width: 0; }
  html.tp-desk2 .d4-clrow { min-height: 76px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  html.tp-desk2 .d4-detail { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d4-chead { display: flex; align-items: center; gap: 16px; }
  html.tp-desk2 .d4-chead-main { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d4-chead-main h2 { margin: 0; font-size: var(--d2-t-20); letter-spacing: -.01em; }
  html.tp-desk2 .d4-chead-main p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; flex-wrap: wrap; }
  html.tp-desk2 .d4-qas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  html.tp-desk2 .d4-qa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--d2-line); border-radius: 14px; background: #fff; color: var(--d2-ink); text-decoration: none; font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 a.d4-qa:hover { background: #FAFAF7; }
  html.tp-desk2 .d4-qa.is-off { color: #b7b7b0; }
  html.tp-desk2 .d4-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  html.tp-desk2 .d4-ccol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  html.tp-desk2 .d4-card .d2h-head { margin-bottom: 4px; }
  html.tp-desk2 .d4-prodrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-prodrow:first-of-type { border-top: 0; }
  html.tp-desk2 .d4-prodrow b { font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d4-prodrow.is-total { font-weight: 600; }
  html.tp-desk2 .d4-prodrow.is-total b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d4-notes { margin: 8px 0 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-dangerbox { padding: 2px 4px; }
  html.tp-desk2 .d4-dangerbox .d3-note { margin: 0 4px; }

  /* sheets */
  html.tp-desk2 .d2-sheet .d2-modal:has(.d4-sheet) { width: min(640px, 100%); }
  html.tp-desk2 .d2-sheet .d2-modal:has(.d4-tplsheet) { width: min(780px, 100%); }
  html.tp-desk2 .d4-sheet { font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d4-sheet-for { margin: -4px 0 12px; }
  html.tp-desk2 .d4-seg { margin: 4px 0 4px; flex-wrap: wrap; }
  html.tp-desk2 .d4-seg button { height: var(--d2-btn-h-sm); font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-toggle { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--d2-line); border-radius: 12px; cursor: pointer; }
  html.tp-desk2 .d4-toggle input { width: 18px; height: 18px; accent-color: var(--d2-green); flex: 0 0 18px; }
  html.tp-desk2 .d4-toggle span { display: flex; flex-direction: column; font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-toggle small { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .d4-sheetbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  html.tp-desk2 .d4-oblink { padding: 10px 14px; }
  html.tp-desk2 .d4-oblink + .d4-oblink { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-obrow { display: flex; align-items: center; gap: 10px; }
  html.tp-desk2 .d2t-card > .d4-obrow { padding: 10px 14px; }
  html.tp-desk2 .d2t-card > .d4-obrow + .d4-obrow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-oblinks { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
  html.tp-desk2 .d4-oblinks .d2h-link { padding-left: 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-menu { z-index: 320; }
  /* View as client + Portal modules (KEO portal Phase 2) */
  html.tp-desk2 .d4-vapick { width: 100%; padding: 10px 14px; border: 0; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
  html.tp-desk2 .d2t-card > .d4-vapick + .d4-vapick { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-vapick:hover { background: #FAFAF7; }
  html.tp-desk2 .d4-vapick.is-on { background: #FFFBE6; }
  html.tp-desk2 .d4-varadio { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--d2-line); background: #fff; box-sizing: border-box; }
  html.tp-desk2 .d4-vapick.is-on .d4-varadio { border: 5px solid var(--d2-ink); }
  html.tp-desk2 .d4-modrow { flex-wrap: wrap; row-gap: 6px; }
  html.tp-desk2 .d4-modrow .d2h-dmain { flex: 1 1 220px; min-width: 0; }
  html.tp-desk2 .d4-modrow .d4-seg { margin: 0; flex-wrap: nowrap; }
  html.tp-desk2 .d4-seg.is-small button { height: 30px; padding: 0 10px; }
  html.tp-desk2 .d4-seg button:disabled { opacity: .45; cursor: not-allowed; }

  /* ---- Sign ---- */
  html.tp-desk2 .d4-segn { display: inline-flex; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--d2-soft); font-size: var(--d2-t-11); line-height: 16px; justify-content: center; margin-left: 4px; }
  html.tp-desk2 .d4-sgrow { min-height: 68px; }
  html.tp-desk2 .d4-sigbars { display: flex; gap: 4px; margin-top: 5px; }
  html.tp-desk2 .d4-sigbars i { width: 22px; height: 4px; border-radius: 2px; background: #E3E3DC; }
  html.tp-desk2 .d4-sigbars i.is-signed { background: var(--d2-green); }
  html.tp-desk2 .d4-sigbars i.is-opened { background: var(--d2-y); }
  html.tp-desk2 .d4-sigbars i.is-declined { background: var(--d2-red); }
  html.tp-desk2 .d4-env .d2h-kick { margin: 16px 0 8px; }
  html.tp-desk2 .d4-pipe { display: flex; align-items: center; gap: 6px; margin: 4px 0 4px; }
  html.tp-desk2 .d4-pipe-node { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d4-pipe-node i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d9d9d2; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; color: #fff; }
  html.tp-desk2 .d4-pipe-node.is-done i { background: var(--d2-ink); border-color: var(--d2-ink); }
  html.tp-desk2 .d4-pipe-node.is-now i { border-color: var(--d2-y); background: var(--d2-y); }
  html.tp-desk2 .d4-pipe-node.is-bad i { background: var(--d2-red); border-color: var(--d2-red); }
  html.tp-desk2 .d4-pipe-node.is-done, html.tp-desk2 .d4-pipe-node.is-now { color: var(--d2-ink); font-weight: 600; }
  html.tp-desk2 .d4-pipe-line { flex: 1 1 auto; height: 2px; background: #e3e3dc; margin-bottom: 18px; }
  html.tp-desk2 .d4-pipe-line.is-done { background: var(--d2-ink); }
  html.tp-desk2 .d4-recip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  html.tp-desk2 .d4-recip + .d4-recip { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-recip .d2h-meta { white-space: normal; }
  html.tp-desk2 .d4-fieldnote { display: flex; gap: 10px; margin: 14px 0 0; padding: 12px; border-radius: 12px; background: var(--d2-bg); font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-fieldnote > svg { flex: 0 0 18px; margin-top: 1px; }
  html.tp-desk2 .d4-fieldnote > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
  html.tp-desk2 .d4-fieldnote .d2h-link { padding-left: 0; }
  html.tp-desk2 .d4-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--d2-line2); }
  html.tp-desk2 .d4-timeline li { position: relative; display: flex; flex-direction: column; padding: 0 0 12px 4px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-timeline li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #c9c9c1; }
  html.tp-desk2 .d4-timeline li.is-strong::before { background: var(--d2-ink); }
  html.tp-desk2 .d4-timeline b { font-weight: 600; }
  html.tp-desk2 .d4-timeline span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .d4-hash { font: 500 var(--d2-t-12) ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
  html.tp-desk2 .d4-rotnote { text-align: center; padding: 6px 8px 0; }
  html.tp-desk2 .d4-rotnote p { font-size: var(--d2-t-15); margin: 10px 0 0; line-height: 1.45; }
  html.tp-desk2 .d4-tplrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  html.tp-desk2 .d4-tplrow + .d4-tplrow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-drop { margin-top: 14px; border: 2px dashed var(--d2-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--d2-mute); }
  html.tp-desk2 .d4-drop b { color: var(--d2-ink); font-size: var(--d2-t-15); }
  html.tp-desk2 .d4-drop.is-drag { border-color: var(--d2-y); background: #FFFBE6; }
  html.tp-desk2 .d4-drop.has-file { align-items: stretch; text-align: left; border-style: solid; }
  html.tp-desk2 .d4-filebtn { position: relative; overflow: hidden; margin-top: 6px; }
  html.tp-desk2 .d4-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  /* ---- Reports ---- */
  html.tp-desk2 .d4-steps { display: inline-flex; gap: 2px; }
  html.tp-desk2 .d4-steps .d2-iconbtn:disabled { opacity: .35; cursor: default; }
  html.tp-desk2 .d4-health { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 6px; }
  html.tp-desk2 .d4-hcard { text-align: left; background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); min-width: 0; }
  html.tp-desk2 .d4-hcard:hover { border-color: #cfcfc6; }
  html.tp-desk2 .d4-hcard.is-loading { cursor: default; }
  html.tp-desk2 .d4-hkick { display: flex; align-items: center; gap: 6px; font-size: var(--d2-t-13); font-weight: 600; color: #44443f; }
  html.tp-desk2 .d4-hkick kbd { margin-left: auto; }
  html.tp-desk2 .d4-hdot { width: 8px; height: 8px; border-radius: 50%; background: #c9c9c1; }
  html.tp-desk2 .d4-hdot.is-good, html.tp-desk2 .d4-hnote i.is-good { background: var(--d2-green); }
  html.tp-desk2 .d4-hdot.is-warn, html.tp-desk2 .d4-hnote i.is-warn { background: var(--d2-amber); }
  html.tp-desk2 .d4-hdot.is-bad, html.tp-desk2 .d4-hnote i.is-bad { background: var(--d2-red); }
  html.tp-desk2 .d4-hbig { font-size: var(--d2-t-26); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
  html.tp-desk2 .d4-hnote { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d4-hnote i { width: 8px; height: 8px; border-radius: 50%; background: #c9c9c1; flex: 0 0 8px; }
  html.tp-desk2 .d4-rgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
  html.tp-desk2 .d4-rgroup .d2h-row .d2h-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d4-rtitle { margin: 0 6px; font-size: var(--d2-t-20); letter-spacing: -.01em; }
  html.tp-desk2 .d4-rsum { margin-bottom: 12px; }
  html.tp-desk2 .d4-rtable .d4-dayrow td { background: #FAFAF7; font: 600 var(--d2-t-13) var(--d2-font); color: #44443f; padding: 8px 10px; }
  html.tp-desk2 .d4-rtable tr.is-flag { background: #FFFDF3; }
  html.tp-desk2 .d4-rtable tr.is-sel { box-shadow: inset 3px 0 0 var(--d2-ink); }
  html.tp-desk2 .d4-rtable .d3-num { display: inline-block; min-width: 44px; }
  html.tp-desk2 .d4-payp { margin: 0 0 12px; }
  html.tp-desk2 .d4-payhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d4-money { font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d4-money.is-masked { letter-spacing: .12em; color: var(--d2-mute); }
  html.tp-desk2 .d4-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; margin: 8px 0 14px; }
  html.tp-desk2 .d4-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
  html.tp-desk2 .d4-bar i { display: block; width: 100%; max-width: 48px; border-radius: 6px 6px 3px 3px; background: #E3E3DC; }
  html.tp-desk2 .d4-bar i.is-on { background: var(--d2-ink); }
  html.tp-desk2 .d4-bar i.is-short { background: var(--d2-y); }
  html.tp-desk2 .d4-bar small { font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .d4-kvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.tp-desk2 .d4-kvgrid > div { background: var(--d2-bg); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
  html.tp-desk2 .d4-kvgrid span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d4-kvgrid b { font-size: var(--d2-t-15); }
}

/* ---- the full-window field editor (at any width it's open) ---- */
html.tp-desk2 .d4-fe {
  position: fixed; inset: 0; z-index: 250; background: var(--d2-bg); display: flex; flex-direction: column; font-family: var(--d2-font); color: var(--d2-ink);
  --d4-fe-z: 1;
}
html.tp-desk2.d4-fe-on body { overflow: hidden; }
/* The portal's own prompts (Add role, Rename) and confirms open above the editor, never behind it. */
html.tp-desk2.d4-fe-on .tp-dialog-overlay { z-index: 330; }
html.tp-desk2 .d4-fe-top { height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--d2-line); }
html.tp-desk2 .d4-fe-logo { height: 19px; width: auto; margin-right: 6px; }
html.tp-desk2 .d4-fe-title { display: flex; flex-direction: column; min-width: 0; max-width: 300px; margin: 0 6px; }
html.tp-desk2 .d4-fe-title small { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d4-fe-title b { font-size: var(--d2-t-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-desk2 .d4-fe-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--d2-t-13); font-weight: 600; color: var(--d2-mute); }
html.tp-desk2 .d4-fe-steps li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
html.tp-desk2 .d4-fe-steps li + li::before { content: ''; width: 22px; height: 2px; background: var(--d2-line); margin-right: 4px; }
html.tp-desk2 .d4-fe-steps i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfcfc6; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); font-style: normal; }
html.tp-desk2 .d4-fe-steps li.is-done { color: var(--d2-ink); }
html.tp-desk2 .d4-fe-steps li.is-done i { background: var(--d2-ink); border-color: var(--d2-ink); color: #fff; }
html.tp-desk2 .d4-fe-steps li.is-now { color: var(--d2-ink); }
html.tp-desk2 .d4-fe-steps li.is-now i { background: var(--d2-y); border-color: var(--d2-y); }
html.tp-desk2 .d4-fe-msg { font-size: var(--d2-t-12); color: var(--d2-mute); max-width: 260px; }
html.tp-desk2 .d4-fe-msg.is-bad { color: var(--d2-red); }
html.tp-desk2 .d4-fe-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px 92px minmax(0, 1fr) 300px; }
html.tp-desk2 .d4-fe-left, html.tp-desk2 .d4-fe-right { background: #fff; overflow-y: auto; padding: 16px 14px; }
html.tp-desk2 .d4-fe-left { border-right: 1px solid var(--d2-line); }
html.tp-desk2 .d4-fe-right { border-left: 1px solid var(--d2-line); }
html.tp-desk2 .d4-fe .d2h-kick { font: 700 var(--d2-t-11)/1.3 var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); margin: 0 0 8px; }
html.tp-desk2 .d4-fe .d4-mt { margin-top: 18px; }
html.tp-desk2 .d4-fe .d3-note { font-size: var(--d2-t-12); color: var(--d2-mute); line-height: 1.45; margin: 10px 0; }
html.tp-desk2 .d4-fe-role, html.tp-desk2 .d4-fe-type {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; margin: 0 0 6px; border: 1px solid var(--d2-line); border-radius: 10px; background: #fff;
  font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; text-align: left; touch-action: none; user-select: none; -webkit-user-select: none;
}
html.tp-desk2 .d4-fe-role i { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); flex: 0 0 10px; }
html.tp-desk2 .d4-fe-role span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.tp-desk2 .d4-fe-role small { font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d4-fe-role.is-on { border-color: var(--d2-ink); box-shadow: 0 0 0 1px var(--d2-ink); }
html.tp-desk2 .d4-fe-type b { flex: 1 1 auto; font-weight: 600; }
html.tp-desk2 .d4-fe-type:hover { background: #FAFAF7; }
html.tp-desk2 .d4-fe-type.is-armed { border-color: var(--d2-y); box-shadow: 0 0 0 2px var(--d2-y); background: #FFFBE6; }
html.tp-desk2 .d4-fe-roletools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 2px 0 4px; }
html.tp-desk2 .d4-fe-roletools .d2h-link { padding-left: 0; font-size: var(--d2-t-13); }
html.tp-desk2 .d4-fe-thumbs { overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--d2-line); }
html.tp-desk2 .d4-fe-thumb { border: 0; background: none; padding: 0; display: flex; align-items: flex-start; gap: 6px; cursor: pointer; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
html.tp-desk2 .d4-fe-thumb canvas { width: 56px; height: auto; background: #fff; border: 1px solid var(--d2-line); border-radius: 4px; }
html.tp-desk2 .d4-fe-thumb.is-on canvas { border-color: var(--d2-ink); box-shadow: 0 0 0 2px var(--d2-y); }
html.tp-desk2 .d4-fe-centre { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
html.tp-desk2 .d4-fe-pagebar { display: flex; align-items: center; justify-content: center; gap: 14px; height: 40px; flex: 0 0 40px; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d4-fe-zoom { display: inline-flex; align-items: center; gap: 4px; }
html.tp-desk2 .d4-fe-zoom .d2-iconbtn { width: 28px; height: 28px; }
html.tp-desk2 .d4-fe-scroll { flex: 1 1 auto; overflow: auto; padding: 4px 24px 40px; }
html.tp-desk2 .d4-fe-pages { display: flex; flex-direction: column; align-items: center; gap: 22px; }
html.tp-desk2 .d4-fe-page { position: relative; width: calc(var(--d4-fe-w, 720px) * var(--d4-fe-z, 1)); flex: 0 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .06); }
html.tp-desk2 .d4-fe-page canvas { display: block; width: 100%; height: 100%; }
html.tp-desk2 .d4-fe-overlay { position: absolute; inset: 0; }
html.tp-desk2 .d4-fe.is-placing .d4-fe-overlay { cursor: crosshair; outline: 2px dashed rgba(245, 197, 0, .7); outline-offset: -2px; }
html.tp-desk2 .d4-fe-field {
  position: absolute; box-sizing: border-box; border: 1.5px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); border-radius: 3px;
  cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; display: flex; align-items: center; overflow: visible;
}
html.tp-desk2 .d4-fe-field.is-optional { border-style: dashed; }
html.tp-desk2 .d4-fe-field.is-sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--d2-y); z-index: 2; }
html.tp-desk2 .d4-fe-flabel { font: 600 var(--d2-t-11) var(--d2-font); color: var(--rc); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
html.tp-desk2 .d4-fe-handle { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border-radius: 3px; background: #fff; border: 2px solid var(--d2-ink); cursor: nwse-resize; box-sizing: border-box; }
html.tp-desk2 .d4-fe-handle::after { content: ''; position: absolute; inset: -8px; }
html.tp-desk2 .d4-fe-ghost { position: fixed; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: 6px; border: 1.5px solid var(--rc); background: #fff; font: 600 var(--d2-t-13) var(--d2-font); color: var(--rc); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
html.tp-desk2 .d4-fe-prop { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d4-fe-prop select, html.tp-desk2 .d4-fe-prop input[type="text"], html.tp-desk2 .d4-fe-prop textarea {
  width: 100%; box-sizing: border-box; min-height: 38px; border: 1px solid var(--d2-line); border-radius: 10px; padding: 6px 10px; font: 400 var(--d2-t-15) var(--d2-font); color: var(--d2-ink); background: #fff;
}
html.tp-desk2 .d4-fe-prop select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373736D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html.tp-desk2 .d4-fe-req { flex-direction: row; align-items: center; justify-content: space-between; font-size: var(--d2-t-13); color: var(--d2-ink); font-weight: 600; }
html.tp-desk2 .d4-fe-req input { width: 20px; height: 20px; accent-color: var(--d2-green); }
html.tp-desk2 .d4-fe-facts > div { background: var(--d2-bg); border-radius: 10px; padding: 7px 10px; display: flex; flex-direction: column; font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d4-fe-facts b { font-size: var(--d2-t-15); color: var(--d2-ink); }
html.tp-desk2 .d4-fe-acts { display: flex; gap: 8px; margin: 12px 0 0; }
html.tp-desk2 .d4-fe-acts .d2h-btn { flex: 1 1 0; justify-content: center; }
html.tp-desk2 .d4-fe-sum { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--d2-t-13); }
html.tp-desk2 .d4-fe-sum i { width: 9px; height: 9px; border-radius: 3px; background: var(--rc); flex: 0 0 9px; }
html.tp-desk2 .d4-fe-sum i { margin-top: 5px; align-self: flex-start; }
html.tp-desk2 .d4-fe-sum span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.tp-desk2 .d4-fe-sum small { color: var(--d2-mute); font-size: var(--d2-t-12); }
html.tp-desk2 .d4-fe-sum em { font-style: normal; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; background: var(--d2-soft); text-align: center; line-height: 22px; font-size: var(--d2-t-12); }
html.tp-desk2 .d4-fe .d3-owner-note { display: flex; gap: 8px; align-items: flex-start; background: var(--d2-bg); border-radius: 12px; padding: 10px 12px; font-size: var(--d2-t-12); color: #44443f; margin-top: 14px; }
html.tp-desk2 .d4-fe .d3-empty { margin: 40px auto; max-width: 420px; text-align: center; color: var(--d2-mute); padding: 36px 16px; background: #fff; border: 1px dashed var(--d2-line); border-radius: 16px; }
html.tp-desk2 .d4-fe-rot { display: none; }

/* ---- iPad: the same pages at 44pt; the editor in landscape with 44pt handles ---- */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d4-page .d2h-btn,
  html.tp-ipad.tp-desk2 .d4-page .d2t-chip,
  html.tp-ipad.tp-desk2 .d4-page .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d4-page .d3-danger,
  html.tp-ipad.tp-desk2 .d2-inspector .d4-env .d2h-btn,
  html.tp-ipad.tp-desk2 .d2-inspector .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d2-inspector .d4-person .d2h-btn,
  html.tp-ipad.tp-desk2 .d4-sheet .d2h-btn,
  html.tp-ipad.tp-desk2 .d4-sheet .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d4-sheet .d3-danger,
  html.tp-ipad.tp-desk2 .d4-sheet .d2h-link,
  html.tp-ipad.tp-desk2 .d4-page .d2h-link,
  html.tp-ipad.tp-desk2 .d4-fieldnote .d2h-link,
  html.tp-ipad.tp-desk2 .d4-menu .d3-menu-item { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .d4-page .d2-iconbtn, html.tp-ipad.tp-desk2 .d4-sheet .d2-iconbtn { min-width: 44px; }
  html.tp-ipad.tp-desk2 .d4-page .d3-seg button, html.tp-ipad.tp-desk2 .d4-seg button { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d4-page .d2t-search { height: 44px; }
  html.tp-ipad.tp-desk2 .d4-page .d2h-row, html.tp-ipad.tp-desk2 .d4-page .d3-prow { min-height: 60px; }
  html.tp-ipad.tp-desk2 .d4-page .d3-trow td { padding-top: 13px; padding-bottom: 13px; }
  html.tp-ipad.tp-desk2 .d4-qa { min-height: 60px; justify-content: center; }
  html.tp-ipad.tp-desk2 .d4-split { grid-template-columns: 320px minmax(0, 1fr); gap: 16px; }
  html.tp-ipad.tp-desk2 .d4-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d4-rgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d4-toggle input { width: 24px; height: 24px; }
  html.tp-ipad.tp-desk2 .d4-fe-top { height: 64px; flex-basis: 64px; }
  html.tp-ipad.tp-desk2 .d4-fe .d2h-btn,
  html.tp-ipad.tp-desk2 .d4-fe-role,
  html.tp-ipad.tp-desk2 .d4-fe-type,
  html.tp-ipad.tp-desk2 .d4-fe-prop select,
  html.tp-ipad.tp-desk2 .d4-fe-prop input[type="text"],
  html.tp-ipad.tp-desk2 .d4-fe-roletools .d2h-link,
  html.tp-ipad.tp-desk2 .d4-fe-roletools .d3-danger { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .d4-fe-body { grid-template-columns: 220px 80px minmax(0, 1fr) 260px; }
  html.tp-ipad.tp-desk2 .d4-fe-thumb { min-height: 44px; }
  /* 44pt handles: a larger visible grip with a 44pt hit area. */
  html.tp-ipad.tp-desk2 .d4-fe-handle { width: 22px; height: 22px; right: -11px; bottom: -11px; border-radius: 6px; }
  html.tp-ipad.tp-desk2 .d4-fe-handle::after { inset: -11px; }
  html.tp-ipad.tp-desk2 .d4-fe-field::before { content: ''; position: absolute; inset: -8px; }
  html.tp-ipad.tp-desk2 .d4-fe-req input { width: 28px; height: 28px; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d4-split { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d4-listcol { position: static; max-height: 320px; }
  html.tp-ipad.tp-desk2 .d4-cgrid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d4-rgroups { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d4-sgstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The editor needs landscape: portrait shows a note over it, and nothing is lost. */
  html.tp-ipad.tp-desk2 .d4-fe-rot { display: flex; position: absolute; inset: 0; z-index: 3; background: var(--d2-bg); flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; }
  html.tp-ipad.tp-desk2 .d4-fe-rot b { font-size: var(--d2-t-17); }
  html.tp-ipad.tp-desk2 .d4-fe-rot span { color: var(--d2-mute); font-size: var(--d2-t-15); max-width: 420px; }
}

/* ============================================================================
   Sign 1a (~/holly/design/sign-apple/SPEC.md §1, §17, §19): the toolbar's
   Envelopes · Templates · Drafts, the list beside the envelope, the route as a
   chain, the timeline with what's next in grey, the Templates table with its
   inspector, and the wizard's Recipients step. Same rule as the rest of this
   file: every selector starts with html.tp-desk2 or html.tp-ipad, tokens only.
   ============================================================================ */
@media (min-width: 769px) {
  /* the toolbar slot (empty, and hidden, on every other page) */
  html.tp-desk2 .d2-tbslot { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
  html.tp-desk2 .d2-tbslot:empty { display: none; }
  /* With page controls in the toolbar the title keeps its natural width and the controls sit beside it. */
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-title { flex: 0 1 auto; min-width: 120px; }
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-tbslot { margin-right: auto; padding-left: 12px; }
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-search { flex: 0 1 180px; min-width: 0; }
  html.tp-desk2 .sg1-tbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  html.tp-desk2 .d2-tbslot .d2-seg { margin: 0 8px 0 0; }
  html.tp-desk2 .d2-tbslot .d2-seg button { padding: 0 14px; }

  /* the list column */
  html.tp-desk2 .sg1-split { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; }
  html.tp-desk2 .sg1-lhead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  html.tp-desk2 .sg1-lhead .d2-seg { margin: 0; }
  html.tp-desk2 .sg1-sort select { border: 0; box-shadow: none; background-color: transparent; }
  html.tp-desk2 .sg1-search { width: 100%; margin: 0 0 6px; box-sizing: border-box; }
  html.tp-desk2 .sg1-ghead { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 6px; font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .sg1-list .sg1-row { min-height: 64px; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
  html.tp-desk2 .sg1-list .sg1-row.is-open { background: var(--d2-pill); }
  html.tp-desk2 .sg1-list .sg1-row .d3-pmain > span { white-space: normal; }
  html.tp-desk2 .sg1-flag { font: 500 var(--d2-t-11) var(--d2-font); color: #9A6A00; white-space: nowrap; }
  html.tp-desk2 .sg1-unfold { margin: 0 0 4px; }

  /* the envelope */
  html.tp-desk2 .sg1-detail { gap: 0; }
  html.tp-desk2 .sg1-none { padding-top: 40px; }
  html.tp-desk2 .sg1-back { align-self: flex-start; margin: 0 0 8px -5px; }
  html.tp-desk2 .sg1-head { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 16px; border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .sg1-htile { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  html.tp-desk2 .sg1-htext { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .sg1-htext h2 { margin: 0; font: 700 var(--d2-t-20) var(--d2-font); letter-spacing: -.01em; color: var(--d2-ink); }
  html.tp-desk2 .sg1-htext .d2h-meta { margin: 4px 0 0; white-space: normal; }
  html.tp-desk2 .sg1-hacts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

  /* the route: one block per stage, side by side; equal numbers stack inside a block */
  html.tp-desk2 .sg1-route { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin: 16px 0 4px; padding: 2px; }
  html.tp-desk2 .sg1-stage { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 168px; max-width: 230px; }
  html.tp-desk2 .sg1-stage.is-group { padding: 6px; border-radius: 14px; background: var(--d2-bg); }
  html.tp-desk2 .sg1-link { flex: 0 0 14px; height: 2px; background: var(--d2-line); }
  html.tp-desk2 .sg1-chip {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px;
    background: #fff; box-shadow: var(--d2-edge); font-family: var(--d2-font);
  }
  html.tp-desk2 .sg1-chip.is-done { background: #F0F8F2; box-shadow: 0 0 0 .5px #BFDCC8, 0 1px 1.5px rgba(0, 0, 0, .05); }
  html.tp-desk2 .sg1-chip.is-current { box-shadow: 0 0 0 2px #2F6FEB, 0 1px 2px rgba(0, 0, 0, .06); }
  html.tp-desk2 .sg1-chip.is-declined { background: #FCEFEE; box-shadow: 0 0 0 .5px #EDC2BE; }
  html.tp-desk2 .sg1-chip.is-cc { background: #FAFAF7; }
  html.tp-desk2 .sg1-chip.is-stopped { opacity: .6; }
  html.tp-desk2 .sg1-av { width: 28px; height: 28px; flex: 0 0 28px; font-size: var(--d2-t-11); }
  html.tp-desk2 .sg1-chip-main { display: flex; flex-direction: column; min-width: 0; padding-right: 10px; }
  html.tp-desk2 .sg1-chip-main b { font-size: var(--d2-t-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-chip-main span { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-tick { position: absolute; bottom: 7px; right: 8px; color: var(--d2-green); display: inline-flex; }
  html.tp-desk2 .sg1-reminds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
  html.tp-desk2 .sg1-reminds .d2h-btn,
  html.tp-desk2 .sg1-rc-add .d2h-btn { height: var(--d2-btn-h-sm); padding: 0 9px; font-size: var(--d2-t-12); }

  html.tp-desk2 .sg1-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
  html.tp-desk2 .sg1-col { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .sg1-kick { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 8px; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .sg1-kick span { font-weight: 400; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .sg1-tl { list-style: none; margin: 0; padding: 0; }
  html.tp-desk2 .sg1-tl li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; font-family: var(--d2-font); }
  html.tp-desk2 .sg1-tl li + li { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .sg1-tl li > div { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .sg1-tl b { font-size: var(--d2-t-13); font-weight: 600; color: var(--d2-ink); }
  html.tp-desk2 .sg1-tl li > div > span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .sg1-tl time { flex: 0 0 auto; font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .sg1-tl li.is-future b { font-weight: 500; color: #8E8E87; }
  html.tp-desk2 .sg1-tl li.is-future time,
  html.tp-desk2 .sg1-tl li.is-future > div > span { color: #A3A39C; }
  html.tp-desk2 .sg1-facts .sg1-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; font: 400 var(--d2-t-13) var(--d2-font); min-height: 22px; }
  html.tp-desk2 .sg1-facts .sg1-fact + .sg1-fact { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .sg1-fact > span { color: var(--d2-mute); }
  html.tp-desk2 .sg1-fact > b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-fact .d2h-link { min-height: 0; padding: 0; font-weight: 500; }
  html.tp-desk2 .sg1-hash { font-variant-numeric: tabular-nums; }
  html.tp-desk2 .sg1-redo { color: #8A5A00; }
  html.tp-desk2 .sg1-good { color: var(--d2-green); }
  html.tp-desk2 .sg1-msg { padding: 2px 14px; }
  html.tp-desk2 .sg1-col .d4-fieldnote { margin-top: 12px; }

  /* Templates: the grouped table and its inspector */
  html.tp-desk2 .sg1-tsplit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  html.tp-desk2 .sg1-ttable { padding: 0; overflow: hidden; }
  html.tp-desk2 .sg1-trow {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 96px 64px 104px 80px; align-items: center; gap: 10px; padding: 9px 14px;
    border: 0; border-top: 1px solid var(--d2-line2); background: #fff; text-align: left; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer;
  }
  html.tp-desk2 .sg1-trow.is-head { cursor: default; border-top: 0; font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); padding-top: 10px; padding-bottom: 8px; }
  html.tp-desk2 .sg1-trow.is-open { background: var(--d2-pill); }
  html.tp-desk2 button.sg1-trow:hover:not(.is-open) { background: #FAFAF7; }
  html.tp-desk2 .sg1-tgroup { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 6px; border-top: 1px solid var(--d2-line2); background: #fff; font-family: var(--d2-font); }
  html.tp-desk2 .sg1-tgroup b { font-size: var(--d2-t-13); font-weight: 700; }
  html.tp-desk2 .sg1-tgroup span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .sg1-tname { display: flex; align-items: center; gap: 10px; min-width: 0; }
  html.tp-desk2 .sg1-tname .d2h-tile { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  html.tp-desk2 .sg1-tname > span:last-child { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .sg1-tname b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-tname small { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-roles { display: flex; align-items: center; }
  html.tp-desk2 .sg1-roles .sg1-role + .sg1-role { margin-left: -4px; }
  html.tp-desk2 .sg1-role { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11) var(--d2-font); box-shadow: 0 0 0 1.5px #fff; flex: 0 0 20px; }
  html.tp-desk2 .sg1-role-0 { background: #DCE7FB; color: #24508F; } html.tp-desk2 .sg1-role-1 { background: #EBE0FA; color: #5B3FA8; }
  html.tp-desk2 .sg1-role-2 { background: #FFF1B8; color: #6B5200; } html.tp-desk2 .sg1-role-3 { background: #DDF1E3; color: #1F6B3E; }
  html.tp-desk2 .sg1-role-4 { background: #FBE3D2; color: #8A4012; } html.tp-desk2 .sg1-role-5 { background: #ECECE5; color: #44443F; }
  html.tp-desk2 .sg1-tnum { font-variant-numeric: tabular-nums; color: #4A4A45; }
  html.tp-desk2 .sg1-tst { font-weight: 600; color: var(--d2-mute); }
  html.tp-desk2 .sg1-tst.is-good { color: var(--d2-green); }
  html.tp-desk2 .sg1-tst.is-amber { color: #9A6A00; }
  html.tp-desk2 .sg1-tinsp { position: sticky; top: calc(var(--d2-top) + 16px); background: #fff; border-radius: 14px; box-shadow: var(--d2-edge); padding: 14px; font-family: var(--d2-font); }
  html.tp-desk2 .sg1-ihead { display: flex; align-items: center; gap: 10px; }
  html.tp-desk2 .sg1-ihead > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .sg1-ihead b { font-size: var(--d2-t-17); font-weight: 700; }
  html.tp-desk2 .sg1-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
  html.tp-desk2 .sg1-thumb { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .sg1-thumb.is-wait { background: var(--d2-bg); box-shadow: none; }
  html.tp-desk2 .sg1-irole { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .sg1-irole + .sg1-irole { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .sg1-irole b { margin-left: auto; font-weight: 500; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .sg1-ifields { margin: 0; white-space: normal; }
  html.tp-desk2 .sg1-ifoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .sg1-tdrop { padding: 20px; border: 1px dashed var(--d2-line); border-radius: 16px; }

  /* New envelope › Recipients */
  html.tp-desk2 .sg1-rc { font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .sg1-rc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  html.tp-desk2 .sg1-rc-top h4 { margin: 0; font-size: var(--d2-t-17); font-weight: 700; }
  html.tp-desk2 .sg1-rc-top .d2h-meta { margin: 3px 0 0; white-space: normal; }
  html.tp-desk2 .sg1-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto; }
  html.tp-desk2 .sg1-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  html.tp-desk2 .sg1-switch i { position: relative; width: 36px; height: 22px; border-radius: 11px; background: #D9D9D2; flex: 0 0 36px; transition: background .15s; }
  html.tp-desk2 .sg1-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
  html.tp-desk2 .sg1-switch input:checked + i { background: var(--d2-green); }
  html.tp-desk2 .sg1-switch input:checked + i::after { transform: translateX(14px); }
  html.tp-desk2 .sg1-switch input:focus-visible + i { outline: 2px solid var(--d2-ink); outline-offset: 2px; }
  html.tp-desk2 .sg1-switch span { display: flex; flex-direction: column; }
  html.tp-desk2 .sg1-switch b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .sg1-switch small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .sg1-rc-list { margin: 14px 0 10px; padding: 0 0 4px; }
  html.tp-desk2 .sg1-rc-gh { padding: 12px 14px 4px; font: 600 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .sg1-rc-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
  html.tp-desk2 .sg1-rc-row + .sg1-rc-row { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .sg1-rc-n { width: 34px; height: var(--d2-btn-h); flex: 0 0 34px; box-sizing: border-box; border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; text-align: center; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); padding: 0; -moz-appearance: textfield; }
  html.tp-desk2 .sg1-rc-n::-webkit-inner-spin-button, html.tp-desk2 .sg1-rc-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  html.tp-desk2 .sg1-rc-n.is-cc { display: inline-flex; align-items: center; justify-content: center; background: var(--d2-soft); box-shadow: none; font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .sg1-rc-who { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html.tp-desk2 .sg1-rc-who input[data-rc-name] { font-weight: 600; }
  html.tp-desk2 .sg1-rc-who input[data-rc-email] { color: #4A4A45; }
  html.tp-desk2 .sg1-rc-who input,
  html.tp-desk2 .sg1-rc-who select { height: var(--d2-btn-h); box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0 8px; border: 0; border-radius: var(--d2-radius); box-shadow: var(--d2-edge); background: #fff; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .sg1-rc-who input:focus { outline: 2px solid var(--d2-y); outline-offset: 0; }
  html.tp-desk2 .sg1-rc-rolename, html.tp-desk2 .sg1-rc-who .sg1-rc-role { grid-column: 1 / -1; }
  html.tp-desk2 .sg1-rc-rolename { font-size: var(--d2-t-11); font-weight: 600; color: var(--d2-mute); }
  html.tp-desk2 .sg1-rc-pop { flex: 0 0 auto; }
  html.tp-desk2 .sg1-rc-pop select { width: 136px; }
  html.tp-desk2 .sg1-rc-add { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  html.tp-desk2 .sg1-rc-add .d2-popup select { height: var(--d2-btn-h-sm); font-size: var(--d2-t-12); }
  html.tp-desk2 .sg1-rc-note { margin: 12px 0 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .sg1-rc-note:empty, html.tp-desk2 .sg1-rc-err:empty { display: none; }
  html.tp-desk2 .sg1-rc-err { margin: 6px 0 0; }
}
@media (min-width: 769px) and (max-width: 1599px) {
  /* Room for Sign's toolbar controls: Search keeps its icon (⌘K still opens it). */
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-search { width: var(--d2-btn-h); flex: 0 0 var(--d2-btn-h); padding: 0; justify-content: center; }
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-search .d2-search-lbl,
  html.tp-desk2 #d2-topbar:has(.d2-tbslot:not(:empty)) .d2-search kbd { display: none; }
}
@media (min-width: 769px) and (max-width: 1279px) {
  html.tp-desk2 .sg1-cols { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .sg1-tsplit { grid-template-columns: minmax(0, 1fr) 280px; }
  html.tp-desk2 .sg1-trow { grid-template-columns: minmax(0, 1fr) 80px 52px 96px; }
  html.tp-desk2 .sg1-trow > :nth-child(5) { display: none; }
}
/* iPad: 44pt targets; portrait is list, then the envelope pushed over it */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .sg1-ipadbar { display: flex; margin: 0 0 14px; }
  html.tp-ipad.tp-desk2 .sg1-ipadbar .d2-seg { margin: 0; }
  html.tp-ipad.tp-desk2 .sg1-ipadbar .d2-seg button { height: 44px; padding: 0 18px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .sg1-search input { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2-tbslot .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-reminds .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-hacts .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-ifoot .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-rc-add .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-fact .d2h-link,
  html.tp-ipad.tp-desk2 .sg1-back,
  html.tp-ipad.tp-desk2 .sg1-unfold { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .sg1-hacts .d2-iconbtn { min-width: 44px; min-height: 44px; }
  html.tp-ipad.tp-desk2 .sg1-sort select,
  html.tp-ipad.tp-desk2 .sg1-rc-pop select,
  html.tp-ipad.tp-desk2 .sg1-rc-add .d2-popup select,
  html.tp-ipad.tp-desk2 .sg1-rc-who input,
  html.tp-ipad.tp-desk2 .sg1-rc-who select,
  html.tp-ipad.tp-desk2 .sg1-rc-n { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .sg1-rc-row .d2-iconbtn { min-width: 44px; min-height: 44px; }
  html.tp-ipad.tp-desk2 .sg1-rc-n { width: 44px; flex-basis: 44px; }
  html.tp-ipad.tp-desk2 .sg1-switch i { width: 51px; height: 31px; border-radius: 16px; flex-basis: 51px; }
  html.tp-ipad.tp-desk2 .sg1-switch i::after { width: 27px; height: 27px; }
  html.tp-ipad.tp-desk2 .sg1-switch input:checked + i::after { transform: translateX(20px); }
  html.tp-ipad.tp-desk2 .sg1-trow { min-height: 52px; }
  html.tp-ipad.tp-desk2 .sg1-split { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
  html.tp-ipad.tp-desk2 .sg1-cols { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .sg1-tsplit { grid-template-columns: minmax(0, 1fr) 280px; }
  html.tp-ipad.tp-desk2 .sg1-trow { grid-template-columns: minmax(0, 1fr) 72px 48px 96px; }
  html.tp-ipad.tp-desk2 .sg1-trow > :nth-child(5) { display: none; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .sg1-split { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .sg1-listcol { max-height: none; position: static; }
  html.tp-ipad.tp-desk2 .d2p-esign:not(.sg1-pushed) .sg1-detail { display: none; }
  html.tp-ipad.tp-desk2 .d2p-esign.sg1-pushed .sg1-listcol { display: none; }
  html.tp-ipad.tp-desk2 .sg1-tsplit { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .sg1-tinsp { position: static; }
  html.tp-ipad.tp-desk2 .sg1-head { flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .sg1-rc-row { flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .sg1-rc-who { flex-basis: calc(100% - 110px); }
}

/* ==========================================================================
   Sign 1b (~/holly/design/sign-apple/SPEC.md §2, §6, §19): the identity check
   on each route chip, the access-code panel (frame "send": shown once, Copy,
   New code), the envelope page's code rows, and the Review step's reminders.
   ========================================================================== */
@media (min-width: 769px) {
  html.tp-desk2 .sg1-chip-main em.sg1-chip-id { font-style: normal; font-size: var(--d2-t-11); color: #23508F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .sg1-chip-main em.sg1-chip-id.is-locked { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .sg1-chip.is-done .sg1-chip-id { color: var(--d2-mute); }
  html.tp-desk2 .sg1-code { display: flex; align-items: center; gap: 12px; margin: 0 14px 10px 56px; padding: 10px 12px; border-radius: 9px; background: #F4F8FF; box-shadow: inset 0 0 0 1px #D5E3FA; font-family: var(--d2-font); }
  html.tp-desk2 .sg1-code > svg { flex: 0 0 auto; color: #23508F; }
  html.tp-desk2 .sg1-code > span { flex: 1 1 auto; min-width: 0; font-size: var(--d2-t-12); color: #4A5A73; }
  html.tp-desk2 .sg1-code > span b { color: #23508F; font-weight: 600; }
  html.tp-desk2 .sg1-code.is-todo { background: #FFF8E1; box-shadow: inset 0 0 0 1px #F2DFA4; }
  html.tp-desk2 .sg1-code.is-todo > svg, html.tp-desk2 .sg1-code.is-todo > span b { color: #6B5500; }
  html.tp-desk2 .sg1-code-l { flex: 1 1 auto; min-width: 0; display: flex; gap: 9px; color: #23508F; }
  html.tp-desk2 .sg1-code-l svg { flex: 0 0 auto; margin-top: 1px; }
  html.tp-desk2 .sg1-code-l b { display: block; font-size: var(--d2-t-12); font-weight: 600; }
  html.tp-desk2 .sg1-code-l small { display: block; max-width: 380px; font-size: var(--d2-t-11); color: #4A5A73; }
  html.tp-desk2 .sg1-code-v { display: flex; gap: 6px; flex: 0 0 auto; font: 600 var(--d2-t-20) ui-monospace, Menlo, monospace; letter-spacing: 2px; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .sg1-code-v span { padding: 2px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
  html.tp-desk2 .sg1-code .d2h-btn { flex: 0 0 auto; height: var(--d2-btn-h-sm); padding: 0 9px; font-size: var(--d2-t-12); }
  html.tp-desk2 .sg1-codesheet .sg1-code { margin: 0 0 12px; flex-wrap: wrap; }
  html.tp-desk2 .sg1-codes { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
  html.tp-desk2 .sg1-coderow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #F4F8FF; box-shadow: inset 0 0 0 1px #D5E3FA; font-family: var(--d2-font); color: #23508F; }
  html.tp-desk2 .sg1-coderow > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .sg1-coderow b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .sg1-coderow b.is-bad { color: var(--d2-red); }
  html.tp-desk2 .sg1-coderow span { font-size: var(--d2-t-12); color: #4A5A73; }
  html.tp-desk2 .sg1-coderow .d2h-btn { height: var(--d2-btn-h-sm); padding: 0 9px; font-size: var(--d2-t-12); }
  html.tp-desk2 .esw-remind .esw-remind-line input { height: var(--d2-btn-h-sm); padding: 0 6px; border: 0; border-radius: var(--d2-radius); box-shadow: var(--d2-edge); background: #fff; font: 400 var(--d2-t-13) var(--d2-font); text-align: center; }
  html.tp-ipad.tp-desk2 .sg1-code .d2h-btn,
  html.tp-ipad.tp-desk2 .sg1-coderow .d2h-btn { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .esw-remind .esw-remind-line input { height: 44px; }
}

/* ============================================================================
   Desktop D5: growth and fleet (Social, Blog, Insights, Website, AI Assist).
   Same rule: every selector starts with html.tp-desk2 or html.tp-ipad, and
   layout lives inside min-width: 769px, where the new shell is shown. Each page
   renders at the top of its own <section> (.d2-on) and today's markup beneath
   it hides (Social's Board and Trash, and the job editor, show it again).
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-social.d2-on:not(.d5-classic) > :not(#d2-social-page),
  html.tp-desk2 #view-blog.d2-on > :not(#d2-blog-page),
  html.tp-desk2 #view-blog_insights.d2-on > :not(#d2-blog_insights-page),
  html.tp-desk2 #view-content.d2-on:not(.d5-editing) > :not(#d2-content-page),
  html.tp-desk2 #view-content.d2-on.d5-editing > :not(#content-editor),
  html.tp-desk2 #view-aiassist.d2-on > :not(#d2-aiassist-page) { display: none !important; }
  html.tp-desk2 #view-content.d2-on.d5-editing > #content-editor { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; padding: 18px 22px; max-width: 900px; }
  html.tp-desk2 #view-social.d5-classic > #d2-social-page { margin-bottom: 14px; }
  html.tp-desk2 .d5-page { max-width: 1320px; }
  html.tp-desk2 .d5-grow { flex: 1 1 auto; }
  html.tp-desk2 .d5-pad { padding: 12px 16px; margin: 0; }
  html.tp-desk2 .d5-pad2 { padding: 0 16px 14px; }
  html.tp-desk2 .d5-mt { margin-top: 16px !important; }
  html.tp-desk2 .d5-mx { margin: 0 12px 8px; }
  html.tp-desk2 .d5-num { text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d5-nowrap { white-space: nowrap; }
  html.tp-desk2 .d5-center { justify-content: center; text-align: center; }
  html.tp-desk2 .d5-bar { margin-bottom: 14px; }
  html.tp-desk2 .d5-segn { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; margin-left: 5px; border-radius: 8px; background: var(--d2-y); color: #000; font: 700 var(--d2-t-11)/16px var(--d2-font); font-style: normal; }
  html.tp-desk2 .d5-segn.is-grey { background: var(--d2-soft); }
  html.tp-desk2 .d2h-btn.is-amber { background: #FFF6D6; box-shadow: 0 0 0 .5px #E0A100, 0 1px 1.5px rgba(0, 0, 0, .06); color: #5C4600; }
  html.tp-desk2 .d2h-btn.is-off { opacity: .4; pointer-events: none; }
  html.tp-desk2 .d3-kv.is-warn > b { color: #94600C; }
  html.tp-desk2 .d3-kv.is-badrow > span { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .d5-cardhead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d5-kickrow { padding: 14px 16px 6px; margin: 0; }
  html.tp-desk2 .d5-sel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d5-sel select { height: 30px; border-radius: 8px; border: 1px solid var(--d2-line); font: 600 var(--d2-t-13) var(--d2-font); padding: 0 8px; background: #fff; }
  html.tp-desk2 .d5-stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.tp-desk2 .d5-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c1; flex: 0 0 9px; }
  html.tp-desk2 .d5-dot.is-good { background: var(--d2-green); }
  html.tp-desk2 .d5-dot.is-warn { background: var(--d2-amber); }
  html.tp-desk2 .d5-dot.is-bad { background: var(--d2-red); }
  html.tp-desk2 .d5-dot.is-blue { background: #2D6BCF; }
  html.tp-desk2 .d5-msg { font-size: var(--d2-t-13); margin: 6px 0 0; min-height: 0; }
  html.tp-desk2 .d5-msg.is-bad { color: var(--d2-red); }
  html.tp-desk2 .d5-linkcard { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 16px; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d5-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; background: #DCE3E8; color: #5E6A73; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
  html.tp-desk2 .d5-thumb.is-sm { width: 38px; height: 38px; flex-basis: 38px; border-radius: 8px; }
  html.tp-desk2 .d5-thumb img { width: 100%; height: 100%; object-fit: cover; }
  html.tp-desk2 .d5-kick { font: 700 var(--d2-t-11)/1.3 var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); }
  html.tp-desk2 .d5-kick.is-bad { color: var(--d2-red); }

  /* ---- Social: Review (the queue beside the post) ---- */
  html.tp-desk2 .d5-review { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
  html.tp-desk2.d2-insp-open .d5-review { grid-template-columns: 320px minmax(0, 1fr); }
  html.tp-desk2 .d5-queue { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--d2-top) + 16px); max-height: calc(100dvh - var(--d2-top) - 110px); overflow-y: auto; padding: 2px; }
  html.tp-desk2 .d5-qhead { display: flex; justify-content: space-between; font-size: var(--d2-t-13); padding: 0 2px; }
  html.tp-desk2 .d5-qhead span { color: var(--d2-mute); }
  html.tp-desk2 .d5-qcard { flex: 0 0 auto; background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; overflow: hidden; cursor: pointer; outline: none; }
  html.tp-desk2 .d5-qcard:hover { border-color: #cfcfc6; }
  html.tp-desk2 .d5-qcard.is-sel { border-color: var(--d2-ink); box-shadow: 0 0 0 1px var(--d2-ink); }
  html.tp-desk2 .d5-qtop { display: flex; gap: 12px; padding: 14px; }
  html.tp-desk2 .d5-qtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html.tp-desk2 .d5-qtext b { font-size: var(--d2-t-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d5-cap { font-size: var(--d2-t-13); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d5-band { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d2-line2); font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .d5-band.is-good { background: #F3F7F1; color: #245C33; }
  html.tp-desk2 .d5-band.is-warn { background: #FFF6D6; color: #5C4600; }
  html.tp-desk2 .d5-band.is-bad { background: #FBE7E5; color: #8E241C; }
  html.tp-desk2 .d5-band.is-grey { background: #F1F1EC; color: #44443f; }
  html.tp-desk2 .d5-post { background: #fff; border: 1px solid var(--d2-line); border-radius: 16px; padding: 18px; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px; min-height: 420px; }
  html.tp-desk2.d2-insp-open .d5-post { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d5-bigmedia { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; background: #D6DDE3; color: #5E6A73; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  html.tp-desk2 .d5-bigmedia img { width: 100%; height: 100%; object-fit: cover; }
  html.tp-desk2 .d5-count { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .85); border-radius: 8px; padding: 2px 8px; font: 600 var(--d2-t-12) var(--d2-font); font-style: normal; }
  html.tp-desk2 .d5-strip { display: flex; gap: 6px; margin-top: 8px; }
  html.tp-desk2 .d5-sthumb { width: 48px; height: 48px; border-radius: 8px; background: #E6EBEE; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #7a858d; }
  html.tp-desk2 .d5-sthumb.is-on { box-shadow: 0 0 0 2px var(--d2-ink); }
  html.tp-desk2 .d5-sthumb img { width: 100%; height: 100%; object-fit: cover; }
  html.tp-desk2 .d5-pbody { min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .d5-pbody h2 { margin: 4px 0 10px; font-size: var(--d2-t-20); letter-spacing: -.01em; line-height: 1.2; }
  html.tp-desk2 .d5-caption { white-space: pre-wrap; font-size: var(--d2-t-15); line-height: 1.55; margin: 0 0 12px; max-height: 260px; overflow-y: auto; }
  html.tp-desk2 .d5-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
  html.tp-desk2 .d5-actions .is-big { height: var(--d2-btn-h-lg); font-size: var(--d2-t-13); }

  /* ---- Social: Planned (calendar, tray) ---- */
  html.tp-desk2 .d5-planned { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
  html.tp-desk2.d2-insp-open .d5-planned { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2.d2-insp-open .d5-planned .d5-side { display: grid; grid-template-columns: 1fr 1fr; }
  html.tp-desk2 .d5-calhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--d2-line2); flex-wrap: wrap; }
  html.tp-desk2 .d5-calrange { font-size: var(--d2-t-17); margin: 0 6px; }
  html.tp-desk2 .d5-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d5-legend i { width: 12px; height: 12px; border-radius: 4px; margin-left: 6px; display: inline-block; }
  html.tp-desk2 .d5-legend i.is-approved { background: #FFE58F; }
  html.tp-desk2 .d5-legend i.is-needs { background: #fff; border: 1.5px dashed #D9A400; }
  html.tp-desk2 .d5-legend i.is-posted { background: #E6E6E0; }
  html.tp-desk2 .d5-whead { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); padding: 8px 0 6px; border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .d5-wday { display: flex; flex-direction: column; padding-left: 8px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d5-wday b { font-size: var(--d2-t-20); color: var(--d2-ink); line-height: 1.2; align-self: flex-start; padding: 0 4px; border-radius: 7px; }
  html.tp-desk2 .d5-wday.is-today b { background: var(--d2-y); }
  html.tp-desk2 .d5-wscroll { max-height: max(380px, calc(100dvh - var(--d2-top) - 250px)); overflow-y: auto; position: relative; }
  html.tp-desk2 .d5-wgrid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); position: relative; }
  html.tp-desk2 .d5-wgrid > .d5-gutter { position: relative; }
  html.tp-desk2 .d5-hour { position: absolute; right: 8px; transform: translateY(-7px); font-size: var(--d2-t-11); color: var(--d2-mute); white-space: nowrap; }
  html.tp-desk2 .d5-wcol { position: relative; border-left: 1px solid var(--d2-line2); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #EFEFE9 43px, #EFEFE9 44px); min-width: 0; }
  html.tp-desk2 .d5-wcol.is-today { background-color: #FFFDF3; }
  html.tp-desk2 .d5-pastfill { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .045) 0 5px, transparent 5px 11px); pointer-events: none; }
  html.tp-desk2 .d5-nowline { position: absolute; left: -1px; right: 0; height: 2px; background: var(--d2-red); z-index: 3; pointer-events: none; }
  html.tp-desk2 .d5-nowline::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--d2-red); }
  html.tp-desk2 .d5-evt { position: absolute; right: 4px; z-index: 2; }
  html.tp-desk2 .d5-chip { display: flex; flex-direction: column; width: 100%; text-align: left; border-radius: 8px; padding: 4px 7px; border: 1px solid #F2D36B; background: #FFF1B8; color: var(--d2-ink); font: 400 var(--d2-t-11)/1.3 var(--d2-font); cursor: pointer; min-width: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html.tp-desk2 .d5-chip[data-d5-drag] { cursor: grab; }
  html.tp-desk2 .d5-chip .d5-ctitle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
  html.tp-desk2 .d5-chip .d5-ctime { color: #5f5f58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d5-chip.is-needs { background: #fff; border: 1.5px dashed #D9A400; }
  html.tp-desk2 .d5-chip.is-posted { background: #F1F1EC; border-color: #E3E3DC; color: #6f6f68; cursor: pointer; }
  html.tp-desk2 .d5-chip.is-failed { background: #FBE7E5; border-color: #F1C4C0; }
  html.tp-desk2 .d5-chip.is-publishing { background: #E6EEF8; border-color: #BFD1EE; }
  html.tp-desk2 .d5-chip.is-manual { background: #EFEAF8; border-color: #D6CBEF; }
  html.tp-desk2 .d5-chip.is-open { box-shadow: 0 0 0 2px var(--d2-ink); }
  html.tp-desk2 .d5-chip.is-lifted,
  html.tp-desk2 .d5-titem.is-lifted { opacity: .35; }
  html.tp-desk2 .d5-chip.is-compact { flex-direction: row; gap: 4px; padding: 2px 6px; margin-top: 3px; font-size: var(--d2-t-11); }
  html.tp-desk2 .d5-chip.is-compact .d5-ctime { color: var(--d2-ink); font-weight: 600; flex: 0 0 auto; }
  html.tp-desk2 .d5-chip.is-compact .d5-ctitle { font-weight: 500; }
  html.tp-desk2 .d5-month { padding: 0 8px 8px; }
  html.tp-desk2 .d5-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  html.tp-desk2 .d5-mhd { font-size: var(--d2-t-12); color: var(--d2-mute); padding: 8px 8px 6px; }
  html.tp-desk2 .d5-mcell { position: relative; min-height: 96px; border-top: 1px solid var(--d2-line2); border-left: 1px solid var(--d2-line2); padding: 6px; min-width: 0; }
  html.tp-desk2 .d5-mcell:nth-child(7n + 1) { border-left: 0; }
  html.tp-desk2 .d5-mcell.is-pastday { background: #FAFAF7; }
  html.tp-desk2 .d5-mcell.is-other .d5-mnum { color: #b7b7b0; }
  html.tp-desk2 .d5-mnum { font-size: var(--d2-t-12); font-weight: 600; padding: 0 5px; border-radius: 6px; }
  html.tp-desk2 .d5-mcell.is-today .d5-mnum { background: var(--d2-y); }
  html.tp-desk2 .d5-more { display: block; font-size: var(--d2-t-11); color: var(--d2-mute); margin-top: 3px; }
  html.tp-desk2 .d5-agenda { padding: 4px 0 8px; }
  html.tp-desk2 .d5-aday { display: flex; justify-content: space-between; padding: 14px 16px 6px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d5-aday span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .d5-arow { width: 100%; border: 0; border-top: 1px solid var(--d2-line2); text-align: left; font-family: var(--d2-font); }
  html.tp-desk2 .d5-side { display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d5-sidehead { display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; }
  html.tp-desk2 .d5-tray > .d2t-muted { padding: 0 14px; margin: 2px 0 8px; }
  html.tp-desk2 .d5-titem { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 8px 10px 8px 6px; border: 1px solid var(--d2-line); border-radius: 12px; background: #fff; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html.tp-desk2 .d5-titem:hover { border-color: #cfcfc6; }
  html.tp-desk2 .d5-titem .d2t-main > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d5-grip { color: #a3a39b; display: inline-flex; flex: 0 0 auto; }
  html.tp-desk2 .d5-trayempty { font-size: var(--d2-t-13); color: var(--d2-mute); padding: 4px 14px 14px; margin: 0; }
  html.tp-desk2 .d5-wsum { padding-bottom: 8px; }
  html.tp-desk2 .d5-wsum .d3-kv { padding: 6px 14px; }
  html.tp-desk2 .d5-drop { position: absolute; left: 2px; right: 2px; height: 22px; border: 2px dashed var(--d2-ink); border-radius: 7px; background: rgba(245, 197, 0, .22); z-index: 6; pointer-events: none; }
  html.tp-desk2 .d5-drop.is-cell { inset: 2px; height: auto; }
  html.tp-desk2 .d5-drop span { position: absolute; left: 0; top: calc(100% + 3px); background: var(--d2-ink); color: #fff; border-radius: 6px; padding: 2px 7px; font: 600 var(--d2-t-11) var(--d2-font); white-space: nowrap; }
  html.tp-desk2 .d5-drop.is-past { border-color: var(--d2-red); background: rgba(214, 54, 43, .08); }
  html.tp-desk2 .d5-drop.is-past span { background: var(--d2-red); }
  html.tp-desk2.d5-dragging,
  html.tp-desk2.d5-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
  html.tp-desk2 .d5-classicbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--d2-line); border-radius: 14px; font-size: var(--d2-t-13); }

  /* ---- Social: inspector, re-pick dialog, The 50 ---- */
  html.tp-desk2 .d5-ihead h2 { margin: 8px 0 2px; font-size: var(--d2-t-20); line-height: 1.25; }
  html.tp-desk2 .d5-ihead .d2t-muted { margin: 0 0 12px; }
  html.tp-desk2 .d5-imedia { aspect-ratio: 4 / 3; border-radius: 12px; background: #D6DDE3; color: #5E6A73; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  html.tp-desk2 .d5-imedia img { width: 100%; height: 100%; object-fit: cover; }
  html.tp-desk2 .d5-ifoot { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  html.tp-desk2 .d5-ifoot .d2h-btn { justify-content: center; height: var(--d2-btn-h-lg); }
  html.tp-desk2 .d5-apart { border-top: 1px solid var(--d2-line2); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; }
  html.tp-desk2 .d5-apart .d3-danger { display: flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d5-row2 { flex-direction: row; flex-wrap: wrap; }
  html.tp-desk2 .d5-row2 .d2h-btn { flex: 1 1 140px; }
  html.tp-desk2 .d5-row2 .d2h-link { flex: 1 1 100%; }
  html.tp-desk2 .d5-schednote { color: var(--d2-red); font: 600 var(--d2-t-12) var(--d2-font); margin: 6px 0 0; display: flex; align-items: center; gap: 5px; }
  html.tp-desk2 #social-schedule-btn.d5-off { opacity: .45; cursor: not-allowed; }
  html.tp-desk2 .sh-studio { width: min(900px, calc(100vw - var(--d2-side))); background: #F7F7F3; box-shadow: 0 0 0 100vmax rgba(17, 17, 17, .22), -18px 0 60px rgba(0, 0, 0, .18); font-family: var(--d2-font); }
  html.tp-desk2 .sh-studio.is-full { box-shadow: 0 0 0 100vmax rgba(17, 17, 17, .22); }
  html.tp-desk2 .sh-studio .social-layout,
  html.tp-desk2 .sh-studio .social-composer { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
  html.tp-desk2 .sh-studio-steps button.active { background: var(--d2-ink); color: var(--d2-y); }
}
/* the drag ghost, the re-pick dialog and The 50 live in the layer (any width) */
html.tp-desk2 .d5-ghost { position: fixed; z-index: 400; pointer-events: none; background: var(--d2-ink); color: #fff; border-radius: 8px; padding: 5px 10px; font: 600 var(--d2-t-12) var(--d2-font); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--d2-shadow); }
html.tp-desk2 .d2-sheet .d2-modal:has(.d5-repick),
html.tp-desk2 .d2-sheet .d2-modal:has(.d5-namesheet) { width: min(470px, 100%); }
html.tp-desk2 .d2-sheet .d2-modal:has(.d5-the50) { width: min(560px, 100%); }
html.tp-desk2 .d2-confirm.is-wide .d2-modal { width: min(500px, 100%); }
html.tp-desk2 .d5-sub { margin: -6px 0 12px; font-size: var(--d2-t-13); color: var(--d2-mute); }
html.tp-desk2 .d5-warn { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FFF6D6; border: 1px solid #F2D36B; color: #5C4600; font-size: var(--d2-t-13); line-height: 1.45; margin-bottom: 14px; }
html.tp-desk2 .d5-warn > svg { flex: 0 0 18px; margin-top: 1px; }
html.tp-desk2 .d5-lbl { display: block; font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .04em; color: #44443f; margin: 0 0 6px; }
html.tp-desk2 .d5-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
html.tp-desk2 .d5-in { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--d2-line); border-radius: 12px; background: #fff; color: var(--d2-mute); }
html.tp-desk2 .d5-in input { border: 0; outline: none; background: none; font: 500 var(--d2-t-15) var(--d2-font); color: var(--d2-ink); min-width: 0; flex: 1 1 auto; padding: 0; box-shadow: none; }
html.tp-desk2 .d5-repick .d2t-muted { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 8px 0 0; }
html.tp-desk2 .d5-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
html.tp-desk2 .d5-stack .d2-bigbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html.tp-desk2 .d5-stack .d2-bigbtn:disabled { opacity: .5; cursor: default; }
html.tp-desk2 .d5-stack .d2-bigbtn.is-off { opacity: .5; cursor: default; }
html.tp-desk2 .d2-bigbtn.is-amber { background: #fff; border: 1.5px solid #E0A100; color: #5C4600; }
html.tp-desk2 .d2-bigbtn.is-plain { border-color: transparent; background: none; }
html.tp-desk2 .d5-preflight { text-align: left; border: 1px solid var(--d2-line); border-radius: 12px; padding: 4px 12px; margin: 0 0 4px; }
html.tp-desk2 .d5-pfrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: var(--d2-t-13); border-top: 1px solid var(--d2-line2); color: #17753A; }
html.tp-desk2 .d5-pfrow:first-child { border-top: 0; }
html.tp-desk2 .d5-pfrow span { flex: 1 1 auto; color: var(--d2-ink); }
html.tp-desk2 .d5-pfrow b { font-weight: 500; color: var(--d2-mute); font-size: var(--d2-t-12); }
html.tp-desk2 .d5-pfrow.is-warn { color: #94600C; }
html.tp-desk2 .d5-pfrow.is-warn b { color: #94600C; }
html.tp-desk2 .d5-preflight .d2t-muted { font-size: var(--d2-t-12); color: var(--d2-mute); margin: 4px 0 6px; }
html.tp-desk2 .d5-the50 .d2t-card { background: #fff; border: 1px solid var(--d2-line); border-radius: 14px; overflow: hidden; }
html.tp-desk2 .d5-packrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--d2-line2); }
html.tp-desk2 .d5-packrow:first-child { border-top: 0; }
html.tp-desk2 .d5-packrow .d2t-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
html.tp-desk2 .d5-packrow .d2t-main span { font-size: var(--d2-t-12); color: var(--d2-mute); }
html.tp-desk2 .d5-switch { width: 46px; height: 28px; border-radius: 14px; border: 0; background: #D9D9D2; position: relative; cursor: pointer; flex: 0 0 46px; }
html.tp-desk2 .d5-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
html.tp-desk2 .d5-switch.is-on { background: var(--d2-green); }
html.tp-desk2 .d5-switch.is-on::after { left: 21px; }
html.tp-desk2 .d5-the50 .d2t-muted { font-size: var(--d2-t-13); color: var(--d2-mute); margin: 0 0 10px; }
html.tp-desk2 .d5-the50 .d2t-card + .d2t-muted { margin-top: 10px; }
html.tp-desk2 .d5-sheetbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
html.tp-desk2 .d5-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font: 600 var(--d2-t-12) var(--d2-font); color: #44443f; }
html.tp-desk2 .d5-field input { height: 40px; border: 1px solid var(--d2-line); border-radius: 10px; padding: 0 12px; font: 400 var(--d2-t-15) var(--d2-font); }

@media (min-width: 769px) {
  /* ---- Insights ---- */
  html.tp-desk2 .d5-hero { padding: 16px 18px 10px; margin-bottom: 12px; }
  html.tp-desk2 .d5-herohead { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
  html.tp-desk2 .d5-big { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
  html.tp-desk2 .d5-big b { font-size: var(--d2-t-26); letter-spacing: -.02em; }
  html.tp-desk2 .d5-delta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--d2-soft); font: 600 var(--d2-t-12) var(--d2-font); color: #44443f; }
  html.tp-desk2 .d5-delta.is-up { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d5-delta.is-down { background: #FBE7E5; color: #B42D23; }
  html.tp-desk2 .d2t-stat .d5-delta { align-self: flex-start; background: none; padding: 0; height: auto; }
  html.tp-desk2 .d5-tip { border: 1px solid var(--d2-line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; font-size: var(--d2-t-12); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
  html.tp-desk2 .d5-tip b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d5-chartwrap { position: relative; margin-top: 10px; outline: none; }
  html.tp-desk2 .d5-chart { width: 100%; height: 170px; display: block; cursor: crosshair; }
  html.tp-desk2 .d5-chart .a { fill: rgba(245, 197, 0, .18); }
  html.tp-desk2 .d5-chart .v { fill: none; stroke: #D4A800; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
  html.tp-desk2 .d5-chart .s { fill: none; stroke: #A8A89F; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
  html.tp-desk2 .d5-chart .c { stroke: var(--d2-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  html.tp-desk2 .d5-chart .d { fill: var(--d2-ink); }
  html.tp-desk2 .d5-ticks { position: relative; height: 18px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d5-ticks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
  html.tp-desk2 .d5-ticks span:first-child { transform: none; }
  html.tp-desk2 .d5-ticks span:last-child { transform: translateX(-100%); }
  html.tp-desk2 .d5-sort { border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
  html.tp-desk2 .d5-sort.is-on { color: var(--d2-ink); }
  html.tp-desk2 .d5-trow { cursor: pointer; }
  html.tp-desk2 .d5-trow:hover { background: #FAFAF7; }
  html.tp-desk2 .d5-trow.is-sel { background: #FFF6CC; }
  html.tp-desk2 .d5-cbar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: #EFEFE9; vertical-align: middle; margin-right: 6px; overflow: hidden; }
  html.tp-desk2 .d5-cbar i { display: block; height: 100%; background: var(--d2-y); border-radius: 3px; }
  html.tp-desk2 .d5-site3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
  html.tp-desk2.d2-insp-open .d5-site3 { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d5-brow2 { margin: 0 0 10px; }
  html.tp-desk2 .d5-brow2 > div { display: flex; justify-content: space-between; font-size: var(--d2-t-13); margin-bottom: 4px; }
  html.tp-desk2 .d5-brow2 > i { display: block; height: 6px; border-radius: 3px; background: #EFEFE9; overflow: hidden; }
  html.tp-desk2 .d5-brow2 > i em { display: block; height: 100%; background: var(--d2-y); }
  html.tp-desk2 .d5-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.tp-desk2 .d5-minis > div { background: var(--d2-bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
  html.tp-desk2 .d5-minis span { font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--d2-mute); }
  html.tp-desk2 .d5-minis b { font-size: var(--d2-t-17); }
  html.tp-desk2 .d5-funnel { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: var(--d2-t-12); margin: 6px 0; }
  html.tp-desk2 .d5-funnel i { display: block; height: 10px; border-radius: 5px; background: #EFEFE9; overflow: hidden; }
  html.tp-desk2 .d5-funnel em { display: block; height: 100%; background: var(--d2-y); border-radius: 5px; }
  html.tp-desk2 .d5-funnel b { text-align: right; }

  /* ---- Website ---- */
  html.tp-desk2 .d5-jrow { width: 100%; border: 0; border-top: 1px solid var(--d2-line2); text-align: left; font-family: var(--d2-font); }
  html.tp-desk2 .d5-prevkick { font: 700 var(--d2-t-11) var(--d2-font); letter-spacing: .1em; text-transform: uppercase; color: #9A7B00; }
  html.tp-desk2 .d5-jobprev { border: 1px solid var(--d2-line); border-radius: 14px; background: #FAFAF7; padding: 14px; margin: 8px 0 12px; }
  html.tp-desk2 .d5-jobprev h3 { margin: 4px 0 6px; font-size: var(--d2-t-17); }
  html.tp-desk2 .d5-jobprev p { margin: 0 0 10px; font-size: var(--d2-t-13); color: #44443f; line-height: 1.45; }
  html.tp-desk2 .d5-fakebtn { display: inline-flex; height: 30px; align-items: center; padding: 0 14px; border-radius: 9px; background: var(--d2-y); font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .d5-apphead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  html.tp-desk2 .d5-apphead h2 { margin: 0; font-size: var(--d2-t-20); }
  html.tp-desk2 .d5-apphead .d2t-muted { margin: 0; }
  html.tp-desk2 .d5-av { width: 44px; height: 44px; border-radius: 50%; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-13) var(--d2-font); flex: 0 0 44px; }
  html.tp-desk2 .d5-qas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.tp-desk2 .d5-qas .d2h-btn { justify-content: center; text-decoration: none; }
  html.tp-desk2 .d5-msgtext { white-space: pre-wrap; font-size: var(--d2-t-13); line-height: 1.5; margin: 4px 0 8px; }

  /* ---- AI Assist ---- */
  html.tp-desk2 .d5-aasum { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 12px; }
  html.tp-desk2 .d5-aasum .d2t-main > b { font-size: var(--d2-t-20); }
  html.tp-desk2 .d5-ring { width: 56px; height: 56px; flex: 0 0 56px; transform: rotate(-90deg); }
  html.tp-desk2 .d5-ring circle { fill: none; stroke-width: 6; }
  html.tp-desk2 .d5-ring .bg { stroke: #EFEFE9; }
  html.tp-desk2 .d5-ring .fg { stroke: var(--d2-y); stroke-linecap: round; }
  html.tp-desk2 .d5-aarow { width: 100%; border: 0; border-top: 1px solid var(--d2-line2); text-align: left; font-family: var(--d2-font); }
  html.tp-desk2 .d5-aarow em { font-style: normal; font-weight: 400; color: var(--d2-mute); }
  html.tp-desk2 .d5-aahead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  html.tp-desk2 .d5-aahead .d2t-main > b { font-size: var(--d2-t-17); white-space: normal; }
  html.tp-desk2 .d5-ask { margin: 2px 0 10px; }
  html.tp-desk2 .d5-aabanner { display: flex; gap: 10px; padding: 12px; border-radius: 12px; font-size: var(--d2-t-13); line-height: 1.45; border: 1px solid transparent; }
  html.tp-desk2 .d5-aabanner > svg { flex: 0 0 18px; margin-top: 1px; }
  html.tp-desk2 .d5-aabanner.is-bad { background: #FBE7E5; border-color: #F1C4C0; color: #8E241C; }
  html.tp-desk2 .d5-aabanner.is-good { background: #EAF6EE; color: #17753A; }
  html.tp-desk2 .d5-aabanner.is-warn { background: #FFF6D6; border-color: #F2D36B; color: #5C4600; }
  html.tp-desk2 .d5-fold { border-top: 1px solid var(--d2-line2); margin-top: 10px; padding-top: 6px; }
  html.tp-desk2 .d5-fold summary { cursor: pointer; font: 600 var(--d2-t-13) var(--d2-font); padding: 6px 0; display: flex; gap: 8px; }
  html.tp-desk2 .d5-fold summary span { font-weight: 400; color: var(--d2-mute); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Social P1: one area, four views (Today · Posts · Calendar · Results) ----
   Built only from the Polish B1 tokens: type scale, 28px controls, radius 7,
   one yellow per screen. Scoped like the rest of D5. */
@media (min-width: 769px) {
  html.tp-desk2 .d6-bar { position: sticky; top: var(--d2-top); z-index: 5; background: var(--d2-bg); margin: -8px 0 14px; padding: 8px 0; }
  html.tp-desk2 .d6-classic { font-size: var(--d2-t-13); padding: 0 6px; }
  html.tp-desk2 .d6-classicbar { margin-bottom: 14px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d6-backbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--d2-t-13); flex-wrap: wrap; }
  html.tp-desk2 .d6-backbar > b { font-size: var(--d2-t-17); }
  html.tp-desk2 .d6-sec { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
  html.tp-desk2 .d6-sechead { display: flex; align-items: center; gap: 6px; min-height: var(--d2-btn-h); padding: 0 2px; }
  html.tp-desk2 .d6-sechead b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d6-sechead i, html.tp-desk2 .d6-ghead i, html.tp-desk2 .d6-bhead i { font-style: normal; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d6-list { display: flex; flex-direction: column; }
  html.tp-desk2 .d6-empty { padding: 16px; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d6-col { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .d6-spark { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--d2-y); display: inline-flex; align-items: center; justify-content: center; color: var(--d2-ink); }
  html.tp-desk2 .d6-spark.is-sm { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; background: var(--d2-pill); }
  html.tp-desk2 .d6-dests { display: inline-flex; gap: 4px; flex-wrap: wrap; flex: 0 0 auto; }
  html.tp-desk2 .d6-dest { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; font: 600 var(--d2-t-11)/1 var(--d2-font); white-space: nowrap; background: var(--d2-soft); color: #3b3b37; }
  html.tp-desk2 .d6-dest.is-auto { background: #E8F0FB; color: #1F4E96; }
  html.tp-desk2 .d6-dest.is-manual { background: #F1ECF8; color: #5A3E8C; }
  html.tp-desk2 .d6-dest.is-article { background: #FFF4D1; color: #6B5200; }
  html.tp-desk2 .d6-legend { margin: 12px 2px 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d5-thumb.is-xs { width: 28px; height: 28px; flex-basis: 28px; border-radius: 6px; }

  /* Today */
  html.tp-desk2 .d6-today { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
  html.tp-desk2.d2-insp-open .d6-today { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d6-prompt { padding: 18px 20px; margin: 0 0 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
  html.tp-desk2 .d6-phead { display: flex; gap: 12px; align-items: flex-start; }
  html.tp-desk2 .d6-phead h2 { margin: 2px 0 2px; font-size: var(--d2-t-20); font-weight: 700; letter-spacing: -.01em; }
  html.tp-desk2 .d6-phead .d2t-muted { margin: 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d6-pbox { margin-top: 14px; border: 1px solid var(--d2-line); border-radius: 10px; background: #FAFAF7; padding: 10px 10px 8px; }
  html.tp-desk2 .d6-pbox textarea { width: 100%; border: 0; outline: none; background: none; resize: vertical; min-height: 44px; font: 400 var(--d2-t-15)/1.45 var(--d2-font); color: var(--d2-ink); padding: 2px 4px; box-sizing: border-box; }
  html.tp-desk2 .d6-prow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
  html.tp-desk2 .d6-go { background: var(--d2-ink); color: #fff; box-shadow: none; }
  html.tp-desk2 .d6-go:hover { background: #2a2a28; }
  html.tp-desk2 .d6-go kbd { margin-left: 6px; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
  html.tp-desk2 .d6-prow > .d3-pill { flex: 0 0 auto; min-width: 72px; justify-content: center; text-align: center; }
  html.tp-desk2 .d6-nrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--d2-line2); cursor: pointer; outline: none; }
  html.tp-desk2 .d6-nrow:first-child, html.tp-desk2 .d6-mrow:first-child, html.tp-desk2 .d6-crow:first-child, html.tp-desk2 .d6-irow:first-child, html.tp-desk2 .d6-prow:first-child { border-top: 0; }
  html.tp-desk2 .d6-nrow:hover, html.tp-desk2 .d6-mrow:hover, html.tp-desk2 .d6-crow:hover, html.tp-desk2 .d6-irow:hover { background: #FAFAF7; }
  html.tp-desk2 .d6-nrow:focus-visible { box-shadow: inset 0 0 0 2px var(--d2-ink); }
  html.tp-desk2 .d6-nrow .d2t-main > span { white-space: normal; }
  html.tp-desk2 .d6-nband { font-size: var(--d2-t-12); color: #44443f; }
  html.tp-desk2 .d6-nband .is-red, html.tp-desk2 .d6-csub.is-red { color: var(--d2-red); }
  html.tp-desk2 .d6-mrow, html.tp-desk2 .d6-crow, html.tp-desk2 .d6-irow { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-top: 1px solid var(--d2-line2); background: #fff; padding: 10px 14px; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d6-steps { display: inline-flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
  html.tp-desk2 .d6-steps i { font-style: normal; font-size: var(--d2-t-11); font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--d2-soft); color: #5f5f58; }
  html.tp-desk2 .d6-steps i.is-done { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d6-steps i.is-run { background: var(--d2-pill); color: #6B5200; }
  html.tp-desk2 .d6-steps i.is-bad { background: #FBE7E5; color: #B42D23; }
  html.tp-desk2 .d6-crow { font-size: var(--d2-t-13); }
  html.tp-desk2 .d6-crow b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  html.tp-desk2 .d6-cwhen { flex: 0 0 auto; color: var(--d2-mute); font-size: var(--d2-t-12); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d6-irow { flex-wrap: wrap; row-gap: 2px; }
  html.tp-desk2 .d6-irow b { flex: 1 1 60%; min-width: 0; font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d6-ikick { flex: 1 1 100%; font-size: var(--d2-t-11); color: var(--d2-mute); }
  html.tp-desk2 .d6-iuse { flex: 0 0 auto; font-size: var(--d2-t-13); font-weight: 600; color: #6B5200; }
  html.tp-desk2 .d6-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
  html.tp-desk2 .d6-gtile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html.tp-desk2 .d6-gtile b { font-size: var(--d2-t-17); font-weight: 700; }
  html.tp-desk2 .d6-gtile span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d6-gtile em { font-style: normal; font-size: var(--d2-t-11); color: #94600C; }

  /* Posts */
  html.tp-desk2 .d6-ptop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
  html.tp-desk2 .d6-path { margin: 0; }
  html.tp-desk2 .d6-path .d6-pn { font-style: normal; color: var(--d2-mute); margin-left: 4px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d6-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .d6-pop { margin: 0; }
  html.tp-desk2 .d6-lay { margin: 0; }
  html.tp-desk2 .d6-lay button { padding: 0 8px; display: inline-flex; align-items: center; }
  html.tp-desk2 .d6-viewname { display: flex; align-items: center; gap: 10px; }
  html.tp-desk2 .d6-viewname b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d6-group { margin: 0 0 16px; }
  html.tp-desk2 .d6-ghead { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 6px; }
  html.tp-desk2 .d6-ghead b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d6-prow { width: 100%; border: 0; border-top: 1px solid var(--d2-line2); text-align: left; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d6-prow.is-static { cursor: default; }
  html.tp-desk2 .d6-prow:hover { background: #FAFAF7; }
  html.tp-desk2 .d6-prow.is-static:hover { background: #fff; }
  html.tp-desk2 .d6-when { flex: 0 0 96px; text-align: right; font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; }
  html.tp-desk2 .d6-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
  html.tp-desk2 .d6-board.is-one { grid-template-columns: minmax(0, 420px); }
  html.tp-desk2 .d6-bcol { background: #EDEDE7; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; min-width: 0; }
  html.tp-desk2 .d6-bhead { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px 2px; }
  html.tp-desk2 .d6-bhead b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d6-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; border: 0; border-radius: 10px; background: #fff; box-shadow: var(--d2-edge); padding: 10px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d6-card:hover { box-shadow: 0 0 0 1px #cfcfc6, 0 1px 2px rgba(0, 0, 0, .06); }
  html.tp-desk2 .d6-ctop { display: flex; gap: 8px; align-items: flex-start; }
  html.tp-desk2 .d6-ctop b { font-size: var(--d2-t-13); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.tp-desk2 .d6-csub { font-size: var(--d2-t-12); color: var(--d2-mute); line-height: 1.35; }
  html.tp-desk2 .d6-more { align-self: flex-start; padding: 2px 6px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d6-bempty { margin: 6px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d6-boardnote { margin: 10px 2px 0; font-size: var(--d2-t-12); }

  /* Results */
  html.tp-desk2 .d6-rhead { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
  html.tp-desk2 .d6-rhead h2 { margin: 0; font-size: var(--d2-t-26); font-weight: 700; letter-spacing: -.02em; }
  html.tp-desk2 .d6-rhead .d2t-muted { margin: 2px 0 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d6-rhead .d2-seg { margin: 0; }
  html.tp-desk2 .d6-rtile b { font-size: var(--d2-t-20); }
  html.tp-desk2 .d6-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; background: #FFF6D6; border: 1px solid #F2D36B; color: #5C4600; font-size: var(--d2-t-13); line-height: 1.45; }
  html.tp-desk2 .d6-banner > svg { flex: 0 0 16px; margin-top: 2px; }
  html.tp-desk2 .d6-rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  html.tp-desk2.d2-insp-open .d6-rgrid { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d6-rgrid .d2t-card { margin: 0 0 16px; }
  html.tp-desk2 .d6-rbody { padding: 0 16px 14px; }
  html.tp-desk2 .d6-minis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px; }
  html.tp-desk2 .d6-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  html.tp-desk2 .d6-two .d3-kv { padding: 5px 0; }
  html.tp-desk2 .d6-tpost { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  html.tp-desk2 .d6-top td, html.tp-desk2 .d6-arts td { vertical-align: middle; }
  html.tp-desk2 .d6-aside .d3-kv { padding: 8px 14px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d6-aside .d3-kv:first-child { border-top: 0; }
  html.tp-desk2 .d6-note { font-size: var(--d2-t-12); margin: 0 2px; line-height: 1.45; }
}
/* Approve lives only in the Review focus: on the new Social, today's content
   studio keeps Save and Send to review, but its own Schedule and Publish now are
   hidden (they stay in Classic view). */
html.tp-desk2.d6-new-social #social-schedule-btn,
html.tp-desk2.d6-new-social #social-publish-now { display: none !important; }
/* iPad: 44pt targets, the side columns fold under the main one */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d6-nrow, html.tp-ipad.tp-desk2 .d6-mrow, html.tp-ipad.tp-desk2 .d6-crow, html.tp-ipad.tp-desk2 .d6-irow, html.tp-ipad.tp-desk2 .d6-card { min-height: 52px; }
  html.tp-ipad.tp-desk2 .d6-pop select { min-height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d6-classic, html.tp-ipad.tp-desk2 .d6-more { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d6-today, html.tp-ipad.tp-desk2 .d6-rgrid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d6-board { grid-template-columns: repeat(6, minmax(220px, 1fr)); }
  html.tp-ipad.tp-desk2 .d6-when { display: none; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  html.tp-desk2 .d6-today, html.tp-desk2 .d6-rgrid { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d6-minis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Social P2: the post page (timeline, stage cards, inspector, refine bar) ----
   The same tokens as P1: type scale, 28px controls, radius 7, and one yellow
   per screen (Save while there are unsaved changes, else the stage's next step). */
@media (min-width: 769px) {
  html.tp-desk2 .d7-page { display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d7-head { display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d7-headrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  html.tp-desk2 .d7-title { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .d7-title h2 { margin: 0; font-size: var(--d2-t-20); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  html.tp-desk2 .d7-savebar { display: inline-flex; align-items: center; gap: 10px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d7-unsaved { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--d2-pill); color: #6B5200; font: 600 var(--d2-t-11)/1 var(--d2-font); }
  /* timeline */
  html.tp-desk2 .d7-tl { display: flex; align-items: flex-start; gap: 0; padding: 14px 16px; background: #fff; border-radius: 12px; box-shadow: var(--d2-edge); overflow-x: auto; }
  html.tp-desk2 .d7-tlstep { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0 4px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-mute); min-width: 64px; }
  html.tp-desk2 .d7-tlstep b { font-size: var(--d2-t-12); font-weight: 600; }
  html.tp-desk2 .d7-tlc { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--d2-soft); color: #5f5f58; font: 600 var(--d2-t-11)/1 var(--d2-font); }
  html.tp-desk2 .d7-tlstep.is-done { color: var(--d2-ink); }
  html.tp-desk2 .d7-tlstep.is-done .d7-tlc { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d7-tlstep.is-now { color: var(--d2-ink); }
  html.tp-desk2 .d7-tlstep.is-now .d7-tlc { background: var(--d2-ink); color: #fff; }
  html.tp-desk2 .d7-tlstep:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 2px; border-radius: 6px; }
  html.tp-desk2 .d7-tlline { flex: 1 1 24px; min-width: 16px; height: 2px; margin-top: 10px; background: var(--d2-line); border-radius: 1px; }
  html.tp-desk2 .d7-tlline.is-done { background: #9FD2AE; }
  html.tp-desk2 .d7-tlsub { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  html.tp-desk2 .d7-tlsub i { font-style: normal; font-size: var(--d2-t-11); font-weight: 600; padding: 1px 5px; border-radius: 5px; background: var(--d2-soft); color: #5f5f58; }
  html.tp-desk2 .d7-tlsub i.is-done { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .d7-tlsub i.is-part { background: #EEF3FB; color: #1F4E96; }
  html.tp-desk2 .d7-tlsub i.is-run { background: var(--d2-pill); color: #6B5200; }
  html.tp-desk2 .d7-tlsub i.is-bad { background: #FBE7E5; color: #B42D23; }
  html.tp-desk2 .d7-tlnote { margin: 0; font-size: var(--d2-t-12); }
  /* layout */
  html.tp-desk2 .d7-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
  html.tp-desk2 .d7-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  html.tp-desk2 .d7-insp { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: calc(var(--d2-top) + 8px); max-height: calc(100vh - var(--d2-top) - 24px); overflow-y: auto; padding-bottom: 12px; }
  /* cards */
  html.tp-desk2 .d7-card { margin: 0; scroll-margin-top: calc(var(--d2-top) + 12px); }
  html.tp-desk2 .d7-card.is-now { box-shadow: 0 0 0 1.5px var(--d2-ink), 0 1px 3px rgba(0, 0, 0, .05); }
  html.tp-desk2 .d7-card.is-later { opacity: .72; }
  html.tp-desk2 .d7-card.is-later .d7-ch { border-bottom: 0; }
  html.tp-desk2 .d7-ch { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--d2-line2); flex-wrap: wrap; }
  html.tp-desk2 .d7-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  html.tp-desk2 .d7-who b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d7-cb { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  html.tp-desk2 .d7-lbl { display: block; font: 600 var(--d2-t-12)/1.3 var(--d2-font); color: #3b3b37; margin-top: 4px; }
  html.tp-desk2 .d7-lbl .d2t-muted { font-weight: 400; margin-left: 4px; }
  html.tp-desk2 .d7-in { width: 100%; box-sizing: border-box; height: var(--d2-btn-h); padding: 0 9px; border-radius: var(--d2-radius); border: 1px solid var(--d2-line); background: #fff; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 select.d7-in { width: auto; min-width: 200px; }
  html.tp-desk2 .d7-ta { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--d2-line); background: #FAFAF7; font: 400 var(--d2-t-13)/1.5 var(--d2-font); color: var(--d2-ink); resize: vertical; }
  html.tp-desk2 .d7-in:focus, html.tp-desk2 .d7-ta:focus { outline: 2px solid rgba(17, 17, 17, .18); outline-offset: 0; border-color: #bdbdb4; background: #fff; }
  html.tp-desk2 .d7-in:disabled, html.tp-desk2 .d7-ta:disabled { background: #F4F4EF; color: #44443f; }
  html.tp-desk2 .d7-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  html.tp-desk2 .d7-foot { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d7-small { font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d7-kick { display: block; font: 600 var(--d2-t-11)/1.3 var(--d2-font); color: var(--d2-mute); text-transform: none; }
  html.tp-desk2 .d7-err { margin: 0; padding: 8px 10px; border-radius: 8px; background: #FBE7E5; color: #8E2019; font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d7-warn { margin: 0; font-size: var(--d2-t-12); color: #94600C; }
  html.tp-desk2 .d7-ok { color: #17753A; font-weight: 600; }
  html.tp-desk2 .d7-done { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--d2-t-13); color: #17753A; }
  html.tp-desk2 .d7-blank { margin: 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d7-proposal { padding: 10px 12px; border-radius: 10px; background: #FFFBEA; border: 1px solid #F2E3A6; }
  html.tp-desk2 .d7-proposal p { margin: 6px 0 8px; font-size: var(--d2-t-13); line-height: 1.5; white-space: pre-wrap; }
  html.tp-desk2 .d7-note { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #F1ECF8; color: #4A3278; font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-note span { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d7-gen { display: inline-flex; align-items: center; gap: 8px; font-size: var(--d2-t-13); color: #6B5200; }
  html.tp-desk2 .d7-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #F2D36B; border-top-color: #6B5200; animation: login-spin .9s linear infinite; flex: 0 0 12px; }
  html.tp-desk2 .d7-tabs { margin: 0; align-self: flex-start; }
  html.tp-desk2 .d7-tabmark { font-style: normal; margin-left: 2px; color: var(--d2-mute); }
  html.tp-desk2 .d7-vmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  html.tp-desk2 .d7-meta { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d7-slides { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  html.tp-desk2 .d7-slide { position: relative; flex: 0 0 104px; height: 130px; border-radius: 8px; overflow: hidden; background: var(--d2-soft); box-shadow: var(--d2-edge); }
  html.tp-desk2 .d7-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d7-slide em { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(17, 17, 17, .6); color: #fff; font: 600 var(--d2-t-11)/1.3 var(--d2-font); font-style: normal; }
  html.tp-desk2 .d7-vidlink { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #F5F4EF; font-size: var(--d2-t-12); color: #44443f; flex-wrap: wrap; }
  html.tp-desk2 .d7-vidlink span { flex: 1 1 200px; }
  /* the post (absorbed composer) */
  html.tp-desk2 .d7-postgrid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
  html.tp-desk2 .d7-postleft { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  html.tp-desk2 .d7-tray { display: flex; flex-wrap: wrap; gap: 8px; }
  html.tp-desk2 .d7-thumb { position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--d2-soft); box-shadow: var(--d2-edge); }
  html.tp-desk2 .d7-thumb.is-on { box-shadow: 0 0 0 2px var(--d2-ink); }
  html.tp-desk2 .d7-tsel { width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--d2-mute); }
  html.tp-desk2 .d7-tsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d7-tctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 2px; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); opacity: 0; transition: opacity .12s; }
  html.tp-desk2 .d7-thumb:hover .d7-tctl, html.tp-desk2 .d7-thumb:focus-within .d7-tctl { opacity: 1; }
  html.tp-desk2 .d7-tctl button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .92); color: var(--d2-ink); font: 600 var(--d2-t-13)/1 var(--d2-font); cursor: pointer; padding: 0; }
  html.tp-desk2 .d7-tctl button:disabled { opacity: .35; cursor: default; }
  html.tp-desk2 .d7-add { width: 76px; height: 76px; box-sizing: border-box; border-radius: 8px; border: 1.5px dashed #c9c9c0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font: 500 var(--d2-t-11)/1.25 var(--d2-font); color: #5f5f58; cursor: pointer; padding: 4px; background: #FAFAF7; }
  html.tp-desk2 .d7-add:hover { border-color: #9b9b92; }
  html.tp-desk2 .d7-add.is-busy { opacity: .6; }
  html.tp-desk2 .d7-row2 { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
  html.tp-desk2 .d7-field { display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .d7-check { display: flex; align-items: flex-start; gap: 7px; font-size: var(--d2-t-13); line-height: 1.4; max-width: 420px; padding-bottom: 4px; }
  html.tp-desk2 .d7-check input { margin-top: 2px; }
  html.tp-desk2 .d7-check em { font-style: normal; }
  html.tp-desk2 .d7-qrow { display: flex; gap: 8px; align-items: center; }
  html.tp-desk2 .d7-qrow .d7-in { flex: 1 1 auto; }
  html.tp-desk2 .d7-phone { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  html.tp-desk2 .d7-ptabs { margin: 0; align-self: center; }
  html.tp-desk2 .d7-pcard { border-radius: 18px; background: #fff; box-shadow: 0 0 0 8px #1b1b1a, 0 6px 18px rgba(0, 0, 0, .18); overflow: hidden; margin: 8px; }
  html.tp-desk2 .d7-phead { display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-pav { width: 22px; height: 22px; border-radius: 50%; background: var(--d2-y); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-11)/1 var(--d2-font); }
  html.tp-desk2 .d7-pmedia { position: relative; aspect-ratio: 4 / 5; background: #EDEDE7; display: flex; align-items: center; justify-content: center; }
  html.tp-desk2 .d7-pmedia.is-vertical { aspect-ratio: 9 / 16; }
  html.tp-desk2 .d7-pmedia img, html.tp-desk2 .d7-pmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d7-pempty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d7-pnav { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); font: 600 var(--d2-t-15)/1 var(--d2-font); cursor: pointer; padding: 0; }
  html.tp-desk2 .d7-pnav.is-l { left: 6px; } html.tp-desk2 .d7-pnav.is-r { right: 6px; }
  html.tp-desk2 .d7-pnav:disabled { opacity: .3; }
  html.tp-desk2 .d7-pcount { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 9px; background: rgba(17, 17, 17, .6); color: #fff; font: 600 var(--d2-t-11)/1.4 var(--d2-font); font-style: normal; }
  html.tp-desk2 .d7-pcap { padding: 8px 10px 12px; font-size: var(--d2-t-12); line-height: 1.45; white-space: pre-wrap; max-height: 150px; overflow: hidden; color: #262624; }
  /* review */
  html.tp-desk2 .d7-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .d7-checks li { display: flex; align-items: center; gap: 8px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d7-checks li.is-ok { color: #17753A; }
  html.tp-desk2 .d7-checks li.is-ok span { color: var(--d2-ink); }
  html.tp-desk2 .d7-checks li.is-todo { color: #94600C; }
  html.tp-desk2 .d7-dot { width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: #E6B84B; flex: 0 0 8px; }
  html.tp-desk2 .d7-approve { padding-top: 4px; }
  html.tp-desk2 .d7-lrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); flex-wrap: wrap; }
  html.tp-desk2 .d7-lrow:first-child { border-top: 0; }
  html.tp-desk2 .d7-mtable td, html.tp-desk2 .d7-mtable th { padding: 6px 8px; }
  html.tp-desk2 .d7-analyst { padding: 10px 12px; border-radius: 10px; background: #F5F4EF; display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .d7-pre { margin: 0; white-space: pre-wrap; font-size: var(--d2-t-13); line-height: 1.5; }
  /* refine bar */
  html.tp-desk2 .d7-refine { position: sticky; bottom: 12px; z-index: 4; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--d2-line), 0 6px 18px rgba(0, 0, 0, .08); }
  html.tp-desk2 .d7-refine.is-locked { position: static; box-shadow: var(--d2-edge); align-items: center; font-size: var(--d2-t-13); color: #44443f; }
  html.tp-desk2 .d7-refine.is-locked span:not(.d6-spark) { flex: 1 1 auto; }
  html.tp-desk2 .d7-rmain { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  html.tp-desk2 .d7-rrow { display: flex; gap: 8px; align-items: center; }
  html.tp-desk2 .d7-rin { flex: 1 1 auto; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid var(--d2-line); background: #FAFAF7; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d7-rin:focus { outline: 2px solid rgba(17, 17, 17, .18); background: #fff; }
  html.tp-desk2 .d7-rtarget { margin: 0; }
  html.tp-desk2 .d7-send { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; background: var(--d2-ink); color: #fff; box-shadow: none; }
  html.tp-desk2 .d7-send:hover { background: #2a2a28; }
  html.tp-desk2 .d7-send:disabled { background: #c9c9c0; }
  html.tp-desk2 .d7-rchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  /* inspector */
  html.tp-desk2 .d7-isec { display: flex; flex-direction: column; gap: 7px; }
  html.tp-desk2 .d7-ih { font: 600 var(--d2-t-12)/1.3 var(--d2-font); color: #3b3b37; padding: 0 2px; }
  html.tp-desk2 .d7-ih .d2t-muted { font-weight: 400; margin-left: 4px; }
  html.tp-desk2 .d7-ibox { margin: 0; }
  html.tp-desk2 .d7-ibox .d3-kv { padding: 8px 12px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d7-ibox .d3-kv:first-child { border-top: 0; }
  html.tp-desk2 .d7-drow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .d7-drow:first-child { border-top: 0; }
  html.tp-desk2 .d7-dname { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  html.tp-desk2 .d7-pub { display: inline-flex; align-items: center; gap: 3px; font: 600 var(--d2-t-12)/1 var(--d2-font); white-space: nowrap; }
  html.tp-desk2 .d7-pub.is-auto { color: #1F4E96; }
  html.tp-desk2 .d7-pub.is-manual { color: #5A3E8C; }
  html.tp-desk2 .d7-pub.is-article { color: #6B5200; }
  html.tp-desk2 .d7-dextra { flex: 1 1 100%; display: flex; justify-content: flex-end; }
  html.tp-desk2 .d7-irowbtns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  html.tp-desk2 .d7-dtoggles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .d7-when { margin: 0; }
  html.tp-desk2 .d7-hist { list-style: none; margin: 0; padding: 6px 12px 8px; border-top: 1px solid var(--d2-line2); display: flex; flex-direction: column; gap: 5px; }
  html.tp-desk2 .d7-hist li { display: flex; gap: 8px; justify-content: space-between; font-size: var(--d2-t-12); line-height: 1.4; }
  html.tp-desk2 .d7-hist time { flex: 0 0 auto; color: var(--d2-mute); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d7-disc { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); text-align: left; }
  html.tp-desk2 .d7-disc b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d7-adv { display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .d7-house { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 8px; background: #FFF6D6; color: #5C4600; }
  html.tp-desk2 .d7-house svg { flex: 0 0 13px; margin-top: 2px; }
  html.tp-desk2 .d7-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d7-arow:first-child { border-top: 0; }
  html.tp-desk2 .d7-amain { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .d7-amain b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d7-amain span { font-size: var(--d2-t-11); color: var(--d2-mute); line-height: 1.35; }
  html.tp-desk2 .d7-msel { height: var(--d2-btn-h-sm); max-width: 150px; border-radius: 6px; border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-ink); padding: 0 6px; }
  html.tp-desk2 .d7-batch { grid-column: 1 / -1; justify-self: start; padding: 0; min-height: 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-erow { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d7-erow:first-child { border-top: 0; }
  html.tp-desk2 .d7-erow b { font-size: var(--d2-t-12); font-weight: 600; }
  html.tp-desk2 .d7-erow span { color: #44443f; }
  html.tp-desk2 .d7-erow .d2h-link { align-self: flex-start; padding: 0; min-height: 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-paused { display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 5px; border-radius: 4px; background: #F8E3D3; color: #8a4a1c; font: 600 var(--d2-t-11)/1 var(--d2-font); vertical-align: 1px; }
  html.tp-desk2 .d7-danger { flex-direction: row; flex-wrap: wrap; gap: 12px; padding-top: 10px; border-top: 1px solid var(--d2-line); }
}
@media (min-width: 769px) and (max-width: 1280px) {
  html.tp-desk2 .d7-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  html.tp-desk2 .d7-postgrid { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d7-phone { max-width: 280px; }
}
/* iPad: 44pt targets; portrait folds the inspector under the post */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d7-tlstep { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d7-in, html.tp-ipad.tp-desk2 .d7-rin, html.tp-ipad.tp-desk2 .d7-msel { min-height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d7-send { width: 44px; height: 44px; }
  html.tp-ipad.tp-desk2 .d7-tctl { opacity: 1; }
  html.tp-ipad.tp-desk2 .d7-tctl button { width: 26px; height: 26px; }
  html.tp-ipad.tp-desk2 .d7-disc, html.tp-ipad.tp-desk2 .d7-batch { min-height: 44px; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d7-grid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d7-insp { position: static; max-height: none; overflow: visible; }
}
/* ---- iPad: the same pages at 44pt; drag by long press; the preview on a toggle ---- */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d5-page .d2h-btn,
  html.tp-ipad.tp-desk2 .d5-page .d2t-chip,
  html.tp-ipad.tp-desk2 .d5-page .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d5-page .d3-danger,
  html.tp-ipad.tp-desk2 .d5-page .d2h-link,
  html.tp-ipad.tp-desk2 .d2-inspector .d5-ifoot .d2h-btn,
  html.tp-ipad.tp-desk2 .d2-inspector .d5-ifoot .d3-danger,
  html.tp-ipad.tp-desk2 .d2-inspector .d5-ifoot .d2h-link,
  html.tp-ipad.tp-desk2 .d2-inspector .d2t-chip,
  html.tp-ipad.tp-desk2 .d2-inspector .d5-qas .d2h-btn,
  html.tp-ipad.tp-desk2 .d2-inspector .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d5-menu .d3-menu-item,
  html.tp-ipad.tp-desk2 .d5-repick .d2-bigbtn,
  html.tp-ipad.tp-desk2 .d5-the50 .d2h-btn { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .d5-page .d2-iconbtn,
  html.tp-ipad.tp-desk2 .d2-inspector .d2-iconbtn { min-width: 44px; }
  html.tp-ipad.tp-desk2 .d5-page .d2-seg button { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d5-page .d2t-row { min-height: 60px; }
  html.tp-ipad.tp-desk2 .d5-page .d3-table td { padding-top: 13px; padding-bottom: 13px; }
  html.tp-ipad.tp-desk2 .d5-in { height: 48px; }
  html.tp-ipad.tp-desk2 .d5-switch { width: 51px; height: 31px; flex-basis: 51px; }
  html.tp-ipad.tp-desk2 .d5-switch::after { width: 27px; height: 27px; top: 2px; left: 2px; }
  html.tp-ipad.tp-desk2 .d5-switch.is-on::after { left: 22px; }
  html.tp-ipad.tp-desk2 .d5-packrow { min-height: 52px; }
  html.tp-ipad.tp-desk2 .d5-titem { min-height: 52px; }
  html.tp-ipad.tp-desk2 .d5-chip { min-height: 44px; justify-content: center; }
  html.tp-ipad.tp-desk2 .d5-sort { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d2-inspector .hc-ask-btn { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d5-chip.is-compact { min-height: 24px; }
  html.tp-ipad.tp-desk2 .d5-review { grid-template-columns: 320px minmax(0, 1fr); gap: 14px; }
  html.tp-ipad.tp-desk2 .d5-post { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d5-post .d5-bigmedia { aspect-ratio: 16 / 10; }
  html.tp-ipad.tp-desk2 .d5-planned { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d5-planned .d5-side { display: grid; grid-template-columns: 1fr 1fr; }
  html.tp-ipad.tp-desk2 .d5-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d5-site3 { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .sh-studio { width: min(760px, 100vw); }
  html.tp-ipad.tp-desk2 .sh-studio .social-layout,
  html.tp-ipad.tp-desk2 .sh-studio .social-composer { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d5-review { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d5-queue { position: static; max-height: 360px; }
  html.tp-ipad.tp-desk2 .d5-planned .d5-side { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d5-aasum { flex-wrap: wrap; }
}

/* ---- Social P3: one + New sheet (every "new" on the new desktop's Social) ----
   The same tokens: type scale, 28px controls, radius 7, one yellow (the
   sheet's own primary). Destinations say honestly how each one publishes. */
@media (min-width: 769px) {
  html.tp-desk2 .d2-scrim.d8n-scrim .d2-modal { width: min(640px, 100%); }
  html.tp-desk2 .d8n { display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d8n-q { font: 600 var(--d2-t-15)/1.3 var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d8n-brief { min-height: 74px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d8n [data-d8n-body] { display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d8n-starts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html.tp-desk2 .d8n-start { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 58px; padding: 9px 10px; border: 0; border-radius: var(--d2-radius); box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-13)/1.25 var(--d2-font); color: var(--d2-ink); text-align: left; cursor: pointer; }
  html.tp-desk2 .d8n-start:hover { background: #FAFAF7; }
  html.tp-desk2 .d8n-start.is-on { background: var(--d2-ink); color: #fff; box-shadow: none; }
  html.tp-desk2 .d8n-panel { display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .d8n-drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1px dashed #c9c9c0; border-radius: 10px; background: #FAFAF7; font: 400 var(--d2-t-13)/1.35 var(--d2-font); color: var(--d2-ink); text-align: left; cursor: pointer; }
  html.tp-desk2 .d8n-drop:hover { background: #F4F4EF; }
  html.tp-desk2 .d8n-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  html.tp-desk2 .d8n-drop > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d8n-drop .d2t-muted { font-size: var(--d2-t-12); }
  html.tp-desk2 .d8n-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .d8n-files li { display: flex; align-items: center; gap: 8px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d8n-files li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.tp-desk2 .d8n-picks { display: flex; flex-direction: column; }
  html.tp-desk2 .d8n-pick { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 0; border-top: 1px solid var(--d2-line2); background: #fff; text-align: left; font: 400 var(--d2-t-13)/1.35 var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .d8n-pick:first-child { border-top: 0; }
  html.tp-desk2 .d8n-pick:hover { background: #FAFAF7; }
  html.tp-desk2 .d8n-pick.is-on { background: #FFF6D6; }
  html.tp-desk2 .d8n-pkick { font-size: var(--d2-t-11); color: var(--d2-mute); text-transform: uppercase; letter-spacing: .04em; }
  html.tp-desk2 .d8n-sec { display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .d8n-h { font: 600 var(--d2-t-12)/1.3 var(--d2-font); color: #3b3b37; }
  html.tp-desk2 .d8n-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  html.tp-desk2 .d8n-row .d8n-h { min-width: 90px; }
  html.tp-desk2 .d8n-type { width: auto; min-width: 200px; }
  html.tp-desk2 .d8n-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--d2-t-13); }
  html.tp-desk2 .d8n-dests { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  html.tp-desk2 .d8n-dest { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 9px; border: 0; border-radius: var(--d2-radius); box-shadow: var(--d2-edge); background: #fff; font: 400 var(--d2-t-13)/1.2 var(--d2-font); color: var(--d2-ink); text-align: left; cursor: pointer; opacity: .62; }
  html.tp-desk2 .d8n-dest b { font-weight: 600; }
  html.tp-desk2 .d8n-dest.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--d2-ink); }
  html.tp-desk2 .d8n-note, html.tp-desk2 .d8n-small { margin: 0; font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d8n-team .d8n-small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .d8n-adv { display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .d8n-when { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #F4F4EF; font-size: var(--d2-t-13); }
  html.tp-desk2 .d8n-when > span { flex: 1 1 auto; }
  html.tp-desk2 .d8n-safe { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d8n-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
  html.tp-desk2 .d8n-btns kbd { margin-left: 6px; }
  html.tp-desk2 .d6-bplus { width: var(--d2-btn-h-sm); height: var(--d2-btn-h-sm); align-self: center; }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d8n .d2h-btn,
  html.tp-ipad.tp-desk2 .d8n .d2h-link,
  html.tp-ipad.tp-desk2 .d8n .d7-in,
  html.tp-ipad.tp-desk2 .d8n-dest,
  html.tp-ipad.tp-desk2 .d8n-pick { min-height: 44px; height: auto; }
  html.tp-ipad.tp-desk2 .d8n-btns kbd { display: none; }
  html.tp-ipad.tp-desk2 .d6-bplus { width: 44px; height: 44px; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d8n-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .d8n-dests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   Social P5: the article page (canvas, format bar, Holly's inspector).
   A post going to the Blog opens as its own page: a canvas at a 680px measure
   (Edit or Preview), a floating format bar, and the inspector (Write with Holly
   for Bishoy, Details, On the blog). The type scale throughout, except the
   article prose inside the canvas, which is set in Georgia to match the site.
   One yellow: Save while unsaved, else Generate article on an empty draft, else
   Publish…; Holly's own next step is the dark button. */
@media (min-width: 769px) {
  html.tp-desk2 .d9-page { display: flex; flex-direction: column; gap: 14px; }
  html.tp-desk2 .d9-head { display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d9-mode, html.tp-desk2 .d9-dev { margin: 0; }
  html.tp-desk2 .d9-title { min-width: 0; flex: 0 1 auto; }
  html.tp-desk2 .d9-title h2 { max-width: 40vw; }
  html.tp-desk2 .d9-note { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--d2-t-12); color: #5f5f58; white-space: nowrap; }
  html.tp-desk2 .d9-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--d2-green); flex: 0 0 7px; }
  html.tp-desk2 .d9-note i.is-warn { background: var(--d2-amber); }
  html.tp-desk2 .d9-savebar { display: inline-flex; align-items: center; gap: 10px; }
  html.tp-desk2 .d9-savebar:empty { display: none; }
  html.tp-desk2 .d9-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
  html.tp-desk2 .d9-grid.is-one { grid-template-columns: minmax(0, 760px); justify-content: center; }
  html.tp-desk2 .d9-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  html.tp-desk2 .d9-main > [data-d9-slot="notice"]:empty { display: none; }
  /* the canvas */
  html.tp-desk2 .d9-canvas { position: relative; background: #fff; border-radius: 12px; box-shadow: var(--d2-edge); padding: 36px 28px 72px; min-height: calc(100vh - var(--d2-top) - 170px); }
  html.tp-desk2 .d9-doc { max-width: 680px; margin: 0 auto; }
  html.tp-desk2 .d9-url { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--d2-t-12); color: var(--d2-mute); margin-bottom: 12px; }
  html.tp-desk2 .d9-url b { color: var(--d2-ink); font-weight: 600; }
  html.tp-desk2 .d9-dot { width: 3px; height: 3px; border-radius: 50%; background: #b5b5ad; }
  html.tp-desk2 .d9-cover { position: relative; aspect-ratio: 1200 / 630; border-radius: 10px; overflow: hidden; background: #F4F3EE; margin: 0 0 22px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
  html.tp-desk2 .d9-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.tp-desk2 .d9-cover.is-empty { box-shadow: none; border: 1.5px dashed #d2d2c9; background: #FAFAF7; }
  html.tp-desk2 .d9-cover.is-over { box-shadow: 0 0 0 2px var(--d2-ink); }
  html.tp-desk2 .d9-cover.is-busy::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .45); }
  html.tp-desk2 .d9-cover-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 24px 40px; text-align: center; color: var(--d2-mute); font-size: var(--d2-t-13); }
  html.tp-desk2 .d9-cover-a { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 1; }
  html.tp-desk2 .d9-cover-a .d2h-btn { background: rgba(255, 255, 255, .94); }
  html.tp-desk2 .d9-cover-a .d2h-btn.is-on { box-shadow: 0 0 0 1.5px var(--d2-ink); }
  html.tp-desk2 .d9-cpop { margin: -10px 0 22px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--d2-line), 0 8px 24px rgba(0, 0, 0, .08); display: flex; flex-direction: column; gap: 7px; }
  html.tp-desk2 .d9-mlist { display: flex; flex-direction: column; gap: 1px; border-radius: 9px; background: #FAFAF7; padding: 4px; }
  html.tp-desk2 .d9-mrow { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; font-family: var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d9-mrow b { flex: 1 1 auto; font-size: var(--d2-t-13); font-weight: 500; }
  html.tp-desk2 .d9-mrow small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d9-mrow:hover:not(:disabled) { background: #F1F1EC; }
  html.tp-desk2 .d9-mrow.is-on { background: #FFF6CC; }
  html.tp-desk2 .d9-mrow.is-off { opacity: .5; cursor: not-allowed; }
  html.tp-desk2 .d9-mchk { display: inline-flex; color: #6B5200; }
  html.tp-desk2 .d9-mhead { padding: 8px 10px 3px; font: 600 var(--d2-t-11)/1.3 var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .d9-t { margin: 0 0 6px; font: 700 var(--d2-t-26)/1.25 var(--d2-font); letter-spacing: -.015em; color: var(--d2-ink); outline: none; overflow-wrap: anywhere; }
  html.tp-desk2 .d9-by { margin: 0 0 24px; font-size: var(--d2-t-13); color: var(--d2-mute); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  html.tp-desk2 .d9-prose { font: 400 var(--d2-t-17)/1.7 Georgia, "Times New Roman", serif; color: #1d1d1b; outline: none; min-height: 36vh; overflow-wrap: anywhere; }
  html.tp-desk2 .d9-prose p, html.tp-desk2 .d9-prose div { margin: 0 0 14px; }
  html.tp-desk2 .d9-prose h2 { font: 700 var(--d2-t-20)/1.3 var(--d2-font); margin: 28px 0 8px; letter-spacing: -.01em; }
  html.tp-desk2 .d9-prose h3 { font: 700 var(--d2-t-17)/1.35 var(--d2-font); margin: 22px 0 6px; }
  html.tp-desk2 .d9-prose h4 { font: 700 var(--d2-t-15)/1.35 var(--d2-font); margin: 18px 0 6px; }
  html.tp-desk2 .d9-prose blockquote { margin: 18px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--d2-y); color: #44443f; }
  html.tp-desk2 .d9-prose ul, html.tp-desk2 .d9-prose ol { margin: 0 0 14px; padding-left: 26px; }
  html.tp-desk2 .d9-prose li { margin: 0 0 4px; }
  html.tp-desk2 .d9-prose a { color: #1F4E96; text-decoration: underline; text-underline-offset: 2px; }
  html.tp-desk2 .d9-prose img { max-width: 100%; border-radius: 8px; }
  html.tp-desk2 .d9-t:empty::before, html.tp-desk2 .d9-prose:empty::before { content: attr(data-placeholder); color: #b5b5ad; pointer-events: none; }
  html.tp-desk2 .d9-t[contenteditable="false"], html.tp-desk2 .d9-prose[contenteditable="false"] { opacity: .6; }
  /* the floating format bar */
  html.tp-desk2 .d9-fmt { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: #1d1d1b; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
  html.tp-desk2 .d9-fmt[hidden] { display: none; }
  html.tp-desk2 .d9-fb { height: 28px; min-width: 28px; padding: 0 7px; border: 0; border-radius: 7px; background: none; color: #fff; font: 600 var(--d2-t-13)/1 var(--d2-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .d9-fb.is-text { font-weight: 500; }
  html.tp-desk2 .d9-fb:hover { background: rgba(255, 255, 255, .1); }
  html.tp-desk2 .d9-fb.is-on { background: rgba(255, 255, 255, .2); }
  html.tp-desk2 .d9-fb em { font-family: Georgia, serif; }
  html.tp-desk2 .d9-fq { font: 700 var(--d2-t-17)/1 Georgia, serif; }
  html.tp-desk2 .d9-fnum { font-size: var(--d2-t-12); }
  html.tp-desk2 .d9-fsep { width: 1px; height: 18px; margin: 0 3px; background: rgba(255, 255, 255, .22); }
  html.tp-desk2 .d9-flink { display: flex; align-items: center; gap: 4px; margin: 0; }
  html.tp-desk2 .d9-flin { width: 230px; height: 28px; box-sizing: border-box; padding: 0 8px; border: 0; border-radius: 6px; font: 400 var(--d2-t-13) var(--d2-font); }
  /* preview */
  html.tp-desk2 .d9-prevbar { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 0 auto 20px; flex-wrap: wrap; }
  html.tp-desk2 .d9-doc.is-read.is-phone { max-width: 360px; border: 1px solid var(--d2-line); border-radius: 22px; padding: 20px 18px; }
  html.tp-desk2 .d9-doc.is-read.is-phone .d9-t { font-size: var(--d2-t-20); }
  html.tp-desk2 .d9-doc.is-read.is-phone .d9-prose { font: 400 var(--d2-t-15)/1.65 Georgia, "Times New Roman", serif; min-height: 0; }
  html.tp-desk2 .d9-prevkick { display: block; margin-bottom: 8px; font: 700 var(--d2-t-11)/1.3 var(--d2-font); letter-spacing: .08em; text-transform: uppercase; color: #9A7B00; }
  html.tp-desk2 .d9-pcover { display: block; width: 100%; border-radius: 10px; margin: 0 0 18px; }
  /* Tidy up: before and after */
  html.tp-desk2 .d9-review { margin: 0; box-shadow: 0 0 0 1.5px var(--d2-ink), 0 1px 3px rgba(0, 0, 0, .05); }
  html.tp-desk2 .d9-changes { margin: 0; padding-left: 18px; font-size: var(--d2-t-13); line-height: 1.5; }
  html.tp-desk2 .d9-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  html.tp-desk2 .d9-compare h4 { margin: 0 0 6px; font: 600 var(--d2-t-12)/1.3 var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .d9-cbody { max-height: 320px; overflow-y: auto; padding: 10px 12px; border-radius: 8px; background: #FAFAF7; font: 400 var(--d2-t-13)/1.6 Georgia, "Times New Roman", serif; }
  html.tp-desk2 .d9-cbody h2, html.tp-desk2 .d9-cbody h3 { font: 700 var(--d2-t-13)/1.35 var(--d2-font); margin: 10px 0 4px; }
  /* the inspector */
  html.tp-desk2 .d9-hbox { padding: 12px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
  html.tp-desk2 .d9-hrow { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .d9-hrow.is-wrap { flex-wrap: wrap; }
  html.tp-desk2 .d9-hsep { height: 1px; background: var(--d2-line2); margin: 2px 0; }
  html.tp-desk2 .d9-hmsg { margin: 0; padding: 7px 10px; border-radius: 8px; background: #F5F4EF; color: #44443f; }
  html.tp-desk2 .d9-holly .d7-ih { display: inline-flex; align-items: center; gap: 5px; }
  html.tp-desk2 .d2h-btn.d9-hpri { background: var(--d2-ink); color: #fff; box-shadow: none; }
  html.tp-desk2 .d2h-btn.d9-hpri:hover:not(:disabled) { background: #2a2a28; }
  html.tp-desk2 .d2h-btn.d9-hpri:disabled { background: #c9c9c0; color: #fff; }
  html.tp-desk2 .d9-li { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
  html.tp-desk2 .d9-stories { display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .d9-story { padding: 8px 10px; border-radius: 8px; background: #FAFAF7; font-size: var(--d2-t-12); }
  html.tp-desk2 .d9-story p { margin: 3px 0; }
  html.tp-desk2 .d9-dbox { margin: 0; }
  html.tp-desk2 .d9-drow { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d9-drow:first-child { border-top: 0; }
  html.tp-desk2 .d9-dlab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  html.tp-desk2 .d9-dlab .d7-lbl { margin: 0; }
  html.tp-desk2 .d9-gen { padding: 0; min-height: 0; height: auto; font-size: var(--d2-t-12); }
  html.tp-desk2 .d9-slug { display: flex; align-items: center; gap: 4px; }
  html.tp-desk2 .d9-slug span { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d9-crow { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .d9-cthumb { width: 46px; height: 26px; flex: 0 0 46px; border-radius: 5px; overflow: hidden; background: var(--d2-soft); color: var(--d2-mute); display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .d9-cthumb img { width: 100%; height: 100%; object-fit: cover; }
  html.tp-desk2 .d9-cmore { align-self: flex-start; padding: 0; min-height: 0; height: auto; font-size: var(--d2-t-12); }
  /* no article yet */
  html.tp-desk2 .d9-start { margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
  html.tp-desk2 .d9-starthead { display: flex; gap: 12px; align-items: flex-start; }
  html.tp-desk2 .d9-starthead b { font-size: var(--d2-t-15); }
  html.tp-desk2 .d9-starthead p { margin: 4px 0 0; font-size: var(--d2-t-13); }
  html.tp-desk2 .d9-seed { margin: 0; max-height: 280px; overflow: auto; padding: 12px 14px; border-radius: 8px; background: #FAFAF7; white-space: pre-wrap; font: 400 var(--d2-t-13)/1.55 var(--d2-font); }
  /* Posts › Blog */
  html.tp-desk2 .d9-lthumb { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; background: #E1E6E3; color: #6b746f; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
  html.tp-desk2 .d9-lthumb img { width: 100%; height: 100%; object-fit: cover; }
}
/* the arrange sheet lives in the layer */
html.tp-desk2 .d9-arrange { display: flex; flex-direction: column; gap: 10px; }
html.tp-desk2 .d9-alist { display: flex; flex-direction: column; border-radius: 10px; box-shadow: var(--d2-edge); background: #fff; }
html.tp-desk2 .d9-arow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--d2-line2); cursor: grab; }
html.tp-desk2 .d9-arow:first-child { border-top: 0; }
html.tp-desk2 .d9-arow .d2t-main { flex: 1 1 auto; min-width: 0; }
@media (min-width: 769px) and (max-width: 1280px) {
  html.tp-desk2 .d9-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  html.tp-desk2 .d9-canvas { padding: 28px 20px 60px; }
}
/* iPad: 44pt targets; portrait folds the inspector under the canvas */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d9-fb { height: 40px; min-width: 40px; }
  html.tp-ipad.tp-desk2 .d9-mrow { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d9-gen, html.tp-ipad.tp-desk2 .d9-cmore { min-height: 44px; }
  html.tp-ipad.tp-desk2 .d9-page .d2h-btn kbd { display: none; }
  html.tp-ipad.tp-desk2 .d9-arow { min-height: 52px; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d9-grid { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d9-insp { position: static; max-height: none; overflow: visible; }
}

/* ============================================================================
   Polish B1: today's markup inside the new shell (Chats, Holly, Revenue,
   Profile, Settings) follows the same type scale. Sizes only: no layout.
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-holly .hc-empty-state p,
  html.tp-desk2 #view-holly .hc-chip { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-groups .chats-list-header h2 { font-size: var(--d2-t-20); }
  html.tp-desk2 #view-groups .tp-inbox-empty p,
  html.tp-desk2 #view-groups .tp-page-title .avatar-wrap,
  html.tp-desk2 #view-groups .tp-page-title-copy h2 { font-size: var(--d2-t-15); }
  html.tp-desk2 #view-groups .tp-composer-gif-chip { font-size: var(--d2-t-11); }
  html.tp-desk2 #view-groups .tp-person-row .tp-inbox-avatar,
  html.tp-desk2 #view-groups #chats-detail-body > p.subtle { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-groups .tp-back { font-size: var(--d2-t-20); }
  html.tp-desk2 .tp-card-person-avatar { font-size: var(--d2-t-26); }
  html.tp-desk2 .tp-card-sub,
  html.tp-desk2 .tp-card-email,
  html.tp-desk2 .tp-card-mute-head em,
  html.tp-desk2 .tp-seg button,
  html.tp-desk2 .tp-card-sec-head span { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-revenue .rv-ph h2 { font-size: var(--d2-t-26); }
  html.tp-desk2 #view-revenue #xero-connect-body { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-profile .profile-hero-img { font-size: var(--d2-t-20); }
  html.tp-desk2 #view-profile #profile-hero-name { font-size: var(--d2-t-20); }
  html.tp-desk2 #view-profile .profile-photo-img { font-size: var(--d2-t-17); }
  html.tp-desk2 #view-profile .profile-photo-actions h3 { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-profile .profile-card-title,
  html.tp-desk2 #view-profile .profile-custom-fields-title,
  html.tp-desk2 #view-profile .panel h3 { font-size: var(--d2-t-15); }
  html.tp-desk2 #view-settings h2 { font-size: var(--d2-t-20); }
  html.tp-desk2 #view-settings .settings-tab-eyebrow { font-size: var(--d2-t-11); }
  html.tp-desk2 #view-settings .settings-tab { font-size: var(--d2-t-13); }
  html.tp-desk2 #view-settings .settings-pane h3 { font-size: var(--d2-t-15); }

  /* …and their controls join the same family (sizes and radius only). */
  html.tp-desk2 #view-groups .chats-compose-btn,
  html.tp-desk2 #view-holly .hc-icon-btn,
  html.tp-desk2 #holly-nexus .nexus-plus { width: var(--d2-btn-h); height: var(--d2-btn-h); min-width: 0; min-height: 0; border-radius: var(--d2-radius); }
  html.tp-desk2 #view-groups .chats-compose-btn svg { width: 16px; height: 16px; }
  html.tp-desk2 #view-groups .chats-search,
  html.tp-desk2 #holly-nexus .nexus-search { height: var(--d2-btn-h); min-height: 0; border-radius: var(--d2-radius); }
  html.tp-desk2 #view-groups #chats-filter { height: var(--d2-btn-h); min-height: 0; border-radius: var(--d2-radius); padding-top: 0; padding-bottom: 0; font-size: var(--d2-t-13); }
  /* Chat polish: All / Unread is a segmented control (track + segments), same family as the Nexus one. */
  html.tp-desk2 #view-groups .tp-inbox-chips { display: flex; gap: 0; padding: 2px; border-radius: calc(var(--d2-radius) + 1px); background: var(--d2-seg-track); }
  html.tp-desk2 #view-groups .tp-inbox-chips .tp-chip { flex: 1 1 0; height: var(--d2-btn-h-sm); min-height: 0; border-radius: calc(var(--d2-radius) - 1px); padding: 0 10px; font-size: var(--d2-t-13); font-weight: 500; background: transparent; color: var(--d2-ink); white-space: nowrap; }
  html.tp-desk2 #view-groups .tp-inbox-chips .tp-chip.on { background: #fff; color: var(--d2-ink); font-weight: 600; box-shadow: var(--d2-edge); }
  html.tp-desk2 #view-groups .tp-inbox-chips .tp-chip:focus-visible { outline: 2px solid var(--d2-ink); outline-offset: 1px; }
  html.tp-desk2 #view-groups .chats-search,
  html.tp-desk2 #view-groups .chats-compose-btn { flex: 0 0 auto; }
  html.tp-desk2 #view-groups .tp-inbox-empty .btn-primary { height: var(--d2-btn-h); min-height: 0; border-radius: var(--d2-radius); padding: 0 12px; font-size: var(--d2-t-13); }
  html.tp-desk2 #view-holly .hc-chip { height: var(--d2-btn-h); min-height: 0; border-radius: var(--d2-radius); padding-top: 0; padding-bottom: 0; }
  html.tp-desk2 #holly-nexus .nexus-seg { height: auto; padding: 2px; border-radius: calc(var(--d2-radius) + 1px); }
  html.tp-desk2 #holly-nexus .nexus-seg button { height: var(--d2-btn-h-sm); min-height: 0; border-radius: calc(var(--d2-radius) - 1px); font-size: var(--d2-t-13); }
}

/* ============================================================================
   Polish B2 (29 Sep 2026): AI Assist, Home, Leave, and one obvious primary
   action per page. Tokens only (type scale, control heights, radius, edge).
   ============================================================================ */
@media (min-width: 769px) {
  /* ---- one primary per page: the toolbar clock is chrome, so it never takes
     the yellow (the page's own primary, or Home's shift card, does) ---- */
  html.tp-desk2 .d2-cbtn.is-primary { background: #fff; box-shadow: var(--d2-edge); font-weight: 600; }

  /* ---- AI Assist: headline + thin health bar, one grouped table ---- */
  html.tp-desk2 .d5-aahero { display: flex; align-items: flex-end; gap: 24px; margin: 0 0 14px; }
  html.tp-desk2 .d5-aahero .d2t-main { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .d5-aahero h2 { margin: 0 0 2px; font: 700 var(--d2-t-20) var(--d2-font); color: var(--d2-ink); white-space: normal; }
  html.tp-desk2 .d5-aahero .d2t-main > span { font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d5-hbar { display: flex; gap: 2px; width: 220px; flex: 0 0 220px; height: 6px; margin-bottom: 6px; border-radius: 3px; overflow: hidden; }
  html.tp-desk2 .d5-hbar i { flex: 1 1 0; background: #c9c9c1; }
  html.tp-desk2 .d5-hbar i.is-good { background: var(--d2-green); }
  html.tp-desk2 .d5-hbar i.is-blue { background: #2D6BCF; }
  html.tp-desk2 .d5-hbar i.is-warn { background: var(--d2-amber); }
  html.tp-desk2 .d5-hbar i.is-bad { background: var(--d2-red); }
  html.tp-desk2 .d5-aatable { background: #fff; border-radius: 10px; box-shadow: var(--d2-edge); overflow: hidden; margin-bottom: 12px; }
  html.tp-desk2 .d5-aathead,
  html.tp-desk2 .d5-aarow { display: grid; grid-template-columns: minmax(170px, 1.1fr) 128px minmax(0, 2.2fr) 76px; column-gap: 16px; align-items: center; padding: 0 16px; }
  html.tp-desk2 .d5-aathead { height: 28px; font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .d5-aathead span:last-child,
  html.tp-desk2 .d5-aa-t { text-align: right; }
  html.tp-desk2 .d5-aagroup { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 4px; background: #FAFAF7; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d5-aathead + .d5-aagroup { border-top: 0; }
  html.tp-desk2 .d5-aagroup b { font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .d5-aagroup small { font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .d5-aagroup small.is-bad { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .d5-aarow { width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--d2-line2); background: #fff; text-align: left; cursor: pointer; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d5-aagroup + .d5-aarow { border-top-color: transparent; }
  html.tp-desk2 .d5-aarow:hover { background: #FAFAF7; }
  html.tp-desk2 .d5-aarow.is-open { background: var(--d2-pill); }
  html.tp-desk2 .d5-aa-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
  html.tp-desk2 .d5-aa-n b { font-weight: 600; white-space: nowrap; }
  html.tp-desk2 .d5-aa-n small { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d5-aa-s { font-weight: 600; white-space: nowrap; color: var(--d2-mute); }
  html.tp-desk2 .d5-aa-s.is-good { color: var(--d2-green); }
  html.tp-desk2 .d5-aa-s.is-blue { color: #2D6BCF; }
  html.tp-desk2 .d5-aa-s.is-warn { color: #94600C; }
  html.tp-desk2 .d5-aa-s.is-bad { color: var(--d2-red); }
  html.tp-desk2 .d5-aa-d { color: var(--d2-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d5-aa-t { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d5-aahead { align-items: center; gap: 10px; }
  html.tp-desk2 .d5-aatile { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--d2-soft); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .d5-aabanner { flex-direction: column; gap: 4px; border-radius: 10px; }
  html.tp-desk2 .d5-aabanner > b { display: flex; align-items: center; gap: 7px; font-weight: 600; }
  html.tp-desk2 .d5-aabanner:not(.is-bad):not(.is-good):not(.is-warn) { background: #F4F4EF; }
  html.tp-desk2 .d5-askbig { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 4px; }
}
@media (min-width: 769px) {
  /* ---- Home: First up, collapsed groups, one-line Today rows ---- */
  html.tp-desk2 .d2h-needs2 { display: flex; flex-direction: column; gap: 0; }
  html.tp-desk2 .d2h-first { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; cursor: pointer; }
  html.tp-desk2 .d2h-first.is-sel { box-shadow: 0 0 0 2px var(--d2-y); }
  html.tp-desk2 .d2h-first h3 { margin: 4px 0 2px; font: 700 var(--d2-t-20)/1.25 var(--d2-font); }
  html.tp-desk2 .d2h-first .d2h-dmain > .d2h-meta { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2h-kick.is-warn { color: #94600C; }
  html.tp-desk2 .d2h-firstbtns { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
  html.tp-desk2 .d2h-firstico { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; background: var(--d2-bg); color: var(--d2-mute); display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .d2h-grouphead { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; }
  html.tp-desk2 .d2h-grouphead h3 { flex: 1 1 auto; margin: 0; font: 600 var(--d2-t-13) var(--d2-font); display: flex; align-items: center; gap: 6px; }
  html.tp-desk2 .d2h-grouphead .d2h-link { min-height: 22px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2h-grp { padding: 0 18px; border-radius: 12px; }
  html.tp-desk2 .d2h-grp .d2h-drow { padding: 10px 18px; }
  html.tp-desk2 .d2h-grp .d2h-drow:first-child,
  html.tp-desk2 .d2h-grp .d2h-row:first-child { border-top: 0; }
  html.tp-desk2 .d2h-grp .d2h-drow:first-child { border-radius: 12px 12px 0 0; }
  html.tp-desk2 .d2h-grp .d2h-drow:last-child { border-radius: 0 0 12px 12px; }
  html.tp-desk2 .d2h-grp .d2h-tile { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  html.tp-desk2 .d2h-grp .d2h-dmain > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2h-grp .d2h-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2h-drow > svg:last-child { color: #b3b3ad; flex: 0 0 auto; }
  html.tp-desk2 .d2h-flag { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--d2-t-12) var(--d2-font); color: #94600C; white-space: nowrap; }
  html.tp-desk2 .d2h-age { font-size: var(--d2-t-12); color: var(--d2-mute); white-space: nowrap; min-width: 24px; text-align: right; }
  html.tp-desk2 .d2h-row.is-line { padding: 9px 0; }
  html.tp-desk2 .d2h-row.is-line .d2h-tile { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  html.tp-desk2 .d2h-row.is-line .d2h-dmain { flex-direction: row; align-items: baseline; gap: 8px; }
  html.tp-desk2 .d2h-row.is-line .d2h-dmain > b { font-size: var(--d2-t-13); flex: 0 0 auto; }
  html.tp-desk2 .d2h-row.is-line .d2h-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d2h-grouphead + .d2h-grp { margin-top: 0; }
  html.tp-desk2 .d2h-col > .d2h-grouphead { margin: 0 2px -10px; }
  html.tp-desk2 .d2h-subhead { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
  html.tp-desk2 .d2h-subhead .d2h-kick { flex: 1 1 auto; }
  html.tp-desk2 .d2h-subhead .d2h-link { min-height: 22px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2h-qbar.is-slim { justify-content: flex-end; margin: -52px 0 20px auto; min-height: 32px; width: max-content; max-width: 50%; }
  html.tp-desk2 .d2h-btn.is-big { height: var(--d2-btn-h-lg); padding: 0 14px; }
  html.tp-desk2 .d2h-shift-side { display: flex; align-items: center; gap: 8px; }
  /* Chats: the compose button stays the page's one primary; the empty list's
     New message (the same action) is a plain button. */
  html.tp-desk2 #view-groups .tp-inbox-empty .btn-primary { background: #fff; color: var(--d2-ink); box-shadow: var(--d2-edge); border: 0; }
  /* Team now lives on Home once: in the page, not also in the toolbar. */
  html.tp-desk2[data-d2-view="home"] #d2-clock:has(> .d2-teamnow) { display: none; }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d2h-qbar.is-slim { margin-top: -56px; }
  html.tp-ipad.tp-desk2 .d2h-grp .d2h-drow { min-height: 52px; }
}
@media (min-width: 769px) {
  /* ---- Leave: 52px rows in one grouped list; week strip + named Approve in the inspector ---- */
  html.tp-desk2 .d2l-needs.d2l-list { display: block; gap: 0; background: #fff; border-radius: 12px; box-shadow: var(--d2-edge); overflow: hidden; }
  html.tp-desk2 .d2l-need.d2l-lv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 120px auto; align-items: center; column-gap: 12px; min-height: 52px; padding: 0 14px; border: 0; border-top: 1px solid var(--d2-line2); border-radius: 0; box-shadow: none; }
  html.tp-desk2 .d2l-need.d2l-lv:first-child { border-top: 0; }
  html.tp-desk2 .d2l-need.d2l-lv:hover { background: #FAFAF7; }
  html.tp-desk2 .d2l-need.d2l-lv.is-open,
  html.tp-desk2 .d2l-need.d2l-lv.is-sel { background: var(--d2-pill); box-shadow: none; }
  html.tp-desk2 .d2l-lv .d2t-main > b { font-size: var(--d2-t-13); font-weight: 600; }
  html.tp-desk2 .d2l-lv .d2t-main > span { font-size: var(--d2-t-12); }
  html.tp-desk2 .d2l-typ { font: 500 var(--d2-t-11) var(--d2-font); font-style: normal; color: var(--d2-mute); background: var(--d2-soft); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
  html.tp-desk2 .d2l-flag { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--d2-t-12) var(--d2-font); color: #94600C; white-space: nowrap; }
  html.tp-desk2 .d2l-bal2 { font-size: var(--d2-t-12); color: var(--d2-mute); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d2l-bal2.is-neg { font-weight: 600; }
  html.tp-desk2 .d2l-lv .d2l-btns { margin: 0; gap: 6px; }
  html.tp-desk2 .d2h-btn.is-sm { height: var(--d2-btn-h-sm); padding: 0 9px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2l-ih { margin: 16px 0 4px; }
  html.tp-desk2 .d2l-neg { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .d2l-wstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
  html.tp-desk2 .d2l-wsd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; border-radius: 8px; min-height: 70px; background: #FAFAF7; }
  html.tp-desk2 .d2l-wsd small { font-size: var(--d2-t-11); color: var(--d2-mute); font-weight: 600; }
  html.tp-desk2 .d2l-wsd b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2l-wsd.is-weekend { opacity: .55; }
  html.tp-desk2 .d2l-wsd.is-mine { background: var(--d2-pill); }
  html.tp-desk2 .d2l-wsd.is-clash { box-shadow: inset 0 0 0 1.5px var(--d2-amber); }
  html.tp-desk2 .d2l-wspp { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 2px; }
  html.tp-desk2 .d2l-wspp .d2l-dotav { width: 20px; height: 20px; }
  html.tp-desk2 .d2l-wspp em { font-size: var(--d2-t-11); color: var(--d2-mute); font-style: normal; }
  html.tp-desk2 .d2l-dotav.is-self { background: var(--d2-y); border-color: var(--d2-y); }
  html.tp-desk2 .d2l-clashnote { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: var(--d2-t-12); line-height: 1.45; color: #94600C; }
  html.tp-desk2 .d2l-clashnote svg { flex: 0 0 14px; margin-top: 1px; }
  html.tp-desk2 .d2l-askbtn { margin-top: 14px; }
  html.tp-desk2 .d2l-insp .d2l-decide { grid-template-columns: auto minmax(0, 1fr); }
  html.tp-desk2 .d2l-insp .d2l-decide .d2-bigbtn { padding: 0 14px; }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d2l-need.d2l-lv { min-height: 60px; grid-template-columns: 30px minmax(0, 1fr) auto auto; }
  html.tp-ipad.tp-desk2 .d2l-need.d2l-lv .d2l-bal2 { display: none; }
  html.tp-ipad.tp-desk2 .d2h-btn.is-sm { height: 44px; font-size: var(--d2-t-15); }
}
@media (min-width: 769px) and (max-width: 1279px) {
  html.tp-desk2 .d5-aathead,
  html.tp-desk2 .d5-aarow { grid-template-columns: minmax(140px, 1fr) 112px minmax(0, 1.4fr) 64px; column-gap: 12px; }
}
@media (min-width: 769px) {
  html.tp-desk2.d2-insp-open .d5-aathead,
  html.tp-desk2.d2-insp-open .d5-aarow { grid-template-columns: minmax(140px, 1fr) 112px minmax(0, 1.6fr) 64px; column-gap: 12px; }
  html.tp-ipad.tp-desk2 .d5-aarow { min-height: 52px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d5-hbar { width: 160px; flex-basis: 160px; }
}

/* ---- Social P4: the video step (the Video studio on the post page) ----
   The same editor as Classic view's Video studio, hosted in the step's card and
   set on the desktop scale: 13pt text, 28px controls, radius 7. Its buttons are
   plain here so the page keeps one yellow (the stage's next step). */
@media (min-width: 769px) {
  html.tp-desk2 .d7-vseg { margin: 0; align-self: flex-start; }
  html.tp-desk2 .d7-vnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: #F5F4EF; font-size: var(--d2-t-12); line-height: 1.5; color: #44443f; }
  html.tp-desk2 .d7-vnote svg { flex: 0 0 auto; margin-top: 2px; }
  html.tp-desk2 .d7-vnote b { color: var(--d2-ink); font-weight: 600; }
  html.tp-desk2 .d7-vpaused { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: var(--d2-t-12); line-height: 1.45; color: #6B4A12; }
  html.tp-desk2 .d7-vpaused .d7-paused { flex: 0 0 auto; }
  html.tp-desk2 .d7-vsum { font-size: var(--d2-t-12); color: var(--d2-mute); text-align: right; }
  html.tp-desk2 .d7-vwarn { padding: 8px 10px; border-radius: 8px; background: #FBE7E5; color: #8E2019; font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d7-vwarn span { flex: 1 1 240px; }
  html.tp-desk2 .d7-vsum.is-run { color: #6B5200; }
  html.tp-desk2 .d7-vsum.is-done { color: #17753A; }
  html.tp-desk2 .d7-vsum.is-bad { color: #B42D23; }
  html.tp-desk2 .d7-vslot { min-width: 0; }
  html.tp-desk2 .d7-vslot #social-pane-video { margin: 0; padding: 0; }
  html.tp-desk2 .d7-vslot .sh-editor-head,
  html.tp-desk2 .d7-vslot #social-video-back,
  html.tp-desk2 .d7-vslot label:has(> select[name="entry"]) { display: none !important; }
  html.tp-desk2 .d7-vslot .sh-video-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); gap: 16px; align-items: start; }
  html.tp-desk2 .d7-vslot .sh-panel { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
  html.tp-desk2 .d7-vslot .sh-video-preview { padding: 12px; border-radius: 10px; background: #FAFAF7; box-shadow: var(--d2-edge); min-width: 0; }
  html.tp-desk2 .d7-vslot h3 { margin: 0 0 8px; font: 600 var(--d2-t-13)/1.3 var(--d2-font); }
  html.tp-desk2 .d7-vslot h4 { margin: 10px 0 4px; font: 600 var(--d2-t-12)/1.3 var(--d2-font); }
  html.tp-desk2 .d7-vslot p, html.tp-desk2 .d7-vslot li { font-size: var(--d2-t-12); line-height: 1.5; }
  html.tp-desk2 .d7-vslot ol { margin: 4px 0 8px; padding-left: 18px; }
  html.tp-desk2 .d7-vslot .sh-video-form label { display: block; margin: 0 0 12px; font: 600 var(--d2-t-12)/1.3 var(--d2-font); color: #3b3b37; }
  html.tp-desk2 .d7-vslot .sh-video-form input:not([type=checkbox]),
  html.tp-desk2 .d7-vslot .sh-video-form select,
  html.tp-desk2 .d7-vslot .sh-video-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; min-height: var(--d2-btn-h); padding: 4px 9px; border-radius: var(--d2-radius); border: 1px solid var(--d2-line); background: #fff; font: 400 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d7-vslot .sh-video-form textarea { padding: 8px 10px; background: #FAFAF7; line-height: 1.5; }
  html.tp-desk2 .d7-vslot .sh-video-form select { -webkit-appearance: none; appearance: none; padding-right: 28px; background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373736D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  html.tp-desk2 .d7-vslot .sh-video-form input:focus-visible,
  html.tp-desk2 .d7-vslot .sh-video-form select:focus-visible,
  html.tp-desk2 .d7-vslot .sh-video-form textarea:focus-visible { outline: 2px solid rgba(17, 17, 17, .18); outline-offset: 0; background: #fff; }
  html.tp-desk2 .d7-vslot .sh-video-form select:disabled { background: #F4F4EF; }
  html.tp-desk2 .d7-vslot .sh-video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html.tp-desk2 .d7-vslot .sh-video-pair label:has(> input[type=checkbox]),
  html.tp-desk2 .d7-vslot label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: 7px; font-weight: 400; font-size: var(--d2-t-13); line-height: 1.4; }
  html.tp-desk2 .d7-vslot input[type=checkbox] { margin: 2px 0 0; }
  html.tp-desk2 .d7-vslot .sh-video-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  html.tp-desk2 .d7-vslot .btn-primary,
  html.tp-desk2 .d7-vslot .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: var(--d2-btn-h); padding: 0 12px; border-radius: var(--d2-radius); border: 1px solid var(--d2-line); background: #fff; color: var(--d2-ink); font: 600 var(--d2-t-13)/1 var(--d2-font); box-shadow: none; cursor: pointer; }
  html.tp-desk2 .d7-vslot .btn-primary:hover:not(:disabled),
  html.tp-desk2 .d7-vslot .btn-secondary:hover:not(:disabled) { background: #F5F4EF; }
  html.tp-desk2 .d7-vslot .btn-ghost { display: inline-flex; align-items: center; height: var(--d2-btn-h-sm); padding: 0 6px; border: 0; background: none; color: #1F4E96; font: 500 var(--d2-t-13)/1 var(--d2-font); cursor: pointer; }
  html.tp-desk2 .d7-vslot .btn-mini { height: var(--d2-btn-h-sm); padding: 0 9px; font-size: var(--d2-t-12); margin: 4px 6px 0 0; }
  html.tp-desk2 .d7-vslot button:disabled { opacity: .45; cursor: default; }
  html.tp-desk2 .d7-vslot .sh-notice { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #FFF6D6; color: #6B5200; font-size: var(--d2-t-12); line-height: 1.45; }
  html.tp-desk2 .d7-vslot .sh-muted { margin: 0; color: var(--d2-mute); font-size: var(--d2-t-12); line-height: 1.5; }
  html.tp-desk2 .d7-vslot .sh-source-line { margin: 8px 0; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-vslot .social-dropzone { display: block; margin-top: 10px !important; padding: 14px; border: 1.5px dashed #c9c9c0; border-radius: 10px; background: #fff; color: #5f5f58; font: 500 var(--d2-t-12)/1.4 var(--d2-font); text-align: center; }
  html.tp-desk2 .d7-vslot .social-dropzone.drag { border-color: var(--d2-ink); background: #FFFBEA; }
  html.tp-desk2 .d7-vslot .social-dropzone input[type=file] { margin: 8px auto 0 !important; font-size: var(--d2-t-12); max-width: 100%; }
  html.tp-desk2 .d7-vslot .sh-job { padding: 10px 0; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-12); }
  html.tp-desk2 .d7-vslot .sh-job strong { font-size: var(--d2-t-13); }
  html.tp-desk2 .d7-vslot .sh-job p { margin: 4px 0; color: var(--d2-mute); }
  html.tp-desk2 .d7-vslot .sh-job video { max-height: 420px !important; width: auto !important; max-width: 100% !important; margin: 6px auto; border-radius: 8px; }
  html.tp-desk2 .d7-vslot audio { width: 100%; margin: 4px 0; }
}
@media (min-width: 769px) and (max-width: 1300px) {
  html.tp-desk2 .d7-vslot .sh-video-layout { grid-template-columns: minmax(0, 1fr); }
}
/* iPad: 44pt targets in the editor too. */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d7-vslot .sh-video-form input:not([type=checkbox]),
  html.tp-ipad.tp-desk2 .d7-vslot .sh-video-form select,
  html.tp-ipad.tp-desk2 .d7-vslot .btn-primary,
  html.tp-ipad.tp-desk2 .d7-vslot .btn-secondary,
  html.tp-ipad.tp-desk2 .d7-vseg button { min-height: 44px; height: auto; }
}
/* ---- end Social P4 ---- */

/* ---- Social P6: AI model per post (inspector Advanced and the New sheet) ----
   "This post" over "House default" per agent. A post's own choice gets the
   yellow edge; the house default select is quieter and asks before it
   changes. Hidden (the P2/P3 markup instead) until migration 0142 is applied. */
@media (min-width: 769px) {
  html.tp-desk2 .d9m-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html.tp-desk2 .d9m-row.is-own { box-shadow: inset 3px 0 0 var(--d2-y); background: #FFFBEA; }
  html.tp-desk2 .d9m-pick, html.tp-desk2 .d9m-house { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  html.tp-desk2 .d9m-lbl { font: 500 var(--d2-t-11)/1.3 var(--d2-font); color: var(--d2-mute); white-space: nowrap; }
  html.tp-desk2 .d9m-pick .d9m-lbl { color: #3b3b37; font-weight: 600; }
  html.tp-desk2 .d9m-house .d7-msel { box-shadow: none; background: transparent; color: #44443f; font-weight: 400; }
  html.tp-desk2 .d9m-house .d7-msel:hover, html.tp-desk2 .d9m-house .d7-msel:focus { box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .d9m-sel.is-own { box-shadow: 0 0 0 1.5px #C9A000; }
  html.tp-desk2 .d9m-own { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--d2-t-12); line-height: 1.4; color: #5C4600; }
  html.tp-desk2 .d9m-own svg { flex: 0 0 12px; }
  html.tp-desk2 .d9m-own > span { flex: 1 1 160px; min-width: 0; }
  html.tp-desk2 .d9m-sel { max-width: 190px; }
  html.tp-desk2 .d9m-own.is-warn { color: #8a4a1c; }
  html.tp-desk2 .d9m-own .d2h-link, html.tp-desk2 .d9m-intro .d2h-link { padding: 0; min-height: 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .d9m-intro { display: flex; gap: 7px; align-items: flex-start; flex-wrap: wrap; margin: 0; padding: 8px 10px; border-radius: 8px; background: #F4F4EF; color: #3b3b37; }
  html.tp-desk2 .d9m-intro > span { flex: 1 1 200px; }
  html.tp-desk2 .d9m-intro svg { flex: 0 0 13px; margin-top: 2px; }
  html.tp-desk2 .d9m-count { margin-left: auto; padding: 2px 6px; border-radius: 4px; background: #FFF6D6; color: #5C4600; font: 600 var(--d2-t-11)/1.3 var(--d2-font); }
  html.tp-desk2 .d7-disc .d9m-count { margin-left: 6px; }
  /* the New sheet is wide enough for one line per agent */
  html.tp-desk2 .d8n-adv .d9m-row { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto); align-items: center; column-gap: 14px; }
  html.tp-desk2 .d8n-adv .d9m-pick, html.tp-desk2 .d8n-adv .d9m-house { flex-direction: column; align-items: flex-start; gap: 2px; }
  html.tp-desk2 .d8n-adv .d9m-own { grid-column: 1 / -1; }
  html.tp-ipad.tp-desk2 .d9m-own .d2h-link, html.tp-ipad.tp-desk2 .d9m-intro .d2h-link { min-height: 44px; }
}
@media (min-width: 769px) and (orientation: portrait) {
  html.tp-ipad.tp-desk2 .d8n-adv .d9m-row { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .d8n-adv .d9m-pick, html.tp-ipad.tp-desk2 .d8n-adv .d9m-house { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ---- end Social P6 ---- */

/* ============================================================================
   Polish B3 (30 Sep 2026): grouped lists instead of boxes (Clients, Team,
   Knowledge, Coaching, Payroll's person sheet, Compliance), Holly at 1440,
   and the last small fixes. Tokens only (type scale, control heights,
   radius, edge). Every selector starts html.tp-desk2 or html.tp-ipad.
   ============================================================================ */
@media (min-width: 769px) {
  /* ---- the grouped list: a title above one white group of hairline rows ---- */
  html.tp-desk2 .d2g { min-width: 0; }
  html.tp-desk2 .d2g-h { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0 4px 6px; }
  html.tp-desk2 .d2g-h h3 { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; margin: 0; font: 600 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d2g-h .d2h-link { min-height: 22px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2g-n { font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .d2g-tag { font: 500 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .d2g-box { background: #fff; border-radius: 10px; box-shadow: var(--d2-edge); padding: 0 14px; }
  html.tp-desk2 .d2g-box > * { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d2g-box > :first-child { border-top: 0; }
  html.tp-desk2 .d2g-box > .d3-kv { padding: 8px 0; margin: 0; }
  html.tp-desk2 .d2g-box > .d2h-row { padding: 9px 0; }
  html.tp-desk2 .d2g-box > .d2h-row .d2h-dmain > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d2g-box > .d2h-row > svg:last-child { color: #b3b3ad; flex: 0 0 auto; }
  html.tp-desk2 .d2g-box > .d2h-empty,
  html.tp-desk2 .d2g-box > .d3-note,
  html.tp-desk2 .d2g-box > p { margin: 0; padding: 10px 0; }
  html.tp-desk2 .d2g-box > .d3-note { border-top: 0; padding-top: 0; }

  /* ---- Clients: one header, the MRR line on the list, five grouped lists ---- */
  html.tp-desk2 .d4-mrrline { display: flex; gap: 24px; padding: 2px 6px 12px; }
  html.tp-desk2 .d4-mrrline div { display: flex; flex-direction: column; gap: 1px; }
  html.tp-desk2 .d4-mrrline small { font-size: var(--d2-t-11); font-weight: 600; color: var(--d2-mute); }
  html.tp-desk2 .d4-mrrline b { font: 700 var(--d2-t-17) var(--d2-font); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d4-cllist.d2t-card { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); }
  html.tp-desk2 .d4-clrow { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  html.tp-desk2 .d4-clrow .d3-pmain > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-clrow .d4-logo { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; font-size: var(--d2-t-11); }
  html.tp-desk2 .d4-clrow .d4-trail b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-chead { display: flex; align-items: center; gap: 14px; padding: 2px 2px 16px; margin-bottom: 16px; border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .d4-chead .d4-logo.is-big { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; font-size: var(--d2-t-15); }
  html.tp-desk2 .d4-chead-main p { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d4-chead-main h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d4-cstat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--d2-mute); }
  html.tp-desk2 .d4-cstat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c9c9c1; }
  html.tp-desk2 .d4-cstat.is-active { color: var(--d2-green); }
  html.tp-desk2 .d4-cstat.is-active::before { background: var(--d2-green); }
  html.tp-desk2 .d4-cstat.is-paused { color: #94600C; }
  html.tp-desk2 .d4-cstat.is-paused::before { background: var(--d2-amber); }
  html.tp-desk2 .d4-chead .d4-qas { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; grid-template-columns: none; }
  html.tp-desk2 .d4-chead .d4-qa { flex-direction: row; gap: 5px; padding: 0 10px; border: 0; border-radius: var(--d2-radius); font: 500 var(--d2-t-13) var(--d2-font); box-shadow: var(--d2-edge); }
  html.tp-desk2 .d4-chead .d4-qa.is-off { color: #b7b7b0; box-shadow: var(--d2-edge); cursor: default; background: #fff; }
  html.tp-desk2 .d4-cgrid { gap: 18px; }
  html.tp-desk2 .d4-ccol { gap: 18px; }
  html.tp-desk2 .d2g-box > .d4-prodrow { padding: 9px 0; }
  html.tp-desk2 .d2g-box > .d4-prodrow.is-total b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d4-prod,
  html.tp-desk2 .d4-prod.is-wrkfrce, html.tp-desk2 .d4-prod.is-netwrk, html.tp-desk2 .d4-prod.is-blncd,
  html.tp-desk2 .d4-prod.is-aiassist, html.tp-desk2 .d4-prod.is-bookkeeping { height: 18px; padding: 0 5px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--d2-line); color: #55554f; font: 600 var(--d2-t-11) var(--d2-font); letter-spacing: .04em; }
  html.tp-desk2 .d4-rstat { flex: 0 0 auto; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); white-space: nowrap; }
  html.tp-desk2 .d4-rstat.is-in_progress { color: #2D6BCF; }
  html.tp-desk2 .d4-rstat.is-submitted { color: #94600C; }
  html.tp-desk2 .d4-rstat.is-blocked { color: var(--d2-red); }
  html.tp-desk2 .d4-msgbtn { flex: 0 0 auto; color: var(--d2-mute); }
  html.tp-desk2 .d4-dangerbox { padding: 0 4px; }
}
@media (min-width: 769px) {
  /* ---- Team: one header, Message primary, ⋯ for View as and Offboard; two columns of grouped lists ---- */
  html.tp-desk2 .d3-team .d3-phead { display: flex; align-items: center; gap: 14px; padding: 2px 2px 16px; margin-bottom: 16px; border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .d3-team .d3-phead .d3-av-xl { width: 52px; height: 52px; flex: 0 0 52px; font-size: var(--d2-t-17); }
  html.tp-desk2 .d3-team .d3-phead-main h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d3-team .d3-phead-main .d2h-meta { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .d3-team .d3-phead-main .d2h-meta .d3-sdot { position: static; flex: 0 0 8px; }
  html.tp-desk2 .d3-team .d3-phead .d3-row-btns { flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px; }
  html.tp-desk2 .d3-menu-item:focus { outline: none; box-shadow: none; }
  html.tp-desk2 .d3-menu-item:focus-visible { background: var(--d2-pill); }
  html.tp-desk2 .d3-morebtn { width: var(--d2-btn-h); height: var(--d2-btn-h); border-radius: var(--d2-radius); box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .d3-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  html.tp-desk2 .d3-ccol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  html.tp-desk2 .d3-ccol:empty { display: none; }
  html.tp-desk2 .d3-scorebox { padding: 10px 0 6px; }
  html.tp-desk2 .d3-scorebox .d3-bignum { margin: 0 0 8px; }
  html.tp-desk2 .d3-bignum.is-low { color: var(--d2-red); }
  html.tp-desk2 .d3-scorebox .d3-prog > i { background: #55554f; }
  html.tp-desk2 .d3-scorebox .d3-bar-row.is-low .d3-prog > i { background: var(--d2-red); }
  html.tp-desk2 .d3-scorebox .d3-bar-row.is-low > b { color: var(--d2-red); }
  html.tp-desk2 .d3-scorebox .d2h-link { margin: 6px 0 0 -5px; font-size: var(--d2-t-12); }
  html.tp-desk2 .d2g-box .d3-lock { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font: 500 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
}
@media (min-width: 769px) and (max-width: 1279px) {
  html.tp-desk2 .d3-cgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 769px) {
  /* ---- Knowledge: one list, a header row per category, Required as a small tag ---- */
  html.tp-desk2 .d3-klist { background: #fff; border-radius: 10px; box-shadow: var(--d2-edge); overflow: hidden; }
  html.tp-desk2 .d3-klist .d3-kgroup { display: block; gap: 0; margin: 0; }
  html.tp-desk2 .d3-khead { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 10px 14px 4px; background: #FAFAF7; border-top: 1px solid var(--d2-line2); font: 600 var(--d2-t-12) var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .d3-kgroup:first-child .d3-khead { border-top: 0; }
  html.tp-desk2 .d3-khead span { font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d3-klist .d3-krow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-klist .d3-khead + .d3-kitems > .d3-krow:first-child,
  html.tp-desk2 .d3-klist.is-one .d3-kgroup:first-child .d3-krow:first-child { border-top: 0; }
  html.tp-desk2 .d3-klist .d3-kmain { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  html.tp-desk2 .d3-klist .d3-kmain .d2h-tile { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
  html.tp-desk2 .d3-klist .d3-pmain > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-klist .d3-req { flex: 0 0 auto; height: 18px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; background: var(--d2-soft); color: #55554f; font: 500 var(--d2-t-11) var(--d2-font); }
  html.tp-ipad.tp-desk2 .d3-klist .d3-kmain { min-height: 56px; }
}
@media (min-width: 769px) {
  /* ---- Coaching: one grouped list with three sections; Payroll's person sheet as grouped lists ---- */
  html.tp-desk2 .d3-coach .d3-side > .d2g + .d2g { margin-top: 18px; }
  html.tp-desk2 .d3-glist.d2t-card { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); }
  html.tp-desk2 .d3-glist .d3-prow,
  html.tp-desk2 .d3-glist .d3-frow-main { min-height: 50px; }
  html.tp-desk2 .d3-glist .d3-pmain > b { font-size: var(--d2-t-13); }
  html.tp-desk2 .d3-glist .d3-pmain > span.is-bad { color: var(--d2-red); }
  html.tp-desk2 .d3-glist .d3-frow { padding-right: 10px; }
  html.tp-desk2 .d3-glist .d3-frow + .d3-frow { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-cocounts { margin: 2px 0 0; }
  html.tp-desk2 .d3-coach .d3-goalrow { grid-template-columns: minmax(0, 1fr); }
  html.tp-desk2 .d3-coach .d3-goalrow > .d2h-card { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); padding: 12px 14px; }
  /* Payroll: the failed row is tinted (the banner above names it), so its status is a word, not a second red pill */
  html.tp-desk2 .d3-trow.is-failed > td { background: #FFF6F5; }
  html.tp-desk2 .d3-trow.is-failed.is-open > td { background: var(--d2-pill); }
  html.tp-desk2 .d3-trow.is-failed .d3-pill.is-pay-failed { background: none; padding: 0; color: var(--d2-red); }
  /* Payroll's person sheet: the figures, line items and banking are grouped lists, not a grey box and outlined boxes */
  html.tp-desk2 .d3-payinsp .d3-kvbox { background: #fff; border-radius: 10px; box-shadow: var(--d2-edge); padding: 0 14px; margin: 8px 0 16px; }
  html.tp-desk2 .d3-payinsp .d3-kvbox > .d3-kv { padding: 8px 0; }
  html.tp-desk2 .d3-payinsp .d3-kvbox > .d3-kv + .d3-kv { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-payinsp .d3-lis { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); background: #fff; padding: 0 14px; margin: 6px 0 16px; }
  html.tp-desk2 .d3-payinsp .d3-lis > p { margin: 0; padding: 9px 0; }
  html.tp-desk2 .d3-payinsp .d3-lis > .d2h-link { margin: 0; padding: 9px 0; min-height: 0; height: auto; border-radius: 0; font-size: var(--d2-t-12); align-items: flex-start; }
  html.tp-desk2 .d3-payinsp .d3-lis > .d3-li + .d2h-link,
  html.tp-desk2 .d3-payinsp .d3-lis > p + .d2h-link { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .d3-payinsp .d3-net { border-bottom: 0; padding: 4px 2px 14px; }
  html.tp-desk2 .d3-payinsp .d3-bankbtn { background: #fff; border: 0; border-radius: 10px; box-shadow: var(--d2-edge); padding: 10px 14px; }
  html.tp-desk2 .d3-payinsp .d3-bank { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .d3-payinsp .d3-failband { border-radius: 10px; }
  /* Compliance: the grid fills the row, one red signal (the header), and the health line isn't a box */
  html.tp-desk2 .d3-shotgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  html.tp-desk2 .d3-shotcard { max-width: 440px; border: 0; border-radius: 12px; box-shadow: var(--d2-edge); }
  html.tp-desk2 .d3-shotcard.is-alert { background: #fff; border: 0; }
  html.tp-desk2 .d3-shotcard:hover { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .24), 0 2px 6px rgba(0, 0, 0, .08); }
  html.tp-desk2 .d3-shotcard.is-sel { box-shadow: 0 0 0 2px var(--d2-y); }
  html.tp-desk2 .d3-bar > .d3-health.d2h-card { border: 0; background: none; padding-left: 2px; }
  html.tp-desk2 .d3-restlist.d2t-card { border: 0; border-radius: 10px; box-shadow: var(--d2-edge); }
  /* Requests: titles wrap to two lines in the queue instead of truncating mid-word */
  html.tp-desk2 .d2r-row .d2t-main > b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  /* ...and New request is a plain + so the open request's Send is the page's one primary */
  html.tp-desk2 .d2r-qbar [data-d2r-new].is-primary { background: #fff; box-shadow: var(--d2-edge); }
}
@media (min-width: 769px) {
  /* ---- Holly at 1440: threads as a plain source list (the yellow tile is Holly's alone),
     suggestions under the headline, an info button for This thread. Layout only. ---- */
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-eyebrow { margin: 4px 8px 4px; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread] { display: flex; align-items: center; gap: 10px; margin: 0 0 1px; padding: 6px 8px; min-height: 44px; border: 0; border-radius: var(--d2-radius); background: none; box-shadow: none; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread]:hover { background: rgba(0, 0, 0, .04); }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread].is-current { background: var(--d2-pill); border: 0; box-shadow: none; }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread] .nexus-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--d2-soft); color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread] .nexus-rt { font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread] .nexus-rs { margin-top: 0; font-size: var(--d2-t-12); }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-card[data-nx-thread] .nexus-time { font-size: var(--d2-t-11); }
  html.tp-desk2.d2-holly-cols #holly-nexus .nexus-new { margin-top: 6px; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-empty-state .d2-hchips { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 420px; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-empty-state .d2-hchips .hc-chip { text-align: left; }
  html.tp-desk2.d2-holly-cols #view-holly .hc-head .d2-hinfo { margin-left: auto; color: var(--d2-mute); }
  html.tp-desk2.d2-holly-cols #view-holly .hc-head .d2-hinfo[aria-pressed="true"] { color: var(--d2-ink); background: var(--d2-soft); }
  html.tp-desk2.d2-holly-cols #view-holly .hc-head .d2-hinfo + [data-hc-new] { margin-left: 4px; }
}
@media (min-width: 769px) {
  /* ---- small fixes ---- */
  html.tp-desk2 .d2t-mcount { margin-left: 4px; font-size: var(--d2-t-12); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .d2t-mcount.is-alert { color: var(--d2-red); font-weight: 600; }
  html.tp-desk2 .d2e-sumline { margin: 0 2px 14px; font-size: var(--d2-t-13); color: var(--d2-mute); }
  html.tp-desk2 .d2e-sumline b { color: var(--d2-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .d2e-sumline b.is-bad { color: var(--d2-red); }
  /* End of day: "Still working" under Missing is neutral, not good-news green */
  html.tp-desk2 .d2e-prow .d2e-sdot.is-on { background: #b3b3ad; }
  /* Reports: the three lists line up at the bottom too */
  html.tp-desk2 .d4-rgroups { align-items: stretch; }
  /* Notifications: the select boxes stay out of sight until you hover a row or start a selection (⌘- or ⇧-click) */
  html.tp-desk2:not(.tp-ipad) .d2n-list:not(.has-picks) .d2n-check { opacity: 0; }
  html.tp-desk2:not(.tp-ipad) .d2n-list:not(.has-picks) .d2n-row:hover .d2n-check,
  html.tp-desk2:not(.tp-ipad) .d2n-list:not(.has-picks) .d2n-check:focus-visible { opacity: 1; }
  /* Chats: the empty conversation pane says so in the middle, like Mail */
  html.tp-desk2 #view-groups #chats-detail-body > p.subtle:only-child { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--d2-top) - 80px); margin: 0; padding: 24px !important; text-align: center; color: var(--d2-mute); }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d3-team .d3-phead { flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .d3-team .d3-phead .d3-row-btns { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  html.tp-ipad.tp-desk2 .d3-morebtn { width: 44px; height: 44px; }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .d4-chead { flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .d4-chead .d4-qas { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  html.tp-ipad.tp-desk2 .d4-chead .d4-qa { min-height: 0; height: var(--d2-btn-h); justify-content: center; }
  html.tp-ipad.tp-desk2 .d4-msgbtn { width: 44px; height: 44px; }
  html.tp-ipad.tp-desk2 .d4-chead .d4-qa { font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .d2g-h .d2h-link { min-height: 44px; font-size: var(--d2-t-13); }
  html.tp-ipad.tp-desk2 .d2g-box > .d2h-row { min-height: 52px; }
}

/* ============================================================================
   Chat polish (1 Oct 2026): the GIF / attach drawer docked below the composer
   in the conversation pane (and the thread pane) uses the desk2 controls.
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-groups .tp-composer-drawer:not([hidden]) { background: #FAFAF7; border-top-color: var(--d2-line); }
  html.tp-desk2 #view-groups .tp-composer[data-drawer="desk"] .tp-drawer-gif .tp-gif-input { min-height: 0; height: var(--d2-btn-h); padding-top: 0; padding-bottom: 0; border-radius: var(--d2-radius); font-size: var(--d2-t-13); }
  html.tp-desk2 #view-groups .tp-drawer-gif .tp-gif-attribution { font-size: var(--d2-t-11); }
  html.tp-desk2 #view-groups .tp-drawer-gif .tp-gif-item { border-radius: var(--d2-radius); }
  html.tp-desk2 #view-groups .tp-composer[data-drawer="desk"] .tp-attach-tile { font-size: var(--d2-t-12); }
}
@media (min-width: 769px) {
  /* iPad: the 44pt compose button and segments read at iPad sizes. */
  html.tp-ipad.tp-desk2 #view-groups .chats-compose-btn svg { width: 20px; height: 20px; }
  html.tp-ipad.tp-desk2 #view-groups .tp-inbox-chips .tp-chip { font-size: var(--d2-t-15); }
}


/* ============================================================================
   Social › Inbox (design/social-inbox, mocks M1 to M5, H1, H3). Three panes on
   a computer (list 320 · thread · contact 300), two on an iPad with the contact
   as a panel. Yellow only on the primary action (Send / Reply / Send privately).
   Holly's card is neutral. Type and controls use the tokens above.
   ============================================================================ */
@media (min-width: 769px) {
  html.tp-desk2 #view-social.d2-on .d2p-social:has(.ib) { max-width: none; }
  html.tp-desk2 .ib { --ib-h: calc(100vh - var(--d2-toolbar) - 92px); display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; height: var(--ib-h); min-height: 520px;
    background: var(--d2-card); border-radius: 12px; box-shadow: var(--d2-edge); overflow: hidden; font: 400 var(--d2-t-13)/1.4 var(--d2-font); color: var(--d2-ink); }
  html.tp-desk2 .ib:has(> .ib-page), html.tp-desk2 .ib:has(> .ib-settings) { display: block; overflow: auto; }
  html.tp-desk2 .ib-mute { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-grow { flex: 1 1 auto; }
  html.tp-desk2 .ib-mt { margin-top: 14px; }
  html.tp-desk2 .ib-pad { padding: 12px; }
  html.tp-desk2 .ib-empty { padding: 28px 16px; color: var(--d2-mute); text-align: center; }
  html.tp-desk2 .ib kbd { font: 500 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .ib-pop { height: var(--d2-btn-h); border-radius: var(--d2-radius); border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-13) var(--d2-font); padding: 0 8px; color: var(--d2-ink); max-width: 100%; }
  /* list */
  html.tp-desk2 .ib-l { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--d2-line); background: #FBFBF8; }
  html.tp-desk2 .ib-lhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px; }
  html.tp-desk2 .ib-lhead h2 { margin: 0; font: 700 var(--d2-t-17) var(--d2-font); }
  html.tp-desk2 .ib-search { display: flex; align-items: center; gap: 6px; margin: 0 12px 8px; height: var(--d2-btn-h); padding: 0 8px; border-radius: var(--d2-radius); background: var(--d2-seg-track); color: var(--d2-mute); }
  html.tp-desk2 .ib-search input { flex: 1; border: 0; background: none; font: 400 var(--d2-t-13) var(--d2-font); outline: none; min-width: 0; color: var(--d2-ink); }
  html.tp-desk2 .ib-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
  html.tp-desk2 .ib-fchip { height: var(--d2-btn-h-sm); padding: 0 10px; border-radius: 999px; border: 0; box-shadow: var(--d2-edge); background: #fff; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-ink); cursor: pointer; white-space: nowrap; }
  html.tp-desk2 .ib-fchip b { font-weight: 600; color: var(--d2-mute); margin-left: 2px; }
  html.tp-desk2 .ib-fchip.is-on { background: var(--d2-ink); color: #fff; box-shadow: none; }
  html.tp-desk2 .ib-fchip.is-on b { color: #ccc; }
  html.tp-desk2 .ib-sortline { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 6px 7px; font-size: var(--d2-t-12); color: var(--d2-mute); border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .ib-sortline .d2h-link { font-size: var(--d2-t-12); font-weight: 500; color: var(--d2-mute); }
  html.tp-desk2 .ib-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  html.tp-desk2 .ib-row { position: relative; display: flex; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--d2-line2); background: none; padding: 11px 12px 11px 22px; cursor: pointer; font: inherit; color: inherit; }
  html.tp-desk2 .ib-row:hover { background: rgba(0, 0, 0, .025); }
  html.tp-desk2 .ib-row.is-sel { background: var(--d2-soft); }
  html.tp-desk2 .ib-dot { position: absolute; left: 8px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: #2F6FDB; }
  html.tp-desk2 .ib-av { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #F1E3EA; color: #8B3A5A; display: inline-flex; align-items: center; justify-content: center; font: 600 var(--d2-t-11) var(--d2-font); }
  html.tp-desk2 .ib-av.is-big { width: 64px; height: 64px; flex-basis: 64px; font-size: var(--d2-t-20); }
  html.tp-desk2 .ib-av.is-sm { width: 26px; height: 26px; flex-basis: 26px; background: #FFF4B9; color: #7A5A00; }
  html.tp-desk2 .ib-pmark { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 16px; padding: 0 1px; border-radius: 4px; border: 1.5px solid #fff; color: #fff; font: 700 var(--d2-t-11) var(--d2-font); line-height: 13px; letter-spacing: -.04em; font-style: normal; text-align: center; }
  html.tp-desk2 .ib-pmark.is-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
  html.tp-desk2 .ib-pmark.is-fb { background: #1877F2; }
  html.tp-desk2 .ib-pmark.is-li { background: #0A66C2; }
  html.tp-desk2 .ib-pmark.is-x { background: #111; }
  html.tp-desk2 .ib-av.is-big .ib-pmark { min-width: 20px; height: 20px; font-size: var(--d2-t-11); line-height: 17px; }
  html.tp-desk2 .ib-rbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .ib-rtop { display: flex; justify-content: space-between; gap: 8px; }
  html.tp-desk2 .ib-rtop b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .ib-rtop time { color: var(--d2-mute); font-size: var(--d2-t-12); flex: 0 0 auto; }
  html.tp-desk2 .ib-rprev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #333; }
  html.tp-desk2 .ib-rprev svg { vertical-align: -2px; margin-right: 4px; color: var(--d2-mute); }
  html.tp-desk2 .ib-row.is-unread .ib-rtop b { font-weight: 700; }
  html.tp-desk2 .ib-rmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--d2-mute); font-size: var(--d2-t-12); margin-top: 2px; }
  html.tp-desk2 .ib-tag, html.tp-desk2 .ib-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--d2-soft); color: var(--d2-ink); font: 600 var(--d2-t-11) var(--d2-font); white-space: nowrap; }
  html.tp-desk2 .ib-tag.is-green { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .ib-tag.is-yellow { background: #FFF4B9; color: #6B5100; }
  html.tp-desk2 .ib-tag.is-red, html.tp-desk2 .ib-chip.is-red { background: #FDE8E6; color: #B4271D; }
  html.tp-desk2 .ib-chip.is-blue { background: #E8F0FD; color: #1F57B8; }
  html.tp-desk2 .ib-chip.is-amber { background: #FFF1D6; color: #94600C; }
  html.tp-desk2 .ib-chip { height: 24px; padding: 0 9px; border-radius: 999px; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-lfoot { border-top: 1px solid var(--d2-line); padding: 6px; display: flex; flex-direction: column; }
  html.tp-desk2 .ib-lfoot button { display: flex; align-items: center; gap: 8px; height: var(--d2-btn-h); border: 0; background: none; border-radius: var(--d2-radius); padding: 0 8px; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; }
  html.tp-desk2 .ib-lfoot button:hover { background: rgba(0, 0, 0, .05); }
  html.tp-desk2 .ib-lfoot em { margin-left: auto; font-style: normal; color: var(--d2-mute); font-size: var(--d2-t-12); }
  /* thread */
  html.tp-desk2 .ib-t { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
  html.tp-desk2 .ib-tempty { align-items: center; justify-content: center; color: var(--d2-mute); gap: 10px; }
  html.tp-desk2 .ib-thead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--d2-line); min-height: 56px; }
  html.tp-desk2 .ib-who { display: flex; flex-direction: column; min-width: 90px; flex: 1 1 auto; }
  html.tp-desk2 .ib-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .ib-thead > .ib-chip, html.tp-desk2 .ib-thead > .d2h-btn { flex: 0 0 auto; }
  html.tp-desk2 .ib-who b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-who span { color: var(--d2-mute); font-size: var(--d2-t-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .ib-msgs { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
  html.tp-desk2 .ib-day { align-self: center; color: var(--d2-mute); font-size: var(--d2-t-12); margin: 8px 0 2px; }
  html.tp-desk2 .ib-sys { align-self: stretch; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: var(--d2-bg); color: #555; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-b { max-width: 72%; padding: 8px 12px; border-radius: 16px; }
  html.tp-desk2 .ib-b p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .ib-b.is-in { align-self: flex-start; background: var(--d2-soft); }
  html.tp-desk2 .ib-b.is-out { align-self: flex-end; background: var(--d2-ink); color: #fff; }
  html.tp-desk2 .ib-b.is-del { opacity: .55; font-style: italic; }
  html.tp-desk2 .ib-bmeta { display: flex; gap: 8px; color: var(--d2-mute); font-size: var(--d2-t-11); margin: 0 4px 4px; }
  html.tp-desk2 .ib-bmeta.is-out { justify-content: flex-end; }
  html.tp-desk2 .ib-st.is-bad { color: var(--d2-red); }
  html.tp-desk2 .ib-st.is-warn { color: #94600C; }
  html.tp-desk2 .ib-st .d2h-link { font-size: var(--d2-t-11); min-height: 0; padding: 0 2px; }
  html.tp-desk2 .ib-story { display: flex; align-items: center; gap: 5px; font-size: var(--d2-t-12); color: var(--d2-mute); margin-bottom: 4px; }
  html.tp-desk2 .ib-sens { display: flex; align-items: center; gap: 4px; color: #B4271D; font: 600 var(--d2-t-11) var(--d2-font); margin-bottom: 3px; }
  html.tp-desk2 .ib-post { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--d2-bg); margin-bottom: 8px; }
  html.tp-desk2 .ib-post > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .ib-post b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-postthumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; background: #fff; box-shadow: var(--d2-edge); display: inline-flex; align-items: center; justify-content: center; color: var(--d2-mute); }
  html.tp-desk2 .ib-postthumb.is-sm { flex-basis: 32px; width: 32px; height: 32px; }
  html.tp-desk2 .ib-kick { font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .ib-c { position: relative; display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; }
  html.tp-desk2 .ib-c.is-reply { margin-left: 34px; }
  html.tp-desk2 .ib-c.is-target { background: var(--d2-bg); box-shadow: inset 3px 0 0 #9A9A92; }
  html.tp-desk2 .ib-c.is-hidden p { opacity: .5; }
  html.tp-desk2 .ib-cbody { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .ib-cbody p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .ib-ctop { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .ib-ctop time { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
  html.tp-desk2 .ib-act { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font: 500 var(--d2-t-12) var(--d2-font); color: #444; cursor: pointer; text-decoration: none; }
  html.tp-desk2 .ib-act:hover { color: var(--d2-ink); }
  html.tp-desk2 .ib-act.is-strong { font-weight: 600; color: var(--d2-ink); }
  html.tp-desk2 .ib-act.is-done { color: #17753A; cursor: default; }
  html.tp-desk2 .ib-act.is-muted { color: var(--d2-mute); cursor: default; }
  html.tp-desk2 .ib-act:disabled { color: var(--d2-mute); cursor: default; }
  html.tp-desk2 .ib-pop-pr { position: relative; z-index: 3; margin-top: 10px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: var(--d2-shadow); max-width: 360px; }
  html.tp-desk2 .ib-pop-pr b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-pop-pr p { margin: 6px 0 10px; color: #444; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-pop-pr textarea, html.tp-desk2 .ib-comp textarea, html.tp-desk2 .ib-notein, html.tp-desk2 .ib-sbody textarea, html.tp-desk2 .ib-sbody input:not([type]), html.tp-desk2 .ib-savednew input {
    width: 100%; box-sizing: border-box; border: 0; box-shadow: var(--d2-edge); border-radius: 9px; padding: 8px 10px; font: 400 var(--d2-t-13)/1.45 var(--d2-font); color: var(--d2-ink); background: #fff; resize: vertical; }
  html.tp-desk2 .ib-row-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
  html.tp-desk2 .ib-row-btns.is-center { justify-content: center; }
  html.tp-desk2 .is-center { text-align: center; }
  /* composer + Holly */
  html.tp-desk2 .ib-foot { position: relative; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .ib-holly { padding: 12px 14px; border-radius: 12px; background: #F6F6F1; box-shadow: var(--d2-edge); }
  html.tp-desk2 .ib-holly.is-note { display: flex; align-items: center; gap: 8px; color: #444; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-hhead { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .ib-hhead b { font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .ib-hico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--d2-soft); color: var(--d2-ink); flex: 0 0 26px; }
  html.tp-desk2 .ib-holly > .ib-mute { margin: 4px 0 6px 34px; }
  html.tp-desk2 .ib-htext { margin: 0 0 8px; white-space: pre-wrap; }
  html.tp-desk2 .ib-flags { list-style: none; margin: 0 0 8px; padding: 0; color: #94600C; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-flags li { display: flex; align-items: center; gap: 5px; }
  html.tp-desk2 .ib-hbtns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  html.tp-desk2 .ib-hask { display: flex; align-items: center; gap: 10px; }
  html.tp-desk2 .ib-comp { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; padding: 8px 10px; }
  html.tp-desk2 .ib-comp textarea { box-shadow: none; padding: 4px 2px; resize: none; min-height: 44px; }
  html.tp-desk2 .ib-comp textarea:focus { outline: none; }
  html.tp-desk2 .ib-cbar { display: flex; align-items: center; gap: 8px; }
  html.tp-desk2 .ib-off { margin: 0; display: flex; align-items: center; gap: 4px; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-saved { position: absolute; left: 14px; right: 14px; bottom: 100%; max-height: 260px; overflow: auto; background: #fff; border-radius: 12px; box-shadow: var(--d2-shadow); padding: 6px; z-index: 4; }
  html.tp-desk2 .ib-saved button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
  html.tp-desk2 .ib-saved button:hover { background: var(--d2-soft); }
  html.tp-desk2 .ib-saved span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  /* closed window (M3) */
  html.tp-desk2 .ib-closed { padding: 14px 16px; border-radius: 12px 12px 0 0; background: #FDEEEC; }
  html.tp-desk2 .ib-closed-h { display: flex; align-items: center; gap: 8px; color: #B4271D; }
  html.tp-desk2 .ib-closed-h b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-closed p { margin: 6px 0 0 24px; color: #5A2A26; }
  html.tp-desk2 .ib-closed.is-warn { background: #FFF5DF; }
  html.tp-desk2 .ib-closed.is-warn .ib-closed-h { color: #94600C; }
  html.tp-desk2 .ib-closed.is-warn p { color: #4D3A10; }
  html.tp-desk2 .ib-options { border-radius: 0 0 12px 12px; box-shadow: var(--d2-edge); margin-top: -8px; }
  html.tp-desk2 .ib-opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-opt > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.tp-desk2 .ib-opt > div span:not(.ib-tag) { color: #555; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-opt .ib-tag { align-self: flex-start; }
  html.tp-desk2 .ib-opt.is-locked b { color: var(--d2-mute); }
  /* inspector */
  html.tp-desk2 .ib-i { border-left: 1px solid var(--d2-line); overflow-y: auto; min-height: 0; padding: 16px; background: #fff; }
  html.tp-desk2 .ib-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--d2-line); }
  html.tp-desk2 .ib-card > b { font: 700 var(--d2-t-17) var(--d2-font); margin-top: 4px; }
  html.tp-desk2 .ib-card .d2h-btn { text-decoration: none; }
  html.tp-desk2 .ib-isec { padding: 12px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  html.tp-desk2 .ib-isec h4 { margin: 0; font: 600 var(--d2-t-13) var(--d2-font); }
  html.tp-desk2 .ib-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  html.tp-desk2 .ib-label { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 9px; border-radius: 6px; background: var(--d2-soft); font: 500 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .ib-label button { border: 0; background: none; cursor: pointer; color: var(--d2-mute); font: 500 var(--d2-t-13) var(--d2-font); padding: 0 4px; }
  html.tp-desk2 .ib-labelin { width: 90px; height: 24px; border: 0; box-shadow: var(--d2-edge); border-radius: 6px; padding: 0 8px; font: 500 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .ib-hist { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 4px 0; cursor: pointer; font: inherit; color: inherit; }
  html.tp-desk2 .ib-hist span:last-child { display: flex; flex-direction: column; min-width: 0; }
  html.tp-desk2 .ib-hist em { font-style: normal; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-note { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; background: var(--d2-bg); }
  html.tp-desk2 .ib-note b { font: 600 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .ib-note p { margin: 2px 0 0; white-space: pre-wrap; }
  html.tp-desk2 .ib-ihead { display: flex; justify-content: flex-end; margin-bottom: 6px; }
  /* pages: automations, settings, connection */
  html.tp-desk2 .ib-page, html.tp-desk2 .ib-settings { min-height: var(--ib-h); }
  html.tp-desk2 .ib-page { padding: 18px 22px; }
  html.tp-desk2 .ib-2col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
  html.tp-desk2 .ib-pagehead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
  html.tp-desk2 .ib-pagehead h2, html.tp-desk2 .ib-sbody h2, html.tp-desk2 .ib-connect h2 { margin: 0; font: 700 var(--d2-t-20) var(--d2-font); }
  html.tp-desk2 .ib-pagehead.is-flat { align-items: center; }
  html.tp-desk2 .ib-page h3, html.tp-desk2 .ib-sbody h3 { font: 600 var(--d2-t-15) var(--d2-font); margin: 16px 0 8px; }
  html.tp-desk2 .ib-rule { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-rule.is-on { box-shadow: 0 0 0 1.5px var(--d2-amber); }
  html.tp-desk2 .ib-rule header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-rule header > div { display: flex; flex-direction: column; }
  html.tp-desk2 .ib-rule header b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-rule dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); margin: 0; }
  html.tp-desk2 .ib-rule dt { padding: 12px 16px; color: var(--d2-mute); border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-rule dd { margin: 0; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-rule footer { padding: 10px 16px; }
  html.tp-desk2 .ib-rule code { font: 700 var(--d2-t-11) var(--d2-font); background: var(--d2-ink); color: var(--d2-y); padding: 2px 5px; border-radius: 4px; }
  html.tp-desk2 .ib-quote { margin: 8px 0; padding: 10px 12px; border-radius: 9px; background: var(--d2-bg); white-space: pre-wrap; }
  html.tp-desk2 .ib-check { display: flex; align-items: center; gap: 6px; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-guards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .ib-guards li { display: flex; gap: 6px; align-items: center; }
  html.tp-desk2 .ib-guards svg { color: var(--d2-green); }
  html.tp-desk2 .ib-switch { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; background: #D5D5CE; cursor: pointer; flex: 0 0 38px; }
  html.tp-desk2 .ib-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
  html.tp-desk2 .ib-switch.is-on { background: var(--d2-green); }
  html.tp-desk2 .ib-switch.is-on i { left: 18px; }
  html.tp-desk2 .ib-qlist, html.tp-desk2 .ib-access { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; margin-bottom: 8px; }
  html.tp-desk2 .ib-qrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-qrow > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html.tp-desk2 .ib-access label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-access label .ib-mute { flex-basis: 100%; padding-left: 22px; }
  html.tp-desk2 .ib-access label.is-off { opacity: .6; }
  html.tp-desk2 .ib-kv { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
  html.tp-desk2 .ib-kv > span { color: var(--d2-mute); min-width: 130px; }
  html.tp-desk2 .ib-kvs { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-kvs .ib-kv + .ib-kv { border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
  html.tp-desk2 .ib-snav { padding: 14px 10px; border-right: 1px solid var(--d2-line); background: #FBFBF8; display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .ib-snav h5 { margin: 12px 8px 4px; font: 600 var(--d2-t-11) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .ib-snav button { display: flex; align-items: center; gap: 8px; height: var(--d2-btn-h); border: 0; background: none; border-radius: var(--d2-radius); padding: 0 8px; font: 500 var(--d2-t-13) var(--d2-font); color: var(--d2-ink); cursor: pointer; text-align: left; }
  html.tp-desk2 .ib-snav button:hover { background: rgba(0, 0, 0, .05); }
  html.tp-desk2 .ib-snav button.is-on { background: var(--d2-soft); font-weight: 600; }
  html.tp-desk2 .ib-snav .ib-snav-back { color: var(--d2-mute); }
  html.tp-desk2 .ib-sbody { padding: 18px 22px; min-width: 0; }
  html.tp-desk2 .ib-auto-off { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-auto-off > div { flex: 1 1 auto; }
  html.tp-desk2 .ib-auto-off b { font: 600 var(--d2-t-15) var(--d2-font); }
  html.tp-desk2 .ib-auto-off p { margin: 2px 0 0; }
  html.tp-desk2 .ib-modes, html.tp-desk2 .ib-log { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; box-shadow: var(--d2-edge); overflow: hidden; }
  html.tp-desk2 .ib-modes th, html.tp-desk2 .ib-modes td, html.tp-desk2 .ib-log th, html.tp-desk2 .ib-log td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--d2-line2); font-size: var(--d2-t-13); }
  html.tp-desk2 .ib-modes thead th, html.tp-desk2 .ib-log thead th { font: 600 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .ib-modes thead .ib-pmark { position: static; display: inline-block; margin-right: 5px; vertical-align: 1px; }
  html.tp-desk2 .ib-hold { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-hold > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
  html.tp-desk2 .ib-kvs input { max-width: 320px; }
  html.tp-desk2 .ib-rules { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; padding: 6px 18px 14px; margin-top: 12px; max-width: 640px; }
  html.tp-desk2 .ib-rules h4 { font: 600 var(--d2-t-13) var(--d2-font); margin: 12px 0 4px; }
  html.tp-desk2 .ib-rules ul { margin: 0; padding-left: 18px; }
  html.tp-desk2 .ib-alist { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; overflow: hidden; }
  html.tp-desk2 .ib-sbody h4 { font: 600 var(--d2-t-13) var(--d2-font); margin: 16px 0 6px; }
  html.tp-desk2 .ib-arow { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--d2-line2); background: none; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
  html.tp-desk2 .ib-arow.is-sel { background: var(--d2-soft); }
  html.tp-desk2 .ib-arow em { font-style: normal; font-size: var(--d2-t-12); color: #555; }
  html.tp-desk2 .ib-aside { border-left: 1px solid var(--d2-line); padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
  html.tp-desk2 .ib-aside h3 { margin: 0; font: 700 var(--d2-t-17) var(--d2-font); }
  html.tp-desk2 .ib-aside .ib-kv { padding: 4px 0; }
  html.tp-desk2 .ib-aside .d2h-btn { align-self: flex-start; }
  html.tp-desk2 .ib-field { display: flex; flex-direction: column; gap: 4px; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-savedrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: var(--d2-edge); margin: 8px 0; max-width: 640px; }
  html.tp-desk2 .ib-savedrow > div { flex: 1 1 auto; }
  html.tp-desk2 .ib-savedrow p { margin: 2px 0 0; white-space: pre-wrap; }
  html.tp-desk2 .ib-savednew { display: flex; flex-direction: column; gap: 6px; max-width: 640px; margin-top: 12px; align-items: flex-start; }
  html.tp-desk2 .ib-connect { padding: 26px 30px; border-radius: 16px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-connect > p { color: #444; }
  html.tp-desk2 .ib-bigico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--d2-pill); margin-bottom: 12px; }
  html.tp-desk2 .ib-steps { list-style: none; margin: 12px 0; padding: 0; border-radius: 12px; box-shadow: var(--d2-edge); }
  html.tp-desk2 .ib-steps li { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-steps li > div { display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .ib-steps li span:not(.ib-tick) { color: #555; font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-tick { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C9C9C1; display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .ib-steps li.is-done .ib-tick { background: var(--d2-green); color: #fff; box-shadow: none; }
  html.tp-desk2 .ib-steps li.is-done b { font-weight: 500; }
  html.tp-desk2 .ib-steps li.is-later .ib-tick { box-shadow: inset 0 0 0 1.5px #E3E3DC; }
  html.tp-desk2 .ib-chans h3 { margin-top: 0; }
  html.tp-desk2 .ib-chan { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--d2-line2); }
  html.tp-desk2 .ib-chan:first-of-type { border-radius: 12px 12px 0 0; }
  html.tp-desk2 .ib-chan .ib-pmark { position: static; }
  html.tp-desk2 .ib-chan em { font-style: normal; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .ib-chan em.is-warn { color: #94600C; }
  html.tp-desk2 .ib-chan em.is-good { color: #17753A; }
  html.tp-desk2 .ib-chans { border-radius: 12px; box-shadow: var(--d2-edge); background: #fff; }
  html.tp-desk2 .ib-chans h3 { padding: 12px 12px 0; }
}

/* iPad: two panes, the contact as a panel; 44pt targets (spec §3 iPad). */
@media (min-width: 769px) {
  html.tp-ipad .ib { grid-template-columns: 340px minmax(0, 1fr); position: relative; --ib-h: calc(100vh - 64px - 96px); }
  html.tp-ipad .ib > .ib-i { display: none; }
  html.tp-ipad .ib.is-contact > .ib-i { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 320px; box-shadow: var(--d2-shadow); z-index: 6; }
  html.tp-ipad .ib-row { padding-top: 13px; padding-bottom: 13px; }
  html.tp-ipad .ib-fchip { height: 40px; padding: 0 14px; font-size: var(--d2-t-13); }
  html.tp-ipad .ib-thead .d2h-btn, html.tp-ipad .ib .d2h-btn.is-primary { min-height: 44px; }
  html.tp-ipad .ib-act { min-height: 44px; font-size: var(--d2-t-13); }
  html.tp-ipad .ib-pop, html.tp-ipad .ib-search { height: 40px; }
  html.tp-ipad .ib-2col { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad .ib-settings { grid-template-columns: 200px minmax(0, 1fr); }
}

/* ---- NETWRK (Business › NETWRK; public/netwrk.js, migration 0151) ----------------
   Mocks: design/network-portal/mocks.html frames 1-3 (Mac) and 7 (iPad). Owner
   only. The toolbar carries the tabs and the business; the page is a large
   sentence, numbers, then the work. */
@media (min-width: 769px) {
  html.tp-desk2 #view-netwrk { padding: 0; }
  html.tp-desk2 .nw { font: 400 var(--d2-t-13)/1.4 var(--d2-font); color: var(--d2-ink); padding: 22px 28px 40px; min-width: 0; }
  html.tp-desk2 .nw *, html.tp-desk2 .nw-tb * { box-sizing: border-box; }
  html.tp-desk2 .nw button, html.tp-desk2 .nw select, html.tp-desk2 .nw input { font: inherit; color: inherit; }
  html.tp-desk2 .nw-tb .d2-seg button.is-later { color: var(--d2-mute); }
  /* Voicemail and Patterns are placeholders in phase 1: they make room on narrower windows. */
  @media (max-width: 1520px) { html.tp-desk2 .nw-tb .d2-seg button.is-later { display: none; } }
  html.tp-desk2 .nw-mark { display: block; }
  html.tp-desk2 .d2-ico-mark svg { width: 20px; height: 20px; }
  /* toolbar */
  html.tp-desk2 .nw-tb { display: flex; align-items: center; gap: 10px; }
  html.tp-desk2 .nw-tb .d2-seg { margin: 0; }
  html.tp-desk2 .nw-count { display: inline-flex; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--d2-y); color: var(--d2-ink); font: 700 var(--d2-t-11) var(--d2-font); line-height: 17px; justify-content: center; }
  html.tp-desk2 .nw-tenant { display: inline-flex; align-items: center; gap: 7px; height: var(--d2-btn-h); padding: 0 10px 0 4px; border-radius: var(--d2-radius); background: var(--d2-card); box-shadow: var(--d2-edge); font: 600 var(--d2-t-13) var(--d2-font); white-space: nowrap; }
  html.tp-desk2 .nw-tenant select { border: 0; background: transparent; font: 600 var(--d2-t-13) var(--d2-font); padding: 0 2px; cursor: pointer; }
  html.tp-desk2 .nw-tbadge { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 22px; padding: 0 4px; flex: none; height: 20px; border-radius: 5px; background: var(--d2-ink); color: var(--d2-y); font: 800 var(--d2-t-11) var(--d2-font); letter-spacing: -.02em; }
  /* type */
  html.tp-desk2 .nw-kicker { margin: 0 0 4px; font: 500 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .nw-large { margin: 0; font: 700 var(--d2-t-26)/1.2 var(--d2-font); letter-spacing: -.01em; }
  html.tp-desk2 .nw-lede { margin: 6px 0 0; font-size: var(--d2-t-13); color: #4b4b46; max-width: 860px; }
  html.tp-desk2 .nw-mute { color: var(--d2-mute); }
  html.tp-desk2 .nw-sub { display: block; color: var(--d2-mute); font-size: var(--d2-t-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .nw-foot { margin: 10px 2px 0; font-size: var(--d2-t-12); color: var(--d2-mute); max-width: 900px; }
  html.tp-desk2 .nw-pad { padding: 14px 16px; margin: 0; }
  html.tp-desk2 .nw-grow { flex: 1 1 auto; }
  html.tp-desk2 .nw-num { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
  html.tp-desk2 .is-red { color: var(--d2-red); }
  html.tp-desk2 .is-amber { color: #A66F00; }
  /* cards, buttons */
  html.tp-desk2 .nw-card { background: var(--d2-card); border-radius: 12px; box-shadow: var(--d2-edge); margin-top: 12px; }
  html.tp-desk2 .nw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; }
  html.tp-desk2 .nw-card-h h3 { margin: 0; font: 600 var(--d2-t-13) var(--d2-font); display: inline-flex; align-items: center; gap: 7px; }
  html.tp-desk2 .nw-card-h.nw-out { padding: 18px 4px 0; }
  html.tp-desk2 .nw-loading { padding: 28px; text-align: center; color: var(--d2-mute); }
  html.tp-desk2 .nw-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--d2-btn-h); padding: 0 11px; border-radius: var(--d2-radius); border: 0; background: var(--d2-card); box-shadow: var(--d2-edge); cursor: pointer; white-space: nowrap; font-weight: 500; }
  html.tp-desk2 .nw-btn:hover:not(:disabled) { background: #FAFAF7; }
  html.tp-desk2 .nw-btn:disabled { opacity: .45; cursor: default; }
  html.tp-desk2 .nw-btn-y { background: var(--d2-y); box-shadow: var(--d2-edge-y); font-weight: 600; }
  html.tp-desk2 .nw-btn-y:hover:not(:disabled) { background: #EDBD00; }
  html.tp-desk2 .nw-btn-danger { color: var(--d2-red); }
  html.tp-desk2 .nw-btn.nw-icon { width: var(--d2-btn-h); padding: 0; justify-content: center; }
  html.tp-desk2 .nw-btnrow { display: inline-flex; gap: 8px; }
  html.tp-desk2 .nw-link { border: 0; background: none; padding: 0; color: #8A6A00; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
  html.tp-desk2 .nw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex: none; background: #B9B9B2; }
  html.tp-desk2 .nw-dot.is-green, html.tp-desk2 .nw-why-bar.is-green { background: var(--d2-green); }
  html.tp-desk2 .nw-dot.is-red, html.tp-desk2 .nw-why-bar.is-red { background: var(--d2-red); }
  html.tp-desk2 .nw-dot.is-amber, html.tp-desk2 .nw-why-bar.is-amber { background: var(--d2-amber); }
  html.tp-desk2 .nw-dot.is-blue, html.tp-desk2 .nw-why-bar.is-blue { background: #3A74D8; }
  html.tp-desk2 .nw-dot.is-grey, html.tp-desk2 .nw-why-bar.is-grey { background: #9B9B94; }
  html.tp-desk2 .nw-tag { display: inline-flex; height: 18px; align-items: center; padding: 0 6px; margin-left: 6px; border-radius: 5px; background: var(--d2-soft); font: 600 var(--d2-t-11) var(--d2-font); color: #55554F; }
  html.tp-desk2 .nw-rep { display: inline-flex; height: 17px; align-items: center; padding: 0 5px; margin-left: 4px; border-radius: 5px; background: var(--d2-pill); color: #6B5100; font: 700 var(--d2-t-11) var(--d2-font); }
  html.tp-desk2 .nw-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border-radius: 10px; background: #FFF6D6; color: #5B4600; }
  html.tp-desk2 .nw-note { display: flex; gap: 7px; align-items: flex-start; margin: 12px 0 0; font-size: var(--d2-t-12); color: var(--d2-mute); }
  html.tp-desk2 .nw-note svg { flex: none; margin-top: 1px; }
  html.tp-desk2 .nw-empty { text-align: center; padding: 40px 20px; color: var(--d2-mute); }
  html.tp-desk2 .nw-empty h3 { color: var(--d2-ink); margin: 12px 0 4px; font: 600 var(--d2-t-17) var(--d2-font); }
  html.tp-desk2 .nw-empty p { margin: 0 auto 14px; max-width: 520px; }
  html.tp-desk2 .nw-empty-ic { display: inline-flex; width: 48px; height: 48px; border-radius: 13px; background: #111; align-items: center; justify-content: center; }
  html.tp-desk2 .nw-empty-ic svg { width: 34px; height: 34px; }
  /* overview */
  html.tp-desk2 .nw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 6px; }
  html.tp-desk2 .nw-stat { padding: 2px 16px 2px 0; border-right: 1px solid var(--d2-line); margin-right: 16px; }
  html.tp-desk2 .nw-stat:last-child { border-right: 0; }
  html.tp-desk2 .nw-stat b { display: block; font: 700 var(--d2-t-26)/1.2 var(--d2-font); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-stat span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-stat em { font-style: normal; font-weight: 600; margin-left: 4px; }
  html.tp-desk2 .nw-stat em.is-up { color: var(--d2-green); }
  html.tp-desk2 .nw-stat em.is-down { color: var(--d2-red); }
  html.tp-desk2 .nw-cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 24px; align-items: start; margin-top: 6px; }
  html.tp-desk2 .nw-chart { display: block; width: 100%; height: auto; padding: 0 12px 10px; }
  html.tp-desk2 .nw-grid { stroke: var(--d2-line2); stroke-width: 1; }
  html.tp-desk2 .nw-axis { fill: var(--d2-mute); font-size: var(--d2-t-11); }
  html.tp-desk2 .nw-bar-c { fill: #111; }
  html.tp-desk2 .nw-bar-m { fill: #D8D8D1; }
  html.tp-desk2 .nw-bar-p { fill: var(--d2-y); }
  html.tp-desk2 .nw-bar-pm { fill: #F2E3A0; }
  html.tp-desk2 .nw-legend { display: inline-flex; gap: 12px; align-items: center; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: -6px; }
  html.tp-desk2 .nw-legend i.is-c { background: #111; }
  html.tp-desk2 .nw-legend i.is-m { background: #D8D8D1; }
  html.tp-desk2 .nw-legend i.is-p { background: var(--d2-y); }
  html.tp-desk2 .nw-why { padding-bottom: 10px; }
  html.tp-desk2 .nw-why-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 6px 16px; }
  html.tp-desk2 .nw-why-row b { text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-why-track { height: 6px; border-radius: 3px; background: var(--d2-line2); overflow: hidden; }
  html.tp-desk2 .nw-why-bar { display: block; height: 100%; border-radius: 3px; }
  html.tp-desk2 .nw-flist { overflow: hidden; margin-top: 8px; }
  html.tp-desk2 .nw-frow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border: 0; border-top: 1px solid var(--d2-line2); background: none; text-align: left; cursor: pointer; }
  html.tp-desk2 .nw-frow:first-child { border-top: 0; }
  html.tp-desk2 .nw-frow:hover { background: #FAFAF6; }
  html.tp-desk2 .nw-fmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html.tp-desk2 .nw-ficon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #FCE9E7; color: var(--d2-red); display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .nw-ficon.is-ok { background: #E4F5EA; color: var(--d2-green); }
  html.tp-desk2 .nw-chev { color: #A8A8A1; display: inline-flex; }
  html.tp-desk2 .nw-holly { padding-bottom: 6px; }
  html.tp-desk2 .nw-holly-ic { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: var(--d2-y); align-items: center; justify-content: center; }
  html.tp-desk2 .nw-ins { display: flex; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-card-h + .nw-ins { border-top: 0; }
  html.tp-desk2 .nw-ins-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #FFF4B9; color: #6B5100; display: inline-flex; align-items: center; justify-content: center; }
  html.tp-desk2 .nw-ins b { font-weight: 600; }
  html.tp-desk2 .nw-ins p { margin: 3px 0 0; color: #4b4b46; }
  html.tp-desk2 .nw-ins p.nw-try { color: #8A6A00; }
  /* calls */
  html.tp-desk2 .nw-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  html.tp-desk2 .nw-pop { height: var(--d2-btn-h); border: 0; border-radius: var(--d2-radius); background: var(--d2-card); box-shadow: var(--d2-edge); padding: 0 8px; cursor: pointer; }
  html.tp-desk2 .nw-search { display: inline-flex; align-items: center; gap: 6px; height: var(--d2-btn-h); padding: 0 9px; border-radius: var(--d2-radius); background: #E9E9E2; color: var(--d2-mute); }
  html.tp-desk2 .nw-search input { border: 0; background: transparent; width: 120px; outline: none; color: var(--d2-ink); }
  html.tp-desk2 .nw-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  html.tp-desk2 .nw-main { min-width: 0; }
  html.tp-desk2 .nw-table { overflow: hidden; }
  html.tp-desk2 .nw-tr { display: grid; grid-template-columns: 82px 66px minmax(90px, 1fr) 122px minmax(150px, 1.6fr) 50px 72px 74px; gap: 8px; align-items: center; padding: 0 14px; min-height: 36px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-th { min-height: 30px; border-top: 0; color: var(--d2-mute); font: 500 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .nw-row { cursor: pointer; }
  html.tp-desk2 .nw-row:hover { background: #FAFAF6; }
  html.tp-desk2 .nw-row.is-sel { background: #FFF4C2; }
  html.tp-desk2 .nw-r { text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-oc { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .nw-recic { color: #A8A8A1; }
  html.tp-desk2 .nw-insp { position: sticky; top: 12px; background: var(--d2-card); border-radius: 12px; box-shadow: var(--d2-edge); padding: 16px; margin-top: 12px; min-height: 200px; }
  html.tp-desk2 .nw-insp-hd { display: flex; gap: 12px; align-items: center; }
  html.tp-desk2 .nw-insp-hd h3 { margin: 0; font: 700 var(--d2-t-17) var(--d2-font); }
  html.tp-desk2 .nw-insp-hd p { margin: 2px 0 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-verdict { margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; }
  html.tp-desk2 .nw-verdict.is-bad { background: #FDECEA; }
  html.tp-desk2 .nw-verdict.is-bad b { color: #B4271D; }
  html.tp-desk2 .nw-verdict.is-ok { background: #E9F6EE; }
  html.tp-desk2 .nw-verdict.is-ok b { color: #17753A; }
  html.tp-desk2 .nw-verdict p { margin: 4px 0 0; }
  html.tp-desk2 .nw-h4 { margin: 16px 0 6px; font: 600 var(--d2-t-12) var(--d2-font); color: var(--d2-mute); }
  html.tp-desk2 .nw-journey { list-style: none; margin: 0; padding: 0 0 0 4px; }
  html.tp-desk2 .nw-journey li { position: relative; padding: 0 0 12px 22px; display: flex; flex-direction: column; }
  html.tp-desk2 .nw-journey li::before { content: ""; position: absolute; left: 0; top: 3px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #111; background: #fff; }
  html.tp-desk2 .nw-journey li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 15px; bottom: 0; width: 2px; background: var(--d2-line); }
  html.tp-desk2 .nw-journey li.is-end::before { background: var(--d2-red); border-color: var(--d2-red); }
  html.tp-desk2 .nw-journey li.is-ok::before { background: var(--d2-green); border-color: var(--d2-green); }
  html.tp-desk2 .nw-journey span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-kv span { color: var(--d2-mute); }
  html.tp-desk2 .nw-kv b { font-weight: 500; text-align: right; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
  html.tp-desk2 .nw-insp-ft { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--d2-line); flex-wrap: wrap; }
  /* missed */
  html.tp-desk2 .nw-mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  html.tp-desk2 .nw-mhead .d2-seg { margin: 0; }
  html.tp-desk2 .nw-mlist { overflow: visible; }
  html.tp-desk2 .nw-mrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-mrow:first-child { border-top: 0; }
  html.tp-desk2 .nw-mrow.is-flash { background: #FFF8DA; }
  html.tp-desk2 .nw-tried { color: #8A6A00; font-weight: 600; }
  html.tp-desk2 .nw-age { color: var(--d2-mute); font-size: var(--d2-t-12); min-width: 34px; text-align: right; }
  html.tp-desk2 .nw-menu { position: relative; }
  html.tp-desk2 .nw-pop-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 210px; padding: 5px; border-radius: 10px; background: #fff; box-shadow: var(--d2-shadow); }
  html.tp-desk2 .nw-pop-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 10px; border-radius: 6px; text-align: left; cursor: pointer; }
  html.tp-desk2 .nw-pop-menu button:hover { background: var(--d2-y); }
  html.tp-desk2 .nw-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 16px; gap: 12px; }
  html.tp-desk2 .nw-funnel b { display: block; font: 700 var(--d2-t-26)/1.2 var(--d2-font); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-funnel span { color: var(--d2-mute); font-size: var(--d2-t-12); }
  /* setup */
  html.tp-desk2 .nw-setup { padding-bottom: 14px; }
  html.tp-desk2 .nw-setup .nw-kv, html.tp-desk2 .nw-setup .nw-lede { margin-left: 16px; margin-right: 16px; }
  html.tp-desk2 .nw-keyform { display: flex; gap: 8px; margin: 12px 16px 0; }
  html.tp-desk2 .nw-keyform input { flex: 1 1 auto; min-width: 0; height: var(--d2-btn-h); border: 0; border-radius: var(--d2-radius); background: #F1F1EB; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); padding: 0 10px; outline: none; }
  html.tp-desk2 .nw-setup .nw-note { margin-left: 16px; margin-right: 16px; }
  html.tp-desk2 .nw-card > p { margin: 4px 16px 12px; }
  html.tp-desk2 .nw-gaps { margin: 4px 0 14px; padding: 0 16px 0 32px; }
  html.tp-desk2 .nw-gaps li { margin: 0 0 8px; color: #4b4b46; }
  html.tp-desk2 .nw-gaps b { color: var(--d2-ink); font-weight: 600; }
  html.tp-desk2 .nw-soonpage { margin-top: 0; }
  @media (max-width: 1180px) {
    html.tp-desk2 .nw-cols { grid-template-columns: minmax(0, 1fr); }
    html.tp-desk2 .nw-split { grid-template-columns: minmax(0, 1fr) 300px; }

  }
}
/* NETWRK on the iPad: 44pt targets, list and inspector side by side. */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .nw { padding: 18px 22px 40px; }
  html.tp-ipad.tp-desk2 .nw-tb-ipad { margin: 0 0 16px; }
  html.tp-ipad.tp-desk2 .nw-tb .d2-seg button { height: 44px; padding: 0 16px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-tb .d2-seg button.is-later { display: inline-flex; align-items: center; }
  html.tp-ipad.tp-desk2 .nw-btn, html.tp-ipad.tp-desk2 .nw-pop, html.tp-ipad.tp-desk2 .nw-search, html.tp-ipad.tp-desk2 .nw-tenant { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-btn.nw-icon { width: 44px; }
  html.tp-ipad.tp-desk2 .nw-tr { min-height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-frow, html.tp-ipad.tp-desk2 .nw-mrow { min-height: 56px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-cols { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .nw-split { grid-template-columns: minmax(0, 1fr) 320px; }
  html.tp-ipad.tp-desk2 .nw-mp { height: 34px; padding: 0 12px 0 10px; border-radius: 17px; }
}

/* ---- NETWRK N2 (migration 0152): Inbound, Outbound, People, Patterns, All businesses,
   the business switcher, Add a business, the hours editor, names, export. Same type
   scale and controls as the rest of desk2. */
@media (min-width: 769px) {
  html.tp-desk2 .nw-tb { min-width: 0; }
  /* Nine tabs and the switcher: the slot may shrink (the tabs then scroll), tighter tabs, and the
     switcher keeps only its badge on narrower windows. */
  html.tp-desk2 #d2-topbar:has(.nw-tb) .d2-tbslot { flex: 0 1 auto; }
  html.tp-desk2 .d2-tbslot .nw-tb .d2-seg button { padding: 0 10px; }
  /* Up to 1700px wide the toolbar has no room for nine tabs: netwrk.js puts them at the top of
     the page (like the iPad) and the toolbar keeps the business switcher. */
  html.tp-desk2 .nw-tb-page { margin: 0 0 16px; }
  html.tp-desk2 .nw-tb-page .d2-seg button.is-later { display: inline-flex; align-items: center; }
  html.tp-desk2 .nw-tb .d2-seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  html.tp-desk2 .nw-tb .d2-seg::-webkit-scrollbar { display: none; }
  html.tp-desk2 .nw-fbar { margin-bottom: 18px; }
  html.tp-desk2 .nw-date { width: 136px; }
  html.tp-desk2 .nw-small { font-size: var(--d2-t-12); margin-left: 6px; }
  html.tp-desk2 .nw-pad0 { margin: 8px 16px 12px; }
  html.tp-desk2 .is-green { color: var(--d2-green); }
  /* KPI tiles: two rows of four */
  html.tp-desk2 .nw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
  html.tp-desk2 .nw-kpi { background: var(--d2-card); border-radius: 12px; box-shadow: var(--d2-edge); padding: 12px 14px; min-width: 0; }
  html.tp-desk2 .nw-kpi b { display: block; font: 700 var(--d2-t-26)/1.15 var(--d2-font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .nw-kpi span { display: block; color: #4b4b46; font-size: var(--d2-t-12); margin-top: 2px; }
  html.tp-desk2 .nw-kpi em { display: block; font-style: normal; color: var(--d2-mute); font-size: var(--d2-t-11); margin-top: 1px; }
  html.tp-desk2 .nw-cols-even { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
  html.tp-desk2 .nw-cols-half { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  /* tables */
  /* Each table is its own size container: optional columns (nw-o1..3, see table() in
     netwrk.js) fold to zero width as the table narrows, so it always fits its card. */
  html.tp-desk2 .nw-t2 { overflow-x: auto; padding-bottom: 4px; container-type: inline-size; }
  @container (max-width: 1039px) { html.tp-desk2 .nw-t2r { --nw-o1: 0; } html.tp-desk2 .nw-t2r > .nw-o1 { visibility: hidden; } }
  @container (max-width: 759px) { html.tp-desk2 .nw-t2r { --nw-o2: 0; } html.tp-desk2 .nw-t2r > .nw-o2 { visibility: hidden; } }
  @container (max-width: 599px) { html.tp-desk2 .nw-t2r { --nw-o3: 0; } html.tp-desk2 .nw-t2r > .nw-o3 { visibility: hidden; } }
  html.tp-desk2 .nw-t2r { display: grid; gap: 8px; align-items: center; padding: 0 16px; min-height: 36px; border-top: 1px solid var(--d2-line2); min-width: 0; }
  html.tp-desk2 .nw-t2r > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-t2h { min-height: 30px; border-top: 0; color: var(--d2-mute); font: 500 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .nw-t2r.nw-click { cursor: pointer; }
  html.tp-desk2 .nw-t2r.nw-click:hover { background: #FAFAF6; }
  html.tp-desk2 .nw-t2r.is-sel { background: #FFF4C2; }
  html.tp-desk2 .nw-t2r b { font-weight: 600; }
  html.tp-desk2 .nw-rate { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: var(--d2-line2); overflow: hidden; vertical-align: middle; margin-right: 8px; }
  html.tp-desk2 .nw-rate i { display: block; height: 100%; border-radius: 3px; background: var(--d2-green); }
  html.tp-desk2 .nw-rate i.is-mid { background: var(--d2-amber); }
  html.tp-desk2 .nw-rate i.is-bad { background: var(--d2-red); }
  html.tp-desk2 .nw-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-split-in { margin-top: 0; }
  /* routes */
  html.tp-desk2 .nw-routes { padding-bottom: 8px; }
  html.tp-desk2 .nw-route { padding: 6px 16px 4px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-card-h + .nw-route { border-top: 0; }
  html.tp-desk2 .nw-route-h { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
  html.tp-desk2 .nw-route-b { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 40px; gap: 10px; align-items: center; padding: 3px 0; }
  html.tp-desk2 .nw-route-b b { text-align: right; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-route .nw-foot { margin: 6px 0 6px; }
  html.tp-desk2 .nw-tag-inf { background: #EEE8FB; color: #5B3FA8; }
  html.tp-desk2 .nw-honest { display: flex; gap: 12px; padding: 14px 16px; }
  html.tp-desk2 .nw-honest p { margin: 3px 0 0; color: #4b4b46; }
  html.tp-desk2 .nw-labelform { display: inline-flex; gap: 6px; align-items: center; }
  html.tp-desk2 .nw-labelform input, html.tp-desk2 .nw-name-r input, html.tp-desk2 .nw-form input { height: var(--d2-btn-h); border: 0; border-radius: var(--d2-radius); background: #F1F1EB; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); padding: 0 10px; outline: none; min-width: 0; }
  html.tp-desk2 .nw-labelform input { width: 170px; }
  /* charts */
  html.tp-desk2 .nw-line { stroke: #111; stroke-width: 2; }
  html.tp-desk2 .nw-pt { fill: #111; }
  html.tp-desk2 .nw-pt-bad { fill: var(--d2-red); }
  html.tp-desk2 .nw-axis-bad { fill: var(--d2-red); font-weight: 700; }
  html.tp-desk2 .nw-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 6px 16px 14px; }
  html.tp-desk2 .nw-month { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
  html.tp-desk2 .nw-month-track { display: flex; align-items: flex-end; width: 100%; max-width: 30px; height: 96px; border-radius: 4px; background: var(--d2-line2); overflow: hidden; }
  html.tp-desk2 .nw-month-track i { display: block; width: 100%; background: #111; border-radius: 4px; }
  html.tp-desk2 .nw-month-track i.is-y { background: var(--d2-y); }
  html.tp-desk2 .nw-month b { font: 700 var(--d2-t-11) var(--d2-font); font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw-month > span:last-child { color: var(--d2-mute); font-size: var(--d2-t-11); }
  /* heatmap */
  html.tp-desk2 .nw-heat { display: grid; gap: 4px; align-items: center; }
  html.tp-desk2 .nw-heat-h { text-align: center; color: var(--d2-mute); font-size: var(--d2-t-11); }
  html.tp-desk2 .nw-heat-d { color: #4b4b46; font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-hm { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 6px; font: 600 var(--d2-t-11) var(--d2-font); font-variant-numeric: tabular-nums; color: #3a3a36; min-width: 0; overflow: hidden; }
  html.tp-desk2 .nw-hm-e { background: #F4F4EF; }
  html.tp-desk2 .nw-hm-x { background: #ECECE5; color: #8b8b84; }
  html.tp-desk2 .nw-hm-0 { background: #DDF1E3; color: #17643A; }
  html.tp-desk2 .nw-hm-1 { background: #FCEFC9; color: #7A5A00; }
  html.tp-desk2 .nw-hm-2 { background: #F8D2B4; color: #8A3E0B; }
  html.tp-desk2 .nw-hm-3 { background: #F2A39C; color: #7D1710; }
  html.tp-desk2 .nw-heat-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-heat-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
  /* All businesses */
  html.tp-desk2 .nw-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font: 600 var(--d2-t-12) var(--d2-font); }
  html.tp-desk2 .nw-pill.is-green { background: #DDF1E3; color: #17643A; }
  html.tp-desk2 .nw-pill.is-grey { background: var(--d2-soft); color: #5d5d57; }
  html.tp-desk2 .nw-pill.is-amber { background: #FCEFC9; color: #7A5A00; }
  html.tp-desk2 .nw-pill.is-red { background: #FCE2DF; color: #9C2219; }
  html.tp-desk2 .nw-tbadge.is-off { background: var(--d2-soft); color: #6d6d67; }
  html.tp-desk2 .nw-tbadge.is-all { background: transparent; color: var(--d2-ink); }
  html.tp-desk2 .nw-bizname { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
  html.tp-desk2 .nw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 16px; }
  html.tp-desk2 .nw-steps div { display: flex; gap: 10px; }
  html.tp-desk2 .nw-steps i { flex: none; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font: 700 var(--d2-t-12) var(--d2-font); font-style: normal; align-items: center; justify-content: center; }
  html.tp-desk2 .nw-steps p { margin: 1px 0 0; color: #4b4b46; }
  /* switcher */
  html.tp-desk2 .nw-switch { border: 0; cursor: pointer; max-width: 240px; }
  html.tp-desk2 .nw-switch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .nw-sw { min-width: 290px; max-height: 70vh; overflow-y: auto; }
  html.tp-desk2 .nw-sw-h { padding: 8px 10px 4px; color: var(--d2-mute); font: 600 var(--d2-t-11) var(--d2-font); }
  html.tp-desk2 .nw-pop-menu .nw-sw-row { gap: 9px; }
  html.tp-desk2 .nw-pop-menu .nw-sw-row.is-on { background: #FFF4C2; }
  html.tp-desk2 .nw-sw-sep { display: block; height: 1px; margin: 5px 6px; background: var(--d2-line); }
  /* forms, sheet, hours */
  html.tp-desk2 .nw-sheet-bg { position: fixed; inset: 0; z-index: 900; background: rgba(20, 20, 18, .28); }
  html.tp-desk2 .nw-sheet { position: fixed; z-index: 901; top: 8vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto; background: var(--d2-card); border-radius: 14px; box-shadow: var(--d2-shadow); }
  html.tp-desk2 .nw-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
  html.tp-desk2 .nw-sheet-h h3 { margin: 0; font: 700 var(--d2-t-17) var(--d2-font); }
  html.tp-desk2 .nw-sheet-f { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-sheet-f.nw-inline { border-top: 0; padding-top: 6px; }
  html.tp-desk2 .nw-form { display: flex; flex-direction: column; gap: 10px; padding: 6px 16px 10px; }
  html.tp-desk2 .nw-form label, html.tp-desk2 .nw-formrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; }
  html.tp-desk2 .nw-form label > span, html.tp-desk2 .nw-formrow > span:first-child { color: #4b4b46; }
  html.tp-desk2 .nw-formrow.nw-formcol { display: block; }
  html.tp-desk2 .nw-formcol > span:first-child { display: block; margin-bottom: 6px; }
  html.tp-desk2 .nw-form label.nw-check { display: inline-flex; grid-template-columns: none; }
  html.tp-desk2 .nw-formcol .nw-week { padding: 0; }
  html.tp-desk2 .nw-formrow .d2-seg { margin: 0; justify-self: start; }
  html.tp-desk2 .nw-week { display: flex; flex-direction: column; gap: 4px; padding: 4px 16px 0; }
  html.tp-desk2 .nw-week-r { display: grid; grid-template-columns: 130px 112px 20px 112px; gap: 8px; align-items: center; min-height: 32px; }
  html.tp-desk2 .nw-week-r.is-closed > .nw-mute { grid-column: 2 / span 3; }
  html.tp-desk2 .nw-week-r .nw-pop { width: 112px; }
  html.tp-desk2 .nw-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  html.tp-desk2 .nw-check input { width: 16px; height: 16px; accent-color: #111; }
  html.tp-desk2 .nw-name-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr) auto; gap: 8px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-card-h + .nw-name-r { border-top: 0; }
  html.tp-desk2 .nw-names { padding-bottom: 6px; }
  @media (max-width: 1180px) {
    html.tp-desk2 .nw-cols-even, html.tp-desk2 .nw-cols-half { grid-template-columns: minmax(0, 1fr); }
    html.tp-desk2 .nw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.tp-desk2 .nw-steps { grid-template-columns: minmax(0, 1fr); }
  }
}
/* N2 on the iPad: 44pt controls, tabs scroll sideways, one column. */
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .nw-tb-ipad { flex-wrap: wrap; }
  html.tp-ipad.tp-desk2 .nw-tb-ipad .d2-seg { max-width: 100%; }
  html.tp-ipad.tp-desk2 .nw-tb .d2-seg button { padding: 0 13px; }
  html.tp-ipad.tp-desk2 .nw-t2r { min-height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-cols-even, html.tp-ipad.tp-desk2 .nw-cols-half { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .nw-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.tp-ipad.tp-desk2 .nw-date, html.tp-ipad.tp-desk2 .nw-week-r .nw-pop, html.tp-ipad.tp-desk2 .nw-form input, html.tp-ipad.tp-desk2 .nw-name-r input { height: 44px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-pop-menu button { min-height: 44px; }
  html.tp-ipad.tp-desk2 .nw-hm { height: 38px; }
  html.tp-ipad.tp-desk2 .nw-split-in { grid-template-columns: minmax(0, 1fr); }
  html.tp-ipad.tp-desk2 .nw-split-in .nw-insp { display: none; }
}

/* ---- NETWRK N3 (migration 0153): listening, transcripts and voicemail (mocks.html
   "listen" frames). Components are in styles.css (.nw .nw-pl, .nw-tx, ...). */
@media (min-width: 769px) {
  /* the shared components (the iPhone's copy is in styles.css) */
  html.tp-desk2 .nw .nw-tt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: var(--d2-t-12); font-weight: 600; white-space: nowrap; background: #EEEEE8; color: #55554F; }
  html.tp-desk2 .nw .nw-tt.is-conv { background: #E6EEFB; color: #2B5BB0; }
  html.tp-desk2 .nw .nw-tt.is-vm { background: #EFE7FB; color: #6A3FB5; }
  html.tp-desk2 .nw .nw-tt.is-menu { background: #EEEEE8; color: #5D5D57; }
  html.tp-desk2 .nw .nw-tt.is-pend { background: #FFF6D6; color: #7A5D00; font-weight: 500; }
  html.tp-desk2 .nw .nw-tt.is-none { background: transparent; color: #9A9A93; font-weight: 500; padding: 0; }
  html.tp-desk2 .nw .nw-mp { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border: 0; border-radius: 12px; background: #EFEFE9; color: #1A1A18; font-size: var(--d2-t-12); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
  html.tp-desk2 .nw .nw-mp:hover { background: #E4E4DD; }
  html.tp-desk2 .nw .nw-mp.is-new { background: #F5C500; }
  html.tp-desk2 .nw .nw-mp.is-new:hover { background: #EBBC00; }
  html.tp-desk2 .nw .nw-mp.is-on { background: #111; color: #fff; }
  html.tp-desk2 .nw .nw-mp.is-off { background: transparent; color: #A8A8A1; cursor: default; padding: 0 4px; }
  html.tp-desk2 .nw .nw-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; }
  html.tp-desk2 .nw .nw-op { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: var(--d2-t-12); font-weight: 600; background: #EEEEE8; color: #55554F; }
  html.tp-desk2 .nw .nw-op.is-green { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .nw .nw-op.is-red { background: #FCE9E7; color: #B4271D; }
  html.tp-desk2 .nw .nw-op.is-amber { background: #FDF0DA; color: #8A5A00; }
  html.tp-desk2 .nw .nw-op.is-blue { background: #E6EEFB; color: #2B5BB0; }
  html.tp-desk2 .nw .nw-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--d2-t-12); font-weight: 600; white-space: nowrap; background: #FCE9E7; color: #B4271D; }
  html.tp-desk2 .nw .nw-chip.is-tried { background: #FFF4C2; color: #7A5D00; }
  html.tp-desk2 .nw .nw-chip.is-called, html.tp-desk2 .nw .nw-chip.is-not_needed { background: #E4F5EA; color: #17753A; }
  html.tp-desk2 .nw .nw-sum { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFFBEA; }
  html.tp-desk2 .nw .nw-sum p { margin: 0; color: #2B2B28; }
  html.tp-desk2 .nw .nw-sum-ic { flex: none; display: inline-flex; width: 20px; height: 20px; border-radius: 6px; background: #F5C500; align-items: center; justify-content: center; }
  html.tp-desk2 .nw .nw-sum-ic svg { width: 13px; height: 13px; }
  html.tp-desk2 .nw .nw-pl { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 10px; border-radius: 12px; background: #F4F4EF; }
  html.tp-desk2 .nw .nw-pl-b { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  html.tp-desk2 .nw .nw-pl.is-loading .nw-pl-b { opacity: .55; }
  html.tp-desk2 .nw .nw-pl-m { flex: 1 1 auto; min-width: 0; }
  html.tp-desk2 .nw .nw-pl-track { position: relative; height: 28px; cursor: pointer; outline-offset: 2px; }
  html.tp-desk2 .nw .nw-wv { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
  html.tp-desk2 .nw .nw-wv i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: #C9C9C1; }
  html.tp-desk2 .nw .nw-wv i.is-flat { height: 3px; background: #D6D6CF; }
  html.tp-desk2 .nw .nw-wv i.is-p { background: #111; }
  html.tp-desk2 .nw .nw-pl-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
  html.tp-desk2 .nw .nw-pl-prog { display: block; height: 2px; width: 0; background: #F5C500; }
  html.tp-desk2 .nw .nw-pl-t { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: var(--d2-t-11); color: #73736D; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw .nw-pl-t .is-red { color: #B4271D; }
  html.tp-desk2 .nw .nw-pl-s { flex: none; height: 26px; min-width: 38px; border: 0; border-radius: 13px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14); font-size: var(--d2-t-12); font-weight: 600; cursor: pointer; }
  html.tp-desk2 .nw .nw-pl.is-big { padding: 12px; }
  html.tp-desk2 .nw .nw-pl.is-big .nw-pl-b { width: 48px; height: 48px; }
  html.tp-desk2 .nw .nw-pl.is-big .nw-pl-track { height: 38px; }
  html.tp-desk2 .nw .nw-tx { display: flex; flex-direction: column; gap: 1px; max-height: 340px; overflow: auto; margin: 0 -6px; position: relative; }
  html.tp-desk2 .nw .nw-tx.is-compact { max-height: 220px; }
  html.tp-desk2 .nw .nw-txl { display: grid; grid-template-columns: 38px 52px minmax(0, 1fr); gap: 6px; align-items: baseline; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
  html.tp-desk2 .nw .nw-txl:hover { background: #F6F6F1; }
  html.tp-desk2 .nw .nw-txl.is-cur { background: #FFF4C2; }
  html.tp-desk2 .nw .nw-ts { font-size: var(--d2-t-12); color: #8A8A83; font-variant-numeric: tabular-nums; }
  html.tp-desk2 .nw .nw-sp { font-size: var(--d2-t-12); font-weight: 600; color: #8A8A83; }
  html.tp-desk2 .nw .nw-sp.is-caller { color: #2B5BB0; }
  html.tp-desk2 .nw .nw-sp.is-team { color: #17753A; }
  html.tp-desk2 .nw .nw-sp.is-menu { color: #8A8A83; font-weight: 500; }
  html.tp-desk2 .nw .nw-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
  html.tp-desk2 .nw .nw-txnote { margin: 10px 0 0; }
  html.tp-desk2 .nw .nw-txfoot { display: flex; gap: 6px; align-items: flex-start; }
  html.tp-desk2 .nw .nw-txfoot svg { flex: none; margin-top: 1px; width: 13px; height: 13px; }
  html.tp-desk2 .nw .nw-jline { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; font-size: var(--d2-t-12); color: #73736D; }
  html.tp-desk2 .nw .nw-jline svg { flex: none; width: 14px; height: 14px; }
  html.tp-desk2 .nw .nw-ficon.is-vm { background: #EFE7FB; color: #6A3FB5; }
  html.tp-desk2 .nw .nw-unh { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #F5C500; box-shadow: 0 0 0 2px #FFF4C2; }
  html.tp-desk2 .nw .nw-unh.is-heard { background: transparent; box-shadow: none; }
  html.tp-desk2 .nw .nw-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
  html.tp-desk2 .nw .nw-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #111; flex: none; }
  html.tp-desk2 .nw .nw-check span { display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .nw .nw-check small { color: #5D5D57; font-size: var(--d2-t-12); }
  html.tp-desk2 .nw .nw-note.is-amber { color: #7A5D00; }
  html.tp-desk2 #nw-root button.nw-pl-b { color: #fff; }
  html.tp-desk2 #nw-root button.nw-mp.is-on { color: #fff; }
  html.tp-desk2 #nw-root button.nw-mp { color: #1A1A18; }
  html.tp-desk2 #nw-root button.nw-mp.is-on { color: #fff; }
  html.tp-desk2 .nw-tcell { min-width: 0; overflow: hidden; }
  html.tp-desk2 .nw-lcell { display: flex; justify-content: flex-end; }
  html.tp-desk2 .nw-tsearch input { width: 150px; }
  html.tp-desk2 .nw-insp.is-listen .nw-tx { max-height: 360px; }
  /* The Calls table folds to fit its pane (N3 added Type and Listen): Menu goes
     first, then Connected, then Time. */
  html.tp-desk2 .nw-split > .nw-main { container-type: inline-size; }
  @container (max-width: 899px) { html.tp-desk2 .nw-oc .nw-tag { display: none; } }
  @container (max-width: 799px) { html.tp-desk2 .nw-tr { grid-template-columns: 80px 62px minmax(80px, 1fr) 116px minmax(120px, 1.4fr) 70px 78px; } html.tp-desk2 .nw-tr > :nth-child(6) { display: none; } }
  @container (max-width: 689px) { html.tp-desk2 .nw-tr { grid-template-columns: 78px 60px minmax(70px, 1fr) 112px minmax(110px, 1.3fr) 78px; } html.tp-desk2 .nw-tr > :nth-child(7) { display: none; } }
  @container (max-width: 569px) { html.tp-desk2 .nw-tr { grid-template-columns: 76px minmax(70px, 1fr) 108px minmax(90px, 1.2fr) 78px; } html.tp-desk2 .nw-tr > :nth-child(2) { display: none; } }
  @container (max-width: 469px) { html.tp-desk2 .nw-tr { grid-template-columns: 64px minmax(56px, 1fr) 104px 74px; padding: 0 10px; gap: 6px; } html.tp-desk2 .nw-tr > :nth-child(5) { display: none; } }
  /* Missed: type, play, and the row that opens in place */
  html.tp-desk2 .nw-mtype { flex: none; }
  html.tp-desk2 .nw-mrow.is-exp { cursor: pointer; }
  html.tp-desk2 .nw-mrow.is-exp:hover { background: #FAFAF6; }
  html.tp-desk2 .nw-mrow.is-open { background: #FFFBEA; }
  html.tp-desk2 .nw-rowx { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr); gap: 18px; padding: 4px 14px 14px 58px; background: #FFFBEA; border-top: 0; }
  html.tp-desk2 .nw-rowx .nw-pl { margin-top: 4px; background: #fff; }
  html.tp-desk2 .nw-rowx .nw-sum { background: #fff; }
  html.tp-desk2 .nw-rowx .nw-tx { margin-top: 4px; }
  /* Voicemail */
  html.tp-desk2 .nw-vsplit { margin-top: 14px; }
  html.tp-desk2 .nw-vlist { overflow: hidden; }
  html.tp-desk2 .nw-vrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--d2-line2); background: none; text-align: left; cursor: pointer; }
  html.tp-desk2 .nw-vrow:first-child { border-top: 0; }
  html.tp-desk2 .nw-vrow:hover { background: #FAFAF6; }
  html.tp-desk2 .nw-vrow.is-sel { background: #FFF4C2; }
  html.tp-desk2 .nw-vmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.tp-desk2 .nw-vh { display: flex; gap: 8px; align-items: baseline; }
  html.tp-desk2 .nw-vh .nw-mute { font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-vsum { color: #3C3C38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tp-desk2 .nw-vinsp .nw-kv b { max-width: 210px; }
  html.tp-desk2 .nw-setseg { margin: 0; }
  /* Setup › Recordings */
  html.tp-desk2 .nw-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 16px 4px; }
  html.tp-desk2 .nw-lane > b { display: block; margin: 0 0 6px; font-weight: 600; }
  html.tp-desk2 .nw-lane ol { list-style: none; margin: 0; padding: 0; counter-reset: lane; }
  html.tp-desk2 .nw-lane li { position: relative; padding: 0 0 10px 26px; counter-increment: lane; display: flex; flex-direction: column; }
  html.tp-desk2 .nw-lane li::before { content: counter(lane); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--d2-y); font-family: var(--d2-font); font-weight: 700; font-size: var(--d2-t-11); line-height: 18px; text-align: center; }
  html.tp-desk2 .nw-lane small { color: var(--d2-mute); font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-how .nw-foot { margin: 6px 16px 14px; }
  html.tp-desk2 .nw-keep .nw-t2r { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--d2-line2); }
  html.tp-desk2 .nw-keep .nw-t2h { border-top: 0; color: var(--d2-mute); font-size: var(--d2-t-12); padding-top: 2px; }
  html.tp-desk2 .nw-notice { padding: 0 16px 14px; }
  html.tp-desk2 .nw-notice .nw-card-h { margin: 0 -16px; }
  html.tp-desk2 .nw-pad0 { margin: 10px 0 0; font-size: var(--d2-t-12); }
  html.tp-desk2 .nw-plog { padding: 0 0 6px; }
  html.tp-desk2 .nw-plr { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; padding: 7px 16px; border-top: 1px solid var(--d2-line2); font-size: var(--d2-t-12); align-items: center; }
  html.tp-desk2 .nw-plr:first-child { border-top: 0; }
  @media (max-width: 1180px) {
    html.tp-desk2 .nw-split:not(.nw-split-in) { grid-template-columns: minmax(0, 1fr) 320px; }
    html.tp-desk2 .nw-rowx { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
  }
}
@media (min-width: 769px) {
  html.tp-ipad.tp-desk2 .nw-vrow { min-height: 60px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-pl-b { width: 44px; height: 44px; }
  html.tp-ipad.tp-desk2 .nw-pl-s { height: 34px; min-width: 46px; }
  html.tp-ipad.tp-desk2 .nw-txl { min-height: 40px; font-size: var(--d2-t-15); }
  html.tp-ipad.tp-desk2 .nw-split:not(.nw-split-in) { grid-template-columns: minmax(0, 1fr) 340px; }
  html.tp-ipad.tp-desk2 .nw-rowx { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
}
@media (min-width: 769px) and (max-width: 1000px) {
  html.tp-ipad.tp-desk2 .nw-lanes { grid-template-columns: 1fr; }
}

/* ---- Notifications page, iPad (1 Oct 2026) ----------------------------------------------
   The iPhone app's Apple-style page (app.js tpInbox) in the split layout's
   Notifications pane: the segmented control and Mark all read / Settings in
   one bar, days on AEST, stacked cards that open, reveal-and-tap swipes, the
   Quiet line. The Mac and desktop keep the D1 page. */
html.tp-ipad.tp-desk2 .d2-notifs.inb-ipad { max-width: 760px; }
html.tp-ipad.tp-desk2 .inb-ipad .inb-ico { width: 20px; height: 20px; flex: none; }
html.tp-ipad.tp-desk2 .inb-ipad-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
html.tp-ipad.tp-desk2 .inb-sp { flex: 1; }
html.tp-ipad.tp-desk2 .inb-ipad .inb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px; background: var(--d2-seg-track); }
html.tp-ipad.tp-desk2 .inb-ipad .inb-seg-opt { min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: none; color: #3b3b37; font: 500 var(--d2-t-15) var(--d2-font); white-space: nowrap; }
html.tp-ipad.tp-desk2 .inb-ipad .inb-seg-opt.is-on { background: #fff; color: var(--d2-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
html.tp-ipad.tp-desk2 .inb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--d2-line); border-radius: 12px; background: #fff; color: var(--d2-ink); font: 500 var(--d2-t-15) var(--d2-font); }
html.tp-ipad.tp-desk2 .inb-btn[disabled] { opacity: .45; }
html.tp-ipad.tp-desk2 .inb-quiet { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 6px 10px 14px; border-radius: 16px; background: #ECEBF8; color: #2C2A6B; }
html.tp-ipad.tp-desk2 .inb-quiet-ico { width: 24px; height: 24px; color: #5856D6; }
html.tp-ipad.tp-desk2 .inb-quiet-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.tp-ipad.tp-desk2 .inb-quiet-t b { font-size: var(--d2-t-15); font-weight: 600; }
html.tp-ipad.tp-desk2 .inb-quiet-t span { font-size: var(--d2-t-13); color: #4B4A7A; }
html.tp-ipad.tp-desk2 .inb-ipad .inb-link { flex: none; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; font: 600 var(--d2-t-15) var(--d2-font); color: inherit; }
html.tp-ipad.tp-desk2 .inb-quiet .inb-link { color: #5856D6; }
html.tp-ipad.tp-desk2 .inb-ro { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: #EDEDE6; font-size: var(--d2-t-13); color: #55554E; }
html.tp-ipad.tp-desk2 .inb-sec { margin-top: 8px; }
html.tp-ipad.tp-desk2 .inb-sec-h { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-left: 4px; }
html.tp-ipad.tp-desk2 .inb-sec-h h2 { margin: 0; font-size: var(--d2-t-20); font-weight: 700; }
html.tp-ipad.tp-desk2 .inb-sec-h .inb-link { color: var(--d2-mute); font-weight: 500; }
html.tp-ipad.tp-desk2 .inb-sw { position: relative; margin: 0 0 8px; border-radius: 20px; overflow: hidden; }
html.tp-ipad.tp-desk2 .inb-acts { position: absolute; top: 0; bottom: 0; display: flex; visibility: hidden; }
html.tp-ipad.tp-desk2 .inb-sw.is-dir-l .inb-acts.is-l,
html.tp-ipad.tp-desk2 .inb-sw.is-dir-r .inb-acts.is-r { visibility: visible; }
html.tp-ipad.tp-desk2 .inb-acts.is-l { left: 0; }
html.tp-ipad.tp-desk2 .inb-acts.is-r { right: 0; }
html.tp-ipad.tp-desk2 .inb-act { width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; padding: 0; color: #fff; font: 600 var(--d2-t-13) var(--d2-font); }
html.tp-ipad.tp-desk2 .inb-act.is-read { background: #2F6FED; }
html.tp-ipad.tp-desk2 .inb-act.is-del { background: #D6362B; }
html.tp-ipad.tp-desk2 .inb-card {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; min-height: 68px; box-sizing: border-box;
  padding: 12px 16px 12px 20px; border-radius: 20px; background: #fff; cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
html.tp-ipad.tp-desk2 .inb-card:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #F5C500, 0 0 0 .5px rgba(0, 0, 0, .06); }   /* inside the card: .inb-sw clips anything outside */
html.tp-ipad.tp-desk2 .inb-card .inb-av { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: var(--d2-t-13); font-weight: 700; }
html.tp-ipad.tp-desk2 .inb-card .inb-app { border-radius: 10px; }
html.tp-ipad.tp-desk2 .inb-app.tier-interrupting { background: #F5C500; color: #111; }
html.tp-ipad.tp-desk2 .inb-app.tier-passive { background: #EDEDE6; color: #4F4F49; }
html.tp-ipad.tp-desk2 .inb-app.tier-silent { background: #F4F4EF; color: #8A8A80; }
html.tp-ipad.tp-desk2 .inb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.tp-ipad.tp-desk2 .inb-top { display: flex; align-items: baseline; gap: 8px; }
html.tp-ipad.tp-desk2 .inb-t { flex: 1 1 auto; min-width: 0; font-size: var(--d2-t-15); line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.tp-ipad.tp-desk2 .inb-card:not(.is-unread) .inb-t { font-weight: 500; }
html.tp-ipad.tp-desk2 .inb-time { flex: none; font-size: var(--d2-t-13); line-height: 20px; color: var(--d2-mute); white-space: nowrap; }
html.tp-ipad.tp-desk2 .inb-b { font-size: var(--d2-t-15); line-height: 20px; color: #3C3C38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html.tp-ipad.tp-desk2 .inb-meta { margin-top: 2px; font-size: var(--d2-t-13); color: var(--d2-mute); }
html.tp-ipad.tp-desk2 .inb-dot { position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #2F6FED; }
html.tp-ipad.tp-desk2 .inb-stack { position: relative; margin: 0 0 8px; }
html.tp-ipad.tp-desk2 .inb-stack:not(.is-open) { margin-bottom: 20px; }
html.tp-ipad.tp-desk2 .inb-stack:not(.is-open) > .inb-sw { margin: 0; z-index: 2; }
html.tp-ipad.tp-desk2 .inb-peek { position: absolute; left: 12px; right: 12px; bottom: -8px; height: 24px; border-radius: 0 0 18px 18px; background: #FBFBF8; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05); z-index: 1; }
html.tp-ipad.tp-desk2 .inb-peek-2 { left: 26px; right: 26px; bottom: -15px; background: #F7F7F3; z-index: 0; }
html.tp-ipad.tp-desk2 .inb-stack-h { display: flex; align-items: center; gap: 6px; min-height: 44px; padding-left: 4px; }
html.tp-ipad.tp-desk2 .inb-stack-name { flex: 1; min-width: 0; font-size: var(--d2-t-17); font-weight: 700; }
html.tp-ipad.tp-desk2 .inb-pill { position: relative; min-height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: rgba(118, 118, 128, .14); color: var(--d2-ink); font: 600 var(--d2-t-13) var(--d2-font); }
html.tp-ipad.tp-desk2 .inb-round { position: relative; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .14); color: #3C3C38; }
html.tp-ipad.tp-desk2 .inb-round .inb-ico { width: 15px; height: 15px; stroke-width: 2.4; }
html.tp-ipad.tp-desk2 .inb-pill::before,
html.tp-ipad.tp-desk2 .inb-round::before { content: ''; position: absolute; inset: -6px; }
html.tp-ipad.tp-desk2 .inb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14vh 24px 40px; }
html.tp-ipad.tp-desk2 .inb-empty-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #EDEDE6; color: #8A8A80; margin-bottom: 14px; }
html.tp-ipad.tp-desk2 .inb-empty-ico .inb-ico { width: 30px; height: 30px; }
html.tp-ipad.tp-desk2 .inb-empty h2 { margin: 0; font-size: var(--d2-t-20); font-weight: 700; }
html.tp-ipad.tp-desk2 .inb-empty p { margin: 6px 0 0; max-width: 320px; font-size: var(--d2-t-15); color: var(--d2-mute); }
html.tp-ipad.tp-desk2 .inb-loading { padding: 14vh 0 0; text-align: center; font-size: var(--d2-t-15); color: var(--d2-mute); }
@media (prefers-reduced-motion: reduce) {
  html.tp-ipad.tp-desk2 .inb-card { transition: none; }
}
@media (prefers-contrast: more) {
  html.tp-ipad.tp-desk2 .inb-card { box-shadow: 0 0 0 1px #111; }
}

/* ============================================================================
   Mac app (M1): html.tp-mac is only ever set inside the Talentport Mac app
   (Mac Catalyst; index.html, from the app's user agent). None of this can
   match a browser, the iPhone app or the iPad app. SHELL_SPEC "macOS app".
   ============================================================================ */

/* Today's desktop in the Mac app: the window keeps its title bar, which sits
   over the top of the page, so the page starts below it (the old sidebar
   already pads itself by the same safe-area inset). */
html.tp-mac:not(.tp-desk2) #app-shell:not(.hidden) { padding-top: env(safe-area-inset-top); }

/* A Mac app without native capture (older than M2) can't capture the screen:
   the shift's capture runs in the browser tab they clocked in from. When the
   portal thinks capture has stopped, the banner says so, without its Share
   screen button (the Mac WebView has no getDisplayMedia). With M2's capture
   (html.tp-mac-capture) the banner keeps its button, which resumes the app's
   own capture. */
html.tp-mac:not(.tp-mac-capture) #compliance-banner > * { display: none !important; }
html.tp-mac:not(.tp-mac-capture) #compliance-banner::before {
  content: "Screen capture runs in the browser tab you clocked in from. Keep that tab open, or re-share your screen there.";
}

@media (min-width: 769px) {
  /* The new shell: no title bar. The page's 52px toolbar is the window's
     toolbar; the traffic lights sit centred in the sidebar's top row. */
  html.tp-mac.tp-desk2 { --d2-top: 52px; }
  html.tp-mac.tp-desk2 #d2-sidebar { background: #F6F6F2; border-right-color: rgba(0, 0, 0, .09); }
  html.tp-mac.tp-desk2 .d2-logo { position: relative; height: auto; flex: 0 0 auto; padding: 52px 22px 10px; }
  html.tp-mac.tp-desk2 .d2-side-toggle { position: absolute; top: 11px; right: 12px; }
  html.tp-mac.tp-desk2 .d2-item:hover { background: rgba(0, 0, 0, .05); }
  html.tp-mac.tp-desk2 .d2-item.is-active { background: rgba(245, 197, 0, .28); }
  html.tp-mac.tp-desk2 .d2-you { border-top-color: rgba(0, 0, 0, .08); }

  html.tp-mac.tp-desk2 #d2-topbar { height: 52px; flex-basis: 52px; padding: 0 16px 0 20px; gap: 10px; }
  /* Sidebar hidden: leave the traffic lights their corner of the toolbar. */
  html.tp-mac.tp-desk2.d2-side-collapsed #d2-topbar { padding-left: 86px; }
  html.tp-mac.tp-desk2 .d2-title-text { line-height: 19px; }
  html.tp-mac.tp-desk2 .d2-sub { font-size: var(--d2-t-11); line-height: 14px; }
  html.tp-mac.tp-desk2 .d2-search { width: 220px; flex-basis: 220px; height: 28px; border-radius: 7px; font-size: var(--d2-t-13); }
  html.tp-mac.tp-desk2 .d2-clock { height: 28px; border-radius: 14px; padding-left: 12px; gap: 7px; font-size: var(--d2-t-12); }
  html.tp-mac.tp-desk2 .d2-cbtn { height: 22px; border-radius: 11px; padding: 0 9px; font-size: var(--d2-t-12); }
  html.tp-mac.tp-desk2 .d2-cbtn:disabled { opacity: .42; }
  html.tp-mac.tp-desk2 .d2-teamnow { height: 28px; }
  html.tp-mac.tp-desk2 .d2-viewas { height: 28px; border-radius: 7px; }
  html.tp-mac.tp-desk2 .d2-iconbtn,
  html.tp-mac.tp-desk2 .d2-bell { width: 30px; height: 30px; border-radius: 7px; }
  html.tp-mac.tp-desk2 .d2-avatar { width: 30px; height: 30px; }
}