/* Live Tiles look (docs/design/LIVE_TILES.md). Everything is scoped to html[data-look="tiles"], so the
   classic look (and its screen comparisons with legacy) is untouched. */

html[data-look="tiles"] {
  --tl-shell: #1459A7;
  --tl-cobalt: #0965B5;
  --tl-link: #0866BD;
  --tl-link-hover: #064E93;
  --tl-teal: #087B80;
  --tl-violet: #6354A1;
  --tl-green: #237357;
  --tl-slate: #546476;
  --tl-red: #AB3032;
  --tl-ground: #EDF1F5;
  --tl-rail: #E4EBF2;
  --tl-rail-line: #CBD6E1;
  --tl-rail-ink: #466176;
  --tl-surface: #FFFFFF;
  --tl-line: #D5DEE8;
  --tl-row: #E6ECF2;
  --tl-head: #F5F7FA;
  --tl-ink: #1B2A3A;
  --tl-muted: #586A7C;
  --tl-label: #4E6478;
  --tl-label-2: #365D81;
  --tl-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* legacy page variables, re-pointed to the Live Tiles palette */
  --bg-body: #EDF1F5;
  --bg-panel: #FFFFFF;
  --text-main: #1B2A3A;
  --text-soft: #586A7C;
  --border: #D5DEE8;
  --primary: #0965B5;
  --primary-dark: #064E93;
  --shadow-sm: none;
}

html[data-look="tiles"],
html[data-look="tiles"] body {
  background: var(--tl-ground) !important;
  color: var(--tl-ink);
  font-family: var(--tl-font);
}
html[data-look="tiles"] body :where(button, input, select, textarea) { font-family: inherit; }
html[data-look="tiles"] body.tl-sheet-open { overflow: hidden; }

/* ---------- shell ---------- */
html[data-look="tiles"] .tl-shell { display: flex; min-height: 100vh; min-height: 100dvh; width: 100%; }
html[data-look="tiles"] .tl-rail {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto;
  flex: 0 0 78px; width: 78px; box-sizing: border-box; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--tl-rail); border-right: 1px solid var(--tl-rail-line); z-index: 40;
}
html[data-look="tiles"] .tl-brand { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; text-decoration: none; }
html[data-look="tiles"] .tl-brand img { width: 38px; height: 38px; mix-blend-mode: multiply; }
html[data-look="tiles"] .tl-brand span { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--tl-shell); }
html[data-look="tiles"] .tl-rail-item {
  all: unset; box-sizing: border-box; width: 66px; min-height: 60px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--tl-rail-ink); font: 400 11px/1.2 var(--tl-font); text-align: center; cursor: pointer; text-decoration: none;
}
html[data-look="tiles"] .tl-rail-item span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="tiles"] .tl-rail-item:hover, html[data-look="tiles"] .tl-rail-item.is-open { background: #D6E0EB; color: var(--tl-ink); }
html[data-look="tiles"] .tl-rail-item.is-active { background: var(--tl-cobalt); color: #fff; }
html[data-look="tiles"] .tl-rail-item:focus-visible { outline: 3px solid var(--tl-link); outline-offset: -3px; }
html[data-look="tiles"] .tl-rail-bottom { margin-top: auto; }

html[data-look="tiles"] .tl-flyout {
  position: fixed; left: 78px; top: 0; bottom: 0; width: 260px; z-index: 60; overflow-y: auto; box-sizing: border-box;
  background: #fff; border-right: 1px solid var(--tl-line); box-shadow: 8px 0 24px rgba(20,35,55,.12); padding: 18px 0;
}
html[data-look="tiles"] .tl-flyout-head { padding: 0 20px 12px; font-size: 26px; font-weight: 300; color: var(--tl-link); text-transform: lowercase; }
html[data-look="tiles"] .tl-flyout-link {
  all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 20px; font: 400 15px var(--tl-font); color: var(--tl-ink);
  cursor: pointer; border-left: 4px solid transparent; text-decoration: none;
}
html[data-look="tiles"] .tl-flyout-link:hover { background: var(--tl-head); }
html[data-look="tiles"] .tl-flyout-link.is-active { border-left-color: var(--tl-cobalt); background: #E8F2FC; color: var(--tl-link-hover); font-weight: 600; }
html[data-look="tiles"] .tl-flyout-link:focus-visible { outline: 3px solid var(--tl-link); outline-offset: -3px; }
/* release 4: CRM menu groups — a heading that is not a page, and the group's pages indented under it */
html[data-look="tiles"] .tl-link-heading { display: block; padding: 9px 16px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tl-muted); }
html[data-look="tiles"] .tl-flyout-link.tl-link-sub { padding-left: 32px !important; }
html[data-look="tiles"] .tl-sheet-link.tl-link-heading { grid-column: 1 / -1; padding: 6px 4px 0; background: none; }
html[data-look="tiles"] .tl-sheet-link.tl-link-sub::before { content: "↳ "; opacity: .6; }

html[data-look="tiles"] .tl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html[data-look="tiles"] .tl-topbar {
  position: sticky; top: 0; z-index: 30; min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 22px;
  background: var(--tl-shell); color: #fff;
}
html[data-look="tiles"] .tl-topbar-brand { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
html[data-look="tiles"] .tl-topbar-divider { width: 1px; height: 19px; background: rgba(255,255,255,.35); }
html[data-look="tiles"] .tl-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
html[data-look="tiles"] .tl-crumb-section { opacity: .85; }
html[data-look="tiles"] .tl-crumb-page { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look="tiles"] .tl-workspaces { margin-left: auto; display: flex; flex-wrap: wrap; }
html[data-look="tiles"] .tl-workspaces a { display: flex; align-items: center; height: 50px; padding: 0 12px; color: #fff; font-size: 14px; text-decoration: none; }
html[data-look="tiles"] .tl-workspaces a:hover { background: rgba(255,255,255,.12); }
html[data-look="tiles"] .tl-user { position: relative; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.35); }
html[data-look="tiles"] .tl-user-btn { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; color: #fff; }
html[data-look="tiles"] .tl-user-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-look="tiles"] .tl-avatar { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
html[data-look="tiles"] .tl-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
html[data-look="tiles"] .tl-user-meta strong { font-size: 13px; }
html[data-look="tiles"] .tl-user-meta span { font-size: 11px; opacity: .85; }
html[data-look="tiles"] .tl-user-menu {
  position: absolute; right: 0; top: calc(100% + 3px); width: 250px; z-index: 70; background: #fff; color: var(--tl-ink);
  border: 1px solid var(--tl-line); border-top: 4px solid var(--tl-cobalt); box-shadow: 0 10px 28px rgba(20,35,55,.18); padding: 6px 0;
}
html[data-look="tiles"] .tl-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 13px; }
html[data-look="tiles"] .tl-user-row select { height: 36px; border: 1px solid #C8D3E0; border-radius: 0; padding: 0 8px; background: #fff; font: inherit; }
html[data-look="tiles"] .tl-user-item {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; font: 400 14px var(--tl-font);
  color: var(--tl-ink); cursor: pointer; text-decoration: none;
}
html[data-look="tiles"] .tl-user-item:hover { background: var(--tl-head); }

html[data-look="tiles"] .tl-pivots { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 10px 26px 0; background: #fff; border-bottom: 1px solid var(--tl-line); }
html[data-look="tiles"] .tl-pivots a { padding: 4px 0 9px; border-bottom: 3px solid transparent; color: var(--tl-muted); font-size: 18px; font-weight: 300; text-decoration: none; text-transform: lowercase; }
html[data-look="tiles"] .tl-pivots a.is-active { color: var(--tl-link); border-bottom-color: var(--tl-link); font-weight: 400; }

html[data-look="tiles"] .tl-content { flex: 1 1 auto; padding: 20px 26px 32px !important; box-sizing: border-box; min-width: 0; background: transparent !important; }
html[data-look="tiles"] .tl-headline { margin: 0 0 18px; }
html[data-look="tiles"] .tl-headline h1 { margin: 0; font: 300 38px/1.12 var(--tl-font); letter-spacing: -1px; color: var(--tl-link); }
html[data-look="tiles"] .tl-headline p { margin: 6px 0 0; color: var(--tl-muted); font-size: 14px; }
html[data-look="tiles"] .tl-dot { color: var(--tl-ink); }
html[data-look="tiles"] .tl-label { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tl-label); }
html[data-look="tiles"] .tl-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 26px; border-top: 1px solid var(--tl-line); font-size: 13px; }
html[data-look="tiles"] .tl-footer a { color: var(--tl-link); text-decoration: none; }

html[data-look="tiles"] .tl-bottombar { display: none; }
html[data-look="tiles"] .tl-sheet-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20,35,55,.45); display: flex; align-items: flex-end; }
html[data-look="tiles"] .tl-sheet { width: 100%; max-height: 85vh; overflow-y: auto; background: #fff; border-top: 4px solid var(--tl-cobalt); padding: 0 0 18px; }
html[data-look="tiles"] .tl-sheet-head { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 16px; font-size: 24px; font-weight: 300; color: var(--tl-link); text-transform: lowercase; }
html[data-look="tiles"] .tl-sheet-head button { all: unset; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tl-ink); cursor: pointer; }
html[data-look="tiles"] .tl-sheet-group { padding: 8px 16px; }
html[data-look="tiles"] .tl-sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
html[data-look="tiles"] .tl-sheet-link {
  all: unset; box-sizing: border-box; min-height: 48px; padding: 10px 12px; background: var(--tl-head); color: var(--tl-ink); font: 400 14px/1.25 var(--tl-font);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-decoration: none;
}
html[data-look="tiles"] .tl-sheet-link.is-active { background: var(--tl-cobalt); color: #fff; }
html[data-look="tiles"] .tl-sheet-lang select { height: 34px; border: 1px solid #C8D3E0; border-radius: 0; background: #fff; font: inherit; }

/* phone */
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-rail, html[data-look="tiles"] .tl-flyout, html[data-look="tiles"] .tl-workspaces,
  html[data-look="tiles"] .tl-user, html[data-look="tiles"] .tl-footer { display: none; }
  html[data-look="tiles"] .tl-topbar { padding: 0 14px; min-height: 52px; }
  html[data-look="tiles"] .tl-content { padding: 14px 12px 96px !important; }
  html[data-look="tiles"] .tl-no-menu .tl-content { padding-bottom: 24px !important; }
  html[data-look="tiles"] .tl-headline h1 { font-size: 30px; }
  html[data-look="tiles"] .tl-pivots { padding: 8px 14px 0; }
  html[data-look="tiles"] .tl-bottombar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: 66px; padding-bottom: env(safe-area-inset-bottom); background: var(--tl-rail); border-top: 1px solid var(--tl-rail-line);
  }
  html[data-look="tiles"] .tl-bottombar > * {
    all: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--tl-rail-ink);
    font: 400 10.5px/1.15 var(--tl-font); text-align: center; text-decoration: none; cursor: pointer; min-width: 0;
  }
  html[data-look="tiles"] .tl-bottombar > * span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  html[data-look="tiles"] .tl-bottombar .is-active { background: var(--tl-cobalt); color: #fff; }
  html[data-look="tiles"] .tl-bottombar .tl-create { color: var(--tl-link); font-weight: 600; }
}

/* ---------- common page elements (every module; module passes refine) ---------- */
html[data-look="tiles"] .tl-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  border-radius: 0 !important;
}
html[data-look="tiles"] .tl-content :where(input, select, textarea):focus { outline: 2px solid var(--tl-cobalt); outline-offset: 0; }
html[data-look="tiles"] :where(input[type=checkbox], input[type=radio]) { accent-color: var(--tl-cobalt); }

