/* Six viewport profiles. Inches are examples, not device detection:
   phone <600; tablet 600–1023; 14-inch notebook 1024–1599;
   16-inch notebook 1600–1919; desktop 1920–2559; 32-inch/QHD+ >=2560.
   CSS pixels honor OS scaling, browser zoom, and a resized window. */
:root {
  --hub-profile: phone;
  --hub-gutter-x: 12px;
  --hub-gutter-y: 16px;
  --hub-gap: 16px;
  --hub-panel-padding: 18px;
  --hub-body-size: 14px;
  --hub-small-size: 12px;
  --hub-title-size: 26px;
  --hub-section-size: 19px;
  --hub-control-height: 48px;
  --hub-sidebar-width: 220px;
  --hub-dashboard-sidebar: 280px;
  --hub-calendar-sidebar: 280px;
  --hub-task-sidebar: 190px;
  --hub-card-min: 240px;
  --hub-search-max: 480px;
  --hub-modal-width: 760px;
  --hub-brand-scale: 1;
}

/* Shared shell fills the window. Content determines height outside workspaces. */
html[data-theme] body { font-size: var(--hub-body-size); }
html[data-theme] main,
html[data-theme] main.with-sidebar,
html[data-theme] main.home-page,
html[data-theme] main.calendar-page {
  width: 100%; max-width: none; margin: 0;
  padding: var(--hub-gutter-y) var(--hub-gutter-x);
  min-height: calc(100dvh - var(--hub-header-height, 140px) - 72px);
}
html[data-theme] main.auth { max-width: 560px; margin: 0 auto; }
html[data-theme] :is(main.home-page, main.calendar-page) { min-height: 0; }
html[data-theme] .app-header {
  padding: 12px var(--hub-gutter-x);
  gap: 10px 16px;
}
html[data-theme] .app-header .brand { transform: scale(var(--hub-brand-scale)); transform-origin: left center; }
html[data-theme] .app-header .global-search { max-width: var(--hub-search-max); }
html[data-theme] .app-header .nav a { font-size: var(--hub-body-size); }
html[data-theme] :is(.hero,.auth) h1 { font-size: var(--hub-title-size); }
html[data-theme] :is(.hero-title-row,.hero-title-row h1,.hero>div,.section-head>div,.row>div:first-child) { min-width: 0; }
html[data-theme] :is(.hero-title-row h1,.hero p,.row strong,.linear-row strong) { overflow-wrap: anywhere; }
html[data-theme] :is(.panel,.card) { padding: var(--hub-panel-padding); }
html[data-theme] .create-panel { padding: 0; }
html[data-theme] .create-content { padding: var(--hub-panel-padding); }
html[data-theme] :is(.panel,.card,.settings-section,.linear-section) > h2 { font-size: var(--hub-section-size); }
html[data-theme] :is(.grid,.two,.three,.split,.stack) { gap: var(--hub-gap); }
html[data-theme] :is(button.primary,button.secondary,button.danger,.button) {
  min-height: var(--hub-control-height); font-size: var(--hub-body-size);
}
html[data-theme] :is(input,select,textarea):where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])) {
  min-height: var(--hub-control-height); font-size: var(--hub-body-size);
}
html[data-theme] :is(.small,.row small,.linear-row small) { font-size: var(--hub-small-size); }
html[data-theme] :is(.grid,.two,.three,.split,.panel,.card,.task-workspace-content,.client-service-cards) { min-width: 0; }
html[data-theme] main > .grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--hub-card-min)),1fr)); }
html[data-theme] :is(.tablewrap,.attendance-column-chart,.task-board) { max-width: 100%; }
html[data-theme] :is(.task-description,.material-body,.history-detail>p,.settings-section>p,.hero p) { max-width: 80ch; }
html[data-theme] .hero { margin-bottom: var(--hub-gap); flex-wrap: wrap; }
html[data-theme] .hero .hero-actions { max-width: 100%; }
html[data-theme] .section-head { flex-wrap: wrap; }

