/* Keep one frame owner in all three themes. Replacing a non-existent Classic
   pseudo-element with a glass slot made the new outline appear at full color
   before the surrounding surface had transitioned. */
html[data-potok-style] #projectsView .solo-board-frame-slot {
  position: relative;
  display: block;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  z-index: 31;
  pointer-events: none;
  --solo-frame-width: 0.5px;
}
html[data-potok-style="classic"] #projectsView .solo-board-frame-slot { --solo-frame-width: 1px; }
html[data-potok-style] #projectsView .solo-board-frame-slot--take {
  grid-column: 1;
  --solo-frame-color: #dfe4e9;
}
html[data-potok-style] #projectsView .solo-board-frame-slot--workflow {
  grid-column: 3 / -1;
  --solo-frame-color: #e3e7ed;
}
html[data-potok-style] body[data-project-view="blocks"] #projectsView .solo-board-frame-slot--workflow { --solo-frame-color: #d8dee7; }
html[data-potok-style] #projectsView .solo-board-frame {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 var(--solo-frame-width) var(--solo-frame-color) !important;
  pointer-events: none;
}
html[data-potok-style] #projectsView .columns::before { content: none !important; }
html[data-potok-style] #projectsView .columns > .column[data-status="take"] { border-color: transparent !important; }
html[data-potok-style] #projectsView .solo-workflow-scroll { box-shadow: none !important; }
html[data-potok-style] #projectsView .solo-columns-layout > .column[data-status="take"] { grid-column: 1; grid-row: 1; }
html[data-potok-style] #projectsView .solo-columns-layout > .workflow-gap { grid-column: 2; grid-row: 1; }
html[data-potok-style] #projectsView .solo-columns-layout > .solo-workflow-scroll { grid-column: 3 / -1; grid-row: 1; }
/* Colored column paper is rounded; its independent glass heading must have
   matching outer corners even when the two surfaces have different hues. */
html[data-potok-style] #projectsView .column[data-status="take"] > .column-head { border-radius: 9px 9px 0 0; }
html[data-potok-style] #projectsView .column[data-status="consider"] > .column-head { border-top-left-radius: 9px; }
html[data-potok-style] #projectsView .column[data-status="done"] > .column-head { border-top-right-radius: 9px; }

.potok-style-section {
  padding: 10px 13px;
  border-bottom: 1px solid #e3e7ed;
}
body .account-popover .potok-style-switch {
  --style-index: 0;
  --style-switch-text: #728094;
  --style-switch-selected: #246bfe;
  --style-switch-border: #d8e0ea;
  --style-switch-thumb: #fff;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  height: 32px;
  border: 0;
  background: transparent;
  isolation: isolate;
}
body .account-popover .potok-style-switch-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / 3);
  border: 1px solid var(--style-switch-border);
  border-radius: 6px;
  background: var(--style-switch-thumb);
  box-shadow: none;
  transform: translateX(calc(var(--style-index) * 100%));
  transition: transform 250ms cubic-bezier(.4, 0, .6, 1), background-color 250ms linear, border-color 250ms linear;
  pointer-events: none;
}
body .account-popover .potok-style-switch .potok-style-option {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--style-switch-text) !important;
  font: inherit;
  font-size: 10px;
  line-height: 14px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 250ms linear;
}
body .account-popover .potok-style-switch .potok-style-option[aria-checked="true"] { color: var(--style-switch-selected) !important; }
body .account-popover .potok-style-switch .potok-style-option:focus-visible { outline: 1px solid var(--style-switch-selected) !important; outline-offset: -2px; }
body[data-color-theme="dark"] .potok-style-section { border-color: var(--night-line); }
body[data-color-theme="dark"] .account-popover .potok-style-switch {
  --style-switch-text: var(--night-secondary);
  --style-switch-selected: var(--night-lime);
  --style-switch-thumb: #343a42;
  --style-switch-border: #596673;
}
.potok-style-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Old hover rules would otherwise start color transitions in closed drawers
   and offscreen cards. Only the chosen main-surface nodes morph materials;
   normal board movement and visibility transitions remain independent. */
html[data-style-transition="running"] body :not([data-potok-style-morph]):not(.potok-style-switch, .potok-style-switch *),
html[data-style-transition="running"] body :not([data-potok-style-morph]):not(.potok-style-switch, .potok-style-switch *)::before,
html[data-style-transition="running"] body :not([data-potok-style-morph]):not(.potok-style-switch, .potok-style-switch *)::after {
  transition-property: transform, opacity !important;
}
html[data-style-transition="running"] #cardDrawerGlow,
html[data-style-transition="running"] #cardDrawerGlow::before,
html[data-style-transition="running"] #cardDrawerGlow::after { transition: none !important; }

/* Decorative strokes, icons and placeholders morph with their owning element.
   Only material properties participate: no screen snapshots, opacity sweep,
   clipping mask, transforms or interference with the board's FLIP motion. */
html[data-style-transition="running"] [data-potok-style-morph]::before,
html[data-style-transition="running"] [data-potok-style-morph]::after,
html[data-style-transition="running"] [data-potok-style-morph]::placeholder {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
  transition-duration: var(--potok-morph-duration, 230ms) !important;
  transition-delay: var(--potok-morph-delay, 0ms) !important;
  transition-timing-function: linear !important;
}
html[data-potok-style-phase="prepare"] [data-potok-style-morph]::before,
html[data-potok-style-phase="prepare"] [data-potok-style-morph]::after,
html[data-potok-style-phase="prepare"] [data-potok-style-morph]::placeholder { transition: none !important; }
html[data-potok-style-phase="prepare"],
html[data-potok-style-phase="prepare"] body,
html[data-potok-style-phase="prepare"] body :not(.potok-style-switch, .potok-style-switch *) {
  transition-property: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body .account-popover .potok-style-switch-thumb,
  body .account-popover .potok-style-switch .potok-style-option { transition: none; }
}

/* Each visible section is rasterized once, then its exact old/new materials
   blend on the compositor. The root contains only the remaining page surface;
   there is no gradient wipe, DOM clone or per-frame paint of blurred shadows. */
