/* Live Tiles — Projects and Site Visits (release ui-3). Same pages and scripts; layout only. Compact, fills the window. */

/* ---- Project Dashboard (tiles component) ---- */
/* v1.11: the page grows with the live dashboard (it was held to the window height, so "Recently visited" was drawn over Recent project activity) */
html[data-look="tiles"] .tl-pd { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
html[data-look="tiles"] .tl-pd-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); flex: 1 1 auto; gap: 6px; }
html[data-look="tiles"] .tl-pd-health { grid-column: span 4; grid-row: span 3; background: #E0E7F0; color: #314E6A; justify-content: flex-start !important; gap: 18px !important; padding: 16px 18px !important; }
html[data-look="tiles"] .tl-pd-health .tl-num-xl { font-size: 64px; }
html[data-look="tiles"] .tl-pd-module { grid-column: span 4; }
html[data-look="tiles"] .tl-pd-module small { font-size: 12px !important; line-height: 1.35; margin-top: 2px; }
html[data-look="tiles"] .tl-pd-n { font-size: 13px; opacity: .7; }
html[data-look="tiles"] .tl-pd-meters { display: flex; flex-direction: column; gap: 10px; }
html[data-look="tiles"] .tl-pd-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; }
html[data-look="tiles"] .tl-pd-meter .tl-meter { grid-column: 1 / -1; display: block; height: 6px; margin: 0 !important; background: rgba(49, 78, 106, .18); }
html[data-look="tiles"] .tl-pd-meter .tl-meter span { display: block; height: 6px; background: var(--tl-cobalt); }
@media (max-width: 1100px) {
  html[data-look="tiles"] .tl-pd-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  html[data-look="tiles"] .tl-pd-health { grid-column: 1 / -1; grid-row: auto; }
  html[data-look="tiles"] .tl-pd-module { grid-column: span 1; min-height: 104px; }
  html[data-look="tiles"] .tl-pd-module small { display: none !important; }
}

/* ---- module links (each Projects page repeats them as a strip of cards): one line of pivots ---- */
html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid) {
  display: flex !important; flex-wrap: wrap; gap: 2px 4px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 8px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; grid-template-columns: none !important;
}
html[data-look="tiles"] .tl-content .workspace-nav { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid) > a {
  display: inline-flex !important; align-items: center !important; height: 30px !important; min-height: 0 !important; width: auto !important; padding: 0 10px !important;
  background: #fff !important; border: 1px solid var(--tl-line) !important; box-shadow: none !important; color: var(--tl-link) !important; text-decoration: none !important; flex: none !important;
}
html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid) > a:hover { background: #E8F2FC !important; }
html[data-look="tiles"] .tl-content :where(.pl-nav-badge, .nav-badge, .cl-nav-badge, .utl-nav-badge, .cp-kpi-icon, .workspace-nav-icon, .workspace-nav-badge,
  .pl-nav-desc, .nav-desc, .cl-nav-desc, .utl-nav-desc, .workspace-nav-desc) { display: none !important; }
html[data-look="tiles"] .tl-content .cp-kpi-strip > a span { display: none !important; }
html[data-look="tiles"] .tl-content :where(.pl-nav-name, .nav-name, .cl-nav-name, .utl-nav-name, .workspace-nav-title, .cp-kpi strong) {
  font: 600 13px/1 var(--tl-font) !important; margin: 0 !important; color: inherit !important; white-space: nowrap;
}
html[data-look="tiles"] .tl-content .workspace-nav-card > div:not(.workspace-nav-top) { padding: 0 !important; }
html[data-look="tiles"] .tl-content .workspace-nav-top { display: none !important; }
/* on a desktop the links sit on the headline row */
@media (min-width: 1101px) {
  html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid) {
    margin: -40px 0 10px auto !important; width: fit-content !important; max-width: 70%; justify-content: flex-end; position: relative; z-index: 2;
  }
}