/* Home preserves profile/inbox first and all operational panels to the right. */
.dashboard-workspace { gap: var(--hub-gap); height: auto; display: flex; flex-direction: column; }
.dashboard-sidebar { min-width: 0; gap: var(--hub-gap); }
.dashboard-inbox { gap: var(--hub-gap); }
.dashboard-main .dashboard-panels { grid-template-columns: minmax(0,1fr); gap: var(--hub-gap); }
html[data-theme] .dashboard-panels > :is(.home-summary,.home-progress,.admin-task-grid,.client-service-cards,.linear-section) { grid-column: 1 / -1; }
html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--hub-gap); }
html[data-theme] .dashboard-panels > .admin-task-grid { grid-template-columns: minmax(0,1fr); gap: var(--hub-gap); }
html[data-theme] .dashboard-sidebar .identity-card { gap: 12px; }
html[data-theme] .dashboard-sidebar .identity-details h2 { font-size: var(--hub-section-size); }
html[data-theme] .dashboard-sidebar .panel h2 { font-size: calc(var(--hub-section-size) - 1px); }
html[data-theme] .dashboard-sidebar .identity-details p { font-size: var(--hub-small-size); }
html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) .card { padding: var(--hub-panel-padding); }
html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) h3 { font-size: var(--hub-body-size); }
@media (max-width: 1023px) {
  html[data-theme] .dashboard-inbox > [data-home-notifications] {
    max-height: min(360px,48dvh); overflow: auto; overscroll-behavior: contain;
  }
  html[data-theme] .dashboard-panels > .feature-panel,
  html[data-theme] .dashboard-panels > .admin-task-grid > .panel {
    max-height: min(560px,70dvh); overflow: auto; overscroll-behavior: contain;
  }
}

/* Side navigation scrolls internally on desktop; it becomes a compact menu on touch widths. */
html[data-theme] main.with-sidebar { padding-left: var(--hub-gutter-x); }
html[data-theme] main.with-sidebar > .page-sidebar {
  position: static; inset: auto; width: 100%; margin-bottom: var(--hub-gap);
}
html[data-theme] .page-sidebar-inner { position: static; max-height: none; padding: 0 0 12px; }
html[data-theme] main .page-sidebar nav { max-width: none; }
html[data-theme] main .page-sidebar :is(.personal-nav-links,.client-nav-links) {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px;
}
html[data-theme] main .page-sidebar nav > strong { padding: 0 10px 8px; }
html[data-theme] main .page-sidebar :is(nav a,details>summary) { font-size: var(--hub-body-size); }
html[data-theme] main .page-sidebar details { flex-basis: 100%; }

.task-workspace { grid-template-columns: minmax(0,1fr); gap: var(--hub-gap); }
html[data-theme] .task-view-nav { top: calc(var(--hub-header-height,140px) + var(--hub-gutter-y)); max-height: none; }
html[data-theme] .task-native-list { grid-template-columns: minmax(0,1fr); gap: var(--hub-gap); }
html[data-theme] .task-board { grid-template-columns: repeat(4,minmax(240px,1fr)); gap: var(--hub-gap); }
html[data-theme] .task-lane { height: clamp(320px,calc(100dvh - var(--hub-header-height,140px) - 260px),1000px); }

/* Calendar keeps its own viewport and label colors. */
.calendar-workspace { gap: var(--hub-gap); grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
html[data-theme] .calendar-sidebar .hero h1 { font-size: var(--hub-title-size); }
html[data-theme] .calendar-stage-head h2 { font-size: var(--hub-section-size); }
html[data-theme] .calendar-canvas-month .calendar-chip { font-size: 11px; line-height: 16px; }
.calendar-stage-navigation h2 { overflow-wrap: anywhere; }
.calendar-sidebar-controls,.calendar-legend-list { scrollbar-gutter: stable; }
html[data-theme] .calendar-canvas .calendar-year { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(0,1fr)); }

/* Dialogs keep comfortable line lengths, with scrolling bodies and visible actions. */
html[data-theme] .hub-modal:not(.icon-color-modal):not(.label-color-modal):not(.image-crop-modal) {
  width: min(var(--hub-modal-width),calc(100vw - 2 * var(--hub-gutter-x)));
  max-width: calc(100vw - 2 * var(--hub-gutter-x)); max-height: calc(100dvh - 24px);
}
html[data-theme] .hub-modal-footer { flex-wrap: wrap; }
.page-action-popover { max-width: calc(100vw - 2 * var(--hub-gutter-x)); }

