/* Mobile Arbeitsoberfläche: klare nächste Schritte, ruhige Farben und lesbare Roll-outs.
   Rein visuelle Ergänzung; Warnungen, Rechte und fachliche Status bleiben unverändert. */
:root {
  --ink: #18302e;
  --paper: #f3f5f1;
  --muted: #4e625e;
  --line: #d3dfd9;
  --green: #246354;
  --blue: #305e85;
  --focus: #075d97;
  --mobile-accent: #246354;
  --mobile-accent-soft: #e4f2e9;
  --mobile-glass: #f5f9f5;
  --mobile-radius: 18px;
  --mobile-shadow: 0 5px 20px rgba(29, 65, 52, .055);
}

body {
  background: radial-gradient(ellipse at 0 0, #dceee4, transparent 42rem),
    radial-gradient(ellipse at 100% 24rem, #ece6dc, transparent 38rem), var(--paper);
  overflow-wrap: break-word;
}
button, summary, .screen-heading, .mobile-screen-bar { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
button, input, select, textarea { border-radius: 13px; }
input, select, textarea { font-size: 1rem; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.app-shell { padding-bottom: calc(var(--mobile-nav-height, calc(100px + env(safe-area-inset-bottom))) + 18px); }
.app-header {
  min-height: 62px; gap: 10px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: #203d37; border-bottom: 1px solid #91b6a1;
  box-shadow: 0 3px 16px rgba(24, 48, 46, .1);
}
.app-header .header-meta strong { font-size: .875rem; }
.app-header .network-state { color: #e3eee8; font-size: .75rem; }
.app-header .network-state.offline { color: #ffdbd5; }
.portal-menu-toggle { border-color: #94afa2; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.app-brand img { width: 32px; height: 32px; }
#main-content { width: min(100%, 1040px); }
.screen { padding: 10px max(12px, env(safe-area-inset-right)) 22px max(12px, env(safe-area-inset-left)); }
.screen-heading { margin-bottom: 12px; }
.screen-heading h1 { font-size: clamp(1.35rem, 4.8vw, 1.7rem); letter-spacing: -.02em; }
.screen > .screen-heading h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-heading .eyebrow { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.icon-button { border-radius: 14px; border-color: #c4d6cc; background: #fff; color: #285d4e; }

/* Ein fester Rückweg ohne weitere klebende Kopfzeile über den Formularen. */
.mobile-screen-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  min-height: 54px; margin: 6px 12px 0; padding: 4px 0;
}
.mobile-back-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 0 0 auto; min-height: 44px; padding: 8px 13px;
  color: #234f44; background: #fff; border: 1px solid #b9cec2;
  font-size: .9375rem; font-weight: 700; box-shadow: 0 2px 7px #254b3910;
}
.mobile-back-button svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 2; }
#mobile-screen-title { flex: 1 1 140px; min-width: 0; margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 750; color: var(--ink); overflow-wrap: anywhere; }
/* Das Überschriftsziel wird nach Navigation für Screenreader fokussiert.
   Es ist kein Bedienelement; Tastaturfokus an Knöpfen/Links bleibt sichtbar. */
#mobile-screen-title:focus { outline: none; }
.mobile-screen-help { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .875rem; }

/* Nur die eigentliche Hauptaktion erhält die kräftige Farbe. */
.primary-button, .stop-actions button.emphasis {
  color: #fff; background: #246354; border-color: #246354; border-bottom-width: 1px;
  box-shadow: 0 3px 8px rgba(30, 78, 63, .12);
}
.secondary-button { color: #234f44; background: #f8fbf8; border-color: #bfd3c6; }
.danger-button { color: #8b302d; background: #fff1ee; border-color: #c48f88; }
.text-button, .portal-section-link { color: #285d4e; }
.portal-inline-actions { gap: 8px; }
.portal-inline-actions > button { min-width: 0; }

/* Die Menügruppen tragen ihre Farbe stets zusätzlich zu einer Textbeschriftung. */
[data-tone="care"], [data-tone="tour"] { --mobile-accent: #246354; --mobile-accent-soft: #e2f0e6; }
[data-tone="team"] { --mobile-accent: #305e85; --mobile-accent-soft: #e5eef7; }
[data-tone="work"], [data-tone="time"] { --mobile-accent: #82542b; --mobile-accent-soft: #faf0df; }
[data-tone="system"], [data-tone="health"] { --mobile-accent: #6b4b83; --mobile-accent-soft: #f0e9f8; }

#portal-navigation {
  width: min(420px, 94vw); max-width: 94vw;
  height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
  color: var(--ink); background: var(--mobile-glass);
  border-right: 1px solid #bfd2c7; border-radius: 0 25px 25px 0;
  box-shadow: 16px 0 64px rgba(21, 54, 41, .22);
  overflow-y: auto; overscroll-behavior: contain;
}
#portal-navigation::backdrop { background: rgba(18, 42, 35, .36); }
#portal-navigation .dialog-header {
  flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 0 13px; margin-bottom: 12px;
  background: var(--mobile-glass); border-bottom: 1px solid #c5d7ca;
}
#portal-navigation .dialog-header > div { flex: 1 1 125px; min-width: 0; }
#portal-navigation .dialog-header > .mobile-back-button { flex: 0 1 auto; max-width: 100%; margin-left: auto; }
#portal-navigation h2 { font-size: 1.25rem; }
#portal-navigation .eyebrow { color: #476656; font-size: .75rem; }
#portal-navigation .privacy-note { margin-top: 14px; padding: 10px 11px; border: 0; border-radius: 12px; background: #e8efe8; font-size: .8125rem; }
.portal-menu { gap: 10px; }
.mobile-menu-group {
  border: 1px solid #cbdacf; border-radius: 17px; background: #fff;
  box-shadow: 0 3px 14px rgba(26, 57, 41, .045);
}
.mobile-menu-group > summary {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 13px 38px 13px 15px; border-radius: 16px;
  list-style: none; color: var(--mobile-accent); background: var(--mobile-accent-soft);
  font-size: .9375rem; font-weight: 750;
}
.mobile-menu-group > summary::-webkit-details-marker { display: none; }
.mobile-menu-group > summary::after {
  content: ""; position: absolute; right: 17px; top: calc(50% - 5px);
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.mobile-menu-group[open] > summary { border-radius: 16px 16px 11px 11px; }
.mobile-menu-group[open] > summary::after { transform: translateY(4px) rotate(225deg); }
.mobile-menu-group > summary .mobile-menu-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .7); }
.mobile-menu-group > summary .mobile-menu-label { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.mobile-menu-group > summary .mobile-menu-hint { display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.mobile-group-badge:empty { display: none; }
.mobile-group-badge:not(:empty) { flex: 0 1 auto; padding: 2px 7px; border: 1px solid currentColor; border-radius: 16px; background: #fff; font-size: .75rem; font-weight: 750; }
.mobile-menu-links { display: grid; gap: 5px; padding: 7px; }
.portal-menu button {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  gap: 1px 10px; width: 100%; min-height: 52px; padding: 10px;
  border: 1px solid transparent; border-radius: 12px; background: #fff; color: var(--ink);
  font-size: .9375rem; font-weight: 700;
}
.portal-menu button:has(> .mobile-menu-icon) { grid-template-columns: 34px minmax(0, 1fr); }
.portal-menu button.active {
  border: 1px solid #a5c3b0; border-left: 4px solid var(--mobile-accent);
  padding-left: 7px; background: var(--mobile-accent-soft);
}
.portal-menu button .mobile-menu-icon {
  grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: 34px; min-height: 34px; margin: 0; border-radius: 11px;
  background: var(--mobile-accent-soft); color: var(--mobile-accent); font-size: 1.125rem; font-weight: 700;
}
.mobile-menu-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-menu button .mobile-menu-label { grid-column: 1; margin: 0; color: var(--ink); font-size: .9375rem; font-weight: 700; }
.portal-menu button:has(> .mobile-menu-icon) .mobile-menu-label { grid-column: 2; }
.portal-menu button .mobile-menu-hint { display: block; margin: 2px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; font-weight: 400; }
.portal-menu button:has(.badge:not(.hidden)) { padding-right: 38px; }
.portal-menu .badge { left: auto; right: 9px; top: 11px; max-width: calc(100% - 20px); }

/* Geschlossene Zusatzbereiche sind klein; geöffnete Inhalte werden nicht abgeschnitten. */
.mobile-fold, .mobile-tour-tools, .portal-home-fold {
  min-width: 0; margin: 0 0 12px; border: 1px solid #cbdcd1; border-radius: var(--mobile-radius);
  background: #fff; box-shadow: var(--mobile-shadow); overflow: visible;
}
.mobile-fold > summary, .mobile-tour-tools > summary, .portal-home-fold > summary {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px;
  min-height: 54px; padding: 14px 39px 14px 15px; list-style: none; border-radius: 17px;
  background: #f0f7f1; color: var(--mobile-accent); font-size: .9375rem; line-height: 1.4; font-weight: 700;
}
.mobile-fold > summary::-webkit-details-marker, .mobile-tour-tools > summary::-webkit-details-marker,
.portal-home-fold > summary::-webkit-details-marker { display: none; }
.mobile-fold > summary::before, .mobile-tour-tools > summary::before, .portal-home-fold > summary::before { content: none; }
.mobile-fold > summary::after, .mobile-tour-tools > summary::after, .portal-home-fold > summary::after {
  content: ""; position: absolute; right: 17px; top: calc(50% - 6px); width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s ease;
}
.mobile-fold[open] > summary, .mobile-tour-tools[open] > summary, .portal-home-fold[open] > summary { border-radius: 17px 17px 10px 10px; border-bottom: 1px solid #d9e5dc; }
.mobile-fold[open] > summary::after, .mobile-tour-tools[open] > summary::after,
.portal-home-fold[open] > summary::after { transform: translateY(4px) rotate(225deg); }
.mobile-fold[data-tone] > summary, .mobile-tour-tools[data-tone] > summary,
.portal-home-fold[data-tone] > summary { background: var(--mobile-accent-soft); }
.mobile-fold-body { min-width: 0; padding: 13px; }
.mobile-fold-body > :last-child { margin-bottom: 0; }
.mobile-tour-tools.secondary-section > .mobile-fold-body { margin: 0; padding: 12px; }
.mobile-fold .work-time-summary { flex-basis: 100%; color: var(--muted); font-size: .875rem; }
.mobile-tour-current { margin-bottom: 12px; }
.mobile-tour-current .tour-section:last-child { margin-bottom: 0; }
.mobile-tour-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.mobile-tour-shortcuts button { min-height: 46px; padding: 9px 10px; font-size: .9375rem; }
.mobile-tour-shortcuts button[data-mobile-panel="sickness-panel"] { color: #6b4b83; background: #f0e9f8; border-color: #d4c5df; }
.mobile-tools-count { flex-basis: 100%; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.mobile-tools-count:empty { display: none; }
.mobile-tour-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-width: 0; min-height: 48px; padding: 11px 15px; margin: 0 0 13px;
  border: 1px solid #cbaa80; border-left: 4px solid #a37438; border-radius: 14px;
  background: #fff5e7; color: #74481f; box-shadow: none;
  text-align: left; font-size: .9375rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere;
}
.mobile-tour-alert::after {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-right: 2px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
.mobile-tour-tools .support-hub { margin-bottom: 0; }
.mobile-tour-tools .support-panel { margin-top: 8px; box-shadow: none; }

/* Startseite: drei gut greifbare Ziele, ein nächster Schritt, Details bei Bedarf. */
.portal-home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 13px; }
.portal-home-shortcut {
  display: grid; align-content: start; justify-items: start; gap: 5px;
  min-width: 0; min-height: 74px; padding: 12px; text-align: left;
  color: var(--mobile-accent); background: var(--mobile-accent-soft);
  border: 1px solid #c9d9cd; border-radius: 16px; font-size: .9375rem; font-weight: 700;
  box-shadow: var(--mobile-shadow);
}
.portal-home-shortcut svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-home-shortcut span, .portal-home-shortcut strong { max-width: 100%; overflow-wrap: anywhere; }
.portal-home-shortcut small { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.portal-home-next {
  min-width: 0; padding: 16px; margin-bottom: 13px; border: 1px solid #bcd4c4;
  border-left: 4px solid #3b8068; border-radius: 19px; color: var(--ink);
  background: linear-gradient(110deg, #edf7ef, #fdfefb); box-shadow: var(--mobile-shadow);
}
.portal-home-next h2 { margin: 5px 0 8px; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.portal-home-next p { margin: 5px 0 10px; }
.portal-home-next .eyebrow { color: #426658; margin: 0 0 5px; }
.portal-home-next .work-status-timer { color: #285d4e; }
.portal-home-next .portal-inline-actions { margin-top: 11px; }
.portal-home-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 12px; }
.portal-home-status > div { flex: 1 1 160px; min-width: 0; }
.portal-home-status > button { flex: 0 1 auto; min-width: 0; }
.portal-home-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #285d4e; font-size: .875rem; }
.portal-home-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #33795c; box-shadow: 0 0 0 4px #e1ede2; }
.portal-home-upcoming { display: grid; gap: 3px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #c7dcce; }
.portal-home-upcoming strong { font-size: 1.0625rem; }
.portal-home-upcoming > span:last-child { color: var(--muted); font-size: .875rem; }
.portal-home-shortcut-icon { display: grid; place-items: center; width: 28px; height: 28px; font-size: 1.3rem; line-height: 1; }
.portal-panel.portal-home-fold { padding: 0; }
.portal-home-tasks { padding: 13px 15px; }
.portal-home-tasks > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; font-size: 1rem; }
.portal-home-tasks .portal-agenda-item { gap: 9px; padding-block: 11px; }
.portal-home-tasks .portal-agenda-item strong { font-size: .9375rem; }
.portal-home-tasks .portal-agenda-item p { font-size: .875rem; }
.portal-home-tasks .portal-date-tag { font-size: .8125rem; }
.portal-home-fold .portal-agenda { padding: 0 13px; }
.portal-home-fold .portal-agenda-item { gap: 9px; padding-block: 12px; }
.portal-home-fold .portal-agenda-item strong { font-size: .9375rem; line-height: 1.4; }
.portal-home-fold .portal-date-tag { padding: 6px; font-size: .8125rem; }
.portal-home-fold .portal-agenda-item p, .portal-home-fold .portal-agenda-item small { font-size: .875rem; }
.portal-home-fold > p, .portal-home-fold > .portal-inline-actions { margin: 12px 13px; }
.portal-home-fold > .portal-section-link { margin: 4px 13px 12px; }
.portal-home-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
  min-height: 26px; padding: 2px 8px; margin-left: auto; border-radius: 20px;
  background: #fff; border: 1px solid #c6d9cb; color: var(--mobile-accent); font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.portal-home-briefing { padding: 13px 15px; margin-bottom: 12px; border: 1px solid #c2d5c7; border-radius: 17px; background: #f3faf3; }
.portal-home-briefing h2 { font-size: 1rem; margin: 0 0 5px; }
.portal-home-briefing p { margin: 5px 0 10px; }
.portal-home-briefing.is-warning { color: #763823; border-color: #bb8c78; border-left: 4px solid #a35132; background: #fff4e7; }
.portal-home-briefing.is-warning .muted { color: #763823; }
.portal-kpis { gap: 8px; }
.portal-kpi { border-radius: 15px; padding: 11px 12px; box-shadow: var(--mobile-shadow); }
.portal-kpi strong { font-size: 1.375rem; }
.portal-kpi span { font-size: .875rem; margin-top: 4px; }

.portal-panel, .patient-card, .stop-card, .workspace-card, .workspace-form,
.report-card, .notification-item, .device-item, .help-topic, .settings-list,
.portal-doctor-card, .portal-chat-main, .portal-chat-rooms {
  border-radius: var(--mobile-radius); box-shadow: var(--mobile-shadow);
}
.work-status { border-radius: var(--mobile-radius); border-color: #bcd4c4; padding: 12px 14px; background: #fbfdf9; box-shadow: var(--mobile-shadow); }
.work-status header { align-items: start; gap: 6px 12px; }
.work-status header > strong { font-size: .9375rem; }
.work-status-actions { gap: 8px; }
.work-status-actions button { min-height: 46px; border-radius: 12px; background: #edf5ed; color: #234f44; border-color: #c4d6c8; font-size: .9375rem; hyphens: none; }
.work-status-actions button.active { background: #246354; border-color: #246354; color: #fff; }
.work-status > .work-status-actions > button:first-child:not(.active) { background: #246354; border-color: #246354; color: #fff; }
.work-time-options > summary { padding-block: 11px; font-size: .9375rem; color: #375e4b; }
.work-time-options .work-status-actions { margin-top: 8px; }
.sickness-panel { overflow: visible; }
.work-time-summary, .work-time-live, .work-time-entry-note, .work-time-total-note,
.work-time-plan, .work-time-warning, .sickness-note, .sickness-help > summary { font-size: .875rem; }
.report-briefing { box-shadow: none; border-radius: 15px; padding: 11px 12px; }
.report-briefing.ready h2 { font-size: .9375rem; }
.summary-band { border-radius: 15px; background: #fafffb; }
.summary-band strong { font-size: 1.3rem; }
.summary-band span { font-size: .8125rem; }
.support-actions button { font-size: .9375rem; background: #eff4fa; color: #305e85; border-color: #c7d8e5; }
.support-panel > summary { font-size: .9375rem; }
.work-time-totals { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.work-time-badge { white-space: normal; }
.privacy-note { font-size: .875rem; }

.bottom-nav {
  gap: 3px; min-height: calc(70px + env(safe-area-inset-bottom));
  padding: 5px max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border-color: #c2d5c7; background: #fafdfa; box-shadow: 0 -5px 22px rgba(24, 48, 46, .065);
}
.bottom-nav > button { min-height: 60px; gap: 4px; padding: 7px 3px; border-radius: 14px; font-size: .75rem; color: #50675f; }
.bottom-nav > button.active { color: #245b47; background: #e3f0e5; box-shadow: inset 0 3px #397859; border-top-color: transparent; }
.bottom-nav > button.active .nav-symbol { stroke: #245b47; }
.bottom-nav .nav-label { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.bottom-nav .nav-symbol { width: 23px; height: 23px; }

/* Ältere Geräte erhalten die deckende Grundfläche statt schlecht lesbarer Transparenz. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #portal-navigation { background: rgba(243, 250, 244, .89); -webkit-backdrop-filter: blur(24px) saturate(125%); backdrop-filter: blur(24px) saturate(125%); }
  #portal-navigation::backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  #portal-navigation .dialog-header { background: rgba(243, 250, 244, .97); }
  .mobile-menu-group { background: rgba(255, 255, 255, .87); }
  .mobile-menu-links button { background: rgba(255, 255, 255, .84); }
  .mobile-menu-links button.active { background: var(--mobile-accent-soft); }
  .bottom-nav { background: rgba(250, 253, 250, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .app-header { background: rgba(32, 61, 55, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@media (hover: hover) {
  .primary-button:not(:disabled):hover { background: #194c40; border-color: #194c40; }
  .secondary-button:not(:disabled):hover, .mobile-back-button:hover { background: #e6f1e8; }
  .mobile-tour-alert.secondary-button:not(:disabled):hover { background: #ffecd0; border-color: #ad824c; }
  .portal-menu button:not(.active):hover { border-color: #b4cab9; background: #edf5ef; }
  .mobile-menu-group > summary:hover, .mobile-fold > summary:hover,
  .mobile-tour-tools > summary:hover, .portal-home-fold > summary:hover { filter: brightness(.98); }
}
@media (min-width: 700px) {
  .app-header { padding-inline: max(20px, calc((100vw - 1016px) / 2)); }
  .mobile-screen-bar { margin-inline: 16px; }
  .screen { padding-inline: 16px; }
}
@media (max-width: 420px) {
  .portal-home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-home-shortcut:first-child { grid-column: 1 / -1; min-height: 54px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
  .portal-home-shortcut:first-child small { margin-left: auto; }
  .portal-home-shortcut { min-height: 68px; }
  .portal-home-next { padding: 14px; }
  .portal-home-next .portal-inline-actions > button { flex: 1 1 130px; }
  .portal-home-fold .portal-agenda-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .portal-home-tasks .portal-agenda-item { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .portal-home-tasks .portal-date-tag { justify-self: start; }
  .portal-home-fold .portal-date-tag { justify-self: start; }
  .work-status-actions, .support-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .report-briefing.ready { grid-template-columns: minmax(0, 1fr); }
  .report-briefing.ready > button { justify-self: start; }
  #portal-navigation { padding-inline: 10px; }
  .portal-menu button { gap: 2px 8px; }
  .portal-menu button:has(> .mobile-menu-icon) { grid-template-columns: 30px minmax(0, 1fr); }
  .portal-menu button .mobile-menu-icon { width: 30px; min-height: 32px; }
}
@media (prefers-reduced-transparency: reduce) {
  #portal-navigation, #portal-navigation .dialog-header { background: #f3faf4; }
  .mobile-menu-group, .mobile-menu-links button { background: #fff; }
  .mobile-menu-links button.active { background: var(--mobile-accent-soft); }
  .app-header { background: #203d37; }
  .bottom-nav { background: #fafdfa; }
  #portal-navigation, #portal-navigation::backdrop, .app-header, .bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .app-header, #portal-navigation, #portal-navigation .dialog-header, .bottom-nav,
  .mobile-menu-group, .mobile-menu-links button, .mobile-fold, .mobile-tour-tools,
  .portal-home-fold, .portal-home-next, .portal-home-shortcut, .portal-home-briefing {
    color: CanvasText; background: Canvas; border: 1px solid CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .mobile-menu-group > summary, .mobile-fold > summary, .mobile-tour-tools > summary,
  .portal-home-fold > summary, .mobile-menu-icon, .portal-home-count { color: CanvasText; background: Canvas; }
  .portal-menu button.active, .bottom-nav > button.active { border: 2px solid Highlight; }
  .mobile-back-button, .primary-button, .secondary-button, .work-status-actions button { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
  .app-header .network-state, .portal-menu button .mobile-menu-label, .portal-menu button .mobile-menu-hint { color: CanvasText; }
  #portal-navigation::backdrop { background: Canvas; opacity: .6; }
}