/* Finding services (2026-11): sub-tools under their hub in the ▦ menu (navmenu-panel.js) and the phone sheet
   (mobnav-sheet.js), the dashboard's first-visit card and «What do you want to do?» task grid, and «All services» (#/apps,
   dashboard.js renderBrowse). Tokens from app.css / modern.css; both themes, RTL (logical properties), 32px+ targets. */

/* ▦ menu: a hub's sub-tools as a wrapped line of small links under its row */
.cas-mod:has(.cas-st) { flex-wrap: wrap; }
.cas-mod:has(.cas-st) .cas-acts { top: 15px; }
.cas-st { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 0 6px 4px 33px; }
[dir="rtl"] .cas-st { padding: 0 33px 4px 6px; }
.cas-sti { min-height: 24px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 6px; color: var(--dim); font-size: 12px; text-decoration: none; white-space: nowrap; }
.cas-sti:hover, .cas-sti:focus-visible { color: var(--text); background: var(--soft-2); outline: none; }
.cas-sti:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* phone sheet: chips under a hub row */
.mnav-host { display: flex; flex-direction: column; }
.mnav-st { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px 44px; }
[dir="rtl"] .mnav-st { padding: 0 44px 8px 8px; }
.mnav-chip { min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 13px; text-decoration: none; }
.mnav-chip:active { background: var(--soft-2); }

/* dashboard: first-visit card (replaces the old blocking picker) */
.dx-setup { padding: 14px; border-radius: var(--r, 14px); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dx-setup-p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.dx-setup .dx-presets { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dx-setup a.dx-preset { color: inherit; text-decoration: none; }
.dx-setup .dx-catpick { margin-top: 12px; }
.dx-setup .dx-catpick[hidden] { display: none; }
.dx-setup .dx-catpick > .dx-btn { justify-self: start; }

/* dashboard: «What do you want to do?» — verb tiles */
.dx-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.dx-task { min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r, 14px); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.dx-task:hover { border-color: color-mix(in srgb, var(--c, var(--accent)) 50%, var(--line)); background: color-mix(in srgb, var(--c, var(--accent)) 7%, var(--surface)); }
.dx-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-task-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent); }
.dx-task-l { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .dx-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-task { font-size: 13.5px; } }

/* «All services» (#/apps) */
.sv-head .dx-btn { text-decoration: none; }
.sv-back { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-size: 13px; text-decoration: none; }
.sv-back:hover { color: var(--text); text-decoration: underline; }
.sv-bar { max-width: 1280px; margin: 0 auto 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sv-q { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.sv-note { margin: 0; color: var(--dim); font-size: 13px; }
.sv-note:empty { display: none; }
.sv-index { position: sticky; top: 0; z-index: 5; max-width: 1280px; margin: 0 auto 14px; display: flex; gap: 6px; padding: 8px 0; overflow-x: auto; scrollbar-width: thin;
  background: color-mix(in srgb, var(--bg, var(--surface)) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sv-ix { flex: none; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sv-ix:hover { color: var(--text); }
.sv-ix[hidden] { display: none; }
.sv-ix.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sv-ix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-list { max-width: 1280px; margin: 0 auto; }
.sv-cat { scroll-margin-top: 60px; margin-bottom: 26px; }
.sv-ch { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 19px; }
.sv-ch small { color: var(--dim); font-size: 13px; font-weight: 600; }
.sv-cic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--gc, var(--accent)); background: color-mix(in srgb, var(--gc, var(--accent)) 14%, transparent); }
.sv-sh { margin: 12px 0 6px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sv-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r, 14px); border: 1px solid var(--line); background: var(--surface); }
.sv-card:hover { border-color: var(--line-2); }
.sv-a { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text); text-decoration: none; border-radius: 8px; }
.sv-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent); }
.sv-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sv-t b { font-weight: 600; }
.sv-t small { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-chip { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 12.5px; text-decoration: none; }
.sv-chip:hover { color: var(--text); border-color: var(--line-2); }
.sv-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv-ch { font-size: 17px; }
}

/* phone: tab rows scroll sideways instead of folding into «More ▾» (tools/_shared/fittabs.js) */
.tf-row.tf-scroll { overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tf-row.tf-scroll::-webkit-scrollbar { display: none; }
.tf-row.tf-scroll > * { flex: none; }