/* Phones: one column, full-width search, controls that remain touchable. */
@media (max-width: 599px) {
  html[data-theme] .app-header { display: flex; flex-wrap: wrap; }
  html[data-theme] .app-header .global-search { order: 4; flex-basis: 100%; width: 100%; max-width: none; min-width: 0; }
  html[data-theme] .app-header .brand { width: 150px; }
  html[data-theme] .app-header > .internal-refresh { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  html[data-theme] .app-header.nav-collapsed .menu-toggle { margin-left: auto; }
  html[data-theme] .app-header .menu-toggle { min-height: 44px; padding: 8px; }
  html[data-theme] .hero { display: block; }
  html[data-theme] .hero > .hero-actions { margin-top: 14px; width: 100%; justify-content: flex-start; }
  html[data-theme] :is(.two,.three,.split,.client-service-cards,.contract-fields,.profile-facts,.website-facts,.personal-period .grid) { grid-template-columns: minmax(0,1fr); }
  html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) { gap: 10px; }
  html[data-theme] .dashboard-sidebar .identity-card { flex-direction: row; align-items: flex-start; }
  html[data-theme] .dashboard-sidebar .identity-details .section-head { gap: 8px; }
  html[data-theme] .dashboard-inbox .row { align-items: start; }
  html[data-theme] .dashboard-inbox .row .button { min-height: 44px; }
  html[data-theme] .row > :is(.button,button) { white-space: normal; max-width: 100%; }
  html[data-theme] .task-view-nav { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  html[data-theme] .task-view-nav a { min-height: 44px; padding: 10px; }
  html[data-theme] .task-filters { grid-template-columns: minmax(0,1fr); }
  .calendar-workspace { min-height: 440px; height: var(--calendar-height); }
  .calendar-sidebar { display: flex; flex-direction: column; gap: 8px; }
  .calendar-sidebar-controls { flex: none; max-height: 210px; }
  .calendar-options > summary { display: block; }
  html[data-theme] .calendar-sidebar .hero { display: flex; align-items: center; gap: 8px; }
  html[data-theme] .calendar-sidebar .hero h1 { font-size: 20px; }
  html[data-theme] .calendar-sidebar .hero .hero-actions { margin: 0; width: auto; max-width: 62%; }
  html[data-theme] .calendar-sidebar .hero button { min-height: 44px; }
  .calendar-legend { flex: none; height: 104px; min-height: 0; }
  html[data-theme] .calendar-canvas-month :is(.calendar-cell,.calendar-blank) { padding: 3px 2px; }
  html[data-theme] .calendar-canvas-month .calendar-chip { font-size: 10px; line-height: 14px; padding: 2px 3px; }
  html[data-theme] .calendar-legend .calendar-label-editor > summary,
  html[data-theme] .calendar-legend .calendar-new-label > summary { min-height: 44px; width: 44px; height: 44px; }
  html[data-theme] .calendar-legend .calendar-label-editor .create-content { max-width: calc(100vw - 24px); top: 50px; bottom: auto; }
  html[data-theme] .calendar-canvas .calendar-year-month { padding: 6px; }
  html[data-theme] .calendar-canvas .calendar-year-month h3 { font-size: 12px; }
  html[data-theme] .hub-modal .three { grid-template-columns: minmax(0,1fr); }
}

/* iPad/tablets: two columns where useful, no permanently occupied sidebar. */
@media (min-width: 600px) and (max-width: 1023px) {
  :root { --hub-profile: tablet; --hub-gutter-x: 20px; --hub-gutter-y: 20px; --hub-gap: 16px; --hub-panel-padding: 20px; --hub-title-size: 28px; --hub-card-min: 260px; }
  html[data-theme] .app-header { display: grid; grid-template-columns: minmax(170px,1fr) minmax(180px,1.4fr) auto; }
  html[data-theme] .app-header .brand { grid-column: 1; grid-row: 1; }
  html[data-theme] .app-header .global-search { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
  html[data-theme] .app-header > .internal-refresh { grid-column: 3; grid-row: 1; padding: 10px 12px; }
  html[data-theme] .app-header.nav-collapsed .menu-toggle { grid-column: 1; grid-row: 1; margin-left: 154px; padding: 8px; }
  html[data-theme] .app-header .menu-toggle > span:last-child { display: none; }
  html[data-theme] .app-header .nav { grid-column: 1/-1; grid-row: 2; }
  html[data-theme] .app-header.nav-collapsed .nav { position: absolute; top: calc(100% - 4px); right: var(--hub-gutter-x); width: auto; }
  html[data-theme] :is(.two,.three,.split,.client-service-cards,.contract-fields,.profile-facts,.website-facts,.personal-period .grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .dashboard-sidebar { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
  html[data-theme] .dashboard-sidebar > .identity-card { flex-direction: row; align-items: center; margin: 0!important; }
  html[data-theme] .dashboard-sidebar .identity-details .section-head { flex-direction: row; align-items: center; }
  html[data-theme] .dashboard-inbox { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; padding: 0; }
  .dashboard-inbox > [data-home-notifications] { grid-column: 1/-1; }
  html[data-theme] .dashboard-main .dashboard-panels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .task-view-nav { position: static; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; }
  html[data-theme] .task-view-nav strong { grid-column: 1/-1; }
  html[data-theme] .task-native-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-workspace { min-height: 480px; }
  .calendar-sidebar { display: flex; flex-direction: column; gap: 8px; }
  .calendar-sidebar-controls { flex: none; max-height: 200px; }
  .calendar-options > summary { display: block; }
  .calendar-legend { flex: none; min-height: 0; height: 110px; }
  .calendar-legend-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .calendar-legend > p { display: none; }
  html[data-theme] .calendar-sidebar .hero { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .calendar-sidebar .hero :is(.eyebrow,p) { display: none; }
  html[data-theme] .calendar-sidebar .hero .hero-actions { width: auto; max-width: 60%; margin: 0; }
  html[data-theme] .calendar-sidebar .calendar-toolbar { padding: 8px 0 14px; }
  html[data-theme] .calendar-sidebar .calendar-view-switch { grid-template-columns: repeat(5,minmax(0,1fr)); }
  html[data-theme] .calendar-sidebar .calendar-view-switch a:last-child { grid-column: auto; }
  html[data-theme] .calendar-sidebar .calendar-calendar-choice { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .calendar-legend .calendar-label-editor .create-content { top: 46px; bottom: auto; }
}

/* Desktop shared geometry: fixed navigation and bounded independent scroll areas. */
@media (min-width: 1024px) {
  html[data-theme] .app-header { display: grid; grid-template-columns: minmax(180px,1fr) minmax(240px,var(--hub-search-max)) minmax(150px,1fr); gap: 12px 24px; }
  html[data-theme] .app-header .brand { grid-column: 1; grid-row: 1; }
  html[data-theme] .app-header .global-search { grid-column: 2; grid-row: 1; width: 100%; }
  html[data-theme] .app-header > .internal-refresh { grid-column: 3; grid-row: 1; justify-self: end; }
  html[data-theme] .app-header .nav { grid-column: 1/-1; grid-row: 2; }
  html[data-theme] .app-header.nav-collapsed .menu-toggle { grid-column: 1; grid-row: 1; margin-left: calc(165px * var(--hub-brand-scale)); }
  html[data-theme] main.with-sidebar { padding-left: calc(var(--hub-gutter-x) + var(--hub-sidebar-width) + var(--hub-gap)); }
  html[data-theme] main.with-sidebar > .page-sidebar {
    position: fixed; left: calc(var(--page-sidebar-main-left,0px) + var(--hub-gutter-x));
    top: var(--page-sidebar-top,calc(var(--hub-header-height,140px) + var(--hub-gutter-y)));
    bottom: var(--hub-gutter-y); width: var(--hub-sidebar-width); margin: 0;
  }
  html[data-theme] main.with-sidebar > .page-sidebar > .page-sidebar-inner { height: 100%; max-height: 100%; overflow: auto; padding: 0 8px 12px 0; }
  html[data-theme] main .page-sidebar :is(.personal-nav-links,.client-nav-links) { flex-direction: column; flex-wrap: nowrap; }
  html[data-theme] .page-sidebar nav > strong { padding: 5px 12px 14px; }
  .dashboard-workspace { display: grid; grid-template-columns: var(--hub-dashboard-sidebar) minmax(0,1fr); height: var(--dashboard-height); min-height: 0; }
  .dashboard-sidebar { display: flex; flex-direction: column; }
  .dashboard-main { overflow: auto; padding-right: 4px; }
  .dashboard-inbox { display: flex; flex-direction: column; overflow: auto; padding-right: 4px; }
  .task-workspace { grid-template-columns: var(--hub-task-sidebar) minmax(0,1fr); }
  html[data-theme] .task-view-nav { position: sticky; max-height: calc(100dvh - var(--hub-header-height,140px) - 2 * var(--hub-gutter-y)); overflow: auto; }
  html[data-theme] .task-native-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); }
  .calendar-workspace { grid-template-columns: var(--hub-calendar-sidebar) minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: var(--calendar-height); min-height: 0; }
  .calendar-sidebar { display: flex; flex-direction: column; gap: 16px; }
  .calendar-sidebar-controls { flex: 1; max-height: none; overflow: auto; }
  .calendar-options > summary { display: none; }
  html[data-theme] .calendar-sidebar .hero { display: block; }
  html[data-theme] .calendar-sidebar .hero :is(.eyebrow,p) { display: block; }
  html[data-theme] .calendar-sidebar .hero .hero-actions { width: 100%; max-width: none; }
  .calendar-legend { flex: 0 0 34%; height: auto; min-height: 156px; }
  .calendar-legend-list { display: block; }
  .calendar-legend > p { display: block; }
  html[data-theme] .calendar-canvas .calendar-year { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
}

/* Notebook 14 inches: common browser widths 1366, 1440, 1512. */
@media (min-width: 1024px) and (max-width: 1599px) {
  :root { --hub-profile: notebook-14; --hub-gutter-x: 24px; --hub-gutter-y: 20px; --hub-gap: 18px; --hub-panel-padding: 22px; --hub-title-size: 30px; --hub-control-height: 44px; --hub-dashboard-sidebar: 290px; --hub-calendar-sidebar: 280px; --hub-task-sidebar: 184px; --hub-card-min: 280px; --hub-search-max: 520px; }
  html[data-theme] .dashboard-main .dashboard-panels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .task-board { grid-template-columns: repeat(4,minmax(210px,1fr)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html[data-theme] .dashboard-main .dashboard-panels,
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-template-columns: minmax(0,1fr); }
  html[data-theme] .calendar-sidebar .hero h1 { font-size: 26px; }
}

/* Notebook 16 inches: common scaled browser width 1728. */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root { --hub-profile: notebook-16; --hub-gutter-x: 28px; --hub-gutter-y: 24px; --hub-gap: 20px; --hub-panel-padding: 24px; --hub-body-size: 15px; --hub-title-size: 32px; --hub-section-size: 20px; --hub-control-height: 44px; --hub-sidebar-width: 240px; --hub-dashboard-sidebar: 320px; --hub-calendar-sidebar: 300px; --hub-task-sidebar: 210px; --hub-card-min: 300px; --hub-search-max: 600px; }
  html[data-theme] .dashboard-main .dashboard-panels,
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .task-board { grid-template-columns: repeat(4,minmax(230px,1fr)); }
}

/* Desktop FHD, usually 24–27 inches: three operational columns. */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root { --hub-profile: desktop; --hub-gutter-x: 32px; --hub-gutter-y: 28px; --hub-gap: 24px; --hub-panel-padding: 26px; --hub-body-size: 16px; --hub-small-size: 13px; --hub-title-size: 34px; --hub-section-size: 22px; --hub-control-height: 48px; --hub-sidebar-width: 260px; --hub-dashboard-sidebar: 350px; --hub-calendar-sidebar: 320px; --hub-task-sidebar: 230px; --hub-card-min: 320px; --hub-search-max: 720px; --hub-modal-width: 900px; --hub-brand-scale: 1.08; }
  html[data-theme] .dashboard-main .dashboard-panels { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-theme] .dashboard-panels > :is(.home-summary,.home-progress) { grid-column: span 1; grid-template-columns: minmax(0,1fr); }
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-column: span 2; grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .dashboard-inbox .row strong { font-size: 14px; }
  html[data-theme] .dashboard-inbox .row small { font-size: 12px; }
  html[data-theme] .task-native-card h3 { font-size: 17px; }
  html[data-theme] .task-native-card .task-card-assignee { font-size: 13px; }
  html[data-theme] .task-board { grid-template-columns: repeat(4,minmax(250px,1fr)); }
  html[data-theme] .calendar-canvas-month .calendar-chip { font-size: 12px; line-height: 18px; padding: 3px 6px; }
  html[data-theme] .calendar-canvas-month .calendar-date { width: 26px; height: 26px; min-height: 26px; font-size: 14px; }
}

/* QHD/4K up to 32 inches: full width, readable scale, four columns. */
@media (min-width: 2560px) {
  :root { --hub-profile: monitor-32; --hub-gutter-x: clamp(36px,1.5vw,64px); --hub-gutter-y: 32px; --hub-gap: 28px; --hub-panel-padding: 30px; --hub-body-size: 17px; --hub-small-size: 14px; --hub-title-size: 38px; --hub-section-size: 24px; --hub-control-height: 48px; --hub-sidebar-width: 290px; --hub-dashboard-sidebar: 390px; --hub-calendar-sidebar: 360px; --hub-task-sidebar: 260px; --hub-card-min: 360px; --hub-search-max: 840px; --hub-modal-width: 1040px; --hub-brand-scale: 1.16; }
  html[data-theme] main > :is(.two,.three) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-theme] .dashboard-main .dashboard-panels { grid-template-columns: repeat(4,minmax(0,1fr)); }
  html[data-theme] .dashboard-panels > :is(.home-summary,.home-progress) { grid-column: span 1; grid-template-columns: minmax(0,1fr); }
  html[data-theme] .dashboard-panels > .admin-task-grid { grid-column: span 3; grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme] .dashboard-panels > .office-presence { grid-column: span 2; }
  html[data-theme] .dashboard-sidebar .identity-image { width: 80px; height: 80px; min-width: 80px; flex-basis: 80px; font-size: 30px; }
  html[data-theme] .dashboard-inbox .row strong { font-size: 15px; }
  html[data-theme] .dashboard-inbox .row small { font-size: 13px; }
  html[data-theme] .dashboard-inbox .row .button { min-height: 44px; font-size: 14px; }
  html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) h3 { font-size: 17px; }
  html[data-theme] .dashboard-panels :is(.home-summary,.home-progress) p { font-size: 15px; }
  html[data-theme] .dashboard-panels .number { font-size: 38px; }
  html[data-theme] .task-native-card h3 { font-size: 18px; }
  html[data-theme] .task-native-list { grid-template-columns: repeat(6,minmax(0,1fr)); }
  html[data-theme] .task-native-card .task-card-assignee { font-size: 14px; }
  html[data-theme] .task-native-card :is(label,select,.badge,.task-date) { font-size: 14px; }
  html[data-theme] .task-board { grid-template-columns: repeat(4,minmax(280px,1fr)); }
  html[data-theme] table :is(th,td) { font-size: 16px; padding: 16px; }
  html[data-theme] .calendar-sidebar .calendar-view-switch a { font-size: 14px; padding: 10px 5px; }
  html[data-theme] .calendar-sidebar :is(.calendar-filters label,.calendar-calendar-choice legend) { font-size: 14px; }
  html[data-theme] .calendar-sidebar .calendar-filters select { font-size: 15px; }
  html[data-theme] .calendar-legend h2 { font-size: 19px; }
  html[data-theme] .calendar-legend-list strong { font-size: 15px; }
  html[data-theme] .calendar-legend-list small { font-size: 13px; }
  html[data-theme] .calendar-canvas-month .calendar-chip { font-size: 14px; line-height: 20px; padding: 4px 8px; }
  html[data-theme] .calendar-canvas-month .calendar-more { font-size: 13px; line-height: 18px; }
  html[data-theme] .calendar-canvas-month .calendar-date { width: 30px; height: 30px; min-height: 30px; font-size: 16px; }
  html[data-theme] .calendar-canvas-month .calendar-weeklabel { font-size: 15px; }
}

/* A low-height or landscape touch window can scroll vertically without losing controls. */
@media (max-height: 620px) {
  .dashboard-workspace { height: auto; min-height: 320px; }
  .dashboard-inbox { max-height: 440px; }
  .calendar-workspace { min-height: 440px; }
}
@media (pointer: coarse) {
  html[data-theme] :is(button.primary,button.secondary,button.danger,.button) { min-height: 48px; }
}

/* Panels fill the available columns independently; their visual height remains
   natural while the small row units reserve the panel plus the normal gutter. */
html[data-theme] .dashboard-main .dashboard-panels.dashboard-packed {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,max(var(--hub-card-min),calc((100% - 3 * var(--hub-gap)) / 4))),1fr));
  grid-auto-flow: row dense; grid-auto-rows: 2px;
  column-gap: var(--hub-gap); row-gap: 0; align-content: start; align-items: start;
}
html[data-theme] .dashboard-packed > :is(.panel,.card,.dashboard-task-panel) {
  grid-column: auto; margin: 0; min-width: 0; height: auto;
}
html[data-theme] .dashboard-packed > .dashboard-stat { padding: var(--hub-panel-padding); }
html[data-theme] .dashboard-stat h3 { font-size: var(--hub-body-size); margin: 0 0 8px; }
html[data-theme] .dashboard-stat p { font-size: var(--hub-small-size); margin: 0 0 10px; }
html[data-theme] .dashboard-packed .row { min-width: 0; }
@media (max-width:599px) {
  html[data-theme] .dashboard-main .dashboard-panels.dashboard-packed { grid-template-columns: minmax(0,1fr); }
}

html[data-theme] .dashboard-main { container-type: inline-size; }
@container (min-width:1050px) {
  html[data-theme] .dashboard-packed > .dashboard-task-panel { grid-column: span 2; }
}