html[data-potok-style-engine="compositor"] *,
html[data-potok-style-engine="compositor"] *::before,
html[data-potok-style-engine="compositor"] *::after {
  transition: none !important;
  animation-play-state: paused !important;
}
html[data-potok-style-engine="compositor"]::view-transition { pointer-events: none; }
html[data-potok-style-engine="compositor"]::view-transition-group(*) {
  animation: none !important;
}
html[data-potok-style-engine="compositor"][data-potok-style-playback="holding"]::view-transition-group(*),
html[data-potok-style-engine="compositor"][data-potok-style-playback="holding"]::view-transition-old(*),
html[data-potok-style-engine="compositor"][data-potok-style-playback="holding"]::view-transition-new(*) {
  animation-play-state: paused !important;
}
html[data-potok-style-engine="compositor"]::view-transition-old(*),
html[data-potok-style-engine="compositor"]::view-transition-new(*) {
  animation-duration: 250ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter !important;
}
html[data-potok-style-engine="compositor"]::view-transition-old(*) { animation-name: potok-material-out; }
html[data-potok-style-engine="compositor"]::view-transition-new(*) { animation-name: potok-material-in; }
@keyframes potok-material-out { from { opacity: 1; } to { opacity: 0; } }
/* Sub-pixel visibility warms the incoming texture while its clock is paused. */
@keyframes potok-material-in { from { opacity: 0.001; } to { opacity: 1; } }

@media (min-width: 761px) {
  body[data-canonical-build="solo"] .top-actions #accountButton { display: grid; }
}