/* the Call Back popup (shared) */
html[data-look="tiles"] .callback-modal { border-radius: 0 !important; border-top: 4px solid var(--tl-cobalt) !important; font-family: var(--tl-font); }
html[data-look="tiles"] .callback-modal-header h3 { font-weight: 300 !important; font-size: 26px !important; color: var(--tl-link) !important; text-transform: lowercase; }
html[data-look="tiles"] .callback-modal :where(input, select, textarea) { border-radius: 0 !important; }
html[data-look="tiles"] .callback-send-btn { border-radius: 0 !important; background: var(--tl-cobalt) !important; box-shadow: none !important; min-height: 44px; }

/* ---------- shared Live Tiles components ---------- */
html[data-look="tiles"] .tl-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 62px; gap: 8px; }
html[data-look="tiles"] .tl-span-2 { grid-column: span 2; }
html[data-look="tiles"] .tl-span-3x2 { grid-column: span 3; grid-row: span 2; }
html[data-look="tiles"] .tl-span-4x2 { grid-column: span 4; grid-row: span 2; }
html[data-look="tiles"] .tl-span-12 { grid-column: span 12; }
html[data-look="tiles"] .tl-tile {
  box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  text-decoration: none; color: inherit; font-family: var(--tl-font); border: 0; min-width: 0;
}
html[data-look="tiles"] .tl-tile strong { display: block; font-size: 15px; font-weight: 600; }
html[data-look="tiles"] .tl-tile small { display: block; font-size: 11px; opacity: .92; }
html[data-look="tiles"] a.tl-tile:hover { filter: brightness(1.06); }
html[data-look="tiles"] a.tl-tile:focus-visible { outline: 3px solid var(--tl-ink); outline-offset: 2px; }
html[data-look="tiles"] .tl-tile.tl-span-2, html[data-look="tiles"] .tl-tile.tl-rating { flex-direction: row; align-items: center; }
html[data-look="tiles"] .tl-tile-row { display: flex; justify-content: space-between; align-items: flex-start; }
html[data-look="tiles"] .tl-tile-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
html[data-look="tiles"] .tl-tile-cobalt .tl-tile-foot, html[data-look="tiles"] .tl-foot-line { border-top: 1px solid currentColor; border-color: rgba(255,255,255,.4); padding-top: 6px; }
html[data-look="tiles"] .tl-tile-overdue .tl-foot-line { border-color: rgba(137,69,30,.25); }
html[data-look="tiles"] .tl-num-xl { font-size: 46px; font-weight: 300; line-height: 1; }
html[data-look="tiles"] .tl-num-l { font-size: 40px; font-weight: 300; line-height: 1; }
html[data-look="tiles"] .tl-num-s { font-size: 26px; font-weight: 400; line-height: 1; white-space: nowrap; }
html[data-look="tiles"] .tl-num-s small { display: inline; font-size: 14px; }
html[data-look="tiles"] .tl-tile-cobalt { background: var(--tl-cobalt); color: #fff; }
html[data-look="tiles"] .tl-tile-teal { background: var(--tl-teal); color: #fff; }
html[data-look="tiles"] .tl-tile-violet { background: var(--tl-violet); color: #fff; }
html[data-look="tiles"] .tl-tile-green { background: var(--tl-green); color: #fff; }
html[data-look="tiles"] .tl-tile-slate { background: var(--tl-slate); color: #fff; }
html[data-look="tiles"] .tl-tile-red { background: var(--tl-red); color: #fff; }
html[data-look="tiles"] .tl-tile-pending { background: #E0E7F0; color: #314E6A; }
html[data-look="tiles"] .tl-tile-done { background: #DCEEE5; color: #235A43; }
html[data-look="tiles"] .tl-tile-overdue { background: #FAE5D6; color: #89451E; }
html[data-look="tiles"] .tl-tile-approval { background: #E5E0F2; color: #574084; }
html[data-look="tiles"] .tl-tile-neutral { background: #E1E6EC; color: #4F5E6E; }
html[data-look="tiles"] .tl-meter { flex: 1 1 auto; height: 10px; background: rgba(87,64,132,.18); margin: 0 18px; }
html[data-look="tiles"] .tl-meter span { display: block; height: 10px; background: var(--tl-violet); }

html[data-look="tiles"] .tl-panel { background: #fff; border: 1px solid var(--tl-line); min-width: 0; }
html[data-look="tiles"] .tl-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tl-head); border-bottom: 1px solid var(--tl-line); }
html[data-look="tiles"] .tl-panel-head h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tl-label-2); }
html[data-look="tiles"] .tl-panel-head a { font-size: 13px; font-weight: 600; color: var(--tl-link); text-decoration: none; }
html[data-look="tiles"] .tl-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 12px; border-bottom: 1px solid var(--tl-row); border-left: 4px solid var(--tl-line); }
html[data-look="tiles"] .tl-row:last-child { border-bottom: 0; }
html[data-look="tiles"] .tl-row-main { flex: 1 1 auto; min-width: 0; }
html[data-look="tiles"] .tl-row-main strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
html[data-look="tiles"] .tl-row-main small { display: block; font-size: 12px; color: var(--tl-muted); }
html[data-look="tiles"] .tl-empty { padding: 16px; color: var(--tl-muted); font-size: 14px; }
html[data-look="tiles"] .tl-edge-blue { border-left-color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-edge-green { border-left-color: var(--tl-green); }
html[data-look="tiles"] .tl-edge-amber { border-left-color: #C98A16; }
html[data-look="tiles"] .tl-edge-red { border-left-color: var(--tl-red); }
html[data-look="tiles"] .tl-edge-violet { border-left-color: var(--tl-violet); }
html[data-look="tiles"] .tl-edge-teal { border-left-color: var(--tl-teal); }
html[data-look="tiles"] .tl-edge-grey { border-left-color: #A9B8C2; }
html[data-look="tiles"] .tl-chip { flex: none; font-size: 11px; font-weight: 600; padding: 3px 8px; white-space: nowrap; }
html[data-look="tiles"] .tl-chip-blue { background: #E8F2FC; color: #064E93; }
html[data-look="tiles"] .tl-chip-green { background: #E5F3EB; color: #176B50; }
html[data-look="tiles"] .tl-chip-amber { background: #FFF7E5; color: #895707; }
html[data-look="tiles"] .tl-chip-red { background: #FCEBEA; color: #AB3032; }
html[data-look="tiles"] .tl-chip-violet { background: #E5E0F2; color: #574084; }
html[data-look="tiles"] .tl-chip-teal { background: #E3F3F3; color: #087B80; }
html[data-look="tiles"] .tl-chip-grey { background: #F0F3F7; color: #4F5E6E; }

/* ---------- dashboard ---------- */
html[data-look="tiles"] .tl-dash { display: flex; flex-direction: column; gap: 20px; }
html[data-look="tiles"] .tl-dash-greet { margin: -10px 0 0; font-size: 14px; color: var(--tl-muted); }
html[data-look="tiles"] .tl-dash-greet strong { color: var(--tl-ink); font-weight: 600; }
html[data-look="tiles"] .tl-dash-glance, html[data-look="tiles"] .tl-dash-actions { display: flex; flex-direction: column; gap: 8px; }
html[data-look="tiles"] .tl-dash-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html[data-look="tiles"] .tl-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 112px; gap: 8px; }
html[data-look="tiles"] .tl-action small { opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) {
  html[data-look="tiles"] .tl-dash .tl-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-look="tiles"] .tl-dash .tl-span-12 { grid-column: span 6; }
  html[data-look="tiles"] .tl-dash .tl-span-4x2 { grid-column: span 4; }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-dash .tl-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 6px; }
  html[data-look="tiles"] .tl-dash .tl-span-3x2 { grid-column: span 2; grid-row: span 2; }
  html[data-look="tiles"] .tl-dash .tl-span-4x2 { grid-column: span 2; grid-row: span 2; }
  html[data-look="tiles"] .tl-dash .tl-span-2 { grid-column: span 2; }
  html[data-look="tiles"] .tl-dash .tl-span-12 { grid-column: span 4; }
  html[data-look="tiles"] .tl-dash .tl-tile.tl-span-2 { flex-direction: column; align-items: flex-start; }
  html[data-look="tiles"] .tl-dash .tl-meter { margin: 0 10px; }
  html[data-look="tiles"] .tl-num-xl { font-size: 40px; } html[data-look="tiles"] .tl-num-l { font-size: 34px; }
  html[data-look="tiles"] .tl-dash-lists { grid-template-columns: minmax(0, 1fr); }
  html[data-look="tiles"] .tl-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 6px; }
}
/* the rail's colour runs down the whole page, also below the fold */
html[data-look="tiles"] .tl-shell:not(.tl-no-menu) { background: linear-gradient(to right, var(--tl-rail) 0 77px, var(--tl-rail-line) 77px 78px, transparent 78px); }
@media (max-width: 760px) { html[data-look="tiles"] .tl-shell:not(.tl-no-menu) { background: none; } }

/* ---------- sign in ---------- */
html[data-look="tiles"] .tl-login { min-height: 100vh; display: flex; flex-direction: column; background: var(--tl-ground); font-family: var(--tl-font); color: var(--tl-ink); }
html[data-look="tiles"] .tl-login .tl-topbar { gap: 14px; font-size: 14px; }
html[data-look="tiles"] .tl-login-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; padding: 40px 20px; box-sizing: border-box; }
html[data-look="tiles"] .tl-login-mosaic { flex: 0 1 470px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 8px; }
html[data-look="tiles"] .tl-login-mosaic .tl-tile { justify-content: flex-end; }
html[data-look="tiles"] .tl-login-hero { grid-column: span 2; grid-row: span 2; justify-content: space-between !important; }
html[data-look="tiles"] .tl-login-hero img { width: 64px; height: 64px; background: #fff; padding: 6px; }
html[data-look="tiles"] .tl-login-wide { grid-column: span 2; }
html[data-look="tiles"] .tl-login-card { flex: 0 1 400px; background: #fff; border: 1px solid var(--tl-line); border-top: 4px solid var(--tl-cobalt); padding: 28px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
html[data-look="tiles"] .tl-login-card h1 { margin: 0; font: 300 36px/1.1 var(--tl-font); color: var(--tl-link); letter-spacing: -1px; }
html[data-look="tiles"] .tl-login-sub { margin: 0 0 10px; color: var(--tl-muted); font-size: 14px; }
html[data-look="tiles"] .tl-login-card label { font-size: 13px; font-weight: 600; margin-top: 6px; }
html[data-look="tiles"] .tl-login-card input { height: 44px; padding: 0 12px; border: 1px solid #C8D3E0; border-radius: 0; font: 400 15px var(--tl-font); color: var(--tl-ink); background: #fff; box-sizing: border-box; width: 100%; }
html[data-look="tiles"] .tl-login-card input:focus { outline: 2px solid var(--tl-cobalt); outline-offset: -1px; border-color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-login-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
html[data-look="tiles"] .tl-login-row label { margin: 0; }
html[data-look="tiles"] .tl-login-card a { color: var(--tl-link); font-size: 13px; font-weight: 600; text-decoration: none; }
html[data-look="tiles"] .tl-login-pass { position: relative; }
html[data-look="tiles"] .tl-login-pass input { padding-right: 46px; }
html[data-look="tiles"] .tl-login-pass button { all: unset; position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tl-muted); cursor: pointer; }
html[data-look="tiles"] .tl-btn-primary { height: 46px; padding: 0 22px; border: 0; border-radius: 0; background: var(--tl-cobalt); color: #fff; font: 600 15px var(--tl-font); cursor: pointer; }
html[data-look="tiles"] .tl-btn-primary:hover:not(:disabled) { background: var(--tl-link-hover); }
html[data-look="tiles"] .tl-btn-primary:disabled { opacity: .6; cursor: progress; }
html[data-look="tiles"] .tl-login-card .tl-btn-primary { margin-top: 14px; }
html[data-look="tiles"] .tl-login-alt { margin-top: 6px; text-align: center; }
html[data-look="tiles"] .tl-login-error { padding: 10px 12px; background: #FCEBEA; color: var(--tl-red); font-size: 14px; }
html[data-look="tiles"] .tl-login-ok { padding: 10px 12px; background: #E5F3EB; color: #176B50; font-weight: 600; text-align: center; }
html[data-look="tiles"] .tl-login-foot { padding: 12px 22px; border-top: 1px solid var(--tl-line); font-size: 12px; color: var(--tl-muted); }
html[data-look="tiles"] .tl-popup { position: fixed; top: 66px; right: 20px; z-index: 9999; width: min(360px, calc(100% - 40px)); background: #fff; border: 1px solid var(--tl-line); border-top: 4px solid var(--tl-red); box-shadow: 0 12px 32px rgba(20,35,55,.18); padding: 18px 20px; font-family: var(--tl-font); }
html[data-look="tiles"] .tl-popup-title { font-size: 22px; font-weight: 300; color: var(--tl-red); text-transform: lowercase; }
html[data-look="tiles"] .tl-popup p { margin: 6px 0 14px; color: var(--tl-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-login-mosaic { display: none; }
  html[data-look="tiles"] .tl-login-main { padding: 24px 12px; align-items: flex-start; }
}

/* ---------- mobile-number sign in (same markup as classic, Live Tiles styling) ---------- */
html[data-look="tiles"] body.page-mobile-login { background: var(--tl-ground) !important; font-family: var(--tl-font) !important; }
html[data-look="tiles"] body.page-mobile-login .page-wrapper { background: var(--tl-ground) !important; min-height: 100vh; display: flex; flex-direction: column; }
html[data-look="tiles"] body.page-mobile-login .site-header { background: var(--tl-shell) !important; box-shadow: none !important; border: 0 !important; }
html[data-look="tiles"] body.page-mobile-login .header-inner { min-height: 50px; padding: 0 22px !important; display: flex; align-items: center; gap: 14px; max-width: none !important; }
html[data-look="tiles"] body.page-mobile-login .site-title { color: #fff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; }
html[data-look="tiles"] body.page-mobile-login .site-label { color: #fff !important; opacity: .9; font-size: 14px !important; }
html[data-look="tiles"] body.page-mobile-login .main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px !important; background: none !important; }
html[data-look="tiles"] body.page-mobile-login .login-card { width: 100%; max-width: 400px !important; border-radius: 0 !important; border: 1px solid var(--tl-line) !important; border-top: 4px solid var(--tl-cobalt) !important; box-shadow: none !important; background: #fff !important; }
html[data-look="tiles"] body.page-mobile-login .card-body { padding: 28px !important; }
html[data-look="tiles"] body.page-mobile-login .login-title { font: 300 36px/1.1 var(--tl-font) !important; color: var(--tl-link) !important; text-transform: lowercase; letter-spacing: -1px; text-align: left !important; margin: 0 0 4px !important; }
html[data-look="tiles"] body.page-mobile-login .login-title::after { content: "."; color: var(--tl-ink); }
html[data-look="tiles"] body.page-mobile-login .login-subtitle { color: var(--tl-muted) !important; text-align: left !important; font-size: 14px !important; }
html[data-look="tiles"] body.page-mobile-login .form-label { font-size: 13px !important; font-weight: 600 !important; color: var(--tl-ink) !important; }
html[data-look="tiles"] body.page-mobile-login .form-control { height: 44px !important; border-radius: 0 !important; border: 1px solid #C8D3E0 !important; box-shadow: none !important; font: 400 15px var(--tl-font) !important; }
html[data-look="tiles"] body.page-mobile-login .form-control:focus { border-color: var(--tl-cobalt) !important; outline: 2px solid var(--tl-cobalt) !important; outline-offset: -1px; }
html[data-look="tiles"] body.page-mobile-login .btn-primary { height: 46px; width: 100%; border-radius: 0 !important; background: var(--tl-cobalt) !important; border: 0 !important; box-shadow: none !important; font: 600 15px var(--tl-font) !important; }
html[data-look="tiles"] body.page-mobile-login .back-link { color: var(--tl-link) !important; font-weight: 600; font-size: 13px; }
html[data-look="tiles"] body.page-mobile-login .error-message { border-radius: 0 !important; background: #FCEBEA !important; color: var(--tl-red) !important; border: 0 !important; }
html[data-look="tiles"] body.page-mobile-login .site-footer { background: transparent !important; border-top: 1px solid var(--tl-line) !important; color: var(--tl-muted) !important; text-align: left !important; padding: 12px 22px !important; font-size: 12px !important; }
html[data-look="tiles"] body.page-mobile-login .modal-content { border-radius: 0 !important; border: 0 !important; border-top: 4px solid var(--tl-cobalt) !important; }
html[data-look="tiles"] body.page-mobile-login .modal-title { font: 300 26px var(--tl-font) !important; color: var(--tl-link); text-transform: lowercase; }

/* ---------- Metro flattening for every page in the shell: square corners, no drop shadows, one font.
   Round things that carry meaning (donuts, dots, avatars' presence rings, spinners, switches) keep their shape. ---------- */
html[data-look="tiles"] .tl-content *:not([class*="donut"]):not([class*="ring"]):not([class*="dot"]):not([class*="spinner"]):not([class*="loader"]):not([class*="switch"]):not([class*="knob"]):not([class*="thumb"]):not([class*="circle"]):not([class*="radio"]):not(input[type=radio]):not(input[type=checkbox]):not(svg *) {
  border-radius: 0 !important;
}
html[data-look="tiles"] .tl-content *:not(.tl-flyout):not([class*="modal"]):not([class*="popup"]):not([class*="dropdown"]):not([class*="menu"]):not([class*="toast"]):not([class*="drawer"]) {
  box-shadow: none !important;
}
/* v1.11: icon fonts keep their own font (the Conversation Workspace timeline icon showed as an empty box) */
html[data-look="tiles"] .tl-content *:not(svg):not(svg *):not(code):not(pre):not(.mono):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) { font-family: var(--tl-font) !important; }
html[data-look="tiles"] .tl-content :where(h1, h2, h3, h4) { letter-spacing: normal; }

/* ---------- compact density (owner, 12 Oct 2026): fit on one screen, no needless gaps or dividers ---------- */
html[data-look="tiles"] .tl-rail { padding: 8px 5px; gap: 1px; }
html[data-look="tiles"] .tl-brand { margin-bottom: 6px; }
html[data-look="tiles"] .tl-brand img { width: 32px; height: 32px; }
html[data-look="tiles"] .tl-rail-item { min-height: 52px; padding: 4px 2px; gap: 3px; }
html[data-look="tiles"] .tl-topbar { min-height: 44px; }
html[data-look="tiles"] .tl-workspaces a { height: 44px; }
html[data-look="tiles"] .tl-user-btn { min-height: 40px; }
html[data-look="tiles"] .tl-avatar { width: 28px; height: 28px; }
html[data-look="tiles"] .tl-user-recent { border-top: 1px solid var(--tl-row); border-bottom: 1px solid var(--tl-row); padding: 6px 0; margin: 4px 0; }
html[data-look="tiles"] .tl-user-recent .tl-label { display: block; padding: 2px 14px; }
html[data-look="tiles"] .tl-user-recent .tl-user-item { padding: 7px 14px; }
html[data-look="tiles"] .tl-content { padding: 10px 18px 16px !important; }
html[data-look="tiles"] .tl-headline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin: 0 0 10px; }
html[data-look="tiles"] .tl-headline h1 { font-size: 28px; letter-spacing: -.5px; line-height: 1.15; }
html[data-look="tiles"] .tl-headline p { margin: 0; font-size: 13px; }
html[data-look="tiles"] .tl-flyout-link { padding: 9px 20px; }
html[data-look="tiles"] .tl-flyout-head { padding-bottom: 6px; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-content { padding: 8px 10px 84px !important; }
  html[data-look="tiles"] .tl-headline h1 { font-size: 24px; }
  html[data-look="tiles"] .tl-bottombar { height: 60px; }
}
/* every page: compact fields and table rows on desktop, no stray rules */
@media (min-width: 761px) {
  html[data-look="tiles"] .tl-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select) {
    min-height: 0 !important; height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important;
  }
  html[data-look="tiles"] .tl-content :where(th, td) { padding-top: 7px !important; padding-bottom: 7px !important; }
}
html[data-look="tiles"] .tl-content hr { display: none; }

/* dashboard, compact */
html[data-look="tiles"] .tl-dash { gap: 10px; }
html[data-look="tiles"] .tl-dash-mosaic { grid-auto-rows: 52px; gap: 6px; }
html[data-look="tiles"] .tl-span-2x2 { grid-column: span 2; grid-row: span 2; }
html[data-look="tiles"] .tl-dash .tl-tile { padding: 8px 12px; gap: 4px; }
html[data-look="tiles"] .tl-dash .tl-num-xl { font-size: 40px; }
html[data-look="tiles"] .tl-dash .tl-num-l { font-size: 34px; }
html[data-look="tiles"] .tl-dash .tl-num-s { font-size: 24px; }
html[data-look="tiles"] .tl-of { display: inline !important; font-size: 14px !important; }
html[data-look="tiles"] .tl-tile-approval .tl-meter { display: block; margin: 5px 0 0; height: 6px; }
html[data-look="tiles"] .tl-tile-approval .tl-meter span { height: 6px; }
html[data-look="tiles"] .tl-dash-lists { gap: 10px; }
html[data-look="tiles"] .tl-panel-head { padding: 6px 12px; }
html[data-look="tiles"] .tl-row { padding: 6px 12px 6px 10px; gap: 10px; }
html[data-look="tiles"] .tl-row-main strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look="tiles"] .tl-action-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 6px; }
html[data-look="tiles"] .tl-action { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 12px !important; }
html[data-look="tiles"] .tl-action svg { flex: none; }
html[data-look="tiles"] .tl-action strong { font-size: 13.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  html[data-look="tiles"] .tl-dash .tl-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-dash .tl-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 6px; }
  html[data-look="tiles"] .tl-dash .tl-span-2x2 { grid-column: span 2; grid-row: span 2; }
  html[data-look="tiles"] .tl-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52px; }
  html[data-look="tiles"] .tl-row-main strong { white-space: normal; }
}

@media (max-width: 760px) {
  html[data-look="tiles"] .tl-dash .tl-mosaic { grid-auto-rows: auto; }
  html[data-look="tiles"] .tl-dash .tl-mosaic > .tl-tile { grid-row: auto !important; grid-column: span 2 !important; min-height: 70px; }
  html[data-look="tiles"] .tl-dash .tl-mosaic > .tl-span-3x2 { min-height: 104px; }
}

/* Legacy page CSS locks the body (overflow hidden, one viewport high) and scrolls inside .page-content.
   In the tiles frame the page itself scrolls once; long lists keep their own inner scroll areas. */
html[data-look="tiles"] body:has(.tl-shell):not(.tl-sheet-open) { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; min-height: 100vh; }

/* ---- fill the screen (owner, 12 Oct): the frame is exactly the window on a desktop; the content area is a column
   that pages can fill (their main list takes the remaining height). Too-small windows scroll the content area. ---- */
@media (min-width: 1101px) and (min-height: 560px) {
  html[data-look="tiles"] .tl-shell { height: 100vh; height: 100dvh; min-height: 0; }
  html[data-look="tiles"] .tl-main { height: 100%; min-height: 0; }
  html[data-look="tiles"] .tl-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
  html[data-look="tiles"] .tl-content > * { flex: none; }
  html[data-look="tiles"] .tl-content > :where(div:not([class]), div[class=""]) { display: contents; }
  /* Dashboard: the tiles grow with the window, the lists and actions follow */
  html[data-look="tiles"] .tl-content .tl-dash { flex: 1 1 auto; min-height: 0; }
  html[data-look="tiles"] .tl-dash .tl-dash-mosaic { flex: 3 1 0; min-height: 226px; grid-auto-rows: minmax(52px, 1fr); }
  html[data-look="tiles"] .tl-dash .tl-dash-lists { flex: 2 0 auto; align-items: stretch; }
  html[data-look="tiles"] .tl-dash .tl-panel { display: flex; flex-direction: column; min-height: 0; }
  html[data-look="tiles"] .tl-dash .tl-panel > .tl-row { flex: 1 1 auto; }
  html[data-look="tiles"] .tl-dash .tl-panel > .tl-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
}
/* quick actions: wrap and stretch so every row, the last one too, spans the full width */
html[data-look="tiles"] .tl-action-grid { display: flex !important; flex-wrap: wrap; }
html[data-look="tiles"] .tl-action-grid > .tl-action { flex: 1 1 170px; min-height: 48px; }
@media (max-width: 760px) { html[data-look="tiles"] .tl-action-grid > .tl-action { flex-basis: 40%; min-height: 52px; } }
/* legacy page CSS also locks <html> (overflow hidden, 100vh); in the tiles frame the document scrolls normally */
html[data-look="tiles"]:has(.tl-shell) { overflow: visible !important; height: auto !important; max-height: none !important; }
html[data-look="tiles"] body:has(.tl-shell):not(.tl-sheet-open) { max-height: none !important; }
html[data-look="tiles"] .tl-content.page-content { max-height: none !important; }

/* ---- task alerts in the app (owner, 12 Oct 2026) ---- */
html[data-look="tiles"] .tl-toasts { position: fixed; top: 52px; right: 12px; z-index: 3000; display: flex; flex-direction: column; gap: 6px; width: min(380px, calc(100vw - 24px)); }
html[data-look="tiles"] .tl-toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; background: #fff; color: var(--tl-ink);
  border: 1px solid var(--tl-line); border-left: 4px solid var(--tl-cobalt); box-shadow: 0 8px 24px rgba(20, 35, 55, .18); font-size: 13px; line-height: 1.35; }
html[data-look="tiles"] .tl-toast.is-urgent { border-left-color: var(--tl-red); }
html[data-look="tiles"] .tl-toast > svg { flex: none; margin-top: 1px; color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-toast.is-urgent > svg { color: var(--tl-red); }
html[data-look="tiles"] .tl-toast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-look="tiles"] .tl-toast-main strong { font-size: 13.5px; }
html[data-look="tiles"] .tl-toast-main a { color: var(--tl-link); font-weight: 600; align-self: flex-start; }
html[data-look="tiles"] .tl-toast > button { flex: none; border: 0; background: none; padding: 2px; cursor: pointer; color: var(--tl-muted); }
html[data-look="tiles"] .tl-user-item b { margin-left: 4px; }
html[data-look="tiles"] .tl-muted-item { color: var(--tl-muted) !important; cursor: default; font-size: 12.5px; }
@media (max-width: 760px) { html[data-look="tiles"] .tl-toasts { top: 48px; right: 8px; } }

/* ---------- icon scale (owner, 12 Oct 2026: "some icons are oversized with a lot of white space") ----------
   One scale for the whole system: menu icons 20 px, icons in buttons / rows 16 px, icon boxes 28 px (glyph 14–16 px),
   people / company initials 30 px. The rail is narrower (64 px) and Admin sits with the other menus. */
html[data-look="tiles"] .tl-rail { flex-basis: 64px; width: 64px; padding: 6px 4px; }
html[data-look="tiles"] .tl-rail-item { width: 56px; min-height: 46px; padding: 3px 2px; gap: 2px; font-size: 10.5px; }
html[data-look="tiles"] .tl-rail-item svg { width: 20px; height: 20px; }
html[data-look="tiles"] .tl-rail-item span { max-width: 54px; }
html[data-look="tiles"] .tl-rail-bottom { margin-top: 0; }
html[data-look="tiles"] .tl-brand img { width: 28px; height: 28px; }
html[data-look="tiles"] .tl-brand span { font-size: 9px; letter-spacing: 1.5px; }
html[data-look="tiles"] .tl-flyout { left: 64px; }
@media (min-width: 761px) { html[data-look="tiles"] .tl-shell:not(.tl-no-menu) { background: linear-gradient(to right, var(--tl-rail) 0 63px, var(--tl-rail-line) 63px 64px, transparent 64px); } }
@media (max-width: 760px) { html[data-look="tiles"] .tl-shell:not(.tl-no-menu) { background: none; } }

/* icon boxes inside pages (KPI / stat / status / module / list icons) */
html[data-look="tiles"] .tl-content :where(.module-icon, .time-icon, .pl-status-icon, .cp-kpi-icon, .workspace-nav-icon, .sv-status-icon,
  .metric-icon, .purchase-name-icon, .mu-stat-icon, .kpi-icon, .upload-icon, .via-icon, .status-icon, .stat-icon, .summary-icon, .card-icon) {
  width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px; max-height: 28px;
  flex: 0 0 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 12px !important; line-height: 1 !important; box-sizing: border-box !important;
}
html[data-look="tiles"] .tl-content :where(.module-icon, .time-icon, .pl-status-icon, .cp-kpi-icon, .workspace-nav-icon, .sv-status-icon,
  .metric-icon, .purchase-name-icon, .mu-stat-icon, .kpi-icon, .upload-icon, .via-icon, .status-icon, .stat-icon, .summary-icon, .card-icon) :where(svg, img, i) {
  width: 15px !important; height: 15px !important; font-size: 14px !important;
}
/* people and company initials */
html[data-look="tiles"] .tl-content :where(.cl-avatar, .utl-avatar, .summary-avatar, .company-avatar, .avatar-placeholder, .user-avatar, .profile-avatar) {
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; flex: 0 0 30px !important;
  font-size: 11.5px !important; line-height: 30px !important; padding: 0 !important; box-sizing: border-box !important;
}
/* icons inside buttons and rows never grow past the text */
html[data-look="tiles"] .tl-content :where(button, .btn, a[class*="btn"], [class*="-btn"]) > svg { width: 16px; height: 16px; flex: none; }
html[data-look="tiles"] .tl-user-menu { z-index: 3100; }
html[data-look="tiles"] .tl-user-item .tl-switch-state { margin-left: auto; padding-left: 10px; } html[data-look="tiles"] .tl-user-menu { min-width: 260px; }
html[data-look="tiles"] .tl-rating-btn { font: inherit; text-align: left; cursor: pointer; align-items: stretch; }

/* ---- ui-6 (owner 14 Oct 2026): tablet widths keep the top bar on one row (the name moved into the user menu) ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-look="tiles"] .tl-topbar { flex-wrap: nowrap; gap: 10px; padding: 0 14px; }
  html[data-look="tiles"] .tl-crumbs { flex: 1 1 auto; min-width: 0; }
  html[data-look="tiles"] .tl-workspaces { flex-wrap: nowrap; flex: none; }
  html[data-look="tiles"] .tl-workspaces a { padding: 0 8px; font-size: 13px; white-space: nowrap; }
  html[data-look="tiles"] .tl-user-meta { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  html[data-look="tiles"] .tl-crumb-section, html[data-look="tiles"] .tl-crumbs > span[aria-hidden] { display: none; }
}
/* release crm-7: the CRM menu has 21 entries; on a laptop-height screen they fit without scrolling */
@media (max-height: 900px) {
  html[data-look="tiles"] .tl-flyout-link { padding-top: 6px; padding-bottom: 6px; }
  html[data-look="tiles"] .tl-flyout-head { padding-bottom: 6px; font-size: 22px; }
  html[data-look="tiles"] .tl-link-heading { padding-top: 6px; }
}
/* v1.4: 24 CRM entries (Credit Note, its report, Sales Reports & GSTR-1) — tighter still on an 800 px-high laptop */
@media (max-height: 820px) {
  html[data-look="tiles"] .tl-flyout { padding: 12px 0; }
  html[data-look="tiles"] .tl-flyout-link { padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
  html[data-look="tiles"] .tl-flyout-head { padding-bottom: 4px; font-size: 20px; }
  html[data-look="tiles"] .tl-link-heading { padding-top: 4px; }
}

/* ---------- v1.1 layering scale (menu reliability, FINDINGS 242) ----------
   Page content (non-modal) ≤ 20 · top bar 30 · rail 40 · rail flyout / account menu / phone sheet 900 · page pop-ups and
   dialogs ≥ 1000 (their own values). Two legacy rules broke the scale and drew page parts over the menus: the Schedule
   filter bar (z-index 10000) and the Project List sticky headings (100). */
html[data-look="tiles"] .tl-flyout { z-index: 900; }
html[data-look="tiles"] .tl-sheet-overlay { z-index: 900; }
html[data-look="tiles"] .employee-utilization-page .filter-card { z-index: 20 !important; }
html[data-look="tiles"] .tl-content .pl-table th { z-index: 15 !important; }
/* rail labels: two lines instead of "Custom…" */
html[data-look="tiles"] .tl-rail-item span { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- v1.3 navigation (owner prompt 1.3: A1–A3, e, f, g) ---------- */
/* A1: Back / Forward on the top bar */
html[data-look="tiles"] .tl-histnav { display: inline-flex; gap: 2px; margin-left: -8px; }
html[data-look="tiles"] .tl-histnav-btn { all: unset; box-sizing: border-box; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; cursor: pointer; }
html[data-look="tiles"] .tl-histnav-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
html[data-look="tiles"] .tl-histnav-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
html[data-look="tiles"] .tl-histnav-btn:disabled { opacity: .4; cursor: default; }
/* A2 / A3: XYNC opens the Dashboard; the section name opens the section */
html[data-look="tiles"] a.tl-topbar-brand { color: #fff; text-decoration: none; }
html[data-look="tiles"] a.tl-crumb-section { color: #fff; text-decoration: none; }
html[data-look="tiles"] a.tl-topbar-brand:hover, html[data-look="tiles"] a.tl-crumb-section:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
html[data-look="tiles"] a.tl-headline-section { text-decoration: none; }
html[data-look="tiles"] a.tl-headline-section:hover { color: var(--tl-link); }
/* e / f: the section's pages on the headline row (one line; scrolls sideways when it does not fit) */
html[data-look="tiles"] .tl-headline.has-subnav { flex-wrap: nowrap; align-items: center; min-width: 0; }
html[data-look="tiles"] .tl-headline.has-subnav h1 { flex: none; white-space: nowrap; }
html[data-look="tiles"] .tl-subnav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--tl-line); }
html[data-look="tiles"] .tl-subnav::-webkit-scrollbar { display: none; }
html[data-look="tiles"] .tl-subnav-link { all: unset; box-sizing: border-box; flex: none; padding: 6px 9px; font-size: 13px; color: var(--tl-muted); white-space: nowrap; border-bottom: 3px solid transparent; cursor: pointer; }
html[data-look="tiles"] .tl-subnav-link:hover { color: var(--tl-link); }
html[data-look="tiles"] .tl-subnav-link:focus-visible { outline: 2px solid var(--tl-cobalt); outline-offset: -2px; }
html[data-look="tiles"] .tl-subnav-link.is-active { color: var(--tl-link); font-weight: 600; border-bottom-color: var(--tl-cobalt); }
html[data-look="tiles"] .tl-headline.has-subnav p { display: none; }
/* g: last visited pages, one line at the bottom of every page */
html[data-look="tiles"] .tl-history { display: flex; align-items: center; gap: 4px 14px; margin-top: 18px; padding: 8px 0 0; border-top: 1px solid var(--tl-line);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 13px; }
html[data-look="tiles"] .tl-history::-webkit-scrollbar { display: none; }
html[data-look="tiles"] .tl-history .tl-label { flex: none; }
html[data-look="tiles"] .tl-history a { flex: none; color: var(--tl-link); text-decoration: none; }
html[data-look="tiles"] .tl-history a:hover { text-decoration: underline; }
html[data-look="tiles"] .tl-history a + a::before { content: "·"; color: var(--tl-muted); margin-right: 14px; text-decoration: none; display: inline-block; }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-histnav { margin-left: -6px; }
  html[data-look="tiles"] .tl-histnav-btn { width: 30px; height: 40px; }
  html[data-look="tiles"] .tl-headline.has-subnav { flex-wrap: wrap; }
  html[data-look="tiles"] .tl-subnav { flex: 1 0 100%; margin: 4px 0 0; padding: 0; border-left: 0; border-bottom: 1px solid var(--tl-line); }
}
/* v1.3: a sub menu that does not fit fades at the side with more links */
html[data-look="tiles"] :is(.tl-subnav, .crm-pivots).is-overflow { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
html[data-look="tiles"] :is(.tl-subnav, .crm-pivots).is-scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
html[data-look="tiles"] :is(.tl-subnav, .crm-pivots).is-overflow.is-scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* v1.13: WhatsApp status buttons (wa/WaButton.tsx; the button's own look is in wa/whatsapp.ts) */
html[data-look="tiles"] .status-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html[data-look="tiles"] .task-card .card-bottom { align-items: center; }
html[data-look="tiles"] .task-card .card-bottom .xwa-btn { margin-left: 6px; }
html[data-look="tiles"] .st-wa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-look="tiles"] .bu-po > header .xwa-btn { margin-left: 4px; }
html[data-look="tiles"] .op-people .op-wa-row { display: flex; margin-top: 4px; }
html[data-look="tiles"] .pj-staff li > .xwa-btn { align-self: center; }
/* v1.22 the Installation check-in waiting for an answer */
.tl-checkin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;background:#FFF4DE;border-left:4px solid #9A5B00;color:#3D2A00;font-size:14px}
.tl-checkin svg{flex:none;width:20px;height:20px}
.tl-checkin span{flex:1 1 220px;min-width:0}
.tl-checkin-go{flex:none;background:#9A5B00;color:#fff;padding:6px 14px;font-weight:600;text-decoration:none}
.tl-checkin-go:hover,.tl-checkin-go:focus-visible{background:#7A4700;color:#fff}

/* v1.26 (owner): "Always keep Business units in top of the respective page, preferably on the right side."
   The unit of the page (a name, or a picker that filters the page) at the top right. */
html[data-look="tiles"] .unit-top{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;border:1px solid var(--cobalt,#0b5cad);
  border-left-width:4px;background:#eef4fb;color:var(--ink,#1b2a3a);font-size:13px;line-height:1.2;white-space:nowrap;max-width:100%}
html[data-look="tiles"] .unit-top .unit-top-lbl{font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--cobalt,#0b5cad)}
html[data-look="tiles"] .unit-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
html[data-look="tiles"] .unit-top select{min-width:160px;max-width:260px;padding:4px 28px 4px 8px;font:inherit;font-weight:600;border:1px solid var(--line,#cfd8e3);background:#fff}
html[data-look="tiles"] .unit-top-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 10px}
@media (max-width:640px){html[data-look="tiles"] .unit-top{margin-left:0;width:100%;justify-content:space-between}html[data-look="tiles"] .unit-top select{min-width:0;flex:1}}
@media print{html[data-look="tiles"] .unit-top,html[data-look="tiles"] .unit-top-row{display:none!important}}
html[data-look="tiles"] .dialog-head .unit-top{margin:0 10px 0 auto;align-self:center}
html[data-look="tiles"] .page-heading .heading-actions .unit-top{order:99}
html[data-look="tiles"] .unit-top-field select{min-width:180px}

/* v1.27 (owner): "Increase the width of the quotations popup so that more details can be viewed in a screen. Implement the
   same approach wherever substantial space is required … Optimize the size of each field … make it compact."
   Live Tiles: the quotation, lead and customer windows use nearly the whole screen; the forms there and in the bill
   editor lay their fields in 6 columns (4 on a laptop, 2 on a tablet, 1 on a phone) with smaller labels and boxes;
   the wide windows of the other pages (materials, suppliers, purchase orders, Customer PO …) are wider too. */
html[data-look="tiles"] :is(dialog#quoteDialog, dialog#leadDialog, dialog#customerDialog){width:min(1600px,calc(100vw - 32px))!important;max-width:none;max-height:calc(100vh - 24px)}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog) .dialog-head{padding:10px 16px}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog) .dialog-body{padding:12px 16px;gap:10px}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog) .dialog-foot{padding:8px 16px}
html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3){grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px}
html[data-look="tiles"] :is(#quoteDialog .form-grid, #billForm .form-grid.cols-3) > .span-2{grid-column:span 4}
html[data-look="tiles"] :is(#quoteDialog .form-grid, #billForm .form-grid.cols-3) > .field:has(textarea, [data-address-lines], .tl-addr-line){grid-column:span 2}
html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .field{grid-column:span 2}
html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .field:has(textarea, [data-address-lines], .tl-addr-line){grid-column:span 3}
html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3) > :is(.span-3, [class*="span-"]:has(h3)),
html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .span-2,
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) .form-grid > .field:has([data-extra-contacts]){grid-column:1 / -1}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) .field{gap:3px;min-width:0}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) .field > label{font-size:10px;letter-spacing:.4px}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) .field :is(input:not([type=checkbox]):not([type=radio]), select, textarea){padding:6px 8px;min-height:34px;font-size:13px}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) .field textarea{min-height:58px}
html[data-look="tiles"] :is(#quoteDialog, #leadDialog, #customerDialog, #billForm) h3{font-size:14px}
html[data-look="tiles"] :is(#quoteDialog, #billForm) .quote-form-section .card-header, html[data-look="tiles"] #billForm .card-header{padding:8px 12px}
html[data-look="tiles"] :is(#quoteDialog, #billForm) table :is(input, select){padding:5px 6px;min-height:32px;font-size:13px}
@media (max-width:1280px){
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3){grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #billForm .form-grid.cols-3) > .span-2{grid-column:span 4}
}
@media (max-width:900px){
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3){grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3) > :is(.field, .span-2){grid-column:span 1}
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3) > :is(.field:has(textarea, [data-address-lines], .tl-addr-line), .span-3, [class*="span-"]:has(h3), .field:has([data-extra-contacts])){grid-column:1 / -1}
}
@media (max-width:600px){
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3){grid-template-columns:1fr}
  html[data-look="tiles"] :is(#quoteDialog .form-grid, #leadDialog .form-grid, #customerDialog .form-grid, #billForm .form-grid.cols-3) > *{grid-column:1 / -1!important}
}
/* the wide windows of the React pages */
html[data-look="tiles"] .op-dialog.wide{width:min(1360px,100%)}
html[data-look="tiles"] .op-dialog.wide .op-dbody{padding:8px 16px 12px;gap:8px}
html[data-look="tiles"] .op-dialog.wide :is(.op-grid, .op-grid.bu-grid3){grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px}
html[data-look="tiles"] .op-dialog.wide .op-field{font-size:11.5px;gap:3px}
html[data-look="tiles"] .op-dialog.wide .op-field :is(input:not([type=radio]):not([type=checkbox]), select, textarea){padding:6px 8px;font-size:13px}
@media (max-width:1100px){html[data-look="tiles"] .op-dialog.wide :is(.op-grid, .op-grid.bu-grid3){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){html[data-look="tiles"] .op-dialog.wide :is(.op-grid, .op-grid.bu-grid3){grid-template-columns:1fr}}
/* the quotation's Address, Bill To and Ship To side by side on one row */
html[data-look="tiles"] #quoteDialog .form-grid > .field:has(#coreQuoteMasterAddress){grid-column:1 / span 2}
@media (max-width:900px){html[data-look="tiles"] #quoteDialog .form-grid > .field:has(#coreQuoteMasterAddress){grid-column:1 / -1}}
/* the lead and customer windows: a long field takes 4 of the 6 columns; PIN code and State join the row */
html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .field.span-2{grid-column:span 4}
html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .field.span-2:has(textarea, [data-address-lines], .tl-addr-line){grid-column:span 3}
html[data-look="tiles"] :is(#leadDialog, #customerDialog) .form-grid > .customer-location-status-row{display:contents}
html[data-look="tiles"] :is(#leadDialog, #customerDialog) .form-grid > .customer-location-status-row > .field{grid-column:span 2}
@media (max-width:900px){html[data-look="tiles"] :is(#leadDialog .form-grid, #customerDialog .form-grid) > .field.span-2, html[data-look="tiles"] :is(#leadDialog, #customerDialog) .form-grid > .customer-location-status-row > .field{grid-column:1 / -1}}
@media (max-width:640px){
  html[data-look="tiles"] .dialog-head:has(.unit-top){flex-wrap:wrap}
  html[data-look="tiles"] .dialog-head:has(.unit-top) > div:first-child{flex:1 1 60%}
  html[data-look="tiles"] .dialog-head .unit-top{order:3;flex:1 1 100%;margin:6px 0 0}
}
html[data-look="tiles"] #billForm .form-grid > .field:has([name="billing_address"]){grid-column:1 / span 2}
@media (max-width:900px){html[data-look="tiles"] #billForm .form-grid > .field:has([name="billing_address"]){grid-column:1 / -1}}

/* ------------------------------------------------------------------ v1.28 (owner, 28 Oct 2026): business unit skins
   Each business unit has its colour (Admin → Business Units). On the unit's pages (CRM, Customer PO and Projects,
   Purchase, Stores, Import / Export, Courier, Templates) the top bar, the menu and the buttons take it (shell/workspace.ts
   sets the variables on <html>); common pages keep the standard colours. */
html[data-look="tiles"] .tl-ws { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 10px 2px 8px; margin-left: 6px;
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; max-width: 300px; }
html[data-look="tiles"] .tl-ws-swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--u, #fff) 40%, #fff); box-shadow: 0 0 0 2px #fff; }
html[data-look="tiles"] .tl-ws-sheet .tl-ws-swatch { background: var(--u, #fff); }
html[data-look="tiles"] .tl-ws.is-all .tl-ws-swatch { background: conic-gradient(#0B5CAD 0 33%, #C62828 0 66%, #00796B 0); }
html[data-look="tiles"] .tl-ws.is-common .tl-ws-swatch { background: transparent; box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #fff; outline: 2px dashed var(--u, #fff); outline-offset: 1px; }
html[data-look="tiles"] .tl-ws.is-common { border-style: dashed; }
html[data-look="tiles"] .tl-ws-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
html[data-look="tiles"] .tl-ws-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; opacity: .85; }
html[data-look="tiles"] .tl-ws select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600;
  padding: 0 16px 0 0; margin: 0; max-width: 240px; text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px top 55%, right 1px top 55%; background-size: 4px 4px; background-repeat: no-repeat; }
html[data-look="tiles"] .tl-ws select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-look="tiles"] .tl-ws select option { color: var(--tl-ink); background: #fff; }
html[data-look="tiles"] .tl-ws-sheet { margin: 0; border-color: var(--tl-line); background: #fff; color: var(--tl-ink); width: 100%; max-width: none; }
html[data-look="tiles"] .tl-ws-sheet .tl-ws-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--tl-line); }
html[data-look="tiles"] .tl-ws-sheet select { width: 100%; max-width: none; }
/* the unit's colour along the top of its pages, with its name */
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .tl-topbar { box-shadow: inset 0 -3px 0 rgba(255,255,255,.35); }
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .tl-rail { border-right-color: var(--tl-rail-line); }
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .unit-top { border-color: var(--tl-unit); background: var(--tl-unit-soft); }
html[data-look="tiles"][data-unit-skin][data-page-kind="unit"] .unit-top .unit-top-lbl { color: var(--tl-unit); }
@media (max-width: 760px) {
  html[data-look="tiles"] .tl-ws-top { padding: 2px 6px; max-width: 46vw; }
  html[data-look="tiles"] .tl-ws-top .tl-ws-lbl { display: none; }
  html[data-look="tiles"] .tl-ws-top select { max-width: 34vw; font-size: 12px; }
}
@media print { html[data-look="tiles"] .tl-ws, .v128-ws-pop { display: none !important; } }

/* the popup: a business unit chosen; a common page; back in the unit */
.v128-ws-pop { position: fixed; z-index: 2147483000; left: 50%; top: 64px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  width: min(520px, calc(100vw - 24px)); padding: 12px 12px 12px 14px; background: #fff; color: #1B2A3A; border: 1px solid #CBD6E1;
  border-left: 6px solid var(--u, #546476); box-shadow: 0 10px 30px rgba(20,40,70,.22); font: 14px/1.4 'Segoe UI', -apple-system, system-ui, sans-serif;
  animation: v128-pop-in .18s ease-out; }
.v128-ws-pop.is-leaving { opacity: 0; transition: opacity .4s; }
.v128-ws-pop-swatch { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--u, #546476); }
.v128-ws-pop-swatch.is-common { background: repeating-linear-gradient(45deg, #CBD6E1 0 4px, #fff 4px 8px); border: 2px solid #546476; }
.v128-ws-pop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v128-ws-pop-body strong { font-size: 15px; }
.v128-ws-pop-body span { color: #586A7C; font-size: 13px; }
.v128-ws-pop-ok { flex: none; min-height: 34px; padding: 0 14px; border: 1px solid #CBD6E1; background: #F5F7FA; color: #1B2A3A; font: inherit; font-weight: 600; cursor: pointer; }
.v128-ws-pop-ok:focus-visible { outline: 2px solid #0965B5; outline-offset: 2px; }
@keyframes v128-pop-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .v128-ws-pop { animation: none; } }

/* Activity Log: the business unit an action was done in */
html[data-look="tiles"] .activity-log-unit { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--u, #546476); color: var(--u, #546476); background: #fff; white-space: nowrap; }
html[data-look="tiles"] .activity-log-unit::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--u, #546476); }
/* Business Units: the colour of a unit */
html[data-look="tiles"] .v128-skin-preview { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; color: #fff; font-weight: 600; font-size: 12px; background: var(--u, #1459A7); }
html[data-look="tiles"] .v128-skin { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
html[data-look="tiles"] .v128-skin::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--u, #1459A7); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }