/* Microsoft Fluent artwork retains native colors in every theme. */
svg.icon.ui-icon-fluent[data-ui-style="fluent"] { fill:currentColor;stroke:none;stroke-width:0; }
@media(max-width:760px) {
  :root { --mobile-nav-height:88px; }
  .mobile-nav {
    height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-nav > button { min-width:0; min-height:64px; gap:6px; font-size:12px; justify-content:flex-start; padding-top:4px; }
  .mobile-nav > button > span:not(.add-icon) { white-space:nowrap; line-height:1.2; }
  .mobile-nav .icon { width:32px; height:32px; }
  .mobile-nav .add-icon { width:48px; height:48px; margin-top:-6px; }
  .mobile-nav .add-icon .icon { width:30px; height:30px; }
  .demo-notice { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); }
  .pwa-notice,.toast,.drag-help { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); }
  .dashboard-page { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 32px); }
  .section-page { padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 44px); }
  .mobile-nav > button[data-nav="requests"] > span {
    max-width:100%; white-space:normal; hyphens:auto; overflow-wrap:anywhere; text-wrap:balance;
  }
}
@media(max-width:360px) {
  .mobile-nav > button { font-size:11px; }
}

/* Small actions inherit their control's ink. No second circle under a glyph. */
svg.icon.ui-icon-fluent[data-ui-control="true"] { fill:currentColor;stroke:none; }
.ui-icon-fluent[data-ui-icon="plus"],.ui-icon-fluent[data-ui-icon="check"] { flex-shrink:0; }

/* Desktop navigation keeps its optical size even when the dashboard scales. */
@media(min-width:761px) {
  .app-header,.dashboard-mode .app-header {
    width:100%;max-width:none;zoom:1;margin-inline:0;
    gap:clamp(16px,2vw,32px);padding-inline:clamp(16px,2vw,32px);
  }
  .app-header .brand,.dashboard-mode .app-header .brand { min-width:0;width:auto;flex:none; }
  .desktop-nav,.dashboard-mode .desktop-nav {
    min-width:0;gap:clamp(10px,1.5vw,24px);align-items:center;
  }
  .desktop-nav button,.dashboard-mode .desktop-nav button {
    min-height:56px;padding:8px 4px;gap:10px;font-size:17px;line-height:1.25;white-space:nowrap;
  }
  .desktop-nav button>.icon,.dashboard-mode .desktop-nav button>.icon { width:32px;height:32px; }
  .desktop-nav button.active::after,.dashboard-mode .desktop-nav button.active::after { bottom:0; }
  .header-actions,.dashboard-mode .header-actions { flex:none;gap:6px; }
  .app-header .header-actions>.icon-button { width:44px;height:44px; }
  .app-header .header-actions>.icon-button>.icon { width:28px;height:28px; }
  .app-header .header-actions>.desktop-add>.icon { width:24px;height:24px; }
}
@media(min-width:1001px) and (max-width:1300px) {
  .app-header .brand,.dashboard-mode .app-header .brand { width:44px;min-width:44px;overflow:hidden; }
  .app-header .brand .uptodo-word,.app-header .brand .uptodo-clockword { display:none; }
  .app-header .account-chip,.dashboard-mode .app-header .account-chip { width:49px;min-width:49px;padding:3px;gap:0;justify-content:center; }
  .app-header .account-chip>span:not(.avatar),.app-header .account-chip>.account-chevron { display:none; }
  .desktop-nav button,.dashboard-mode .desktop-nav button { font-size:16px;gap:8px; }
  .desktop-nav,.dashboard-mode .desktop-nav { gap:12px; }
}
@media(min-width:761px) and (max-width:1000px) {
  body,body.dashboard-mode { --header:140px; }
  .app-header,.dashboard-mode .app-header { flex-wrap:wrap;gap:0 16px;padding:8px 16px 0;align-content:start; }
  .app-header .brand,.dashboard-mode .app-header .brand { width:auto;min-width:0;height:60px;overflow:visible; }
  .app-header .brand .uptodo-word,.app-header .brand .uptodo-clockword { display:revert; }
  .app-header .header-actions,.dashboard-mode .app-header .header-actions { margin-left:auto;height:60px; }
  .desktop-nav,.dashboard-mode .desktop-nav { order:3;flex:1 0 100%;height:64px;justify-content:center;gap:clamp(16px,4vw,40px); }
  .desktop-nav button,.dashboard-mode .desktop-nav button { font-size:16px;gap:10px; }
  .desktop-nav button>.icon,.dashboard-mode .desktop-nav button>.icon { width:30px;height:30px; }
}
@media(max-width:760px) {
  .mobile-nav { grid-template-columns:1fr 1.1fr .9fr 1.5fr .7fr; }
  .mobile-nav>button { padding-inline:0; }
  .mobile-nav>button[data-nav="requests"]>span {
    white-space:nowrap;hyphens:none;overflow-wrap:normal;text-wrap:nowrap;
  }
}

/* Icon-only add controls share the same rounded square as the header action. */
.today-actions [data-flow="today-add"],
.mobile-reminders-compact [data-flow="today-add"],
.rail-heading [data-flow="day-add"] {
  display:inline-grid;place-items:center;flex:none;
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;
  background:var(--add-control-bg);color:var(--add-control-fg);
}
.rail-heading [data-flow="linked-add"] { border-radius:12px; }
:is(.today-actions,.mobile-reminders-compact,.rail-heading) [data-flow="today-add"]>.icon,
.rail-heading [data-flow="day-add"]>.icon { width:22px;height:22px; }
:is(.today-actions,.mobile-reminders-compact,.rail-heading) [data-flow="today-add"]:hover:not(:disabled),
.rail-heading [data-flow="day-add"]:hover:not(:disabled) { background:var(--add-control-hover); }