/* * Calm workspace shell * * Loaded after app.css and activated only while has .calm-ui. * The screen controller owns visibility through .workspace-screen-hidden. */ body.calm-ui { --calm-navy: #0e1b2a; --calm-navy-soft: #16273b; --calm-navy-deep: #0a141f; --calm-gold: #f7d05b; --calm-gold-dark: #e0b431; --calm-surface: #ffffff; --calm-canvas: #f4f6f8; --calm-border: #d8e0e7; --calm-muted: #617082; --calm-shadow: 0 8px 24px rgb(14 27 42 / 8%); --calm-radius: 14px; background: var(--calm-canvas); color: var(--calm-navy-soft); } body.calm-ui .top { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(12px, 2vw, 24px); min-height: 64px; padding: 8px clamp(18px, 3vw, 44px); background: var(--calm-navy); box-shadow: 0 2px 12px rgb(10 20 31 / 16%); } body.calm-ui .top .brand { flex: 0 0 auto; font-size: 19px; line-height: 1; } body.calm-ui .top .brand span { margin-top: 6px; font-size: 8px; } body.calm-ui .top-meta { flex: 0 0 auto; } body.calm-ui #identity { flex: 0 0 auto; gap: 10px; margin-left: 0; } body.calm-ui #identity button { min-height: 44px; padding: 8px 12px; } body.calm-ui .top + main { width: 100%; max-width: 1280px; padding: 28px clamp(18px, 4vw, 56px) 44px; } body.calm-ui #workspace { min-height: calc(100dvh - 136px); } body.calm-ui #workspace > .workspace-screen-item.workspace-screen-hidden, body.calm-ui #workspace .workspace-screen-hidden { display: none !important; } body.calm-ui #workspace > .workspace-screen-item:not(.workspace-screen-hidden) { min-width: 0; } body.calm-ui .workspace-nav { order: 0; display: flex; flex: 0 1 auto; align-items: center; gap: 4px; width: auto; margin: 0 0 0 auto; overflow: visible; } body.calm-ui .workspace-nav button, body.calm-ui .workspace-nav [data-workspace-screen], body.calm-ui .workspace-nav [data-workspace-target] { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #dce5ee; font-size: 12px; font-weight: 650; line-height: 1.15; white-space: nowrap; } body.calm-ui .workspace-nav button:hover, body.calm-ui .workspace-nav [data-workspace-screen]:hover, body.calm-ui .workspace-nav [data-workspace-target]:hover { border-color: #405269; background: #1b3046; color: #ffffff; } body.calm-ui .workspace-nav [aria-current]:not([aria-current="false"]) { border-color: rgb(247 208 91 / 52%); background: rgb(247 208 91 / 14%); color: var(--calm-gold); } body.calm-ui .workspace-nav svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Late-loaded legacy modules may still append jump buttons. The calm shell intentionally exposes exactly its five screen destinations. */ body.calm-ui .workspace-nav > :not([data-workspace-screen]) { display: none !important; } body.calm-ui .workspace-screen-item > .heading, body.calm-ui .workspace-screen-item > .inbox-heading { margin-bottom: 18px; } body.calm-ui .workspace-screen-item > .heading h1 { margin-bottom: 6px; } body.calm-ui .workspace-screen-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 20px; } body.calm-ui .workspace-screen-heading .eyebrow, body.calm-ui .workspace-screen-heading h1, body.calm-ui .workspace-screen-heading p { margin-top: 0; } body.calm-ui .workspace-screen-heading h1 { margin-bottom: 7px; } body.calm-ui .workspace-screen-heading p:last-child { margin-bottom: 0; color: var(--calm-muted); } body.calm-ui .workspace-screen-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } body.calm-ui .workspace-screen-actions button { min-height: 44px; } body.calm-ui #workspace > .views #view-contacts, body.calm-ui #workspace > .views #view-agenda, body.calm-ui #workspace > .views #manual-entry-open { display: none !important; } body.calm-ui #workspace > .views { justify-content: flex-start; min-height: 0; margin-bottom: 12px; padding: 0; border: 0; } /* Today dashboard -------------------------------------------------------- */ body.calm-ui #today-dashboard { display: grid; gap: 16px; margin: 0 0 24px; } body.calm-ui #today-dashboard .today-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid var(--calm-border); border-top: 4px solid var(--calm-gold-dark); border-radius: var(--calm-radius); background: var(--calm-surface); box-shadow: var(--calm-shadow); } body.calm-ui #today-dashboard .today-dashboard-head .eyebrow, body.calm-ui #today-dashboard .today-dashboard-head h2, body.calm-ui #today-dashboard .today-dashboard-head p { margin-top: 0; } body.calm-ui #today-dashboard .today-dashboard-head h2 { margin-bottom: 6px; } body.calm-ui #today-dashboard .today-dashboard-head p:last-child { margin-bottom: 0; } body.calm-ui #today-dashboard .today-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; gap: 8px; } body.calm-ui #today-dashboard .today-quick-actions button { width: 100%; min-height: 44px; white-space: nowrap; } body.calm-ui #today-dashboard .today-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr); gap: 16px; align-items: stretch; } body.calm-ui #today-dashboard .today-card, body.calm-ui #today-dashboard #today-agenda, body.calm-ui #today-dashboard #today-replies, body.calm-ui #today-dashboard #today-priority { min-width: 0; padding: 20px; border: 1px solid var(--calm-border); border-top: 4px solid var(--calm-gold-dark); border-radius: var(--calm-radius); background: var(--calm-surface); box-shadow: var(--calm-shadow); } body.calm-ui #today-dashboard .today-primary, body.calm-ui #today-dashboard #today-priority { border-color: #29445e; border-top-color: var(--calm-gold); background: var(--calm-navy); color: #ffffff; } body.calm-ui #today-dashboard .today-primary .muted, body.calm-ui #today-dashboard #today-priority .muted { color: #c2cfdb; } body.calm-ui #today-dashboard .today-card > :first-child, body.calm-ui #today-dashboard #today-agenda > :first-child, body.calm-ui #today-dashboard #today-replies > :first-child, body.calm-ui #today-dashboard #today-priority > :first-child { margin-top: 0; } body.calm-ui #today-dashboard .today-card > :last-child, body.calm-ui #today-dashboard #today-agenda > :last-child, body.calm-ui #today-dashboard #today-replies > :last-child, body.calm-ui #today-dashboard #today-priority > :last-child { margin-bottom: 0; } body.calm-ui #today-dashboard .today-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } body.calm-ui #today-dashboard .today-confirmed { border-top-color: #4b9270; } body.calm-ui #today-dashboard .today-confirmed .today-card-head p { margin: 0; } body.calm-ui #today-dashboard .today-confirmed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.calm-ui #today-dashboard .today-confirmed-item { min-width: 0; padding: 16px; border: 1px solid #cce1d5; border-radius: 10px; background: #f1f8f4; } body.calm-ui #today-dashboard .today-confirmed-item h3 { margin-top: 10px; overflow-wrap: anywhere; } body.calm-ui #today-dashboard .today-confirmed-time { font-weight: 700; } body.calm-ui #today-dashboard .today-confirmed-item > p { margin: 8px 0; } body.calm-ui #today-dashboard .today-confirmed-item > button { min-height: 44px; margin-top: 4px; } body.calm-ui #today-dashboard h2 { margin: 5px 0 8px; font-size: clamp(22px, 3vw, 30px); } body.calm-ui #today-dashboard h3 { margin: 4px 0 8px; font-size: 18px; } body.calm-ui #today-dashboard p { overflow-wrap: anywhere; } body.calm-ui #today-dashboard .today-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } body.calm-ui #today-dashboard .today-actions > button, body.calm-ui #today-dashboard .today-actions > a { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 9px; text-align: center; text-decoration: none; } body.calm-ui #today-dashboard .today-primary .today-actions > button:not(.quiet), body.calm-ui #today-dashboard .today-primary .today-actions > a:not(.quiet), body.calm-ui #today-dashboard #today-priority .today-actions > button:not(.quiet), body.calm-ui #today-dashboard #today-priority .today-actions > a:not(.quiet) { border-color: var(--calm-gold); background: var(--calm-gold); color: var(--calm-navy-deep); } body.calm-ui #today-dashboard .today-primary .today-actions > .quiet, body.calm-ui #today-dashboard #today-priority .today-actions > .quiet { border-color: #526981; color: #ffffff; } body.calm-ui #today-dashboard .today-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.calm-ui #today-dashboard .today-count { display: grid; align-content: center; min-width: 0; min-height: 86px; padding: 13px 14px; border: 1px solid var(--calm-border); border-radius: 11px; background: #ffffff; color: var(--calm-navy-soft); text-align: left; } body.calm-ui #today-dashboard .today-counts > button { display: grid; align-content: center; width: 100%; min-width: 0; min-height: 86px; padding: 13px 14px; border: 1px solid var(--calm-border); border-radius: 11px; background: #ffffff; color: var(--calm-navy-soft); text-align: left; } body.calm-ui #today-dashboard button.today-count { width: 100%; } body.calm-ui #today-dashboard .today-count strong { display: block; margin-bottom: 3px; color: var(--calm-navy); font-size: 25px; font-weight: 650; line-height: 1; } body.calm-ui #today-dashboard .today-counts > button strong { display: block; margin-bottom: 3px; color: var(--calm-navy); font-size: 25px; font-weight: 650; line-height: 1; } body.calm-ui #today-dashboard .today-count span, body.calm-ui #today-dashboard .today-count small, body.calm-ui #today-dashboard .today-counts > button span, body.calm-ui #today-dashboard .today-counts > button small { color: var(--calm-muted); font-size: 11px; line-height: 1.35; } body.calm-ui #today-dashboard .today-attention { padding: 20px; border: 1px solid var(--calm-border); border-radius: var(--calm-radius); background: var(--calm-surface); box-shadow: var(--calm-shadow); } body.calm-ui #today-dashboard .today-attention > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } body.calm-ui #today-dashboard .today-attention > div:first-child h3 { margin: 0; } body.calm-ui #today-dashboard .text-button { min-height: 44px; padding: 7px 10px; border-color: transparent; background: transparent; color: #244e77; } body.calm-ui #today-dashboard #today-attention-list { display: grid; gap: 9px; } body.calm-ui #today-dashboard .today-attention-item, body.calm-ui #today-dashboard .today-empty, body.calm-ui #today-dashboard .today-clear { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0; padding: 14px; border: 1px solid #e0e6eb; border-left: 4px solid var(--calm-gold-dark); border-radius: 10px; background: #fbfcfd; } body.calm-ui #today-dashboard .today-attention-item > div { min-width: 0; } body.calm-ui #today-dashboard .today-attention-item span, body.calm-ui #today-dashboard .today-empty span, body.calm-ui #today-dashboard .today-clear span { display: block; color: var(--calm-muted); font-size: 11px; } body.calm-ui #today-dashboard .today-attention-item h3 { margin: 4px 0; } body.calm-ui #today-dashboard .today-attention-item p { margin: 0; color: #42566b; font-size: 12px; } body.calm-ui #today-dashboard .today-attention-item > button, body.calm-ui #today-dashboard .today-empty > button { min-height: 44px; } body.calm-ui #today-dashboard .today-clear { grid-template-columns: 1fr; border-left-color: #6d9b7d; background: #f2f8f4; } body.calm-ui .more-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; } body.calm-ui .more-menu > button { display: grid; gap: 5px; width: 100%; min-height: 88px; padding: 16px; border: 1px solid var(--calm-border); border-left: 4px solid var(--calm-gold-dark); border-radius: 11px; background: #ffffff; color: var(--calm-navy-soft); text-align: left; } body.calm-ui .more-menu > button:hover { border-color: #c6a443; background: #fffdf6; } body.calm-ui .more-menu > button strong { font-size: 16px; } body.calm-ui .more-menu > button span { color: var(--calm-muted); font-size: 12px; font-weight: 450; } body.calm-ui #today-dashboard .today-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 10px; color: var(--calm-muted); font-size: 12px; } body.calm-ui #today-dashboard .today-primary .today-meta, body.calm-ui #today-dashboard #today-priority .today-meta { color: #c2cfdb; } body.calm-ui #today-dashboard .badge { width: fit-content; } /* Keep action sizing predictable when existing modules are placed in screens. */ body.calm-ui .workspace-screen-item .screen-primary-action, body.calm-ui .workspace-screen-item .screen-actions > button, body.calm-ui .workspace-screen-item .screen-actions > a { min-height: 44px; } /* Inbox keeps the decision visible and moves supporting evidence behind one disclosure. The page itself owns scrolling so cards never create a second scroll surface. */ body.calm-ui .inbox-list { max-height: none; overflow: visible; overscroll-behavior: auto; padding-right: 0; } body.calm-ui .inbox-scroll-context { display: none !important; } body.calm-ui .inbox-card { display: flex; min-width: 0; flex-direction: column; padding: 18px; } body.calm-ui .inbox-card-summary { margin: 0 0 12px; color: #263b50; font-size: 13px; line-height: 1.55; white-space: pre-wrap; } body.calm-ui .inbox-next-action { margin: 0 0 13px; padding: 10px 12px; border-left: 3px solid var(--category-line, var(--calm-gold-dark)); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--category-bg, #fbf5e8) 72%, #ffffff); } body.calm-ui .inbox-next-action > span { display: block; margin-bottom: 3px; color: var(--category-text, #795416); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } body.calm-ui .inbox-next-action > p { margin: 0; color: #31475d; font-size: 12px; line-height: 1.5; } body.calm-ui .inbox-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #e5e9ee; } body.calm-ui .inbox-card-footer .inbox-task-status { margin: 0; padding: 0; border: 0; } body.calm-ui .inbox-primary-action { flex: 0 0 auto; } body.calm-ui .inbox-primary-action button { min-height: 44px; padding: 9px 13px; } body.calm-ui .inbox-card-details { margin-top: 12px; border-top: 1px solid #e5e9ee; } body.calm-ui .inbox-card-details > summary { width: fit-content; min-height: 44px; padding: 12px 2px; color: #53687d; cursor: pointer; font-size: 13px; font-weight: 650; } body.calm-ui .inbox-message-meta { display: grid; gap: 4px; margin-top: 12px; padding: 11px 12px; border-radius: 8px; background: #f5f7f9; overflow-wrap: anywhere; } body.calm-ui .inbox-message-meta strong { font-size: 12px; } body.calm-ui .inbox-message-meta span { color: var(--calm-muted); font-size: 10px; } body.calm-ui .inbox-secondary-actions { padding-top: 10px; border-top: 1px solid #e5e9ee; } body.calm-ui .inbox-secondary-actions button { min-height: 44px; font-size: 12px; } /* Today already explains the planning context. Keep Manny's live route card concise and leave the detailed policy text out of the primary workflow. */ body.calm-ui[data-workspace-screen="today"] #fair-assistant { padding: 19px; } body.calm-ui[data-workspace-screen="today"] #fair-assistant .fair-assistant-rule, body.calm-ui[data-workspace-screen="today"] #fair-assistant .fair-assistant-disclaimer { display: none; } body.calm-ui[data-workspace-screen="today"] #fair-assistant .fair-assistant-hold-note:empty { display: none; } @media (max-width: 1100px) { body.calm-ui .top-meta { display: none; } body.calm-ui .workspace-nav button, body.calm-ui .workspace-nav [data-workspace-screen], body.calm-ui .workspace-nav [data-workspace-target] { padding-inline: 9px; font-size: 11px; } } @media (max-width: 767px) { body.calm-ui .top { min-height: 60px; padding: 7px 12px; gap: 10px; } body.calm-ui .top .brand { font-size: 17px; } body.calm-ui .top .brand span { margin-top: 5px; font-size: 7px; } body.calm-ui #identity { min-width: 0; margin-left: auto; font-size: 12px; } body.calm-ui #user-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.calm-ui #identity button { min-width: 44px; min-height: 44px; padding: 7px 10px; } body.calm-ui .top + main { padding: 18px 12px calc(82px + env(safe-area-inset-bottom)); } body.calm-ui #workspace { min-height: calc(100dvh - 142px - env(safe-area-inset-bottom)); } body.calm-ui .workspace-nav { position: fixed; inset: auto 0 0; z-index: 80; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; min-height: calc(66px + env(safe-area-inset-bottom)); margin: 0; padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); overflow: visible; border-top: 1px solid #34495f; background: var(--calm-navy-deep); box-shadow: 0 -8px 22px rgb(10 20 31 / 18%); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease; } body.calm-ui .workspace-nav button, body.calm-ui .workspace-nav [data-workspace-screen], body.calm-ui .workspace-nav [data-workspace-target] { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 54px; padding: 5px 3px; border: 0; border-radius: 8px; color: #cbd6e0; font-size: 10px; line-height: 1.15; text-align: center; white-space: normal; } body.calm-ui .workspace-nav [aria-current]:not([aria-current="false"]) { border: 0; background: var(--calm-gold); color: var(--calm-navy-deep); } body.calm-ui.dialog-open .workspace-nav { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(110%); } body.calm-ui .workspace-screen-item { width: 100%; min-width: 0; } body.calm-ui .workspace-screen-heading { display: block; margin-bottom: 16px; } body.calm-ui .workspace-screen-heading h1 { font-size: 29px; } body.calm-ui .workspace-screen-actions { display: grid; grid-template-columns: 1fr; width: 100%; margin-top: 14px; } body.calm-ui .workspace-screen-actions button { width: 100%; min-height: 48px; } body.calm-ui #agenda-screen-heading .workspace-screen-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.calm-ui #agenda-screen-heading #agenda-add { grid-column: 1 / -1; } body.calm-ui .workspace-screen-item button, body.calm-ui dialog button { min-height: 44px; } body.calm-ui .workspace-screen-item input, body.calm-ui .workspace-screen-item select, body.calm-ui .workspace-screen-item textarea { font-size: 16px; } body.calm-ui .workspace-screen-item input, body.calm-ui .workspace-screen-item select { min-height: 48px; } /* Auch in Dialogen iOS-Fokuszoom verhindern, ohne Checkboxen/Uploads zu vergrößern. */ body.calm-ui #meeting-dialog, body.calm-ui #manual-entry-dialog { scroll-padding-bottom: 160px; } body.calm-ui dialog :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) { box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 48px !important; font-size: 16px !important; } body.calm-ui dialog textarea { min-height: 96px !important; } /* WebKit begrenzt native Selects sonst trotz min-height auf die Systemhöhe. */ body.calm-ui :is(dialog, .workspace-screen-item) select { -webkit-appearance: none; appearance: none; min-height: 48px; padding: 10px 36px 10px 12px; border: 1px solid var(--calm-border); border-radius: 8px; background-color: var(--calm-surface); background-image: linear-gradient(45deg, transparent 50%, var(--calm-muted) 50%), linear-gradient(135deg, var(--calm-muted) 50%, transparent 50%); background-position: right 17px center, right 12px center; background-size: 5px 5px; background-repeat: no-repeat; color: var(--calm-navy-soft); } body.calm-ui #today-dashboard .today-confirmed-list { grid-template-columns: 1fr; } body.calm-ui #today-dashboard .today-confirmed .today-card-head { flex-wrap: wrap; } body.calm-ui .workspace-screen-item .screen-actions, body.calm-ui .workspace-screen-item .screen-primary-action, body.calm-ui .workspace-screen-item .screen-actions > button, body.calm-ui .workspace-screen-item .screen-actions > a { width: 100%; } body.calm-ui #today-dashboard { gap: 12px; margin-bottom: 18px; } body.calm-ui #today-dashboard .today-grid { grid-template-columns: 1fr; gap: 12px; } body.calm-ui #today-dashboard .today-dashboard-head { display: block; padding: 16px; border-radius: 12px; } body.calm-ui #today-dashboard .today-quick-actions { width: 100%; margin-top: 14px; } body.calm-ui #today-dashboard .today-quick-actions button { min-height: 48px; } body.calm-ui #today-dashboard .today-card, body.calm-ui #today-dashboard #today-agenda, body.calm-ui #today-dashboard #today-replies, body.calm-ui #today-dashboard #today-priority { padding: 16px; border-radius: 12px; } body.calm-ui #today-dashboard h2 { font-size: 24px; } body.calm-ui #today-dashboard .today-actions > button, body.calm-ui #today-dashboard .today-actions > a { min-height: 48px; } body.calm-ui #today-dashboard .today-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } body.calm-ui #today-dashboard .today-count { min-height: 78px; padding: 11px 9px; } body.calm-ui #today-dashboard .today-counts > button { min-height: 78px; padding: 11px 9px; } body.calm-ui #today-dashboard .today-count strong { font-size: 22px; } body.calm-ui #today-dashboard .today-counts > button strong { font-size: 22px; } body.calm-ui #today-dashboard .today-count span, body.calm-ui #today-dashboard .today-count small, body.calm-ui #today-dashboard .today-counts > button span, body.calm-ui #today-dashboard .today-counts > button small { font-size: 10px; } body.calm-ui #today-dashboard .today-attention { padding: 15px; } body.calm-ui #today-dashboard .today-attention-item, body.calm-ui #today-dashboard .today-empty, body.calm-ui #today-dashboard .today-clear { grid-template-columns: 1fr; gap: 10px; padding: 13px; } body.calm-ui #today-dashboard .today-attention-item > button, body.calm-ui #today-dashboard .today-empty > button { width: 100%; min-height: 48px; } body.calm-ui .more-menu { grid-template-columns: 1fr; gap: 9px; } body.calm-ui .more-menu > button { min-height: 76px; } body.calm-ui .inbox-card-footer { align-items: stretch; flex-direction: column; } body.calm-ui .inbox-primary-action, body.calm-ui .inbox-primary-action button { width: 100%; } body.calm-ui .inbox-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } body.calm-ui .inbox-secondary-actions button { width: 100%; } } @media (max-width: 420px) { body.calm-ui #user-name { display: none; } body.calm-ui #today-dashboard .today-actions { grid-template-columns: 1fr; } } @media (max-width: 340px) { body.calm-ui .top { padding-inline: 10px; } } @media (prefers-reduced-motion: reduce) { body.calm-ui .workspace-nav { transition: none; } }