/* Website-owned presentation, retained across demo bundle refreshes. */
html .app :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
html .view :is(h1, h2) { text-wrap: balance; }
html .view :is(td, .dw-score__hero) { font-variant-numeric: tabular-nums; }
.demo-mobile-nav, .demo-mobile-close { display: none; }
/* Today: time and task names carry the hierarchy, not repeated status bars. */
html .today-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
html .today-grid .tl { padding: 16px 20px 20px; }
html .today-grid .tl__event { column-gap: 14px; animation: none; }
html .today-grid .tl__accent, html .today-grid .tk__bar { display: none; }
html .today-grid .tl__card { padding: 12px; margin-bottom: 14px; }
html .today-grid .tl__event--now .tl__card { background: var(--surface-2); }
html .today-grid .tk { padding: 8px 20px 16px; }
html .today-grid .tk__item { grid-template-columns: minmax(0, 1fr); min-height: 62px; padding: 12px 0; border-radius: 0; animation: none; gap: 0; }
html .today-grid .tk__item + .tk__item { border-top: 1px solid var(--border); }
html .today-grid .tk__main { min-width: 0; }
html .today-grid :is(.tk__title, .tl__title) { font-weight: 600; }
html .today-grid .tk__sub { white-space: normal; line-height: 1.5; }
@media (max-width: 1050px) {
  html .today-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 820px) {
  /* Keep sticky KPI cells anchored to their own horizontal scroll area. */
  html .kt__scroll { position: relative; }
  html { scroll-padding-top: 116px; }
  html body { padding-top: 52px; }
  html #demo-banner { z-index: 100; height: 52px; grid-template-columns: 1fr auto; gap: 4px; padding-inline: 8px; }
  html #demo-banner .db-mid { display: none; }
  html #demo-banner .db-back, html #demo-banner .db-cta { min-height: 44px; padding-inline: 8px; font-size: 11px; }
  html .app { display: block; min-width: 0; }
  html .app .main { width: 100%; min-width: 0; margin-left: 0; }
  html .app .view { padding: 16px 12px calc(88px + env(safe-area-inset-bottom)); min-width: 0; }
  html .app .topbar { position: sticky; top: 52px; padding: 8px; gap: 6px; min-width: 0; }
  html .topbar .tsearch { width: auto; min-width: 44px; flex: 1; }
  html .topbar .tsearch__ph, html .topbar .tsearch__kbd { display: none; }
  html .topbar__tools { gap: 4px; }
  html button, html input:not([type=checkbox]):not([type=radio]), html select { min-height: 44px; }
  html .iconbtn { min-width: 44px; width: 44px; height: 44px; }
  html input:not([type=checkbox]):not([type=radio]), html select, html textarea { font-size: 16px !important; max-width: 100%; }
  html .sidebar { display: none; }
  html.demo-menu-open .sidebar {
    display: flex; position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto; background: var(--shell-bg); overscroll-behavior: contain;
  }
  html.demo-menu-open .sidebar .brand--side { min-height: 56px; justify-content: flex-start; }
  html.demo-menu-open .sidebar.sidebar--rail { align-items: stretch; }
  html.demo-menu-open .sidebar.sidebar--rail :is(.sidenav, .brand--side, .navlink, .navgroup, .navgroup__head, .sidefoot, .sidefoot__me) {
    width: 100%; justify-content: flex-start;
  }
  html.demo-menu-open .app .sidebar .navlink span:not(.nav__ico) { display: inline; }
  html.demo-menu-open .sidebar .brand__word-link,
  html.demo-menu-open .sidebar .brand__word,
  html.demo-menu-open .sidebar .navlink > span,
  html.demo-menu-open .sidebar .navgroup__label,
  html.demo-menu-open .sidebar .navgroup__chev,
  html.demo-menu-open .sidebar .sidefoot__who { display: inline; }
  html.demo-menu-open .sidebar .brand__collapse { display: none; }
  html.demo-menu-open .sidebar .navgroup__items { display: grid !important; }
  html.demo-menu-open .sidebar .navgroup:not(.is-open) .navgroup__items { display: none !important; }
  html.demo-menu-open .sidebar .navlink, html.demo-menu-open .sidebar .navgroup__head { min-height: 48px; justify-content: flex-start; }
  html.demo-menu-open .sidebar .sidefoot { position: static; }
  html.demo-menu-open .app .sidebar .sidefoot__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  html .demo-mobile-close { display: block; position: absolute; right: 16px; top: max(12px, env(safe-area-inset-top)); padding: 0 16px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
  .demo-mobile-nav {
    position: fixed; z-index: 1000; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--shell-bg); border-top: 1px solid var(--border); gap: 4px;
  }
  .demo-mobile-nav a, .demo-mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; min-width: 0; font: inherit; font-size: 12px; color: var(--text-2); border: 0; background: transparent; border-radius: 10px; text-decoration: none; }
  .demo-mobile-nav [aria-current=page] { color: var(--brand); background: var(--brand-soft); }
  .demo-mobile-nav :active { background: var(--brand-soft); }
  .demo-mobile-nav svg { width: 20px; height: 20px; }
  html .pagehead { flex-wrap: wrap; gap: 12px; }
  html .pagehead > * { min-width: 0; max-width: 100%; }
  html .detail-grid { grid-template-columns: minmax(0, 1fr); }
  html .card { min-width: 0; }
  html .view .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html .view .dash-kpi { padding: 16px 12px; min-height: 120px; }
  html .view .dash-kpi__value { font-size: clamp(24px, 7vw, 30px); }
  html .view .dash-kpi__delta { white-space: normal; }
  html .view .dw-score__chart--axis { min-height: 200px; height: 200px; flex: 0 0 200px; }
  html .view .dw-score__chart--axis .chart__svg { height: 200px !important; }
  html .view .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html .view .stat { min-width: 0; padding: 14px 12px; }
  html .view .stat__val { font-size: 26px; }
  html .view .pagehead__right, html .view .actions { flex-wrap: wrap; }
  html .view .fvr-cat { min-height: 44px; }
  html .view .igrid { grid-template-columns: minmax(0, 1fr); }
  html .view .atbl { display: block; max-width: 100%; overflow-x: auto; }
  html .profile .hero { flex-wrap: wrap; }
  html .profile .hero__id { min-width: 0; }
  html .profile .hero__email { overflow-wrap: anywhere; white-space: normal; }
  html .profile .kv { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  html .profile .card__head { flex-wrap: wrap; }
  html .view .candpage__sticky { margin-inline: -12px; padding-inline: 12px; width: auto; top: 112px; }
  html .view .card__link, html .view .cell-link, html .view .score-link,
  html .modal .link, html .modal a.btn { display: inline-flex; align-items: center; min-height: 44px; }
  html .view .cbx { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  html .view .cbx input { width: 44px; height: 44px; margin: 0; }
  html .modal-overlay:has(> .modal) { z-index: 2000; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); align-items: center; }
  html .modal-overlay .modal { width: 100%; max-width: 100% !important; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-width: 0; margin: 0; display: flex; flex-direction: column; }
  html .modal-overlay .modal__body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  html .modal-overlay .modal__head, html .modal-overlay .modal__foot { flex-shrink: 0; }
  html .modal-overlay .modal__foot { flex-wrap: wrap; gap: 8px; }
  html .modal-overlay .row2 { grid-template-columns: minmax(0, 1fr); }
  html .modal-overlay .modal__x { min-width: 44px; min-height: 44px; }
  html .tour-overlay .tour-card { position: fixed; inset: auto 12px calc(84px + env(safe-area-inset-bottom)) !important; width: auto; max-width: none; max-height: 65dvh; overflow-y: auto; }
  html .tour-card__actions { gap: 8px; flex-wrap: wrap; }
  html .tour-card button { min-height: 48px; }
}
@media (max-width: 420px) {
  html .view .statrow { grid-template-columns: minmax(0, 1fr); }
}