/* RAW Hub redesign (Oct 2026), approved on the design canvas (row D/E/F). Only active with <html class="ui2">
   (visit /next to switch it on in a browser, /old to switch it off). Look only: no feature depends on this file. */

/* ---------- tokens ---------- */
:root.ui2, :root.ui2[data-theme="light"] {
  --bg: #F6F6F5; --panel: #FFFFFF; --panel-2: #FAFAF9; --ink: #1A1918; --ink-2: #5F5B56; --ink-3: #8A857F;
  --line: #E4E3E0; --line-2: #EEEDEA; --accent: #8B1E1A; --accent-ink: #FFFFFF; --accent-soft: #F6E9E7;
  --green: #1F6B43; --green-soft: #E8F3EC; --amber: #8A5300; --amber-soft: #FFF4E0; --red: #B42318; --red-soft: #FDECEA;
  --blue: #2A5DB0; --blue-soft: #EAF1FD; --violet: #5B3BA8; --violet-soft: #F5F0FD; --teal: #1D6B5F; --teal-soft: #E3F2EF;
  --raw: #8B1E1A; --raw-dark: #5A1210; --side-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(26,25,24,.05);
  --radius: 12px;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --s2: #F6F6F5; --s3: #F1F0EE; --s4: #F3F2F0; --line-strong: #CFCBC5; --chip-ink: #3A3632; --tile-dark: #1A1918;
  --appr-bg: #FAF7FE; --appr-line: #CDB8F2;
  color-scheme: light;
}
/* dark (Settings → Appearance, or the system setting) */
:root.ui2[data-theme="dark"] {
  --bg: #121110; --panel: #1C1B1A; --panel-2: #222120; --ink: #F2F0EA; --ink-2: #B9B5AD; --ink-3: #85817A;
  --line: #312F2C; --line-2: #292725; --accent: #E87A6B; --accent-soft: #3A1A17;
  --green: #5CC98A; --green-soft: #15301F; --amber: #E8AE4C; --amber-soft: #33270F; --red: #F2776B; --red-soft: #3B1B17;
  --blue: #8DB2F2; --blue-soft: #18243A; --violet: #B9A2F2; --violet-soft: #251D38; --teal: #6ACFBE; --teal-soft: #11302B;
  --raw-dark: #4A0F0D; --s2: #242220; --s3: #2B2927; --s4: #181716; --line-strong: #4A4642; --chip-ink: #DAD6CF; --tile-dark: #0B0A0A;
  --appr-bg: #201A2E; --appr-line: #4E3D78; --shadow: 0 1px 2px rgba(0,0,0,.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root.ui2:not([data-theme="light"]) {
    --bg: #121110; --panel: #1C1B1A; --panel-2: #222120; --ink: #F2F0EA; --ink-2: #B9B5AD; --ink-3: #85817A;
    --line: #312F2C; --line-2: #292725; --accent: #E87A6B; --accent-soft: #3A1A17;
    --green: #5CC98A; --green-soft: #15301F; --amber: #E8AE4C; --amber-soft: #33270F; --red: #F2776B; --red-soft: #3B1B17;
    --blue: #8DB2F2; --blue-soft: #18243A; --violet: #B9A2F2; --violet-soft: #251D38; --teal: #6ACFBE; --teal-soft: #11302B;
    --raw-dark: #4A0F0D; --s2: #242220; --s3: #2B2927; --s4: #181716; --line-strong: #4A4642; --chip-ink: #DAD6CF; --tile-dark: #0B0A0A;
    --appr-bg: #201A2E; --appr-line: #4E3D78; --shadow: 0 1px 2px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
.ui2 body { font-size: 14px; }
.ui2 .shell[class*="theme-"] { --g-btn: var(--raw); --g: var(--raw); --g-soft: var(--accent-soft); }

/* ---------- sidebar (dark RAW red, group label pills, coloured icon tiles) ---------- */
.ui2 .side { background: var(--raw-dark); color: #F3E3DF; border-right: 0; padding: 18px 10px; gap: 6px; }
.ui2 .brand { padding: 4px 6px 12px; gap: 12px; }
.ui2 .brand .logo-box { background: #FFFFFF; border-radius: 10px; padding: 8px 11px; display: inline-flex; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.ui2 .brand .logo { height: 24px; filter: none !important; }
.ui2 .brand .brand-t { font: 800 24px/1 var(--font); letter-spacing: -.02em; color: #FFFFFF; }
.ui2 .side-tog { color: #E7C3BD; } .ui2 .side-tog:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.ui2 .nav-jump { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); color: #F3E3DF; }
.ui2 .nav-jump:hover { color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.ui2 .nav-jump kbd { border-color: rgba(255,255,255,.25); color: #E7C3BD; }
.ui2 .side .nav-scroll { gap: 1px; }
.ui2 .g-top { --gc: #F3E3DF; } .ui2 .g-you { --gc: #F6C177; } .ui2 .g-work { --gc: #9EC5F8; }
.ui2 .g-growth { --gc: #8FD9AE; } .ui2 .g-numbers { --gc: #F7A8B8; } .ui2 .g-system { --gc: #D9A9A2; }
.ui2 .nav-item { color: var(--side-ink); font-weight: 600; font-size: 13.5px; padding: 6px 8px; gap: 10px; border-radius: 10px; }
.ui2 .nav-item svg { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--gc, #F3E3DF); color: #3A0B09 !important; flex: none; }
.ui2 .nav-scroll > .nav-item svg { background: #F3E3DF; }
.ui2 .nav-item:hover { background: rgba(255,255,255,.16); color: #FFFFFF; }
.ui2 .nav-item.active, .ui2 .nav-group .nav-item.active { background: #FFFFFF; color: var(--raw-dark); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.30); }
.ui2 .nav-item.active svg { background: var(--raw); color: #FFFFFF !important; }
.ui2 .nav-item .count { background: rgba(255,255,255,.18); color: #FFFFFF; border-radius: 8px; font-size: 12px; padding: 0 7px; }
.ui2 .nav-item.active .count { background: var(--raw); }
.ui2 .nav-group { margin-top: 8px; }
.ui2 .nav-group > summary { padding: 0 0 4px 6px; color: #3A0B09; letter-spacing: .04em; font-weight: 800; }
.ui2 .nav-group > summary .gdot { display: none; }
.ui2 .nav-group > summary .gl { background: var(--gc); color: #3A0B09; border-radius: 6px; padding: 2px 8px; font-size: 11px; }
.ui2 .nav-group:not(.g-system) > summary { pointer-events: none; }
.ui2 .nav-group:not(.g-system) > summary .chev { display: none; }
.ui2 .nav-group.g-system > summary .chev { color: #F3E3DF; }
.ui2 .side .me { color: #E7C3BD; } .ui2 .side .me a { color: #FFFFFF; }
.ui2 .shell.side-closed .nav-group > summary .gl { padding: 2px 4px; font-size: 0; width: 18px; height: 6px; }

/* ---------- page ---------- */
.ui2 main { padding: 20px 28px 60px; max-width: 1300px; }
.ui2 .page-head { margin-bottom: 14px; }
.ui2 .page-head h1, .ui2 .hero h1 { font: 800 26px/1.15 var(--font); letter-spacing: -.02em; }
.ui2 .page-head .sub { color: var(--ink-2); font-size: 13px; }
.ui2 .grid { gap: 12px; }

/* panels */
.ui2 .card, .ui2 .stat, .ui2 .client-card { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ui2 .card-h { padding: 12px 16px 8px; }
.ui2 .card-h h2 { font: 700 15px/1.25 var(--font); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ui2 .card-h .n { background: var(--s3); color: var(--ink-2); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.ui2 details.fold2[open] > summary.card-h { border-bottom-color: var(--line-2); }
.ui2 details.fold2.fold-hl { border: 1.5px solid var(--raw); background: var(--panel); }
.ui2 .stat .k { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.ui2 .stat .v { font: 800 26px/1.1 var(--font); }

/* buttons, inputs, tabs */
.ui2 .btn { border-radius: 9px; font-weight: 600; border-color: var(--line); }
.ui2 .btn:hover { border-color: var(--line-strong); }
.ui2 .btn.primary, .ui2 .btn.accent { background: var(--raw); border-color: var(--raw); color: #FFFFFF; font-weight: 700; }
.ui2 .btn.primary:hover, .ui2 .btn.accent:hover { background: #761814; }
.ui2 .btn.ghost { background: transparent; border-color: transparent; }
.ui2 .btn.ghost:hover { background: var(--s3); }
.ui2 .input, .ui2 select.input, .ui2 textarea.input { border-radius: 9px; background: var(--panel); }
.ui2 .input:focus { border-color: var(--raw); box-shadow: 0 0 0 3px rgba(139,30,26,.12); }
.ui2 label.f { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
.ui2 .seg { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.ui2 .seg button { border-radius: 7px; color: var(--ink); }
.ui2 .seg button.on { background: var(--raw-dark); color: #FFFFFF; box-shadow: none; font-weight: 700; }
.ui2 .qf-b { border-color: var(--line); background: var(--panel); color: var(--ink); }
.ui2 .qf-b b { background: var(--s3); border-radius: 6px; padding: 0 6px; font-size: 12px; }
.ui2 .qf-b.high:not(.on) b, .ui2 .qf-b.overdue:not(.on) b { background: var(--red-soft); color: var(--red); }
.ui2 .qf-b.today:not(.on) b { background: var(--amber-soft); color: var(--amber); }
.ui2 .qf-b.waiting:not(.on) b { background: var(--teal-soft); color: var(--teal); }
.ui2 .qf-b.review:not(.on) b { background: var(--violet-soft); color: var(--violet); }
.ui2 .qf-b.on { background: var(--raw); border-color: var(--raw); color: #FFFFFF; } .ui2 .qf-b.on b { background: rgba(255,255,255,.2); color: #FFFFFF; }

/* chips and statuses: square-ish, coloured */
.ui2 .chip, .ui2 .vchip, .ui2 .dchip, .ui2 .status { border-radius: 6px; font-weight: 600; }
.ui2 .chip { background: var(--s3); color: var(--chip-ink); }
.ui2 .chip.late, .ui2 .chip.p1 { background: var(--red-soft); color: var(--red); }
.ui2 .chip.today, .ui2 .chip.p2 { background: var(--amber-soft); color: var(--amber); }
.ui2 .chip.client::before { width: 7px; height: 7px; }
.ui2 .s-Waiting-on-client { background: var(--teal-soft); color: var(--teal); }
.ui2 .vchip.good, .ui2 .dchip.good { background: var(--green-soft); color: var(--green); }
.ui2 .vchip.bad, .ui2 .dchip.bad { background: var(--red-soft); color: var(--red); }
.ui2 .up { color: var(--green); } .ui2 .down { color: var(--red); }

/* task rows → cards */
.ui2 .task { border-radius: 10px; }
.ui2 .task:hover { background: var(--s2); }
.ui2 .task .t { font-weight: 600; }
.ui2 .check { border: 1.5px solid #A8A29B; }
.ui2 .check.done { background: var(--green); border-color: var(--green); }
.ui2 .board { gap: 10px; }
.ui2 .col { background: var(--s4); border: 0; border-radius: 12px; }
.ui2 .col h3 { padding: 10px 12px 6px; align-items: center; }
.ui2 .col .task { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 8px; padding: 10px 10px; }
.ui2 .col .task:hover { border-color: var(--line-strong); background: var(--panel); }
.ui2 .col.over { outline-color: var(--raw); }

/* tables */
.ui2 table.t th { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
.ui2 table.t td { font-size: 14px; }

/* banners */
.ui2 .banner { border-radius: 12px; }

/* clients */
.ui2 .client-card { border-left: 0; border-top: 5px solid var(--h, var(--line)); }
.ui2 .client-card .nm { font-weight: 800; font-size: 18px; }

/* sheets */
.ui2 .sheet { background: var(--bg); }
.ui2 .sheet h2 { font: 800 20px var(--font); }
.ui2 #toast div { background: var(--ink); border-radius: 10px; }
.ui2 .spinner { border-top-color: var(--raw); }

/* ---------- phone ---------- */
.ui2 .mtop { display: none; }
@media (max-width: 900px) {
  .ui2 .mtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--raw-dark); color: #FFFFFF;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 6px; }
  .ui2 .mt-brand { display: flex; align-items: center; gap: 8px; color: #FFFFFF; text-decoration: none; font-weight: 800; font-size: 16px; margin-right: auto; }
  .ui2 .mt-brand .logo-box { background: #FFFFFF; border-radius: 7px; padding: 5px 7px; display: inline-flex; }
  .ui2 .mt-brand img { height: 15px; width: auto; display: block; }
  .ui2 .mt-inbox { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: #FFFFFF; }
  .ui2 .mt-inbox svg { width: 20px; height: 20px; }
  .ui2 .mt-inbox .dot { position: absolute; top: 5px; right: 3px; background: #FFFFFF; color: var(--raw-dark); border-radius: 7px; font-size: 10px; font-weight: 800; padding: 0 5px; }
  .ui2 .mt-me { display: grid; place-items: center; width: 40px; height: 40px; text-decoration: none; }
  .ui2 .mt-me .avatar { width: 28px; height: 28px; background: #FFFFFF !important; color: var(--raw-dark); }
  .ui2 main { padding: 0 12px calc(96px + var(--safe-b)); }
  /* the page title sits in the red bar */
  .ui2 .page-head, .ui2 .hero { background: var(--raw-dark); color: #FFFFFF; margin: 0 -12px 12px; padding: 4px 16px 14px; align-items: flex-end; }
  .ui2 .page-head h1, .ui2 .hero h1 { color: #FFFFFF; font-size: 22px; }
  .ui2 .page-head .sub, .ui2 .hero .sub { color: #E7C3BD; }
  .ui2 .page-head .sub a, .ui2 .hero .sub a { color: #FFFFFF; }
  .ui2 .page-head .backbtn { color: #FFFFFF; }
  .ui2 .page-head .actions .btn { background: #FFFFFF; color: var(--raw); border-color: #FFFFFF; }
  .ui2 .page-head .actions .btn.ghost { background: rgba(255,255,255,.12); color: #FFFFFF; border-color: transparent; }
  .ui2 .tabbar { background: var(--panel); backdrop-filter: none; border-top: 1px solid var(--line); padding: 4px 4px calc(10px + var(--safe-b)); }
  .ui2 .tabbar a { color: var(--ink-2); gap: 2px; font-size: 11px; }
  .ui2 .tabbar .tb-ic { display: grid; padding: 3px 14px; border-radius: 10px; }
  .ui2 .tabbar a.active { color: var(--raw); font-weight: 700; }
  .ui2 .tabbar a.active .tb-ic { background: var(--accent-soft); }
  .ui2 .tabbar .dot { background: var(--raw); }
  .ui2 .fab { background: var(--raw); box-shadow: 0 6px 20px rgba(139,30,26,.35); }
  .ui2 .qnav { display: none; }
}

/* phone menu (#/more): three equal tiles per row, group by group */
.ui2 .mmenu { background: var(--raw-dark); border-radius: 14px; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ui2 .mm-g { display: flex; flex-direction: column; gap: 6px; }
.ui2 .mm-h { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ui2 .mm-h .pill { background: var(--gc); color: #3A0B09; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ui2 .mm-h i { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.ui2 .mm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 700px) { .ui2 .mm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ui2 .mtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; padding: 8px 4px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; color: #FFFFFF; text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.ui2 .mtile:active { transform: scale(.97); }
.ui2 .mt-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--gc, #F3E3DF); color: #3A0B09; display: grid; place-items: center; }
.ui2 .mt-ic svg { width: 17px; height: 17px; }
.ui2 .mtile .dot { position: absolute; top: 6px; right: 6px; background: #FFFFFF; color: var(--raw); border-radius: 7px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.ui2 .mm-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); color: #FFFFFF; }
.ui2 .mm-foot > .row { margin-right: auto; }
.ui2 .mm-foot .btn { background: rgba(255,255,255,.10); border-color: transparent; color: #FFFFFF; }
@media (max-width: 900px) { .ui2 .mmenu { margin: 0 -12px; border-radius: 0; min-height: calc(100vh - 140px); } }

/* ---------- round 2 fixes ---------- */
.ui2 .shell main::before { display: none; }
.ui2 .col { min-height: 0; }
.ui2 .col .drop { padding: 2px 6px 6px; }
.ui2 .top-item { border-left: 1px solid var(--line); background: var(--panel); }
.ui2 .top-item:hover { border-color: var(--line-strong); }
/* the menu fits a laptop screen: tighter rows */
.ui2 .side { padding: 14px 10px 10px; }
.ui2 .brand { padding-bottom: 8px; }
.ui2 .nav-jump { margin-bottom: 6px; padding: 7px 10px; }
.ui2 .nav-item { padding: 4px 8px; }
.ui2 .nav-item svg { width: 24px; height: 24px; padding: 4.5px; }
.ui2 .nav-group { margin-top: 5px; }
.ui2 .side .me { padding: 6px 8px 0; }
@media (min-width: 901px) and (max-height: 860px) { .ui2 .nav-item { padding: 3px 8px; font-size: 13px; } .ui2 .nav-item svg { width: 22px; height: 22px; padding: 4px; } .ui2 .brand .logo { height: 20px; } .ui2 .brand .brand-t { font-size: 20px; } }

/* design waiting for approval: one big highlighted box (Tasks, Design) */
.ui2 .appr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--appr-bg); border: 1.5px solid var(--appr-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(91,59,168,.10); }
.ui2 .appr-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--violet); color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ui2 .appr-ic svg { width: 21px; height: 21px; }
.ui2 .appr-t { flex: 1 1 300px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui2 .appr-k { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--violet); text-transform: uppercase; }
.ui2 .appr-t b { font-size: 18px; }
.ui2 .appr-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.ui2 .appr-open { font-size: 13.5px; font-weight: 600; color: var(--raw); text-decoration: none; }
.ui2 .appr .btn { font-size: 14px; padding: 10px 18px; }
.ui2 .appr .btn.appr-ok { background: #2F7D4F; border-color: #2F7D4F; color: #FFFFFF; font-weight: 700; padding: 10px 22px; }
.ui2 .chip.ok { background: var(--green-soft); color: var(--green); }
@media (max-width: 900px) { .ui2 .appr { padding: 12px; gap: 10px; } .ui2 .appr .btn { flex: 1; min-height: 42px; } .ui2 .appr-t b { font-size: 15.5px; } }

/* ---------- Meetings / month grids ---------- */
.ui2 .mt-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.ui2 .mt-layout.has-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.ui2 .mt-side { position: sticky; top: 16px; }
.ui2 .mtp { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ui2 .mtp-h { position: relative; background: var(--raw); color: #FFFFFF; padding: 14px 44px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ui2 .mtp-when { font: 500 12px var(--mono); color: #F6DCD7; }
.ui2 .mtp-h b { font-size: 18px; line-height: 1.25; } .ui2 .mtp-h > span:last-child { font-size: 13px; color: #F6DCD7; }
.ui2 .mtp-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 18px; cursor: pointer; }
.ui2 .mtp-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.ui2 .mtp-b .row .btn { flex: 1; justify-content: center; }
.ui2 .mtp-join { background: var(--tile-dark); border-color: var(--tile-dark); color: #FFFFFF; font-weight: 700; flex: 2 !important; }
.ui2 .mtp-sec { display: flex; flex-direction: column; gap: 5px; }
.ui2 .mtp-k { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.ui2 .mo-title { font-size: 17px; font-weight: 800; }
.ui2 .mo-wd span { font-weight: 700; color: var(--ink-2); font-size: 11px; }
.ui2 .mo-cell { background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; }
.ui2 .mo-cell.out { opacity: 1; background: var(--panel-2); } .ui2 .mo-cell.out .mo-d { color: #B5B0AA; }
.ui2 .mo-cell.today { outline: 2px solid var(--raw); }
.ui2 .mo-cell.today .mo-d { align-self: flex-start; background: var(--raw); color: #FFFFFF; border-radius: 6px; padding: 3px 6px; }
.ui2 .mo-ev { border-left: 0; border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 6px; box-shadow: none; background: var(--s3); color: #3A3632; }
.ui2 .mo-ev .mo-t { font-family: var(--mono); font-size: 10.5px; color: inherit; opacity: .85; }
.ui2 .mo-ev.k-sales { background: var(--amber-soft); color: var(--amber); }
.ui2 .mo-ev.k-client { background: var(--blue-soft); color: var(--blue); }
.ui2 .mo-ev.past, .ui2 .mo-ev.done, .ui2 .mo-ev.not_interested, .ui2 .mo-ev.no_followup, .ui2 .mo-ev.cancelled { opacity: .55; }
.ui2 .mo-ev.finished { background: var(--amber-soft); color: var(--amber); box-shadow: inset 0 0 0 1px #F3DDB3; }
.ui2 .mo-ev.sel { box-shadow: 0 0 0 2px var(--raw); }
.ui2 .mo-ev.mt { background: var(--panel); color: var(--raw-dark); border: 1px dashed #C98F86; }
.ui2 .mo-ev.tk.late { background: var(--red-soft); color: var(--red); }
.ui2 .mo-ev.tk.s-Waiting-on-client { background: var(--teal-soft); color: var(--teal); }
.ui2 .mo-ev.tk { border-left: 0; }
.ui2 .mt { border-left: 0; border: 1px solid var(--line); }
@media (max-width: 900px) { .ui2 .mt-layout.has-side { grid-template-columns: 1fr; } }

/* ---------- Design ---------- */
.ui2 .btn.dg-head { background: var(--raw); border-color: var(--raw); color: #FFFFFF; font-weight: 800; padding: 8px 15px 8px 9px; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(139,30,26,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
.ui2 .btn.dg-head:hover { background: #761814; filter: none; }
.ui2 .btn.dg-head.on { box-shadow: 0 0 0 3px rgba(139,30,26,.25); }
.ui2 .dg-spark { width: 22px; height: 22px; border-radius: 6px; background: #F6C177; color: var(--raw-dark); display: grid; place-items: center; }
.ui2 .dg-spark svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .ui2 .page-head .actions .btn.dg-head { background: #FFFFFF; color: var(--raw); border-color: #FFFFFF; } }
/* view tabs as pills, active solid RAW red (Design, Klaviyo sub tabs) */
.ui2 #dview.seg { background: transparent; border: 0; padding: 0; gap: 6px; }
.ui2 #dview.seg button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px; font-weight: 600; }
.ui2 #dview.seg button.on { background: var(--raw); border-color: var(--raw); color: #FFFFFF; font-weight: 700; }
.ui2 table.dtable tr[data-design] { cursor: pointer; }
.ui2 table.dtable tr[data-design]:hover td { background: var(--panel-2); }
.ui2 .dtable .avatar { display: inline-grid; vertical-align: middle; border: 2px solid #FFFFFF; }
.ui2 .dtable .avatar + .avatar { margin-left: -7px; }

/* ---------- Klaviyo ---------- */
.ui2 .kl-pill.deliv { background: #1F6B43; color: #FFFFFF; border-color: #1F6B43; font-weight: 700; box-shadow: 0 2px 6px rgba(31,107,67,.3); }
.ui2 .kl-pill.deliv.on { box-shadow: 0 0 0 3px rgba(31,107,67,.25); }
.ui2 .kl-nav .seg button.on { background: var(--ink); }
.ui2 .kl-tabs.seg { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; gap: 6px; display: flex; overflow-x: auto; flex-wrap: nowrap; }
.ui2 .kl-tabs.seg button { background: var(--s3); color: var(--chip-ink); padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.ui2 .kl-tabs.seg button.on { background: var(--raw-dark); color: #FFFFFF; box-shadow: 0 2px 6px rgba(90,18,16,.3); }
/* bigger text on the analytics (round 8 feedback) */
.ui2 .kl-body .stat .k { font-size: 14px; }
.ui2 .kl-body .stat .v { font-size: 28px; }
.ui2 .kl-body .stat .d { font-size: 13.5px; }
.ui2 .kl-body table.t td { font-size: 14.5px; }
.ui2 .kl-body table.t th { font-size: 13px; }
.ui2 .kl-body .card-h h2 { font-size: 16.5px; }
.ui2 .kl-body .card-pad { font-size: 14.5px; }
.ui2 .kl-cn { font-weight: 600; }
.ui2 .kl-time { font-family: var(--mono); color: var(--ink-2); font-size: 13px; }
.ui2 .chip.kl-aud { background: var(--blue-soft); color: var(--blue); }
.ui2 td.nowrap { white-space: nowrap; }

/* System at the bottom of the menu, opens upwards */
.ui2 .side-sys { margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.ui2 .side-sys .nav-group { margin-top: 0; display: flex; flex-direction: column-reverse; }
.ui2 .side-sys .nav-group > summary { padding: 4px 8px; pointer-events: auto; color: #FFFFFF; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 10px; gap: 10px; }
.ui2 .side-sys .nav-group > summary:hover { background: rgba(255,255,255,.16); }
.ui2 .side-sys .nav-group > summary .gl { background: none; padding: 0; font-size: 13.5px; color: #FFFFFF; }
.ui2 .side-sys .nav-group > summary::before { content: ""; width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: #D9A9A2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0B09' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center / 15px no-repeat; }
.ui2 .side-sys .nav-group > summary .chev { margin-left: auto; transform: rotate(-135deg); }
.ui2 .side-sys .nav-group[open] > summary .chev { transform: rotate(45deg); }
.ui2 .side .me { margin-top: 0; }

/* ---------- Today (approved "D · Today") ---------- */
.ui2 .t2-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.ui2 .t2-head > div:first-child { margin-right: auto; }
.ui2 .t2-date { font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.ui2 .t2-head h1 { font-size: 26px; }
.ui2 .t2-ask { flex: 0 1 420px; margin: 0; border-radius: 10px; padding: 4px 4px 4px 12px; box-shadow: none; }
.ui2 .t2-ask svg { color: var(--raw); }
.ui2 .t2-ask input { padding: 6px 0; font-size: 13.5px; }
.ui2 .t2-next { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--raw); color: #FFFFFF; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(139,30,26,.25); }
.ui2 .t2-nt { font: 600 12px var(--mono); background: rgba(0,0,0,.22); border-radius: 6px; padding: 3px 8px; color: #F6DCD7; }
.ui2 .t2-next b { font-size: 17px; }
.ui2 .t2-then { font-size: 13px; color: #F2C9C3; }
.ui2 .t2-next .btn { margin-left: auto; background: #FFFFFF; color: var(--raw); border-color: #FFFFFF; font-weight: 700; }
.ui2 .t2-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ui2 .t2-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; }
.ui2 a.t2-stat:hover { border-color: var(--line-strong); }
.ui2 .t2-stat > span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .t2-stat b { font-size: 24px; font-weight: 800; line-height: 1.15; }
.ui2 .t2-stat b small { font-size: 15px; color: var(--ink-3); font-weight: 700; }
.ui2 .t2-stat.dark { background: var(--tile-dark); border-color: var(--tile-dark); color: #FFFFFF; }
.ui2 .t2-stat.dark > span { color: #F2C9C3; } .ui2 .t2-stat.dark b { font-size: 17px; margin-top: 4px; }
.ui2 .t2-vr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--tile-dark); color: #FFFFFF; border-radius: 12px; padding: 10px 16px; margin-bottom: 12px; text-decoration: none; font-size: 13.5px; }
.ui2 .t2-vr b { color: #FFFFFF; } .ui2 .t2-vr-lo { color: #E9E6E1; flex: 1 1 320px; } .ui2 .t2-vr-m { color: #C9C4BD; flex: 1 1 260px; }
.ui2 .t2-vr-m b { color: #F2C9C3; margin-right: 4px; font-weight: 700; }
.ui2 .t2-vr-open { color: #F2C9C3; font-weight: 700; margin-left: auto; }
.ui2 .t2-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr); gap: 12px; align-items: start; }
.ui2 .t2-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ui2 .t2-col .card-h { border-bottom: 1px solid var(--line-2); }
.ui2 .t2-list { display: flex; flex-direction: column; }
.ui2 .t2-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.ui2 .t2-row:last-child { border-bottom: 0; } .ui2 .t2-row:hover { background: var(--panel-2); }
.ui2 .t2-row .check { margin-top: 1px; flex: none; }
.ui2 .t2-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui2 .t2-t { font-weight: 500; line-height: 1.35; }
.ui2 .t2-m { font-size: 12px; color: var(--ink-2); }
.ui2 .t2-time { font: 500 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.ui2 .t2-date, .ui2 .t2-row .t2-date { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ui2 .t2-focus { margin: 4px 14px 6px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; font-weight: 600; font-size: 13px; }
.ui2 .t2-plan { display: grid; grid-template-columns: 48px minmax(0, 1fr); row-gap: 7px; column-gap: 8px; padding: 8px 16px 14px; font-size: 13.5px; }
.ui2 .t2-plan > div { display: contents; }
.ui2 .t2-plan > div > span:first-child { font: 500 12px/1.6 var(--mono); color: var(--ink-2); }
.ui2 .t2-plan > div.past > span { color: var(--ink-3); } .ui2 .t2-plan > div.past > span:last-child { text-decoration: line-through; }
.ui2 .t2-plan > div.cur > span { color: var(--raw); font-weight: 700; } .ui2 .t2-plan > div.cur > span:last-child { color: var(--ink); }
.ui2 .t2-plan > div.missed > span { color: var(--ink-3); }
.ui2 .t2-week .trk { padding: 6px 0; } .ui2 .t2-week .trk-top { margin-bottom: 4px; font-size: 13px; align-items: center; }
.ui2 .t2-week .trk-goal-l { display: none; } .ui2 .t2-week .trk-n { font-size: 11.5px; }
.ui2 .t2-week .pct-bar { height: 5px; } .ui2 .t2-week .trk-b { padding: 1px 7px; min-width: 26px; } .ui2 .t2-week .trk-val { width: 40px; }
.ui2 .t2-calls { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; }
.ui2 .t2-call { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.ui2 .t2-ci { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--raw); display: grid; place-items: center; flex: none; }
.ui2 .t2-ci svg { width: 15px; height: 15px; }
.ui2 .t2-call .t2-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .t2-wait > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; }
.ui2 .t2-wait > summary::-webkit-details-marker { display: none; }
.ui2 .t2-wait > summary b { font-size: 15px; }
.ui2 .t2-wait .chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
.ui2 .t2-wait[open] .chev { transform: rotate(225deg); }
@media (max-width: 1200px) { .ui2 .t2-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ui2 .t2-cols > .t2-col:last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .ui2 .t2-head { margin: 0 -12px 12px; }
  .ui2 .t2-head .t2-date { color: #E7C3BD; }
  .ui2 .t2-ask { flex: 1 1 100%; background: rgba(255,255,255,.12); border-color: transparent; }
  .ui2 .t2-ask input { color: #FFFFFF; } .ui2 .t2-ask input::placeholder { color: #F3E3DF; } .ui2 .t2-ask svg { color: #F3E3DF; }
  .ui2 .t2-ask .btn { background: #FFFFFF; color: var(--raw); border-color: #FFFFFF; }
  .ui2 .t2-sync { display: none; }
  .ui2 .t2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ui2 .t2-stats > :nth-child(4) { display: none; }
  .ui2 .t2-stat { padding: 8px 10px; } .ui2 .t2-stat b { font-size: 20px; }
  .ui2 .t2-cols { grid-template-columns: 1fr; } .ui2 .t2-cols > .t2-col:last-child { grid-column: auto; }
  .ui2 .t2-next b { font-size: 15px; }
}
.ui2 .t2-next { flex-wrap: nowrap; }
.ui2 .t2-next b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
.ui2 .t2-then { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .t2-plan > div.past > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .t2-week { padding: 4px 14px 10px; }
.ui2 .t2-trk { padding: 7px 0; border-bottom: 0; }
.ui2 .t2-tr { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.ui2 .t2-tr .trk-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .t2-week { grid-template-columns: minmax(0, 1fr); } .ui2 .t2-trk { grid-template-columns: minmax(0, 1fr); min-width: 0; } .ui2 .t2-tr { min-width: 0; } .ui2 .t2-tn { flex: none; }
.ui2 .t2-tn { display: flex; align-items: center; gap: 2px; font: 500 12.5px var(--mono); color: var(--ink-2); }
.ui2 .t2-tn .trk-val { width: 30px; border: 0; background: transparent; text-align: right; font: 600 12.5px var(--mono); color: var(--ink); padding: 0; -moz-appearance: textfield; }
.ui2 .t2-tn .trk-val::-webkit-inner-spin-button { -webkit-appearance: none; }
.ui2 .t2-tn .trk-b { width: 20px; height: 20px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; font-size: 13px; line-height: 1; cursor: pointer; opacity: .55; padding: 0; }
.ui2 .t2-trk:hover .trk-b { opacity: 1; }
.ui2 .t2-trk .pct-bar { height: 5px; }
@media (max-width: 900px) { .ui2 .t2-next b { max-width: none; } .ui2 .t2-then { display: none; } .ui2 .t2-tn .trk-b { opacity: 1; width: 28px; height: 28px; } }
@media (max-width: 900px) { .ui2 .t2-stats > :nth-child(3) { display: none; } .ui2 .t2-stat.dark b { font-size: 15px; } .ui2 .t2-vr-m { display: none; } }

/* ---------- Clients (approved "E · Clients") ---------- */
.ui2 .c2-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); margin-right: 8px; }
.ui2 .c2-legend i { width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; } .ui2 .c2-legend .g { background: #2F9E5B; } .ui2 .c2-legend .a { background: #D98B0B; } .ui2 .c2-legend .r { background: #C0392B; }
.ui2 .c2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ui2 .c2 { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ui2 .c2-bar { height: 5px; background: var(--hc, var(--line)); }
.ui2 .c2.h-green { --hc: #2F9E5B; --hb: #F1F8F3; --hl: #CFE6D7; --ht: #1F6B43; } .ui2 .c2.h-amber { --hc: #D98B0B; --hb: #FFF8EC; --hl: #F3DDB3; --ht: #6E4300; } .ui2 .c2.h-red { --hc: #C0392B; --hb: #FDF5F4; --hl: #F3D4CF; --ht: #8A1C14; }
.ui2 .c2-in { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.ui2 .c2-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ui2 .c2-nm { font-size: 20px; font-weight: 800; color: var(--ink); text-decoration: none; }
.ui2 .c2-why { padding: 8px 11px; background: var(--hb, var(--s2)); border: 1px solid var(--hl, var(--line)); border-radius: 9px; font-size: 13px; color: var(--ht, var(--ink)); }
.ui2 .c2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui2 .c2-st { background: var(--s2); border-radius: 9px; padding: 7px 10px; display: flex; flex-direction: column; }
.ui2 .c2-st small { font-size: 11.5px; color: var(--ink-2); } .ui2 .c2-st b { font-size: 18px; }
.ui2 .c2-st.bad { background: var(--red-soft); } .ui2 .c2-st.bad b { color: var(--red); }
.ui2 .c2-st.warn { background: var(--amber-soft); } .ui2 .c2-st.warn b { color: var(--amber); }
.ui2 .c2-acts { display: flex; gap: 6px; } .ui2 .c2-acts .btn { flex: 1; background: var(--s3); border-color: transparent; }
.ui2 .c2-acts .btn.c2-open { background: var(--raw-dark); color: #FFFFFF; font-weight: 700; }
.ui2 .w2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 8px; padding: 4px 6px 6px; }
.ui2 .task.w2 { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 1px 3px rgba(26,25,24,.07); }
.ui2 .task.w2:hover { border-color: var(--line-strong); background: var(--panel); }
.ui2 .w2-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; flex: none; }
.ui2 .w2-ic svg { width: 17px; height: 17px; }
.ui2 .w2-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui2 .w2-t { font-weight: 600; font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .w2-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.ui2 .task.w2 .chip { font-size: 13px; }
@media (max-width: 900px) { .ui2 .w2-grid { grid-template-columns: 1fr; } .ui2 .c2-legend { display: none; } .ui2 .w2-t { white-space: normal; } }

/* ---------- round 12 ---------- */
.ui2 .slot { display: contents; }
.ui2 .mtp-x { display: grid; place-items: center; padding: 0; line-height: 1; font-size: 20px; }
/* the whole menu fits the screen height: rows scale with the window, no scrolling, no scrollbar */
.ui2 .side { --ih: clamp(21px, calc((100vh - 290px) / 17), 34px); overflow: hidden; }
.ui2 .side, .ui2 .side .nav-scroll { scrollbar-width: none; }
.ui2 .side::-webkit-scrollbar, .ui2 .side .nav-scroll::-webkit-scrollbar { display: none; }
.ui2 .side .nav-scroll { overflow-y: auto; gap: 0; }
.ui2 .nav-item { height: var(--ih); padding-top: 0; padding-bottom: 0; flex: none; font-size: clamp(12px, calc(var(--ih) * .42), 13.5px); }
.ui2 .nav-item svg { width: min(24px, calc(var(--ih) - 5px)); height: min(24px, calc(var(--ih) - 5px)); padding: clamp(3px, calc(var(--ih) * .14), 4.5px); }
.ui2 .nav-group { margin-top: clamp(2px, calc(var(--ih) * .18), 6px); }
.ui2 .nav-group > summary { padding-bottom: 2px; }
.ui2 .side-sys .nav-group > summary { height: var(--ih); padding-top: 0; padding-bottom: 0; }
@media (max-height: 760px) { .ui2 .nav-jump { display: none; } .ui2 .side { --ih: clamp(20px, calc((100vh - 248px) / 17), 34px); } .ui2 .brand { padding-bottom: 4px; } .ui2 .brand .logo { height: 20px; } .ui2 .brand .brand-t { font-size: 20px; } .ui2 .brand .logo-box { padding: 6px 9px; } }
.ui2 .side-sys .nav-group > summary, .ui2 .side-sys .nav-group > summary .gl { font-size: clamp(12px, calc(var(--ih) * .42), 13.5px); }
.ui2 .side-sys .nav-group > summary::before { width: min(24px, calc(var(--ih) - 5px)); height: min(24px, calc(var(--ih) - 5px)); background-size: 60%; }

/* ---------- round 13: nothing outside its box on the phone ---------- */
.ui2 select.input { max-width: 100%; text-overflow: ellipsis; }
.ui2 .card { min-width: 0; max-width: 100%; }
.ui2 .card-b, .ui2 .card-pad { min-width: 0; }
@media (max-width: 900px) {
  .ui2 .card-b { overflow-x: auto; }
  .ui2 .card table.t { min-width: 0; }
  .ui2 .grid > *, .ui2 .grid.two > * { min-width: 0; }
}
.ui2 details.os-setup > summary, .ui2 details.ob-done > summary { padding: 6px 0; font-weight: 600; color: var(--raw); }
.ui2 details.os-setup { margin: 8px 0; }

/* dark mode details that can't come from tokens */
:root.ui2[data-theme="dark"] .c2.h-green, :root.ui2[data-theme="dark"] .c2.h-amber, :root.ui2[data-theme="dark"] .c2.h-red { --hb: var(--s2); --hl: var(--line); --ht: var(--ink); }
:root.ui2[data-theme="dark"] .t2-stat.dark, :root.ui2[data-theme="dark"] .t2-vr { border: 1px solid var(--line); }
:root.ui2[data-theme="dark"] .t2-next .btn, :root.ui2[data-theme="dark"] .mtp-x { color: var(--raw); }
:root.ui2[data-theme="dark"] .dtable .avatar { border-color: var(--panel); }
@media (prefers-color-scheme: dark) {
  :root.ui2:not([data-theme="light"]) .c2.h-green, :root.ui2:not([data-theme="light"]) .c2.h-amber, :root.ui2:not([data-theme="light"]) .c2.h-red { --hb: var(--s2); --hl: var(--line); --ht: var(--ink); }
  :root.ui2:not([data-theme="light"]) .t2-stat.dark, :root.ui2:not([data-theme="light"]) .t2-vr { border: 1px solid var(--line); }
  :root.ui2:not([data-theme="light"]) .dtable .avatar { border-color: var(--panel); }
}
.ui2 .kl-nav .seg button.on { color: var(--bg); }
.ui2 .side:has(.side-sys details[open]) { --ih: clamp(18px, calc((100vh - 290px) / 21), 34px); }
@media (max-height: 760px) { .ui2 .side:has(.side-sys details[open]) { --ih: clamp(17px, calc((100vh - 248px) / 21), 34px); } }
/* People (in Settings): name on top, role + time zone side by side, buttons under */
@media (min-width: 901px) { .ui2 .ppl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .ui2 .ppl-row > :first-child { grid-column: 1 / -1; } .ui2 .ppl-row > .row:last-child { grid-column: 1 / -1; } }

/* ---------- round 14: calmer, professional menu (Oct 12) ----------
   No colour per group: white label boxes, one neutral icon style, full-size rows; the menu scrolls (scrollbar hidden). */
.ui2 .side { --ih: 34px !important; overflow-y: auto; }
.ui2 .side:has(.side-sys details[open]) { --ih: 34px; }
.ui2 .nav-jump { display: flex !important; }
.ui2 .nav-item { height: auto; min-height: 36px; padding: 5px 8px; font-size: 14px; }
.ui2 .nav-item svg { width: 26px; height: 26px; padding: 5px; background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; }
.ui2 .nav-item:hover svg { background: rgba(255,255,255,.24) !important; }
.ui2 .nav-item.active svg { background: var(--raw) !important; color: #FFFFFF !important; }
.ui2 .nav-group { margin-top: 10px; }
.ui2 .nav-group:not(.g-system) > summary { padding: 0 0 5px; }
.ui2 .nav-group > summary .gl { display: block; width: 100%; box-sizing: border-box; background: #FFFFFF; color: var(--raw-dark); border-radius: 8px; padding: 5px 10px; font-size: 11.5px; letter-spacing: .08em; }
.ui2 .side-sys .nav-group > summary { min-height: 36px; height: auto; padding: 5px 8px; font-size: 14px; }
.ui2 .side-sys .nav-group > summary .gl { background: none; color: #FFFFFF; padding: 0; width: auto; font-size: 14px; letter-spacing: 0; }
.ui2 .side-sys .nav-group > summary::before { width: 26px; height: 26px; background-color: rgba(255,255,255,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); background-size: 16px; }
@media (max-height: 760px) { .ui2 .brand .logo { height: 24px; } .ui2 .brand .brand-t { font-size: 24px; } .ui2 .brand .logo-box { padding: 8px 11px; } }
/* phone menu: same calm style */
.ui2 .mm-h .pill { background: #FFFFFF; color: var(--raw-dark); }
.ui2 .mm-h i { display: none; }
.ui2 .mm-h { display: block; } .ui2 .mm-h .pill { display: block; padding: 5px 10px; border-radius: 8px; letter-spacing: .08em; }
.ui2 .mt-ic { background: rgba(255,255,255,.14); color: #FFFFFF; }
/* welcome greeting in RAW colours and the new font */
.ui2 .greet, .ui2 .greet.gp-morning, .ui2 .greet.gp-afternoon, .ui2 .greet.gp-evening, .ui2 .greet.gp-night { --gp: var(--raw); }
.ui2 .greet-t { font: 800 clamp(26px, 6vw, 40px)/1.15 var(--font); letter-spacing: -.02em; }
/* round 15: desktop menu rows a little smaller (between the cramped and the full size) */
@media (min-width: 901px) {
  .ui2 .nav-item { min-height: 31px; padding: 3px 8px; font-size: 13.5px; gap: 9px; }
  .ui2 .nav-item svg { width: 23px; height: 23px; padding: 4.5px; }
  .ui2 .nav-group { margin-top: 8px; }
  .ui2 .nav-group > summary .gl { padding: 4px 10px; font-size: 11px; }
  .ui2 .side-sys .nav-group > summary { min-height: 31px; padding: 3px 8px; font-size: 13.5px; }
  .ui2 .side-sys .nav-group > summary .gl { font-size: 13.5px; }
  .ui2 .side-sys .nav-group > summary::before { width: 23px; height: 23px; background-size: 14px; }
  .ui2 .brand .logo { height: 22px; } .ui2 .brand .brand-t { font-size: 22px; } .ui2 .brand .logo-box { padding: 7px 10px; }
}
/* round 16: the Track record strip stands out (read it every day) without adding noise */
.ui2 .t2-vr { padding: 13px 18px; gap: 16px; border: 1px solid rgba(201,64,52,.55); box-shadow: 0 2px 10px rgba(26,25,24,.18); align-items: center; }
.ui2 .t2-vr-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--raw); color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ui2 .t2-vr-ic svg { width: 19px; height: 19px; }
.ui2 .t2-vr-k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #F08A7E; margin-bottom: 3px; }
.ui2 .t2-vr-lo { font-size: 15px; line-height: 1.4; color: #EDEAE5; flex: 2 1 340px; }
.ui2 .t2-vr-m { font-size: 13.5px; line-height: 1.4; color: #D3CEC7; flex: 1 1 240px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.14); }
@media (max-width: 900px) { .ui2 .t2-vr-m { padding-left: 0; border-left: 0; } .ui2 .t2-vr-ic { display: none; } }
/* Design by client: one line per cell for the short columns */
.ui2 table.dtable th { white-space: nowrap; }
.ui2 table.dtable td:last-child, .ui2 table.dtable td:last-child a { white-space: nowrap; }
.ui2 .dpage details.fold2 > summary .fold-r .chip { font-size: 12px; }