/* ---- status / count strips: Live Tiles row ---- */
html[data-look="tiles"] .tl-content :where(.pl-status-grid, .cl-meta-strip, .utl-meta-strip) { gap: 6px !important; margin: 0 0 8px !important; }
html[data-look="tiles"] .tl-content :where(.pl-status-box, .cl-meta-card, .utl-meta-card, .utl-task-summary-card) {
  min-height: 0 !important; height: auto !important; padding: 8px 12px !important; background: #E1E6EC !important; color: #4F5E6E !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important;
}
html[data-look="tiles"] .tl-content .pl-status-box:nth-child(1) { background: var(--tl-cobalt) !important; color: #fff !important; }
html[data-look="tiles"] .tl-content .pl-status-box:nth-child(2) { background: #E5E0F2 !important; color: #574084 !important; }
html[data-look="tiles"] .tl-content .pl-status-box:nth-child(3) { background: var(--tl-teal) !important; color: #fff !important; }
html[data-look="tiles"] .tl-content .pl-status-box:nth-child(4) { background: #FAE5D6 !important; color: #89451E !important; }
html[data-look="tiles"] .tl-content .pl-status-box:nth-child(5) { background: #FFF3D9 !important; color: #865300 !important; }
html[data-look="tiles"] .tl-content .pl-status-box * { color: inherit !important; font-size: 12.5px; }
html[data-look="tiles"] .tl-content .pl-status-box :where(strong, .pl-status-count, h2, h3) { font-size: 26px !important; font-weight: 300 !important; line-height: 1 !important; }
html[data-look="tiles"] .tl-content .pl-status-icon { display: none !important; }
html[data-look="tiles"] .tl-content :where(.cl-meta-card, .utl-meta-card, .utl-task-summary-card) > * { font-size: 13px !important; }
html[data-look="tiles"] .tl-content :where(.cl-meta-card, .utl-meta-card, .utl-task-summary-card) > span { font-size: 11px !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
html[data-look="tiles"] .tl-content :where(.cl-meta-card, .utl-meta-card, .utl-task-summary-card) > strong { font-size: 18px !important; margin-top: 2px; }
/* User Task List showed the same four counts twice */
html[data-look="tiles"] .tl-content .utl-meta-strip { display: none !important; }

/* ---- page heroes: the shell headline is the title; keep their controls only ---- */
html[data-look="tiles"] .tl-content :where(.cl-control-card, .utl-control-card) { padding: 8px 12px !important; margin: 0 0 8px !important; background: #fff !important; border: 1px solid var(--tl-line) !important; box-shadow: none !important; }
html[data-look="tiles"] .tl-content :where(.cl-control-inner, .utl-control-inner) { gap: 12px !important; align-items: center !important; }
html[data-look="tiles"] .tl-content :where(.cl-control-inner, .utl-control-inner) > div:first-child { display: none !important; }
html[data-look="tiles"] .tl-content :where(.cl-select-group, .utl-select-group, .utl-control-inner form) { display: flex !important; align-items: center; gap: 10px; }
html[data-look="tiles"] .tl-content :where(.cl-control-card, .utl-control-card)::before, html[data-look="tiles"] .tl-content :where(.cl-control-card, .utl-control-card)::after { display: none !important; }

/* ---- buttons: cobalt, square ---- */
html[data-look="tiles"] .tl-content :where(.cp-submit, .cp-project-form button[type="submit"], .create-btn, .sv-create-btn, .top-actions a, .btn-primary, .utl-panel-head a, .primary-btn) {
  background: var(--tl-cobalt) !important; background-image: none !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
}

/* ---- fill the window (desktop) ---- */
@media (min-width: 1101px) and (min-height: 560px) {
  html[data-look="tiles"] .tl-content :where(.project-list-page, .pl-main, .pl-panel, .create-project-page, .cp-main, .cp-panel, .cp-project-form,
    .project-task-list-shell-page, .project-task-list-shell-page > .app-main, .project-task-board-page, .conversation-workspace-page, .conversation-workspace-page > .main,
    .conversation-list-page, .cl-page-grid, .user-task-list-page, .utl-page-grid, .utl-panel, .sv-page, .sv-sections-scroll, .sv-sections-scroll > .active-tab-panel,
    .site-create-page, .site-create-scroll, .create-shell, .create-shell > .form-card, .create-shell > .form-card > .form-body) {
    flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column !important;
    margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; align-self: stretch;
  }
  html[data-look="tiles"] .tl-content :where(.pl-main, .cp-main, .project-task-list-shell-page > .app-main, .conversation-workspace-page > .main, .cl-page-grid, .utl-page-grid) { gap: 0 !important; padding: 0 !important; }
  html[data-look="tiles"] .tl-content .pl-panel > .pl-table-wrapper { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; max-height: none !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page > .board { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; grid-template-rows: minmax(0, 1fr) !important; }
  html[data-look="tiles"] .tl-content .project-task-board-page > .board > * { min-height: 0 !important; overflow-y: auto !important; max-height: none !important; }
  html[data-look="tiles"] .tl-content .conversation-workspace-page .project-grid { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; max-height: none !important; align-content: start; }
  html[data-look="tiles"] .tl-content .cl-workspace { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; grid-template-rows: minmax(0, 1fr) !important; }
  html[data-look="tiles"] .tl-content .cl-workspace > .cl-panel { min-height: 0 !important; height: auto !important; max-height: none !important; }
  html[data-look="tiles"] .tl-content :where(.cl-chat-body, .cl-task-list) { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; }
  html[data-look="tiles"] .tl-content .utl-panel > .utl-task-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; align-content: start; }
  html[data-look="tiles"] .tl-content .sv-sections-scroll > .active-tab-panel > .table-card { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; max-height: none !important; height: auto !important; }
  html[data-look="tiles"] .tl-content .create-shell { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr) !important; grid-template-rows: minmax(0, 1fr); }
  html[data-look="tiles"] .tl-content .create-shell > .summary-card { min-height: 0 !important; height: auto !important; }
  /* the description boxes take the extra height */
  html[data-look="tiles"] .tl-content .cp-project-form { display: grid !important; grid-template-rows: repeat(3, auto) minmax(0, 1fr) auto auto; align-content: stretch !important; }
  html[data-look="tiles"] .tl-content .cp-project-form textarea { height: 100% !important; min-height: 60px !important; resize: none; }
}
html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid, .workspace-nav) { flex: none !important; overflow: visible !important; }
/* titles inside the page that repeat the headline */
html[data-look="tiles"] .tl-content :where(.cp-panel-header, .conversation-workspace-page .top-left) { display: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-bar { padding: 0 !important; margin: 0 0 8px !important; background: none !important; border: 0 !important; box-shadow: none !important; display: flex !important; gap: 8px !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-bar::before { display: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-search { flex: 1; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .project-grid { gap: 6px !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .project-grid .card { padding: 8px 10px !important; border: 1px solid var(--tl-line) !important; border-left: 4px solid var(--tl-violet) !important; box-shadow: none !important; }

/* ---- Site Visit List ---- */
@media (min-width: 1101px) {
  html[data-look="tiles"] .tl-content .sv-toolbar { margin: -46px 0 8px auto !important; width: fit-content !important; position: relative; z-index: 2; gap: 8px !important; }
}
html[data-look="tiles"] .tl-content .sv-toolbar :where(.sv-create-btn, .sv-search) { height: 36px !important; }
html[data-look="tiles"] .tl-content .sv-status-overview { gap: 6px !important; margin: 0 0 8px !important; }
html[data-look="tiles"] .tl-content .sv-status-card { min-height: 0 !important; padding: 8px 12px !important; border: 0 !important; box-shadow: none !important; background: #E1E6EC !important; color: #4F5E6E !important; text-align: left; }
html[data-look="tiles"] .tl-content .sv-status-card.active { background: var(--tl-cobalt) !important; color: #fff !important; }
html[data-look="tiles"] .tl-content .sv-status-card * { color: inherit !important; }
html[data-look="tiles"] .tl-content .sv-status-card .sv-status-icon { display: none !important; }
html[data-look="tiles"] .tl-content .sv-status-text strong, html[data-look="tiles"] .tl-content .sv-status-text b { font-size: 24px !important; font-weight: 300 !important; }
html[data-look="tiles"] .tl-content .sv-sections-scroll table { width: 100% !important; table-layout: auto; }
html[data-look="tiles"] .tl-content .sv-sections-scroll :where(th, td) { padding-left: 6px !important; padding-right: 6px !important; }
html[data-look="tiles"] .tl-content .sv-sections-scroll td :where(select, input[type="date"]) { min-width: 0 !important; width: 100% !important; max-width: 150px; }
html[data-look="tiles"] .tl-content .sv-sections-scroll td :where(button, .btn) { padding: 0 10px !important; height: 32px !important; white-space: nowrap; }
html[data-look="tiles"] .tl-content .sv-sections-scroll .section-header { padding: 6px 10px !important; }

/* ---- Create Site Visit: the description takes the extra height ---- */
@media (min-width: 1101px) and (min-height: 560px) {
  html[data-look="tiles"] .tl-content .create-shell > .form-card > .form-body > form { flex: 1 1 auto; display: flex; flex-direction: column; }
  html[data-look="tiles"] .tl-content .create-shell .form-body textarea { flex: 1 1 auto; min-height: 80px !important; height: auto !important; resize: none; }
  html[data-look="tiles"] .tl-content .create-shell .form-body :where(.field:has(textarea), .form-group:has(textarea), div:has(> textarea)) { flex: 1 1 auto; display: flex; flex-direction: column; }
  html[data-look="tiles"] .tl-content .create-shell > .summary-card { align-self: start; }
}
@media (min-width: 1101px) {
html[data-look="tiles"] .tl-content .pending-action-panel, html[data-look="tiles"] .tl-content [class*="-action-panel"] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto auto !important; gap: 6px !important; }
html[data-look="tiles"] .tl-content [class*="-action-panel"] > :where(button, .btn) { min-width: 0 !important; width: auto !important; }
}
html[data-look="tiles"] .tl-content .sv-sections-scroll td :where(select, input[type="date"], input[type="datetime-local"]) { max-width: none !important; }
html[data-look="tiles"] .tl-content :where(.conversation-workspace-page, .conversation-workspace-page > .main) { overflow: visible !important; }
html[data-look="tiles"] .tl-content .workspace-nav-card::before, html[data-look="tiles"] .tl-content .workspace-nav-card::after { display: none !important; }
html[data-look="tiles"] .tl-content .workspace-nav-card > div:not(.workspace-nav-top) { display: contents !important; }
html[data-look="tiles"] .tl-content .workspace-nav-card { justify-content: center !important; }

/* ---- Search Conversations (in the shared frame) ---- */
html[data-look="tiles"] .sc-tiles-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
html[data-look="tiles"] .sc-tiles-body :where(.app-topbar, .app-footer) { display: none !important; }
html[data-look="tiles"] .sc-tiles-body .app-shell { min-height: 0 !important; height: auto !important; flex: 1 1 auto; background: none !important; }
html[data-look="tiles"] .sc-tiles-body .app-main { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; flex: 1 1 auto; min-height: 0; gap: 8px !important; }
html[data-look="tiles"] .sc-tiles-body .search-kpi-strip { display: flex !important; flex-wrap: wrap; gap: 2px 4px !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; flex: none !important; overflow: visible !important; }
html[data-look="tiles"] .sc-tiles-body .search-kpi-strip > a { display: inline-flex !important; align-items: center; height: 30px !important; min-height: 0 !important; padding: 0 10px !important; background: #fff !important; border: 1px solid var(--tl-line) !important; box-shadow: none !important; color: var(--tl-link) !important; }
html[data-look="tiles"] .sc-tiles-body .search-kpi-strip :where(.kpi-icon, span) { display: none !important; }
html[data-look="tiles"] .sc-tiles-body .search-kpi-strip strong { font: 600 13px/1 var(--tl-font) !important; color: inherit !important; }
@media (min-width: 1101px) {
  html[data-look="tiles"] .sc-tiles-body .search-kpi-strip { margin: -40px 0 2px auto !important; width: fit-content; position: relative; z-index: 2; }
}
html[data-look="tiles"] .sc-tiles-body .command-panel { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; flex: none !important; }
html[data-look="tiles"] .sc-tiles-body :where(.search-main-layout) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; gap: 8px !important; }
html[data-look="tiles"] .sc-tiles-body :where(.primary-action, .search-btn, button[type="submit"], .apply-btn, .view-btn) { background: var(--tl-cobalt) !important; background-image: none !important; box-shadow: none !important; }
html[data-look="tiles"] .sc-tiles-body :where(.app-shell, .app-main) { overflow: visible !important; }
@media (min-width: 1101px) and (min-height: 560px) {
  html[data-look="tiles"] .sc-tiles-body .search-main-layout { overflow: hidden !important; }
}
@media (max-width: 1100px) {
  html[data-look="tiles"] .tl-content .conversation-workspace-page .top-bar { flex-wrap: wrap !important; }
  html[data-look="tiles"] .tl-content .conversation-workspace-page .top-search { flex: 1 1 100%; }
  html[data-look="tiles"] .tl-content .sv-status-overview { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible !important; }
  html[data-look="tiles"] .tl-content .sv-status-card { min-width: 0 !important; width: auto !important; }
  html[data-look="tiles"] .tl-content .sv-toolbar { flex-wrap: wrap; }
  html[data-look="tiles"] .tl-content .sv-toolbar .sv-search-wrap { flex: 1 1 100%; width: auto !important; }
}
@media (max-width: 1100px) {
  html[data-look="tiles"] .tl-content :where(.pl-status-grid, .cl-meta-strip) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-look="tiles"] .tl-content .cl-meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-look="tiles"] .tl-content .conversation-workspace-page .project-grid { height: auto !important; max-height: none !important; overflow: visible !important; }
  html[data-look="tiles"] .tl-content :where(.conversation-workspace-page, .conversation-workspace-page > .main) { height: auto !important; max-height: none !important; }
}
html[data-look="tiles"] .tl-content :where(.cl-action-btn, .cl-panel-head a, .cl-panel-head button) { background: var(--tl-cobalt) !important; background-image: none !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
html[data-look="tiles"] .tl-content .pl-status-info { font-size: 12.5px !important; font-weight: 600; }
html[data-look="tiles"] .tl-content .pl-status-info > span { display: block; font-size: 26px !important; font-weight: 300 !important; line-height: 1.05; }
html[data-look="tiles"] .tl-content .pl-panel > .pl-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tl-label-2, #365D81) !important; padding: 8px 12px !important; margin: 0 !important; }
/* Project Task List board: white columns with a coloured top edge, like My Task */
html[data-look="tiles"] .tl-content .project-task-board-page > .board { gap: 6px !important; }
html[data-look="tiles"] .tl-content .project-task-board-page > .board > * { background: #fff !important; background-image: none !important; border: 1px solid var(--tl-line) !important; box-shadow: none !important; }

/* v1.1 (requirement 4): full multiline site / project addresses — entered in a text area, shown with their line breaks */
html[data-look="tiles"] textarea.tl-address { width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box; font: inherit; line-height: 1.4; }
html[data-look="tiles"] :is(td[data-label="Location"], #popup_location, #modalLocation, .pl-table td) { white-space: pre-line; }

/* ---------- v1.1 live Project Dashboard (requirement 10) ---------- */
html[data-look="tiles"] .pdl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
html[data-look="tiles"] .pdl-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: -4px; }
html[data-look="tiles"] .pdl-fresh { font-size: 12.5px; color: var(--tl-muted); }
html[data-look="tiles"] .pdl-fresh.is-stale { color: #8A4B00; font-weight: 600; }
html[data-look="tiles"] .pdl-refresh { all: unset; cursor: pointer; padding: 6px 14px; font-size: 13px; background: #fff; border: 1px solid #C8D3E0; color: var(--tl-link); }
html[data-look="tiles"] .pdl-refresh:hover:not(:disabled) { border-color: var(--tl-cobalt); }
html[data-look="tiles"] .pdl-refresh:disabled { opacity: .6; cursor: default; }
html[data-look="tiles"] .pdl-refresh:focus-visible { outline: 2px solid var(--tl-link); outline-offset: 2px; }
html[data-look="tiles"] .pdl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
html[data-look="tiles"] .pdl-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 78px; padding: 10px 12px; text-decoration: none; box-sizing: border-box; }
html[data-look="tiles"] .pdl-tile b { font-size: 30px; font-weight: 300; line-height: 1; }
html[data-look="tiles"] .pdl-tile span { font-size: 13px; }
html[data-look="tiles"] .pdl-tile:focus-visible { outline: 3px solid var(--tl-ink); outline-offset: 2px; }
html[data-look="tiles"] .tl-tile-red { background: var(--tl-red); color: #fff; }
html[data-look="tiles"] .tl-tile-slate { background: var(--tl-slate); color: #fff; }
html[data-look="tiles"] .pdl-note { margin: 0; font-size: 12px; color: var(--tl-muted); }
html[data-look="tiles"] .pdl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-look="tiles"] .pdl-card { background: #fff; border: 1px solid var(--tl-line); padding: 12px 14px; min-width: 0; }
html[data-look="tiles"] .pdl-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--tl-ink); }
html[data-look="tiles"] .pdl-wide { grid-column: 1 / -1; }
html[data-look="tiles"] .pdl-empty { margin: 0; color: var(--tl-muted); font-size: 13px; }
html[data-look="tiles"] .pdl-error { border-left: 4px solid var(--tl-red); }
html[data-look="tiles"] .pdl-sub { margin: 8px 0 0; font-size: 13px; color: var(--tl-muted); }
html[data-look="tiles"] .pdl-red { color: var(--tl-red) !important; }
html[data-look="tiles"] .pdl-muted { color: var(--tl-muted); }
html[data-look="tiles"] .pdl-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
html[data-look="tiles"] .pdl-hbars li { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: 8px; font-size: 13px; }
html[data-look="tiles"] .pdl-hbars a { color: var(--tl-link); text-decoration: none; }
html[data-look="tiles"] .pdl-hbars b { text-align: right; }
html[data-look="tiles"] .pdl-hbar { display: block; height: 10px; background: var(--tl-row); position: relative; overflow: hidden; }
html[data-look="tiles"] .pdl-hbar > span { display: block; height: 100%; background: var(--tl-cobalt); }
html[data-look="tiles"] .pdl-bar { display: flex; height: 18px; background: var(--tl-row); overflow: hidden; }
html[data-look="tiles"] .pdl-bar > span { display: block; height: 100%; }
html[data-look="tiles"] .pdl-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
html[data-look="tiles"] .pdl-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
html[data-look="tiles"] .pdl-legend b { margin-left: 5px; }
html[data-look="tiles"] .pdl-list { list-style: none; margin: 0; padding: 0; }
html[data-look="tiles"] .pdl-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--tl-row); font-size: 13px; }
html[data-look="tiles"] .pdl-list li:last-child { border-bottom: 0; }
html[data-look="tiles"] .pdl-list a { color: var(--tl-ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="tiles"] .pdl-list a:hover { color: var(--tl-link); }
html[data-look="tiles"] .pdl-list li > span { flex: none; color: var(--tl-muted); white-space: nowrap; }
html[data-look="tiles"] .pdl-kind { display: inline-block; min-width: 86px; font-size: 11px; color: var(--tl-muted); }
html[data-look="tiles"] .pdl-table-wrap { overflow-x: auto; }
html[data-look="tiles"] .pdl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
html[data-look="tiles"] .pdl-table th { text-align: left; font-weight: 600; color: var(--tl-muted); padding: 6px 8px; border-bottom: 1px solid var(--tl-line); white-space: nowrap; }
html[data-look="tiles"] .pdl-table td { padding: 6px 8px; border-bottom: 1px solid var(--tl-row); vertical-align: top; }
html[data-look="tiles"] .pdl-table td small { display: block; color: var(--tl-muted); }
html[data-look="tiles"] .pdl-table a { color: var(--tl-link); text-decoration: none; }
html[data-look="tiles"] .pdl-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--tl-red); }
html[data-look="tiles"] .pdl-chip { display: inline-block; padding: 1px 7px; background: var(--tl-head); border: 1px solid var(--tl-line); font-size: 12px; white-space: nowrap; }
html[data-look="tiles"] .pdl-progress { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
html[data-look="tiles"] .pdl-progress .pdl-hbar { width: 80px; }
html[data-look="tiles"] .pdl-section-title { margin: 6px 0 8px; font-size: 15px; font-weight: 600; color: var(--tl-ink); }
html[data-look="tiles"] .pdl-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
html[data-look="tiles"] .pdl-skeleton span { height: 78px; background: linear-gradient(90deg, #E6ECF2, #F2F5F9, #E6ECF2); background-size: 200% 100%; animation: pdl-shine 1.2s infinite; }
@keyframes pdl-shine { to { background-position: -200% 0; } }
@media (max-width: 900px) { html[data-look="tiles"] .pdl-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  html[data-look="tiles"] .pdl-cards { grid-template-columns: repeat(2, 1fr); }
  html[data-look="tiles"] .pdl-table thead { display: none; }
  html[data-look="tiles"] .pdl-table, html[data-look="tiles"] .pdl-table tbody, html[data-look="tiles"] .pdl-table tr, html[data-look="tiles"] .pdl-table td { display: block; width: 100%; box-sizing: border-box; }
  html[data-look="tiles"] .pdl-table tr { padding: 8px 0; border-bottom: 1px solid var(--tl-line); }
  html[data-look="tiles"] .pdl-table td { border: 0; padding: 2px 0; }
  html[data-look="tiles"] .pdl-table td[data-label]:not([data-label="Project"])::before { content: attr(data-label) ": "; color: var(--tl-muted); }
  html[data-look="tiles"] .pdl-list li { flex-direction: column; gap: 2px; }
  html[data-look="tiles"] .pdl-list a { white-space: normal; }
  html[data-look="tiles"] .pdl-skeleton { grid-template-columns: repeat(2, 1fr); }
}

/* v1.3 (owner e): every section now shows its pages as one sub menu on the headline row (shell/TilesShell.tsx), so the
   Projects pages' own repeated link strips go */
html[data-look="tiles"] .tl-content :where(.pl-nav, .top-navigation, .cl-nav, .utl-nav, .cp-kpi-strip, .workspace-nav-grid, .workspace-nav) { display: none !important; }

/* ---- v1.11 (owner screenshot): Conversation Workspace — the search row and a project's summary keep their size ---- */
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-bar { flex: none !important; align-items: stretch !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-search input { height: 36px !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-actions > a { display: flex !important; padding: 0 !important; margin: 0 !important; background: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .top-actions button { height: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center; white-space: nowrap; padding: 0 16px !important; margin: 0 !important; }
/* a project is open: the page scrolls as one (it was squeezed into the window, cutting the summary to its icons) */
html[data-look="tiles"] body.project-open .tl-content :where(.conversation-workspace-page, .conversation-workspace-page > .main) { flex: 1 0 auto !important; height: auto !important; max-height: none !important; }
html[data-look="tiles"] body.project-open .tl-content .conversation-workspace-page > .main > * { flex: none !important; }
html[data-look="tiles"] body.project-open .tl-content .conversation-workspace-page .project-grid { max-height: none !important; overflow: visible !important; margin-bottom: 8px; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .project-grid .card.is-selected { background: #EEF0FB !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-card { border-radius: 0 !important; padding: 12px 16px 14px !important; margin: 0 0 8px !important; background: #fff !important; border: 1px solid var(--tl-line) !important; border-top: 4px solid var(--tl-violet) !important; overflow: visible !important; animation: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-card::before { display: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-top { margin: 0 0 8px !important; gap: 8px; flex-wrap: wrap; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-top h3 { font-size: 17px !important; font-weight: 600 !important; margin: 0 !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-actions { gap: 4px !important; flex-wrap: wrap; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-action-btn { height: 32px !important; min-height: 32px !important; border-radius: 0 !important; background: var(--tl-cobalt) !important; background-image: none !important; font-size: 13px !important; font-weight: 600 !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-action-btn:hover { background: #0A5294 !important; transform: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-header { padding: 0 0 8px !important; margin: 0 0 8px !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--tl-line) !important; border-radius: 0 !important; min-height: 0 !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-title { font-size: 15px !important; font-weight: 600 !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-sub { font-size: 13px !important; color: var(--tl-muted, #586A7C) !important; margin-top: 2px !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 6px !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-box { min-height: 0 !important; border-radius: 0 !important; padding: 8px 10px !important; background: #F5F7FA !important; border: 1px solid #E1E6EC !important; transform: none !important; transition: none !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-box:hover { background: #F5F7FA !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-box .icon { display: inline-flex !important; width: auto !important; height: auto !important; margin: 0 6px 0 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; font-size: 13px !important; vertical-align: -1px; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-box b { display: inline !important; min-height: 0 !important; font-size: 11px !important; font-weight: 600 !important; color: #4E6478 !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-box p { margin: 3px 0 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--tl-ink, #1B2A3A) !important; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-shipment-card { grid-column: span 2; }
html[data-look="tiles"] .tl-content .conversation-workspace-page .timeline-icon { border-radius: 0 !important; background: #EEF2F6 !important; }
@media (max-width: 700px) {
  html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-shipment-card { grid-column: 1 / -1; }
  html[data-look="tiles"] .tl-content .conversation-workspace-page .summary-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; }
}