/* Dandelion CRM on the phone - home area (owner's page-by-page review, 2026-10-21): the AI page, the dashboard, My Work
   (Tasks · Calendar · Notes · Calls · Daily report). Rules only inside @media (max-width: 900px), scoped
   html.ui-2026 body:not(#dn26) like core.css; above 900px nothing here matches. Tokens only, logical properties (RTL),
   dark mode through the same tokens. The behaviour (notes on the dashboard, the team card) is in assets/js/mobile/home.js. */
@media (max-width: 900px){

  /* ---- item 8: AI page - the six suggestions in ONE row the finger scrolls sideways (they sat centred in three rows) ----
     The welcome block (.dna-empty) is inset 12px inside the viewport (14px when the AI app is compact) and the page has the
     16px gutter, so the row bleeds to the screen edge while its first chip stays on the content edge, under the composer. */
  html.ui-2026 body:not(#dn26) #page-assistant .dna-starters{
    display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 8px;
    align-self: stretch; width: auto; max-width: none;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * (var(--dnm-gutter) + 12px)); padding: 6px calc(var(--dnm-gutter) + 12px) 10px;
  }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app.is-compact .dna-starters{
    margin-inline: calc(-1 * (var(--dnm-gutter) + 14px)); padding-inline: calc(var(--dnm-gutter) + 14px);
  }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-starters::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-starter{ flex: 0 0 auto; white-space: nowrap; }
  /* (no scroll-snap on these rows: Chrome re-snaps after the chips' entrance animation and parks the row 28px in) */

  /* ---- item 9: dashboard hero - no "SALES COMMAND CENTER", no "Good afternoon, …", no initials bubble; the empty band
     was the greeting block's flex-basis (320px) standing upright in the column layout. The date · scope · pipeline line stays. */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-hero :is(.dc-eyebrow, #dash-greeting, .dc-hero-avatar){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-hero{ align-items: stretch; gap: 10px; padding: 12px var(--dnm-gutter); min-height: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-hero > div:not([id]){ flex: 0 0 auto !important; min-height: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub{ margin-top: 0; }
  /* now the first line of the board, it wraps after "date • scope" and left a lone "•" opening the next line in front of
     "2 in the pipeline" (reviewer, 2026-10-21): no separator before the pipeline / overdue numbers - they are their own row */
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub{ row-gap: 5px; align-items: center; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub > .dc-sub-divider:last-of-type{ display: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub::before{ content: ""; flex: 0 0 100%; height: 0; order: 1; }   /* the line break (a 0-height item of its own line) */
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub > .dc-num-btn,
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub > .dc-sub-alert{ order: 2; flex: 0 0 auto; }

  /* ---- item 10: the Notes block lives at the BOTTOM of the dashboard (home.js moves #notes-content there and the
     notes page's own render fills it); the Notes tab leaves the My Work strip. ---- */
  /* (2026-10-22: the Notes tab is back in the strip - the owner wants to see it there as well) */
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes{
    margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--dnm-radius);
    padding: 14px var(--dnm-gutter) 16px;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-wrap{ max-width: none; margin: 0; padding: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-header{ margin-bottom: 10px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-header h2{ font-size: 15px; font-weight: 700; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-tabs{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-tabs::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-tab-btn{ white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-notes .notes-empty{ padding: 18px 0 6px; }

  /* ---- item 11: Tasks, Organization view - the row of per-agent cards is ONE "All team" card with a person picker
     (home.js builds .dnm-team-card from the page's own cards, which stay in the DOM, hidden, and still take the tap). ---- */
  html.ui-2026 body:not(#dn26) #page-todos .ztask-report{ display: block !important; overflow: visible !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-todos .ztask-report > .ztask-person:not(.dnm-team-card){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card{ display: flex; width: 100%; min-width: 0; min-height: 0; gap: 12px; padding: 12px 14px; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card .ztask-person-top{ gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card .ztask-person-top .ztask-avatar{ flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-pick{
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 36px 0 14px; padding-inline: 14px 36px;
    border: 1px solid var(--border); border-radius: var(--dnm-pill); background-color: var(--surface); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 700; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-todos .dnm-team-pick{ background-position: left 12px center; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card .ztask-meters{ gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card .ztask-meters strong{ font-size: 22px; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-card .ztask-meters em{ font-size: 10px; }
  /* the empty, [hidden] .ztask-tabs still drew an 8px grey bar under the card (a generic -tabs rule out-ranks [hidden]) */
  html.ui-2026 body:not(#dn26) #page-todos .ztask-tabs[hidden]{ display: none !important; }

  /* ---- item 12: Calendar - the month card (October 2026 ‹ › Today + Event + Task) floated over the day rows while
     scrolling (ui.css ≤640: sticky, top 52px, a heavy shadow). Static on the phone, a plain card on the gutter. ---- */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-top{
    position: static !important; top: auto !important; z-index: auto !important;
    box-shadow: none !important; border: 1px solid var(--border) !important; border-radius: var(--dnm-radius) !important;
    background: var(--surface) !important; padding: 12px !important;
  }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-wrap{ margin-inline: 0 !important; }

  /* ---- item 13: Calls - the six count chips (Due · Overdue · Today · Upcoming · All planned · Logged today) in ONE
     row that scrolls sideways, bleeding to the screen edge like every chip row (.dnm-row metrics). ---- */
  html.ui-2026 body:not(#dn26) #page-calls #calls-groups{
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; box-sizing: border-box;
    flex: 0 0 calc(100% + 2 * var(--dnm-gutter)) !important; width: calc(100% + 2 * var(--dnm-gutter)) !important; max-width: none !important;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--dnm-gutter)); padding: 2px var(--dnm-gutter) 6px;
  }
  html.ui-2026 body:not(#dn26) #page-calls #calls-groups::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-calls #calls-groups > *{ flex: 0 0 auto !important; white-space: nowrap; }

  /* item 14: the Daily report tab stays in the My Work strip - nothing to do, kept on purpose (owner 2026-10-21). */
}

/* Owner 2026-10-22 (phone test of app 3.0) */
@media (max-width: 900px){
  /* AI page: the viewport's own horizontal scrollbar drew a line above the bottom bar (the starters row is 16px wider than it) */
  html.ui-2026 body:not(#dn26) #page-assistant .dna-viewport{ overflow-x: hidden !important; }
  /* Dashboard "Needs attention": one row = label, number; a long label (a project line) wraps by word instead of letter by letter */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention > div{ grid-template-columns: 1fr; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention button{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention button span{ min-width: 0; word-break: normal; overflow-wrap: anywhere; white-space: normal; text-align: start; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention button strong{ grid-row: 1; grid-column: 2; font-size: 19px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention button i{ display: none; }
}

/* Owner 2026-10-22: the Tasks team card's person picker - a button with the name, the people with their photos in the drawer */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .dnm-team-pick{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; }
  html.ui-2026 body:not(#dn26) .dnm-team-pick svg{ width: 16px; height: 16px; opacity: .7; }
  html.ui-2026 body:not(#dn26) .dnm-team-list{ display: flex; flex-direction: column; }
  html.ui-2026 body:not(#dn26) .dnm-team-row{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: start; border-radius: 12px; }
  html.ui-2026 body:not(#dn26) .dnm-team-row.is-on{ background: var(--dnm-soft); font-weight: 700; }
  html.ui-2026 body:not(#dn26) .dnm-team-row .ztask-avatar{ flex: 0 0 auto; width: 40px; height: 40px; }
  html.ui-2026 body:not(#dn26) .dnm-team-row .ztask-avatar img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
}

/* Owner 2026-10-22: the notes sub-tabs - one row, no scrollbar line, nothing wraps */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .notes-tabs{ flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  html.ui-2026 body:not(#dn26) .notes-tabs::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) .notes-tabs .notes-tab-btn{ white-space: nowrap; flex: 0 0 auto; }
}

/* Owner 2026-10-22 («این بخش بهم ریخته‌ست»): the Calendar on the phone, every view -
   one compact head (‹ title › and Today / + Event / + Task on one row), the views as one segmented row, the filters as one
   row of small chips, the week strip's count as a small badge, and the agenda / day list as full-width rows: the day as a
   header line, each entry's time above its card. No pane titles or duplicate "+ Event" buttons. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-top{ border: 0 !important; padding: 0 !important; background: none !important; display: flex; flex-direction: column; gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-titlebar{ justify-content: space-between; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-titlebar .zcal-icon-btn{ width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 0; background: var(--dnm-soft); font-size: 20px; line-height: 1; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-title{ font-size: 18px !important; line-height: 1.25; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-subtitle{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-actions{ flex-wrap: nowrap; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-actions .zcal-action{ flex: 1 1 0; min-height: 40px; padding: 0 10px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-actions .zcal-action.zcal-primary{ background: var(--text); color: var(--surface); border-color: var(--text); }
  /* the four views: one segmented row, equal parts */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-toolbar{ margin-top: 12px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segments{ display: flex !important; width: 100%; padding: 3px; gap: 2px; box-shadow: none; border: 0; background: var(--dnm-soft); border-radius: 999px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment{ flex: 1 1 0; justify-content: center; min-height: 36px; padding: 0 4px; font-size: 13px; font-weight: 600; border-radius: 999px; white-space: nowrap; gap: 4px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment svg{ display: none; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment.active{ background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  /* the filters: one row of small chips */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-filterbar{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; margin-top: 10px; padding-bottom: 0; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-filterbar .zcal-chip{ flex: 0 0 auto !important; width: auto !important; min-height: 34px !important; height: 34px; padding: 0 12px !important; border-radius: 999px; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-filterbar .zcal-chip.active{ background: var(--text) !important; color: var(--surface) !important; border-color: var(--text) !important; }
  /* the week strip: the count is a small badge in the corner, not over the day name */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-day{ position: relative; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-dot{ top: -5px !important; left: auto !important; inset-inline-end: -4px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
  /* pane heads: no titles, no second "+ Event" (the head row has one); "Hourly View" stays */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-title{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head > .zcal-action.zcal-primary{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head:not(:has(> :not(.zcal-pane-title):not(.zcal-primary))){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-day-pane{ padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  /* the agenda: the day is a header line, its entries full width below */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-day{ flex-direction: column; gap: 8px; padding: 12px 0; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-date{ flex: 0 0 auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 0; width: 100%; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-dow{ font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: none; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-num{ font-size: 15px; font-weight: 700; color: var(--text); }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-today{ font-size: 11px; padding: 2px 8px; border-radius: 999px; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-items{ width: 100%; display: flex; flex-direction: column; gap: 8px; }
  /* an entry (agenda and day list): time on top, the event card full width */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-list-card{ flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; box-shadow: none; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-list-time{ min-width: 0; padding: 0; background: none; text-align: start; font-size: 12px; font-weight: 700; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-list-card > div{ width: 100%; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-event-card{ width: 100%; box-sizing: border-box; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-event-title{ white-space: normal; overflow-wrap: anywhere; word-break: normal; }
}
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-agenda-dow{ display: none !important; }                       /* "Thu" + "Thursday 22 …" said the day twice */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head > [onclick^="openAddCalEvent"]{ display: none !important; }   /* the head row has "+ Event" */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment > svg, html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment > span:has(> svg){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-title{ font-size: 17px !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-filterbar .zcal-chip{ padding: 0 10px !important; font-size: 12.5px; }
}
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head [onclick^="openAddCalEvent"]{ display: none !important; }   /* also inside the head's button group */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head [onclick="setCalMode('day')"]{ min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
}

/* ======================================================================================================================
   Owner-style phone review 2026-10-22 (390px), home area: dashboard, AI page, My Work, Calendar, Notes, Calls.
   Round 44px icon tools instead of worded ones, no captions, no duplicate "add" buttons, nothing cut letter by letter,
   RTL mirrored. Only inside max-width 900px; nothing above changes. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26){
    --dnm-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --dnm-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --dnm-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
  }

  /* ---- dashboard: the worded head tools ("Open", "View pipeline", "Manage team", "View all", "Open calendar →",
     "Open calling") are one round 44px chevron; the head itself takes the tap too (home.js). The word stays the
     button's accessible name. Refresh is a round refresh icon, "Everything" a round chevron down. ---- */
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-panel-head > button, .dc-events-tools > button, #dash-brief .eb-actions > .btn, .dash-ai-sugg-head > .btn, .dc-status-strip > button:last-child:not(.dc-strip-main)){
    flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important;
    display: inline-block !important; position: relative !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important;
    overflow: hidden; gap: 0 !important; vertical-align: middle;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-panel-head > button, .dc-events-tools > button, #dash-brief .eb-actions > .btn, .dash-ai-sugg-head > .btn, .dc-status-strip > button:last-child:not(.dc-strip-main)) > *{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-panel-head > button, .dc-events-tools > button, #dash-brief .eb-actions > .btn, .dash-ai-sugg-head > .btn, .dc-status-strip > button:last-child:not(.dc-strip-main))::before{
    content: ""; position: absolute; inset: 0; margin: auto; display: block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--dnm-i-chev) center / contain no-repeat; mask: var(--dnm-i-chev) center / contain no-repeat;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-dashboard :is(.dc-panel-head > button, .dc-events-tools > button, .dc-status-strip > button:last-child)::before{ transform: scaleX(-1); }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(#dash-brief .eb-actions > .btn:first-child, .dash-ai-sugg-head > .btn)::before{ -webkit-mask-image: var(--dnm-i-refresh); mask-image: var(--dnm-i-refresh); }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-brief .eb-actions > .btn:nth-child(2)::before{ -webkit-mask-image: var(--dnm-i-down); mask-image: var(--dnm-i-down); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dash-ai-sugg-head > .btn:disabled::before{ animation: dnm-spin 1s linear infinite; }
  @keyframes dnm-spin{ to{ transform: rotate(360deg); } }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-brief .eb-actions{ width: auto !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-panel-head, #dash-brief .eb-head, .dash-ai-sugg-head){ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; row-gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-panel-head > div:first-child, #dash-brief .eb-head > div, .dash-ai-sugg-title){ flex: 1 1 0; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-panel-head:has(> button) > div:first-child{ cursor: pointer; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-brief .eb-actions{ display: inline-flex; gap: 8px; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-brief .eb-head .bk-note{ display: none !important; }   /* "· Invalid Date - Invalid Date" */
  /* the AI suggestions card: the explanatory sentence ("No suggestions came back - press Refresh.") goes, the icon stays */
  html.ui-2026 body:not(#dn26) #page-dashboard .dash-ai-sugg-body > .lm-empty{ display: none !important; }

  /* Leads by source: the 7 days / 30 days / All toggle on its own row under the title, one line each */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-panel-head > .dc-range-toggle{ flex: 1 0 100%; display: flex; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-range-toggle > button{ flex: 1 1 0; white-space: nowrap; min-height: 36px !important; padding: 0 8px; }
  /* Upcoming events: title + round calendar chevron on one row, Today / Tomorrow on the next, full width */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-tools{ display: contents !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-tools > .dc-seg{ order: 3; flex: 1 0 100%; display: flex; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-tools > .dc-seg > button{ flex: 1 1 0; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-panel .dc-panel-head h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the empty day: one full-width line, no second "+ Event" (the + button and the Calendar have it) */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-empty{ display: block !important; width: 100%; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-empty > .dc-empty{ width: 100%; max-width: none; box-sizing: border-box; margin: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-events-empty > .btn{ display: none !important; }

  /* hero: no caption line ("Thursday, 22 October 2026 • Team overview" / "Only my records") - the pipeline number stays */
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub > :is(span:not([class]), .dc-sub-divider){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub::before{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting-sub:not(:has(> :is(button, .dc-sub-alert))){ display: none !important; }
  /* Personal: the clock / Check in box is flat inside the hero (no card in a card), the time on one line */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-hero #dash-hero-clock > *{ background: none !important; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; margin-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-hero #dash-hero-clock :is(time, strong, b, .dc-clock-time, [class*="time"]){ white-space: nowrap; }

  /* the scope (agent) control: a person button + the drawer with photos (home.js); the desktop combobox and its label go */
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-scope-control:has(.dnm-dash-agent) .dc-agent-filter{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard #dash-scope-control{ width: 100%; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-agent{
    width: 100%; height: 48px; gap: 10px; padding: 0 40px 0 6px; padding-inline: 6px 40px; justify-content: flex-start; font-size: 15px;
    background-image: var(--dnm-i-down-gray, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"));
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-dashboard .dnm-dash-agent{ background-position: left 14px center; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dnm-dash-agent > b{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) :is(.dnm-dash-agent, .dnm-team-row) .dc-admin-option-avatar{
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: var(--dnm-soft); color: var(--text); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  }
  html.ui-2026 body:not(#dn26) .dnm-team-row .dc-admin-option-avatar{ width: 40px; height: 40px; }
  html.ui-2026 body:not(#dn26) :is(.dnm-dash-agent, .dnm-team-row) .dc-admin-option-avatar :is(img, .dc-avatar, span, i){ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-style: normal; }
  html.ui-2026 body:not(#dn26) :is(.dnm-dash-agent, .dnm-team-row) .dc-admin-option-avatar svg{ width: 18px; height: 18px; }

  /* metric tiles: each its own height, a lone last tile spans the row, no stage captions under the bar, no "·" */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-grid{ align-items: start !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-grid > .dc-metric-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-pipebar-cap{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-pipe-sub > i{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-pipe-sub{ display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-pipe-sub > button{ padding-inline: 0 !important; margin: 0 !important; min-height: 32px !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-pipe-sub > button em{ padding: 0 !important; margin: 0 !important; }

  /* donut: the centre word fits the hole */
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-donut.is-svg .dc-num-btn span, .dc-src-center [data-hl-label]){ max-width: 62px !important; font-size: 10.5px !important; line-height: 1.15 !important; margin-inline: auto; }

  /* Pipeline funnel: stacked rows - stage name · count · share - instead of the six squeezed columns over the shape */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun{ display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0 !important; padding: 4px var(--dnm-gutter) 12px !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-fun-cols, .dc-fun-stage, .dc-fun-pcts, .dc-fun-col){ display: contents !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-svg{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col > small{ grid-column: 1; margin: 0 !important; padding: 10px 0; font-size: 14px !important; font-weight: 500; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; border-bottom: 1px solid var(--border); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col > strong{ grid-column: 2; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; margin: 0 !important; padding-inline: 12px 10px; font-size: 16px !important; border-bottom: 1px solid var(--border); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span{ grid-column: 3; display: flex !important; align-items: center; justify-content: flex-end; padding: 0 !important; border-bottom: 1px solid var(--border); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts b{ background: var(--dnm-soft) !important; color: var(--text) !important; min-width: 44px; text-align: center; }
  html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-fun-col:last-child > *, .dc-fun-pcts > span:last-child){ border-bottom: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(1) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(1){ grid-row: 1; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(2) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(2){ grid-row: 2; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(3) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(3){ grid-row: 3; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(4) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(4){ grid-row: 4; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(5) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(5){ grid-row: 5; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(6) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(6){ grid-row: 6; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(7) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(7){ grid-row: 7; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-col:nth-child(8) > *, html.ui-2026 body:not(#dn26) #page-dashboard .dc-fun-pcts > span:nth-child(8){ grid-row: 8; }

  /* the leaderboard: five numbers in one row of five, each label under its number (wraps by word, never over it) */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-team-row:not(.dc-team-header){ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px 6px !important; align-items: start !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-team-row:not(.dc-team-header) > strong{ display: grid !important; grid-template-rows: auto auto; align-content: start; justify-items: start; gap: 3px; padding-top: 0 !important; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-team-row:not(.dc-team-header) > strong > *{ grid-row: 1; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-team-row:not(.dc-team-header) > strong::before{
    grid-row: 2; position: static !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: 0 !important; text-transform: none !important;
    white-space: normal; overflow-wrap: normal; word-break: normal; color: var(--text-muted, var(--text-secondary));
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-team-row > strong[data-label="Calls today"]::before{ content: var(--dnm-lbl-calls, "Calls") !important; }

  /* Admin action center: no caption / title, each row opens on tap with an end chevron (the absolute "Open" word went
     over the icon in Persian) */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-admin-center > header{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-admin-action-grid > button{ position: relative; display: flex !important; align-items: center; gap: 12px; text-align: start; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-admin-action-grid > button > span{ flex: 1 1 auto; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-admin-action-grid > button > em{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-admin-action-grid > button::after{
    content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: var(--text-muted, currentColor); opacity: .7;
    -webkit-mask: var(--dnm-i-chev) center / contain no-repeat; mask: var(--dnm-i-chev) center / contain no-repeat;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-dashboard .dc-admin-action-grid > button::after{ transform: scaleX(-1); }

  /* the status strip ("Your workspace is up to date" · "Open tasks →", Personal "Write report →"): the worded arrow link is
     the same round chevron (the → pointed right in Persian too) */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-status-strip{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-status-strip > :first-child{ flex: 1 1 auto; min-width: 0; }

  /* Notes block on the dashboard: one "+ New Note" (the header's), the sub-tab rule on the card's content edge */
  html.ui-2026 body:not(#dn26) .notes-empty .notes-new-btn{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#page-dashboard .dnm-dash-notes, #page-notes) .notes-tabs{ width: auto !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#page-dashboard .dnm-dash-notes, #page-notes) .notes-tabs .notes-tab-btn:first-child{ padding-inline-start: 0; }
}

/* Owner-style phone review 2026-10-22, continued: the AI page, My Work, Calendar, Notes, Calls. */
@media (max-width: 900px){
  /* ---- AI page: the chat fills the space between the bars (the page scrolled 28px under the top bar: the host's
     computed height + the page's 16/24px padding); no card inset in the gutter - the text sits on the 16px gutter ---- */
  html.ui-2026 body:not(#dn26) #page-assistant.active{ padding: 0 !important; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
  html.ui-2026 body:not(#dn26) #page-assistant.active > #assistant-page-content{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html.ui-2026 body:not(#dn26) #page-assistant #dna-host{ flex: 1 1 auto; height: auto !important; min-height: 0; }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app{ height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-head{ padding-inline: 6px; }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app:not(.is-compact) .dna-viewport{ padding-inline: var(--dnm-gutter); }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app:not(.is-compact) .dna-starters{ margin-inline: calc(-1 * var(--dnm-gutter)); padding-inline: var(--dnm-gutter); }
  /* the Conversations panel opens ABOVE the top bar and the tab bar (it was under both: z-index 60 < 80 / 110) */
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app:not(.is-compact) .dna-side{ z-index: 1201; padding-top: calc(8px + var(--dn-safe-top, 0px)); padding-bottom: calc(8px + var(--dn-safe-bottom, 0px)); }
  html.ui-2026 body:not(#dn26) #page-assistant .dna-app:not(.is-compact) .dna-scrim{ z-index: 1200; }

  /* ---- My Work / Calls / Notes: the empty state does not repeat the page's primary button, and has no caption ---- */
  html.ui-2026 body:not(#dn26) #page-todos .ztask-empty > :is(button, span){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calls .calls-empty{ font-size: 0; }
  html.ui-2026 body:not(#dn26) #page-calls .calls-empty > :is(b, .dn-empty-ico, img){ font-size: 15px; }
  html.ui-2026 body:not(#dn26) #page-calls .calls-empty > :is(.btn, br){ display: none !important; }

  /* ---- Calendar ---- */
  /* Persian: the month grid runs right to left (Saturday at the right); the weekday heads are one letter (home.js) */
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-calendar :is(.zcal-shell, .zcal-month-head, .zcal-month-row){ direction: rtl !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-head-cell{ min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 11.5px; letter-spacing: 0; }
  /* under the grid / in Day list / Daily: no second "+ Task", no "+ Event for this day", no "Hourly View" (the Daily
     segment is the same), no captions for an empty day */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head .zcal-action.zcal-success,
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-pane-head [onclick="setCalMode('day')"],
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-day-pane .zcal-empty{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-day-pane:not(:has(> :not(.zcal-pane-head):not(.zcal-empty))){ display: none !important; }
  /* the week strip and the hour grid on the gutter (no white band with its own inset) */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-strip{ position: static !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-inline: 0 !important; gap: 4px !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-timeline{ margin-inline: 0 !important; }
  /* the selected day that is also today: one marker (the filled circle), not a black box around a ring */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-day-cell.today.active{ outline: 0 !important; box-shadow: none !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-day-cell.today.active .zcal-date-num{ background: var(--text) !important; color: var(--surface) !important; border-color: var(--text) !important; }

  /* "+ Event": the form full screen like "+ Task", one 16px gutter, no helper captions, Cancel in the normal colour,
     Save / Cancel in a footer that stays at the bottom, round participant initials */
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:has(#cev-title) .modal{ height: 100% !important; max-height: none !important; border-radius: 0 !important; }
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:has(#cev-title) .modal-header{ padding-top: max(8px, var(--dn-safe-top, 0px)) !important; }
  html.ui-2026 body:not(#dn26) #small-modal:has(#cev-title) #small-modal-body{ padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title){ padding: 14px var(--dnm-gutter) 0 !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body :is(#cev-title, #cev-date-j, #cev-time, #cev-end-date-j, #cev-end-time, #cev-prop, #cev-type, #cev-desc, #cev-client-phone){ box-sizing: border-box; min-width: 0; height: 44px; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) > div[style*="grid-template-columns:1fr 1fr"] > div{ min-width: 0; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) div[style*="font-size:10px"]:not([id]){ display: none !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) div[style*="flex-wrap:wrap;padding-top:4px"]{ gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 4px 2px !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) [data-color]{ flex: 0 0 26px; width: 26px !important; height: 26px !important; border-radius: 50% !important; box-sizing: border-box; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) label > div[style*="border-radius:5px"]{ border-radius: 50% !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) > div:last-child{
    position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--dnm-gutter)) !important; padding: 10px var(--dnm-gutter) calc(10px + var(--dn-safe-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) > div:last-child > button{ flex: 1 1 0; min-height: 44px; border-radius: 12px !important; }
  html.ui-2026 body:not(#dn26) #small-modal-body > div:has(> div > #cev-title) > div:last-child > button:first-child{ color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }

  /* ---- Notes: the composer flat on the page (no card in a card), no privacy sentence, the link picker a full-width row,
     a round close; the header "+ New Note" is hidden while the composer is open (it went grey) ---- */
  html.ui-2026 body:not(#dn26) .notes-form{ border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-privacy-hint{ display: none !important; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-form-head .notes-cancel-btn{ width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50% !important; display: inline-grid; place-items: center; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-form-footer{ display: flex; flex-direction: column; align-items: stretch !important; gap: 10px; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-link-wrap{ display: flex; width: 100%; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-link-label{ display: none !important; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-link-select{ flex: 1 1 auto; width: 100%; min-width: 0; height: 44px; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-form-footer > div:last-child{ justify-content: flex-end; }
  html.ui-2026 body:not(#dn26) .notes-form .notes-save-btn{ min-height: 44px; padding-inline: 22px; }
  html.ui-2026 body:not(#dn26) .notes-wrap:has(#notes-form-wrap:not([style*="none"])) > .notes-header > .notes-new-btn{ display: none !important; }
}
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .dnm-team-all{ display: inline-grid !important; place-items: center; color: var(--text); }
  html.ui-2026 body:not(#dn26) .dnm-team-all svg{ width: 18px; height: 18px; }
  html.ui-2026 body:not(#dn26) #page-todos .dnm-team-pick > svg{ display: none; }
}
@media (max-width: 900px){
  /* Settings › Calendar event types: no card around the cards, no raw key ("custom", "viewing") under the name, the icon
     field shows its icon (not the clipped key "calend"), the checked box in the theme colour */
  html.ui-2026 body:not(#dn26) #caltypes-card{ border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #caltypes-card :is(.ctl-name > small, .settings-card-heading small){ display: none !important; }
  html.ui-2026 body:not(#dn26) #caltypes-card .ctl-icon select{ color: transparent !important; }
  html.ui-2026 body:not(#dn26) #caltypes-card .ctl-icon select option{ color: var(--text); }
  html.ui-2026 body:not(#dn26) #caltypes-card input[type="checkbox"]{ accent-color: var(--text); width: 22px; height: 22px; }
}

/* App TestFlight feedback 2026-10-23 (item 11b): the event count on each date-strip day is readable - inside the day's box
   (it sat half outside it and the strip clipped it), 11px on a solid chip */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-strip{ overflow: visible !important; touch-action: pan-y; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-day{ overflow: visible !important; padding-top: 10px !important; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-dot{
    top: 2px !important; inset-inline-end: 2px !important; left: auto; right: auto; transform: none !important;
    min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 9px !important;
    font-size: 11px !important; font-weight: 700 !important; line-height: 18px !important; text-align: center;
    background: var(--text) !important; color: var(--surface) !important; box-shadow: 0 0 0 2px var(--surface) !important;
  }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-week-day.active .zcal-week-dot{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 0 0 2px var(--text) !important; }
}