/* Approved mobile appearance; scoped to the canonical Solo shell. */
@media screen and (max-width: 760px) {
  body[data-mobile-design] .mobile-projects-content {
    --mobile-column-gap: 2px;
    padding: 16px 16px 18px !important;
    min-height: 100%;
  }
  body[data-mobile-design] .mobile-projects-title {
    display: flex !important;
    align-items: baseline;
    gap: 9px !important;
    margin: 0 0 20px;
  }
  body[data-mobile-design] .mobile-projects-title h1 {
    font-size: 20px !important;
    font-weight: 730 !important;
    line-height: 26px !important;
    letter-spacing: -.025em;
  }
  body[data-mobile-design] .mobile-projects-title p {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px;
    color: #778196;
  }
  body[data-mobile-design] .mobile-projects-title p::before { content: "|"; color: #99a2af; }
  body[data-mobile-design] .mobile-stage-headings {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: var(--mobile-column-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }
  body[data-mobile-design] .mobile-stage-heading {
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--mobile-stage) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-mobile-design] .mobile-stage-heading span {
    width: 100%;
    min-width: 0;
    font-size: clamp(9px, 2.4vw, 10px) !important;
    font-weight: 540 !important;
    line-height: 13px !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    text-align: center;
  }
  body[data-mobile-design] .mobile-project-table {
    position: relative;
    isolation: isolate;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body[data-mobile-design] .mobile-column-backgrounds {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--mobile-column-gap);
    pointer-events: none;
  }
  .mobile-column-backgrounds > :nth-child(1) { background: #f5f6f8; }
  .mobile-column-backgrounds > :nth-child(2) { background: #fff8f0; }
  .mobile-column-backgrounds > :nth-child(3) { background: #f1f6ff; }
  .mobile-column-backgrounds > :nth-child(4) { background: #fff3f6; }
  .mobile-column-backgrounds > :nth-child(5) { background: #f0faf5; }
  body[data-mobile-design] .mobile-project-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 66px !important;
    min-height: 66px;
    padding: 7px 0 5px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-mobile-design] .mobile-project-row h2 {
    display: block !important;
    flex: 0 0 18px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    font-weight: 560 !important;
  }
  body[data-mobile-design] .mobile-project-name {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0b1a30;
    text-align: left;
    font-family: inherit;
    font-size: 12.5px !important;
    font-weight: 560 !important;
    line-height: 18px !important;
  }
  body[data-mobile-design] .mobile-project-counts {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: var(--mobile-column-gap) !important;
    flex: 1 1 auto;
    min-height: 32px;
    padding: 0 !important;
  }
  body[data-mobile-design] .mobile-project-counts::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 3px;
    background: #c8ff5a;
    pointer-events: none;
  }
  body[data-mobile-design] .mobile-project-count {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mobile-stage) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    line-height: 32px !important;
  }
  body[data-mobile-design] .mobile-project-count:disabled { color: #8f9bad !important; }
  body[data-mobile-design] .mobile-project-count:not(:disabled):active { background: rgb(255 255 255 / 70%) !important; }
  body[data-mobile-design] .mobile-project-count:focus-visible { outline: 2px solid var(--mobile-stage); outline-offset: -2px; }
}

/* Approved mobile appearance; scoped to the canonical Solo shell. */
@media screen and (max-width: 760px) {
  body[data-mobile-design] {
    --font-ui: "F37 Ginger", "TT Days Sans", system-ui, sans-serif;
    --mobile-secondary: #717d8c;
    --mobile-design-line: rgb(35 52 75 / 9%);
    font-family: var(--font-ui) !important;
    font-weight: 400;
  }
  body[data-mobile-design] :is(button, input, select, textarea, .potok-picker-popover) {
    font-family: var(--font-ui) !important;
    font-weight: 400;
  }
  body[data-mobile-design] :is(h1, h2, h3) { font-weight: 500 !important; }
  body[data-mobile-design] .topbar {
    min-height: 56px !important;
    padding-inline: 16px !important;
    gap: 12px !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--mobile-design-line);
  }
  body[data-mobile-design] .topbar .brand-mark { width: 28px !important; height: 28px !important; }
  body[data-mobile-design] .topbar .brand-name { font-size: 16px !important; }
  body[data-mobile-design] .topbar .search {
    border: 1px solid #e6eaf0 !important;
    border-radius: 10px !important;
    background: rgb(248 250 252 / 72%) !important;
    box-shadow: none !important;
  }
  body[data-mobile-design] .topbar .search input { font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] .potok-mobile-nav { border-top-color: var(--mobile-design-line) !important; }
  body[data-mobile-design] .potok-mobile-nav :is(button, .workspace-view-button),
  body[data-mobile-design] .potok-mobile-nav #accountButton::after {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
  }
  body[data-mobile-design] .potok-mobile-nav button { gap: 4px !important; min-height: 44px !important; }
  body[data-mobile-design] .potok-mobile-nav :is(button[aria-pressed="true"],button[aria-expanded="true"]) { font-weight: 500 !important; }
  body[data-mobile-design] .potok-mobile-nav button > i { font-size: 18px !important; line-height: 20px !important; }
  body[data-mobile-design] .mobile-projects-title {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important;
  }
  body[data-mobile-design] .mobile-projects-content { padding-top: 14px !important; }
  body[data-mobile-design] .mobile-stage-heading span {
    font-size: clamp(9.5px, 2.55vw, 10px) !important;
    font-weight: 400 !important; letter-spacing: -.015em !important;
  }
  body[data-mobile-design] .mobile-project-name {
    font-size: 13px !important; font-weight: 450 !important; letter-spacing: 0;
  }
  body[data-mobile-design] .mobile-project-count { font-weight: 400 !important; }
  body[data-mobile-design] .mobile-stage-sheet h2 { font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; }
  body[data-mobile-design] .mobile-stage-sheet header p { font-size: 13px !important; font-weight: 400 !important; }
  body[data-mobile-design] .mobile-stage-task { border-color: var(--mobile-design-line) !important; background: transparent !important; }
  body[data-mobile-design] .mobile-stage-task-open { padding-block: 16px !important; }
  body[data-mobile-design] .mobile-stage-task-open strong { font-size: 15px !important; font-weight: 450 !important; line-height: 21px !important; }
  body[data-mobile-design] .mobile-stage-task-open span { font-size: 12px !important; }
  body[data-mobile-design] .mobile-status-content button { font-size: 14px !important; font-weight: 400 !important; border-color: var(--mobile-design-line) !important; }
  body[data-mobile-design] .potok-sheet-panel { padding: 44px 20px 20px !important; border-radius: 24px 24px 0 0 !important; }
  body[data-mobile-design] .potok-sheet-handle::after { height: 3px !important; width: 32px !important; left: calc(50% - 16px); opacity: .2; }
  body[data-mobile-design] .potok-sheet-close { font-weight: 300 !important; font-size: 25px !important; }
  body[data-mobile-design] #accountPopover,
  body[data-mobile-design] #accountPopover .account-summary,
  body[data-mobile-design] #accountPopover > :is(button, a, section) {
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  }
  body[data-mobile-design] #accountPopover { border: 0 !important; padding: 0 !important; }
  body[data-mobile-design] #accountPopover .account-summary { padding: 0 0 18px !important; border-bottom: 1px solid var(--mobile-design-line) !important; }
  body[data-mobile-design] #accountPopover .account-summary strong { font-size: 17px !important; font-weight: 500 !important; }
  body[data-mobile-design] #accountPopover .account-summary small { font-size: 12px !important; font-weight: 400 !important; margin-top: 5px; }
  body[data-mobile-design] #accountPopover .account-avatar { width: 40px; height: 40px; font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] #accountPopover > :is(button, a) { min-height: 48px !important; padding-inline: 0 !important; gap: 12px !important; font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] #accountPopover > :is(button, a) i { font-size: 18px !important; }
  body[data-mobile-design] .potok-style-section { padding: 14px 0 !important; border-bottom-color: var(--mobile-design-line) !important; }
  body[data-mobile-design] .potok-style-option { font-size: 12px !important; font-weight: 400 !important; }
  body[data-mobile-design] .potok-style-option[aria-checked="true"] { font-weight: 500 !important; }
  body[data-mobile-design] .filter-popover-head strong { font-size: 17px !important; font-weight: 500 !important; }
  body[data-mobile-design] :is(.filter-label-option, .filter-manage-button, .filter-actions button) { font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] :is(.filter-label-option, .label-manager-row) { background: transparent !important; box-shadow: none !important; }
  body[data-mobile-design] :is(.filter-empty, .label-empty-state, .label-create-form label) { font-size: 13px !important; font-weight: 400 !important; }
  body[data-mobile-design] #cardDrawer { border-radius: 0 !important; }
  body[data-mobile-design] #drawerTitle { font-size: 20px !important; font-weight: 450 !important; line-height: 27px !important; letter-spacing: -.01em !important; }
  body[data-mobile-design] .drawer-head { min-height: 78px !important; padding-block: 14px !important; border-bottom: 1px solid var(--mobile-design-line) !important; }
  body[data-mobile-design] .drawer-breadcrumb { font-size: 11px !important; font-weight: 400 !important; letter-spacing: .035em !important; }
  body[data-mobile-design] .drawer-mobile-tabs { border-bottom-color: var(--mobile-design-line) !important; padding-inline: 16px !important; gap: 22px !important; }
  body[data-mobile-design] .drawer-mobile-tabs button { min-height: 44px !important; padding-inline: 0 !important; font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] .drawer-mobile-tabs button[aria-selected="true"] { font-weight: 500 !important; }
  body[data-mobile-design] .drawer-settings-content { padding: 18px 16px !important; }
  body[data-mobile-design] .drawer-side-group { border-color: var(--mobile-design-line) !important; }
  body[data-mobile-design] .drawer-side-group h2,
  body[data-mobile-design] .drawer-meta-caption,
  body[data-mobile-design] .drawer-meta-field > span:first-child { font-size: 12px !important; font-weight: 450 !important; letter-spacing: 0 !important; }
  body[data-mobile-design] .drawer-meta-grid { gap: 10px !important; }
  body[data-mobile-design] #cardDrawer .drawer-date-field,
  body[data-mobile-design] #cardDrawer .drawer-time-row {
    position: relative; display: grid !important; grid-template-columns: 80px minmax(0,1fr) !important;
    gap: 10px !important; align-items: center !important; padding: 0 !important; min-height: 44px !important;
    border: 0 !important; background: transparent !important;
  }
  body[data-mobile-design] #cardDrawer .drawer-date-field > .potok-picker-control,
  body[data-mobile-design] #cardDrawer .drawer-time-row > .potok-picker-control { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; width: 100% !important; transform: none !important; translate: none !important; inset: auto !important; }
  body[data-mobile-design] #cardDrawer .drawer-time-row::after { content: none !important; }
  body[data-mobile-design] #cardDrawer .drawer-time-row > .drawer-meta-caption { display: block !important; grid-column: 1 !important; grid-row: 1 !important; }
  body[data-mobile-design] #cardDrawer .drawer-time-toggle { position: absolute !important; left: 49px !important; top: 0 !important; width: 30px !important; min-width: 30px !important; height: 44px !important; min-height: 44px !important; }
  body[data-mobile-design] #cardDrawer .drawer-date-field .potok-picker-trigger,
  body[data-mobile-design] #cardDrawer .drawer-time-row .potok-picker-trigger {
    height: 44px !important; min-height: 44px !important; padding: 0 12px !important;
    border: 1px solid rgb(38 57 79 / 12%) !important; border-radius: 10px !important;
    background: rgb(255 255 255 / 70%) !important; box-shadow: none !important;
  }
  body[data-mobile-design] .potok-picker-trigger > span { font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 18px !important; text-align: left !important; }
  body[data-mobile-design] #cardDrawer .potok-picker-trigger > span { position: static !important; inset: auto !important; width: auto !important; transform: none !important; translate: none !important; grid-column: 1; }
  body[data-mobile-design] #cardDrawer .urgent-toggle { grid-template-columns: 80px 30px minmax(0,1fr) !important; gap: 10px !important; min-height: 44px !important; }
  body[data-mobile-design] #cardDrawer :is(.drawer-meta-caption, .drawer-side-group h2) { text-transform: none !important; }
  body[data-mobile-design] #drawerTodayComplete { min-height: 50px !important; border: 1px solid var(--mobile-design-line) !important; border-radius: 10px !important; background: rgb(255 255 255 / 62%) !important; }
  body[data-mobile-design] #drawerTodayComplete strong { font-size: 13px !important; font-weight: 450 !important; }
  body[data-mobile-design] #drawerTodayComplete small { font-size: 11px !important; font-weight: 400 !important; }
  body[data-mobile-design] .drawer-today-recurrence { min-height: 46px !important; padding: 10px 12px !important; border-radius: 10px !important; border-color: var(--mobile-design-line) !important; }
  body[data-mobile-design] .drawer-today-recurrence small { font-size: 12px !important; font-weight: 400 !important; line-height: 18px !important; }
  body[data-mobile-design] :is(.drawer-label-empty, .drawer-document-empty, .drawer-documents-count, .drawer-document-open small) { font-size: 12px !important; font-weight: 400 !important; }
  body[data-mobile-design] :is(.drawer-live-material, .drawer-document-add) { min-height: 44px !important; font-size: 13px !important; font-weight: 450 !important; border-radius: 10px !important; }
  body[data-mobile-design] .drawer-description-panel { padding: 14px 16px 16px !important; }
  body[data-mobile-design] .description-editor-shell { border: 1px solid var(--mobile-design-line) !important; border-radius: 12px !important; overflow: hidden; box-shadow: none !important; }
  body[data-mobile-design] .editor-toolbar { min-height: 44px !important; border-bottom: 1px solid var(--mobile-design-line) !important; background: rgb(255 255 255 / 60%) !important; }
  body[data-mobile-design] #drawerDescription { font-family: var(--font-ui) !important; font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important; font-style: normal !important; padding: 16px !important; }
  body[data-mobile-design] #todayView { font-family: var(--font-ui) !important; }
  body[data-mobile-design] .today-title-line h1 { font-size: 22px !important; font-weight: 500 !important; }
  body[data-mobile-design] :is(.today-column > header h2, .today-panel header h2) { font-weight: 500 !important; }
  body[data-mobile-design] .today-task h3 { font-weight: 450 !important; }
  body[data-mobile-design] .today-task-project { font-weight: 400 !important; }
  body[data-mobile-design] :is(.today-primary-button, .today-secondary-button, .today-empty button, .today-task-actions button) { font-weight: 450 !important; }
  body[data-mobile-design] .today-panel > header { border-bottom-color: var(--mobile-design-line) !important; background: transparent !important; }
  body[data-mobile-design] .today-panel header h2 { font-size: 20px !important; }
  body[data-mobile-design] .today-panel-content { padding: 20px !important; }
  body[data-mobile-design] #todayPanel { align-self: end !important; height: min(720px, 90dvh) !important; max-height: calc(100dvh - 24px) !important; border-radius: 24px 24px 0 0 !important; }
  body[data-mobile-design] #todayPanel { position: relative !important; z-index: 1 !important; outline: none !important; }
  body[data-mobile-design] #todayPanelCatcher { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; z-index: 0 !important; }
  body[data-mobile-design] #todayPanel:has(.today-settings-section) { height: auto !important; }
  body[data-mobile-design] #todayPanelContent { overflow-y: auto !important; }
  body[data-mobile-design] #todayPanelEyebrow { font-size: 10px !important; font-weight: 400 !important; }
  body[data-mobile-design] .today-column { min-height: 0 !important; }
  body[data-mobile-design] #todayColumns { gap: 18px !important; }
  body[data-mobile-design] .today-list { min-height: 0 !important; }
  body[data-mobile-design] :is(.today-done-task, .today-later-task) > div > span { font-size: 11px !important; line-height: 16px !important; }
  body[data-mobile-design] .today-focus-task .today-task-project { font-size: 12px !important; }
  body[data-mobile-design] .today-focus-task h3 { font-size: 20px !important; }
  body[data-mobile-design] .today-focus-meta { font-size: 12px !important; }
  body[data-mobile-design] .today-focus-task .today-task-actions button { min-height: 40px !important; font-size: 12px !important; border-radius: 9px !important; }
  body[data-mobile-design].focus-mode .card-focus-controls { opacity: 1 !important; left: clamp(16px, calc(var(--focus-controls-left) - 66px), calc(100vw - 160px)) !important; }
  body[data-mobile-design] .card-focus-controls button { width: 44px !important; height: 44px !important; opacity: 1 !important; color: #617184 !important; background: rgb(255 255 255 / 92%) !important; border-color: #d6dfe8 !important; }
  body[data-mobile-design] .card-focus-controls button[aria-pressed="true"] { color: #246bfe !important; background: #edf4ff !important; border-color: #cddffb !important; }
  body[data-mobile-design] .card-focus-controls button > i,
  body[data-mobile-design] .card-focus-controls button > i::before { width: 18px !important; height: 18px !important; font-size: 17px !important; line-height: 18px !important; }
  body[data-mobile-design] :is(.today-day-done-action, .today-complete-action) { opacity: 1 !important; color: #5c6b7c !important; }
  body[data-mobile-design] .today-heading p { font-size: 12px !important; line-height: 18px !important; }
  body[data-mobile-design] .today-progress { height: 2px !important; }
  body[data-mobile-design] .today-column > header h2 { font-size: 12px !important; letter-spacing: .035em !important; }
  body[data-mobile-design] .today-column > header span { font-size: 12px !important; font-weight: 400 !important; }
  body[data-mobile-design] .today-empty { font-size: 13px !important; line-height: 20px !important; border: 0 !important; border-radius: 12px; background: #f8fafb !important; }
  body[data-mobile-design] #todayAddInline { min-height: 44px !important; font-size: 14px !important; }
  body[data-mobile-design] .today-picker-search input { font-size: 14px !important; }
  body[data-mobile-design] .today-picker-group h3 { font-size: 12px !important; font-weight: 400 !important; letter-spacing: .025em; }
  body[data-mobile-design] .today-picker-group strong { font-size: 15px !important; font-weight: 450 !important; }
  body[data-mobile-design] .today-picker-group small { font-size: 12px !important; }
  body[data-mobile-design] .today-picker-group button { border-color: var(--mobile-design-line) !important; background: rgb(255 255 255 / 60%) !important; box-shadow: none !important; }
  body[data-mobile-design] :is(.today-settings-section p, .today-settings-note p) { font-size: 13px !important; line-height: 20px !important; }
  body[data-mobile-design] .today-settings-section h3 { font-size: 12px !important; font-weight: 450 !important; }
  body[data-mobile-design] .today-settings-note strong { font-size: 14px !important; font-weight: 500 !important; }
  body[data-mobile-design] .today-duration-options button { min-height: 44px !important; font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] .today-task:not(.today-focus-task) h3 { font-size: 14px !important; line-height: 19px !important; }
  body[data-mobile-design] .today-task:not(.today-focus-task) :is(small,.today-task-project) { font-size: 11px !important; }
  body[data-mobile-design] :is(.today-later-task,.today-done-task,.today-focus-task.card) { box-shadow: 0 2px 10px rgb(23 43 67 / 4%) !important; border-color: #e2e7ed !important; }
  body[data-mobile-design] .today-picker-search { border-radius: 10px !important; }
  body[data-mobile-design] .filter-popover-head strong { font-size: 18px !important; font-weight: 500 !important; }
  body[data-mobile-design] .filter-popover-head span { font-size: 12px !important; line-height: 18px !important; }
  body[data-mobile-design] .filter-label-option { min-height: 44px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-design-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body[data-mobile-design] .filter-label-option > span { font-size: 14px !important; font-weight: 400 !important; }
  body[data-mobile-design] .filter-label-group-head :is(strong, span) { font-size: 11px !important; font-weight: 450 !important; }
  body[data-mobile-design] :is(.filter-actions button, .filter-manage-button) { min-height: 44px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 450 !important; box-shadow: none !important; }
  body[data-mobile-design] #labelsDialogTitle { font-size: 20px !important; font-weight: 500 !important; }
  body[data-mobile-design] .label-manager-row { min-height: 52px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-design-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  body[data-mobile-design] .label-name-input { font-size: 15px !important; font-weight: 400 !important; background: transparent !important; }
  body[data-mobile-design] .label-row-delete { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; }
  body[data-mobile-design] #labelCreateForm label > span { font-size: 12px !important; font-weight: 400 !important; }
  body[data-mobile-design] #labelCreateForm :is(input, button[type="submit"]) { min-height: 44px !important; font-size: 14px !important; font-weight: 400 !important; border-radius: 10px !important; }
  body[data-mobile-design] .mobile-label-palette { border-radius: 12px !important; box-shadow: 0 6px 20px rgb(18 38 66 / 8%) !important; }
  body[data-mobile-design] .mobile-status-content h2 { font-size: 18px !important; font-weight: 500 !important; }
  body[data-mobile-design] .mobile-status-content > button { min-height: 46px !important; font-size: 14px !important; font-weight: 400 !important; border: 1px solid var(--mobile-design-line) !important; border-radius: 10px !important; background: rgb(255 255 255 / 52%) !important; box-shadow: none !important; }
  body[data-mobile-design] .mobile-status-content > button[aria-pressed="true"] { opacity: 1 !important; background: #edf4ff !important; border-color: #cddffb !important; color: #2461b9 !important; }
  body[data-mobile-design] .potok-picker-popover { border-radius: 18px !important; border-color: rgb(255 255 255 / 80%) !important; }
  body[data-mobile-design] #cardDrawer > .potok-picker-popover { z-index: 100 !important; }
  body[data-mobile-design] .potok-picker-popover :is(button, strong) { font-weight: 450 !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) { width: calc(100% - 32px) !important; max-width: 420px !important; padding: 20px !important; border-radius: 20px !important; border: 1px solid var(--mobile-design-line) !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) header > span { font-size: 10px !important; font-weight: 450 !important; letter-spacing: .04em !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) h2 { font-size: 20px !important; line-height: 26px !important; font-weight: 500 !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) p { font-size: 13px !important; line-height: 20px !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) textarea { font-size: 14px !important; line-height: 21px !important; padding: 12px !important; border-radius: 10px !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) footer { gap: 8px !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) footer button { min-height: 44px !important; font-size: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; }
  body[data-mobile-design] :is(.potok-time-columns, .potok-calendar-days) { font-size: 14px !important; }
}

@media screen and (max-width: 760px) {
  html:not([data-potok-style="dark"]) body[data-mobile-design] .potok-sheet-backdrop {
    background: rgb(29 42 60 / 13%) !important; backdrop-filter: blur(11px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.04) !important;
  }
  html:not([data-potok-style="dark"]) body[data-mobile-design] :is(.potok-sheet-panel, .today-panel, .potok-picker-popover) {
    background: rgb(255 255 255 / 86%) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important; -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    border: 1px solid rgb(255 255 255 / 80%) !important;
    box-shadow: 0 -6px 34px rgb(18 38 66 / 10%) !important;
  }
  html:not([data-potok-style="dark"]) body[data-mobile-design] .today-panel-catcher {
    background: rgb(29 42 60 / 13%) !important; backdrop-filter: blur(11px) !important;
  }
  html:not([data-potok-style="dark"]) body[data-mobile-design] #cardDrawer {
    background: linear-gradient(90deg, color-mix(in srgb, var(--drawer-accent, #246bfe) 8%, white) 0%, color-mix(in srgb, var(--drawer-accent, #246bfe) 3%, white) 32%, #fff 55%) !important;
    box-shadow: none !important;
  }
  html:not([data-potok-style="dark"]) body[data-mobile-design] #cardDrawer :is(.drawer-head, .drawer-mobile-tabs, .drawer-workspace-body, .drawer-settings-panel, .drawer-settings-content, .drawer-description-panel, .drawer-content-panel, .drawer-content-head, .drawer-workspace-window, .drawer-workspace-strip, .description-editor-shell, .description-editor) {
    background: transparent !important; box-shadow: none !important;
  }
  html:not([data-potok-style="dark"]) body[data-mobile-design] :is(.today-settings-section, .today-settings-note, .today-picker-item) { border-color: var(--mobile-design-line) !important; box-shadow: none !important; }
}

/* Approved mobile appearance; scoped to the canonical Solo shell. */
@media screen and (max-width: 760px) {
  body[data-mobile-editor] { --font-ui: "F37 Ginger", system-ui, sans-serif; }
  body[data-mobile-editor] #documentStudio #documentTitleInput { font-family: var(--font-ui) !important; font-weight: 500 !important; letter-spacing: -.015em !important; }
  body[data-mobile-editor] .document-toolbar :is(button,select) { font-weight: 400 !important; }
  body[data-mobile-editor] .potok-sheet-content :is(h2,h3,strong) { font-weight: 500 !important; }
  body[data-mobile-editor] .potok-sheet-content button { font-weight: 400 !important; }
  body[data-mobile-editor] .potok-sheet-panel { font-family: var(--font-ui) !important; }
  body[data-mobile-editor] .potok-sheet-panel button { font-family: var(--font-ui) !important; }
  body[data-mobile-editor] .potok-sheet-close { border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #556474 !important; }
  body[data-mobile-editor] .potok-sheet-close:focus-visible { outline: 1px solid #a8c6f6 !important; outline-offset: -5px !important; }
  body[data-mobile-editor] #documentLiveMoreMenu { display: flex !important; flex-direction: column !important; gap: 4px !important; }
  body[data-mobile-editor] #documentLiveMoreMenu button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; min-height: 44px !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid rgb(38 57 79 / 8%) !important; background: transparent !important; color: #273446 !important; font: 400 14px/20px var(--font-ui) !important; box-shadow: none !important; }
  body[data-mobile-editor] #documentLiveMoreMenu [hidden] { display: none !important; }
  body[data-mobile-editor] #documentLiveMoreMenu i { font-size: 17px !important; }
  body[data-mobile-editor] .document-live-surface-setting small { padding: 10px 12px !important; color: #76818e !important; font: 400 11px/18px var(--font-ui) !important; }
  body[data-mobile-editor] #documentLiveMoreMenu [data-document-surface] { border: 1px solid rgb(38 57 79 / 10%) !important; border-radius: 10px !important; }
  body[data-mobile-editor] #documentLiveMoreMenu [aria-checked="true"] { color: #246bfe !important; background: #edf4ff !important; border-color: #d5e3fc !important; }
  body[data-mobile-editor] .potok-sheet-panel { border-radius: 24px 24px 0 0 !important; }
  html:not([data-editor-theme="dark"]) body[data-mobile-editor] .potok-sheet-backdrop { background: rgb(29 42 60 / 13%) !important; backdrop-filter: blur(11px) !important; }
  html:not([data-editor-theme="dark"]) body[data-mobile-editor] .potok-sheet-panel { background: rgb(255 255 255 / 86%) !important; backdrop-filter: blur(22px) saturate(1.08) !important; border: 1px solid rgb(255 255 255 / 80%) !important; box-shadow: 0 -6px 34px rgb(18 38 66 / 10%) !important; }
}

/* Approved mobile appearance; scoped to the canonical Solo shell. */
@media screen and (max-width: 760px) {
  html:has(body:is([data-mobile-design], [data-mobile-editor])),
  body:is([data-mobile-design], [data-mobile-editor]),
  body:is([data-mobile-design], [data-mobile-editor]) * {
    scrollbar-width: none !important;
  }
  html:has(body:is([data-mobile-design], [data-mobile-editor]))::-webkit-scrollbar,
  body:is([data-mobile-design], [data-mobile-editor])::-webkit-scrollbar,
  body:is([data-mobile-design], [data-mobile-editor]) *::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }
  body:is([data-mobile-design], [data-mobile-editor]) {
    --polish-text: #203044; --polish-muted: #657385; --polish-line: #e2e7ed;
    --polish-card: #fff; --polish-surface: #f8fafc; --polish-selected: #edf4ff;
    --polish-accent: #246bfe;
  }
  body:is([data-mobile-design], [data-mobile-editor]) :is(.potok-sheet-close, #drawerClose, #todayPanelClose, .modal-close) {
    align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: transparent !important; color: var(--polish-muted) !important; box-shadow: none !important;
    font-size: 18px !important; font-weight: 400 !important;
  }
  body:is([data-mobile-design], [data-mobile-editor]) :is(.potok-sheet-close, #drawerClose, #todayPanelClose, .modal-close) > i {
    font-size: 18px !important; line-height: 18px !important; width: 18px !important; height: 18px !important;
  }
  body:is([data-mobile-design], [data-mobile-editor]) .potok-sheet-close { top: 4px !important; right: 4px !important; }
  body:is([data-mobile-design], [data-mobile-editor]) :is(.potok-sheet-close, #drawerClose, #todayPanelClose, .modal-close):focus-visible {
    outline: 1px solid var(--polish-accent) !important; outline-offset: -8px !important;
  }
  body:is([data-mobile-design], [data-mobile-editor]) .potok-sheet-panel {
    max-height: calc(100dvh - 64px) !important; overflow: hidden !important; outline: none !important;
    display: flex !important; flex-direction: column !important;
  }
  body:is([data-mobile-design], [data-mobile-editor]) .potok-sheet-content {
    min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain;
  }
  body[data-mobile-design] .potok-sheet-panel:has(#labelFilterPopover) { height: min(680px, calc(100dvh - 96px)) !important; }
  body[data-mobile-design] #labelFilterPopover {
    display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important;
  }
  body[data-mobile-design] #labelFilterPopover > :not(.filter-label-list) { flex-shrink: 0 !important; }
  body[data-mobile-design] #labelFilterList { min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
  body[data-mobile-design] .filter-label-list { min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; }
  body[data-mobile-design] #todayPanel { max-height: calc(100dvh - 64px) !important; }
  body[data-mobile-design] .today-panel > header { padding: 20px !important; align-items: center !important; }
  body[data-mobile-design] .today-focus-task .today-task-actions {
    display: grid !important; grid-template-columns: minmax(0, 163px) minmax(0, 1fr) !important;
    grid-template-rows: 45px 32px 32px !important; height: auto !important;
    gap: 0 12px !important; align-items: start !important;
  }
  body[data-mobile-design] .today-focus-task .today-task-actions .today-focus-action { grid-column: 1; grid-row: 1; width: 100% !important; margin-bottom: 5px !important; }
  body[data-mobile-design] .today-focus-task .today-task-actions :is(.today-day-done-action, .today-complete-action) {
    grid-column: 1; justify-self: start !important; justify-content: flex-start !important;
    width: auto !important; min-height: 32px !important; padding: 5px 0 !important; margin: 0 !important;
    color: var(--polish-muted) !important; opacity: 1 !important; font-size: 12px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  body[data-mobile-design] .today-focus-task .today-task-actions .today-day-done-action { grid-row: 2; }
  body[data-mobile-design] .today-focus-task .today-task-actions .today-complete-action { grid-row: 3; }
  body[data-mobile-design] .today-focus-task .today-utility-actions { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  body[data-mobile-design] .today-overview { position: relative !important; }
  body[data-mobile-design] .today-title-line { padding-right: 38px !important; }
  body[data-mobile-design] .today-title-line h1 { font-size: 21px !important; line-height: 28px !important; }
  body[data-mobile-design] .today-overview-actions { position: absolute !important; top: 9px !important; right: 0 !important; margin: 0 !important; }
  body[data-mobile-design] #todaySettingsButton {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important;
  }
  body[data-mobile-design] #todaySettingsButton i { position: static !important; transform: none !important; margin: 0 !important; font-size: 16px !important; line-height: 20px !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) > form { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) footer {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2.55fr) !important;
    width: 100% !important; margin-inline: 0 !important; padding: 0 !important; gap: 8px !important;
  }
  body[data-mobile-design] :is(#todayCompletionDialog, #todayRecurrenceDialog) footer button { width: 100% !important; margin: 0 !important; white-space: nowrap !important; padding-inline: 8px !important; }
  body[data-mobile-design] :is(.card-focus-scrollbar, .card-focus-resize-handle) { display: none !important; }
  body[data-mobile-design] .card-focus-panel-title { pointer-events: none !important; cursor: default !important; touch-action: auto !important; }
  body[data-mobile-design] .card-focus-panel-title::after { display: none !important; }
  body[data-mobile-design]:is(.focus-mode, .focus-mode-exiting) .today-focus-task.is-focused {
    position: fixed !important; left: 16px !important; right: 16px !important; width: auto !important;
    top: 50dvh !important; transform: translateY(-50%) !important; margin: 0 !important;
  }
  body[data-mobile-design] .card-focus-panel {
    left: 16px !important; width: calc(100dvw - 32px) !important; min-width: 0 !important;
    height: 140px !important; min-height: 0 !important; max-height: 140px !important;
    background: var(--polish-card) !important;
  }
  body[data-mobile-design] #cardFocusDescription { top: max(16px, calc(var(--focus-card-top) - 152px)) !important; }
  body[data-mobile-design] #cardFocusNotes { top: min(calc(100dvh - 156px), calc(var(--focus-card-top) + var(--focus-card-height) + 60px)) !important; }
  body[data-mobile-design] .card-focus-controls button {
    position: relative !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--polish-muted) !important;
  }
  body[data-mobile-design] .card-focus-controls button::before {
    content: ""; position: absolute; inset: 11px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--polish-card); border: 1px solid var(--polish-line); box-sizing: border-box;
  }
  body[data-mobile-design] .card-focus-controls button[aria-pressed="true"] { color: var(--polish-accent) !important; background: transparent !important; }
  body[data-mobile-design] .card-focus-controls button[aria-pressed="true"]::before { background: var(--polish-selected); border-color: var(--polish-accent); }
  body[data-mobile-design] .card-focus-controls button > i,
  body[data-mobile-design] .card-focus-controls button > i::before {
    position: relative; z-index: 1; font-size: 12px !important; line-height: 14px !important; width: 14px !important; height: 14px !important;
  }
  body[data-mobile-design] .card-focus-controls button:focus-visible { outline: 1px solid var(--polish-accent) !important; outline-offset: -8px !important; }
}

@media screen and (max-width: 760px) {
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body:is([data-mobile-design], [data-mobile-editor]) {
    color-scheme: dark;
    --polish-text: #f0f1f2; --polish-muted: #b8bcc3; --polish-line: #42474f;
    --polish-card: #292c31; --polish-surface: #25272b; --polish-selected: #303d40;
    --polish-accent: #63d8ff; --mobile-design-line: rgb(205 218 232 / 14%); --mobile-secondary: #b8bcc3;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-stage-headings { background: #202225 !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-column-backgrounds > :nth-child(1) { background: #292d32; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-column-backgrounds > :nth-child(2) { background: #34302a; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-column-backgrounds > :nth-child(3) { background: #28313e; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-column-backgrounds > :nth-child(4) { background: #352c33; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-column-backgrounds > :nth-child(5) { background: #293630; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-project-name { color: var(--polish-text) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-project-count:disabled { color: #929ba8 !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] :is(.topbar .search, .today-empty, .today-picker-group button, .editor-toolbar, .mobile-status-content > button),
  html[data-potok-style="dark"] body[data-mobile-design] #drawerTodayComplete {
    background: var(--polish-surface) !important; color: var(--polish-text) !important; border-color: var(--mobile-design-line) !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] #cardDrawer :is(.drawer-date-field, .drawer-time-row) .potok-picker-trigger {
    background: var(--polish-card) !important; color: var(--polish-text) !important; border-color: var(--polish-line) !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] :is(.today-later-task,.today-done-task,.today-focus-task.card) { border-color: var(--polish-line) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body:is([data-mobile-design], [data-mobile-editor]) :is(.potok-sheet-backdrop, .today-panel-catcher) {
    background: rgb(5 9 14 / 26%) !important; backdrop-filter: blur(11px) !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body:is([data-mobile-design], [data-mobile-editor]) :is(.potok-sheet-panel, .today-panel, .potok-picker-popover) {
    background: rgb(37 39 43 / 90%) !important; color: var(--polish-text) !important;
    backdrop-filter: blur(22px) saturate(1.05) !important; border: 1px solid rgb(204 218 231 / 12%) !important;
    box-shadow: 0 -6px 34px rgb(0 0 0 / 18%) !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] #cardDrawer {
    background: linear-gradient(90deg, color-mix(in srgb, var(--drawer-accent, #63d8ff) 12%, #292c31), color-mix(in srgb, var(--drawer-accent, #63d8ff) 4%, #292c31) 32%, #292c31 55%) !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] #cardDrawer :is(.drawer-head, .drawer-mobile-tabs, .drawer-workspace-body, .drawer-settings-panel, .drawer-settings-content, .drawer-description-panel, .drawer-content-panel, .drawer-content-head, .drawer-workspace-window, .drawer-workspace-strip, .description-editor-shell, .description-editor) {
    background: transparent !important; box-shadow: none !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-status-content > button[aria-pressed="true"],
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-editor] #documentLiveMoreMenu [aria-checked="true"] {
    background: var(--polish-selected) !important; color: var(--polish-accent) !important; border-color: #48666d !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-editor] #documentLiveMoreMenu button { color: var(--polish-text) !important; border-color: var(--polish-line) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-editor] .document-live-surface-setting small { color: var(--polish-muted) !important; }
  html[data-editor-theme="dark"] body[data-mobile-editor] #documentStudio :is(.document-page, #documentTitleInput, .document-page .ProseMirror) {
    background: var(--polish-card) !important; color: var(--polish-text) !important; border-color: var(--polish-line) !important;
  }
  html[data-editor-theme="dark"] body[data-mobile-editor] :is(.potok-sheet-content, #documentLiveMoreMenu, .document-mobile-insert-menu) { background: transparent !important; box-shadow: none !important; }
  html[data-editor-theme="dark"] body[data-mobile-editor] .potok-sheet-content button { color: var(--polish-text) !important; background: transparent !important; border-color: var(--polish-line) !important; }
  html[data-editor-theme="dark"] body[data-mobile-editor] #documentLiveMoreMenu :is(hr, .document-live-surface-setting) { border-color: var(--polish-line) !important; }
  html[data-editor-theme="dark"] body[data-mobile-editor] #documentStudio .document-page { color-scheme: dark; --ink: #f0f1f2; --paper: #292c31; --muted: #a4aab3; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] :is(.mobile-project-row, .mobile-project-count, .mobile-stage-heading, #labelFilterPopover, .filter-label-group, .filter-popover-head, .filter-label-group-head, .today-column, .today-column > header) {
    background: transparent !important; box-shadow: none !important;
  }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-project-count:not(:disabled) { color: color-mix(in srgb, var(--mobile-stage) 55%, #f0f1f2) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .mobile-stage-heading { border-bottom-color: color-mix(in srgb, var(--mobile-stage) 55%, #f0f1f2) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .filter-label-option { border-bottom-color: var(--mobile-design-line) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] #cardDrawer :is(.drawer-side-group, .drawer-documents-group, .drawer-documents-body, .drawer-label-list, .drawer-labels-body, #drawerDescription) { background: transparent !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] #cardDrawer .potok-picker-trigger > span { color: var(--polish-text) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .drawer-mobile-tabs button[aria-selected="true"] { color: var(--polish-accent) !important; }
  html:is([data-potok-style="dark"], [data-editor-theme="dark"]) body[data-mobile-design] .drawer-mobile-tabs button[aria-selected="true"]::after { background: var(--polish-accent) !important; }
}
@media screen and (max-width: 760px) {
  body:is([data-mobile-design], [data-mobile-editor]) :is([hidden], .potok-sheet-content[hidden], #labelFilterPopover[hidden]) { display: none !important; }
}

/* A short viewport (including an open keyboard) keeps the native focus
   actions between the two independently scrolling panels. */
@media screen and (max-width: 760px) and (max-height: 640px) {
  body[data-mobile-design]:is(.focus-mode, .focus-mode-exiting) .today-focus-task.is-focused {
    top: calc(62.5dvh - 80px) !important;
  }
  body[data-mobile-design] #cardFocusDescription {
    top: max(16px, calc(var(--focus-card-top) - 152px)) !important;
    height: min(140px, max(0px, calc(var(--focus-card-top) - 28px))) !important;
  }
  body[data-mobile-design] #cardFocusNotes {
    top: calc(var(--focus-card-top) + var(--focus-card-height) + 60px) !important;
    height: min(140px, max(0px, calc(100dvh - var(--focus-card-top) - var(--focus-card-height) - 76px))) !important;
  }
}