/* «המסמכים שלי» (js/my-docs.js, js/my-docs-ui.js; DECISIONS.md, 2026-10-21; prototype docs/files-proto.html).
   DESIGN.md tokens and the product type scale (600 headings, 500 labels, 400 body; nothing under 14px), one accent (pine).
   Layout by the host's own width: desktop = filter rail + list + preview panel; under 900px = chips + cards + sheets.
   Motion after Emil Kowalski: nothing frequent moves (search, filters, ticking); occasional surfaces do (selection bar,
   drawer, sheets, dialogs), exits faster than entries, transform and opacity only, all off under reduced motion. */

.mf-section { display: block; }
.mf.has-bar { padding-bottom: 96px; }
/* The sixth tab («מסמכים») needs room in the header next to the deadline chip: «עבודה ואובדן כושר» shows its short
   label («עבודה») on every width, as it already does on phones; the full name stays in its title. */
@media (min-width: 769px) {
    .app-nav .blob-link[data-scenario="work"][data-short] { font-size: 0; }
    .app-nav .blob-link[data-scenario="work"][data-short]::after { content: attr(data-short); font-size: 0.875rem; }
    .app-nav .blob-link, .app-nav .scenario-btn { padding-inline: 0.75rem; }
    /* Where the tabs still do not fit (under 1280px with the chip) they scroll from the first tab, not cut in the middle. */
    .site-header--app .app-nav { justify-content: safe center; }
}
.mf {
    container: mf / inline-size;
    --mf-ink-3: var(--ds-placeholder); /* 4.8:1 on white: quiet labels */
    --mf-danger: var(--ds-warn-text);
    --mf-scrim: rgb(20 35 31 / 0.32);
    --mf-float: 0 12px 32px rgb(20 35 31 / 0.16), 0 2px 6px rgb(20 35 31 / 0.08);
    --mf-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --mf-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --mf-r: 14px;
    color: var(--ds-ink);
    font-family: var(--ds-font);
    font-size: var(--ds-text-base);
    line-height: 1.55;
}
:where(.mf, .mf-layer) * { box-sizing: border-box; }
:where(.mf, .mf-layer) :where(h2, h3, p) { margin: 0; }
:where(.mf, .mf-layer) :where(h2, h3) { text-wrap: balance; line-height: 1.25; }
:where(.mf, .mf-layer) :where(button, input, select) { font: inherit; color: inherit; }
.mf-n { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mf-hl { background: var(--ds-marker); color: inherit; border-radius: 3px; padding: 0 1px; }
.mf :focus-visible, .mf-layer :focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 6px; }
.mf-quiet { color: var(--mf-ink-3); font-weight: 400; }

/* buttons */
.mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 500; font-size: var(--ds-text-base); cursor: pointer; border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink); white-space: nowrap; text-decoration: none; transition: transform 140ms var(--mf-ease), background-color 140ms ease, opacity 140ms ease; -webkit-tap-highlight-color: transparent; }
.mf-btn:active:not(:disabled) { transform: scale(0.97); }
.mf-btn:disabled { opacity: 0.55; cursor: default; }
.mf-btn-pine { background: var(--ds-primary); color: #fff; border-color: transparent; font-weight: 600; }
.mf-btn-ghost { border-color: transparent; background: none; color: var(--ds-muted); padding: 0 10px; }
.mf-btn-danger { background: var(--mf-danger); color: #fff; border-color: transparent; font-weight: 600; }
.mf-btn-danger-line { color: var(--mf-danger); }
.mf-btn-sm { min-height: 34px; padding: 0 12px; font-size: var(--ds-text-sm); }
.mf-iconbtn { width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; display: inline-grid; place-items: center; color: var(--ds-muted); cursor: pointer; flex: none; transition: transform 140ms var(--mf-ease), background-color 140ms ease; -webkit-tap-highlight-color: transparent; }
.mf-iconbtn:active { transform: scale(0.94); }
.mf-link { all: unset; cursor: pointer; color: var(--ds-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mf-link:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
    .mf-btn:hover:not(:disabled) { background: var(--ds-page); }
    .mf-btn-pine:hover:not(:disabled) { background: var(--ds-primary-hover); }
    .mf-btn-danger:hover:not(:disabled) { background: #a5281c; }
    .mf-btn-ghost:hover:not(:disabled) { background: var(--ds-page); color: var(--ds-ink); }
    .mf-iconbtn:hover { background: var(--ds-page); color: var(--ds-ink); }
}

/* header */
.mf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mf-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.mf-head p { color: var(--mf-ink-3); font-size: var(--ds-text-sm); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mf-head-acts { display: flex; gap: 8px; }
.mf-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ds-text-sm); color: var(--ds-muted); background: var(--ds-mist); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.mf-views-wrap { margin-bottom: 16px; }
.mf-views { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ds-line-strong); border-radius: 10px; background: var(--ds-surface); }
.mf-views button { border: 0; background: none; min-height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 500; font-size: var(--ds-text-sm); color: var(--ds-muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.mf-views button[aria-selected="true"] { background: var(--ds-page); color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-line-strong); }
.mf-cnt { color: var(--mf-ink-3); font-weight: 400; font-size: var(--ds-text-sm); }

/* desktop layout */
.mf-layout { display: grid; gap: 20px; }
@container mf (min-width: 900px) {
    .mf-layout { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
    .mf-layout.has-preview { grid-template-columns: 200px minmax(0, 1fr) 320px; }
}
.mf-rail { display: grid; gap: 2px; position: sticky; top: 84px; }
.mf-rail button { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ds-muted); font-weight: 500; cursor: pointer; text-align: start; min-width: 0; }
.mf-rail button[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-line); }
@media (hover: hover) and (pointer: fine) { .mf-rail button:hover { color: var(--ds-ink); } }

.mf-panel { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--mf-r); min-width: 0; }
.mf-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--ds-line); }
.mf-search { flex: 1; position: relative; min-width: 0; display: block; }
.mf-search .mf-ico { position: absolute; top: 50%; inset-inline-start: 10px; transform: translateY(-50%); color: var(--mf-ink-3); pointer-events: none; }
.mf-search input { width: 100%; height: 38px; border: 1px solid var(--ds-line-strong); border-radius: 9px; background: var(--ds-page); padding: 0 36px; font-size: var(--ds-text-base); }
.mf-search input:focus { outline: none; border-color: var(--ds-primary); background: var(--ds-surface); box-shadow: 0 0 0 3px var(--ds-mist); }
.mf-search kbd { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); font: 500 var(--ds-text-sm) var(--ds-font); color: var(--mf-ink-3); border: 1px solid var(--ds-line-strong); border-radius: 5px; padding: 0 6px; line-height: 20px; }
.mf-sort, .mf-since select, .mf-date, .mf-select { height: 38px; border: 1px solid var(--ds-line-strong); border-radius: 9px; background: var(--ds-surface); padding: 0 10px; font-size: var(--ds-text-sm); color: var(--ds-ink); max-width: 340px; }
.mf-sort:focus, .mf-since select:focus, .mf-date:focus, .mf-select:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-mist); }
.mf-since { display: block; min-width: 0; }
.mf-since select { width: 100%; }
.mf-toolbar .mf-dx-sel select { max-width: 240px; }

/* the list */
.mf-thead, .mf-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 104px 84px; align-items: center; gap: 8px; padding: 0 12px; }
.mf-thead { min-height: 40px; font-size: var(--ds-text-sm); color: var(--mf-ink-3); border-bottom: 1px solid var(--ds-line); }
.mf-row { min-height: 60px; border-bottom: 1px solid var(--ds-line); position: relative; }
.mf-row:last-child { border-bottom: 0; }
.mf-row.is-sel { background: color-mix(in srgb, var(--ds-primary) 6%, var(--ds-surface)); }
.mf-row.is-open { box-shadow: inset -3px 0 0 var(--ds-primary); }
@media (hover: hover) and (pointer: fine) { .mf-row:hover { background: var(--ds-page); } .mf-row.is-sel:hover { background: color-mix(in srgb, var(--ds-primary) 9%, var(--ds-surface)); } .mf-row:hover .mf-row-acts { opacity: 1; } }
.mf-row.is-new, .mf-card.is-new { animation: mfRowIn 240ms var(--mf-ease); }
@keyframes mfRowIn { from { opacity: 0; transform: translateY(-6px); } }
.mf-check { appearance: none; width: 18px; height: 18px; border-radius: 5px; margin: 0; box-shadow: inset 0 0 0 1.5px var(--mf-ink-3); cursor: pointer; display: grid; place-items: center; background: var(--ds-surface); transition: background-color 120ms ease, box-shadow 120ms ease; }
.mf-check:checked, .mf-check:indeterminate { background: var(--ds-primary); box-shadow: none; }
.mf-check:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.mf-check:indeterminate::after { content: ""; width: 9px; height: 2px; background: #fff; border-radius: 1px; }
.mf-docname { display: flex; align-items: center; gap: 12px; min-width: 0; background: none; border: 0; padding: 8px 0; text-align: start; cursor: pointer; color: inherit; }
.mf-docname > span:last-child { min-width: 0; display: grid; }
.mf-t-row { display: flex; align-items: center; min-width: 0; }
.mf-t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mf-k { font-size: var(--ds-text-sm); color: var(--mf-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-cell { font-size: var(--ds-text-sm); color: var(--ds-muted); white-space: nowrap; }
.mf-row-acts { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity 120ms ease; }
.mf-row:focus-within .mf-row-acts, .mf-row.is-open .mf-row-acts { opacity: 1; }
@media (hover: none) { .mf-row-acts { opacity: 1; } }
.mf-reading { display: inline-flex; align-items: center; gap: 6px; color: var(--mf-ink-3); font-size: var(--ds-text-sm); }
/* a still dot, not a spinner: nothing on the site loops (DESIGN.md §7); the words say what is happening */
.mf-reading::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary); }
.mf-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; margin-inline-start: 8px; border-radius: 999px; background: var(--ds-mist); color: var(--ds-primary); font-size: var(--ds-text-sm); font-weight: 500; white-space: nowrap; flex: none; }

/* a quiet first-page thumbnail */
.mf-thumb { width: 32px; height: 40px; border-radius: 4px; background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-line-strong), 0 1px 2px rgb(20 35 31 / 0.06); position: relative; flex: none; overflow: hidden; }
.mf-thumb::before { content: ""; position: absolute; inset: 8px 6px auto 6px; height: 18px; background: repeating-linear-gradient(to bottom, var(--ds-line-strong) 0 2px, transparent 2px 5px); }
.mf-thumb.is-img::before { inset: 5px; height: auto; background: linear-gradient(160deg, var(--ds-mist), var(--ds-line-strong)); border-radius: 2px; }
.mf-thumb.is-lg { width: 100%; height: 168px; border-radius: 8px; }
.mf-thumb.is-lg::before { inset: 20px 22px auto; height: 96px; background: repeating-linear-gradient(to bottom, var(--ds-line-strong) 0 3px, transparent 3px 11px); }
.mf-thumb.is-lg.is-img::before { inset: 12px; height: auto; }
.mf-thumb.is-lg::after { content: attr(data-ext); position: absolute; inset: auto 0 0 0; font: 600 var(--ds-text-sm)/28px var(--ds-font); text-align: center; color: #fff; background: var(--ds-primary); letter-spacing: 0.04em; }

.mf-empty { padding: 48px 24px; text-align: center; display: grid; justify-items: center; gap: 8px; color: var(--ds-muted); }
.mf-empty h3 { font-size: var(--ds-text-md); font-weight: 600; color: var(--ds-ink); }
.mf-empty p { max-width: 44ch; }
.mf-empty > .mf-ico { width: 28px; height: 28px; color: var(--ds-primary); }
.mf-empty-ill { width: 220px; height: auto; max-width: 70%; margin-bottom: 4px; }

/* the scope line: a date, a diagnosis or a report narrows the list */
.mf-scope { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--ds-line); background: color-mix(in srgb, var(--ds-primary) 5%, var(--ds-surface)); font-size: var(--ds-text-sm); color: var(--ds-muted); }
.mf-scope b { color: var(--ds-ink); font-weight: 600; }
.mf-scope-acts { display: flex; align-items: center; gap: 4px; flex: none; }

/* preview panel (desktop) */
.mf-preview { position: sticky; top: 84px; display: grid; gap: 14px; padding: 16px; animation: mfPanelIn 220ms var(--mf-ease); }
@keyframes mfPanelIn { from { opacity: 0; transform: translateX(-8px); } }
.mf-pv-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mf-pv-h h2 { font-size: var(--ds-text-md); font-weight: 600; }
.mf-sum { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--ds-page); }
.mf-sum h3 { font-size: var(--ds-text-sm); font-weight: 600; color: var(--mf-ink-3); }
.mf-sum p { font-size: var(--ds-text-base); line-height: 1.55; color: var(--ds-ink); }
.mf-sum small { font-size: var(--ds-text-sm); color: var(--mf-ink-3); }
.mf-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--ds-text-sm); margin: 0; }
.mf-kv dt { color: var(--mf-ink-3); }
.mf-kv dd { margin: 0; }
.mf-pv-dx { display: grid; gap: 6px; font-size: var(--ds-text-sm); }
.mf-pv-l { color: var(--mf-ink-3); }
.mf-dx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mf-dx-row .mf-tag { margin: 0; white-space: normal; }
.mf-dx-row { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }
.mf-dx-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.mf-dx-main small { flex-basis: 100%; color: var(--mf-ink-3); font-size: var(--ds-text-sm); }
.mf-dx-x { width: 28px; height: 28px; }
.mf-dx-x .mf-ico { width: 16px; height: 16px; }
.mf-dx-add { justify-self: start; margin-top: 2px; }
/* receipts for health insurance (js/receipts.js) */
.mf-tag.is-quiet { background: transparent; color: var(--mf-ink-3); box-shadow: inset 0 0 0 1px var(--ds-line); }
.mf-pv-rc { display: grid; gap: 6px; font-size: var(--ds-text-sm); }
.mf-rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mf-rc-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mf-rc-list .mf-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: start; }
.mf-rc-list .mf-ico { width: 16px; height: 16px; flex: none; }
.mf-rc-st { margin: 0; font-weight: 600; }
.mf-rc-st.is-handled { color: var(--ds-ok-text); }
.mf-rc-st.is-not_eligible { color: var(--ds-warn-text); }
.mf-dx-choices { display: grid; gap: 8px; max-height: min(52dvh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.mf-dx-other { display: block; width: 100%; margin-top: 8px; height: 40px; border: 1px solid var(--ds-line-strong); border-radius: 9px; padding: 0 12px; background: var(--ds-surface); font-size: 16px; }
.mf-dx-other:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-mist); }
.mf-linked { font-size: var(--ds-text-sm); color: var(--ds-muted); background: var(--ds-page); border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; }
.mf-pv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mf-pv-acts .mf-btn { width: 100%; }

/* reports */
.mf-rep { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--ds-line); }
.mf-rep:last-child { border-bottom: 0; }
.mf-rep.is-new { animation: mfFlash 1400ms var(--mf-ease); }
@keyframes mfFlash { 0%, 40% { background: color-mix(in srgb, var(--ds-marker) 45%, var(--ds-surface)); } 100% { background: transparent; } }
.mf-rep-ico { width: 44px; height: 52px; border-radius: 6px; background: var(--ds-mist); color: var(--ds-primary); display: grid; place-items: center; }
.mf-rep-main { min-width: 0; display: grid; gap: 2px; }
.mf-rep h3 { font-size: var(--ds-text-base); font-weight: 600; }
.mf-m { font-size: var(--ds-text-sm); color: var(--mf-ink-3); display: flex; flex-wrap: wrap; gap: 0 12px; }
.mf-rep-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.mf-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.mf-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-primary); }

/* ---------- phone (under 900px of the screen's own width) ---------- */
.mf-p-search { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mf-chips-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.mf-chips-row::-webkit-scrollbar { display: none; }
.mf-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ds-line-strong); background: var(--ds-surface); font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-muted); cursor: pointer; transition: transform 140ms var(--mf-ease); white-space: nowrap; flex: none; }
.mf-chip:active { transform: scale(0.97); }
.mf-chip[aria-pressed="true"] { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-mist); }
.mf-chip-n { color: var(--mf-ink-3); }
.mf-p-since { display: flex; gap: 8px; margin-bottom: 10px; }
.mf-p-since .mf-since { flex: 1; min-width: 0; }
.mf-p-since select { max-width: none; }
.mf-p-since + .mf-scope, .mf-chips-row + .mf-scope, .mf-p-search + .mf-scope { border: 1px solid var(--ds-line); border-radius: 10px; margin-bottom: 10px; }
.mf-cards { display: grid; gap: 8px; }
.mf-card { display: grid; grid-template-columns: auto 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 12px; min-height: 64px; -webkit-tap-highlight-color: transparent; }
.mf-card.is-sel { border-color: var(--ds-primary); background: color-mix(in srgb, var(--ds-primary) 5%, var(--ds-surface)); }
.mf-card-main { all: unset; display: grid; min-width: 0; cursor: pointer; }
.mf-card-main:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 6px; }
.mf-check-wrap { width: 0; overflow: hidden; display: grid; place-items: center; }
.mf-card.is-selecting .mf-check-wrap { width: 20px; }
.mf-cards > .mf-empty { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 12px; }
@container mf (max-width: 899px) {
    .mf-rep { grid-template-columns: 40px minmax(0, 1fr); }
    .mf-rep-acts { grid-column: 1 / -1; justify-content: flex-start; }
    .mf-hide-phone { display: none; }
    .mf-head-acts { width: 100%; }
    .mf-head-acts .mf-btn { flex: 1; }
}

/* ---------- layers: the selection bar, the drawer, sheets, dialogs, toasts (fixed, outside the flow; above the site
   header, z-index 9999, as the drawer and the sheets cover the whole height) ---------- */
.mf-layer { font-family: var(--ds-font); color: var(--ds-ink); font-size: var(--ds-text-base); line-height: 1.55; --mf-ink-3: var(--ds-placeholder); --mf-danger: var(--ds-warn-text); --mf-ease: cubic-bezier(0.23, 1, 0.32, 1); --mf-drawer: cubic-bezier(0.32, 0.72, 0, 1); --mf-float: 0 12px 32px rgb(20 35 31 / 0.16), 0 2px 6px rgb(20 35 31 / 0.08); }

.mf-selbar { position: fixed; z-index: 10000; inset-inline: 0; bottom: 24px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; background: var(--ds-ink); color: #fff; border-radius: 14px; box-shadow: var(--mf-float);
    transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform 150ms var(--mf-ease), opacity 150ms ease; }
.mf-selbar.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; transition: transform 220ms var(--mf-ease), opacity 160ms ease; }
.mf-selbar .mf-count { padding: 0 10px; font-weight: 600; font-size: var(--ds-text-sm); white-space: nowrap; }
.mf-selbar .mf-btn { min-height: 36px; background: transparent; color: #fff; border-color: transparent; }
.mf-selbar .mf-btn-pine { background: var(--ds-primary); }
.mf-selbar .mf-sep { width: 1px; height: 20px; background: rgb(255 255 255 / 0.18); margin: 0 4px; }
@media (hover: hover) and (pointer: fine) { .mf-selbar .mf-btn:hover:not(.mf-btn-pine):not(:disabled) { background: rgb(255 255 255 / 0.08); } }

.mf-scrim { position: fixed; inset: 0; background: var(--mf-scrim, rgb(20 35 31 / 0.32)); z-index: 10010; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.mf-scrim.is-on { opacity: 1; pointer-events: auto; }
/* the report drawer: from the end edge (left, in Hebrew), the iOS drawer curve */
.mf-drawer { position: fixed; z-index: 10011; top: 0; bottom: 0; left: 0; width: min(460px, 100%); background: var(--ds-surface); box-shadow: var(--mf-float); display: flex; flex-direction: column;
    transform: translateX(-100%); visibility: hidden; transition: transform 240ms var(--mf-drawer), visibility 0s linear 240ms; }
.mf-drawer.is-on { transform: translateX(0); visibility: visible; transition: transform 320ms var(--mf-drawer), visibility 0s; }
.mf-dr-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ds-line); }
.mf-dr-h h2 { font-size: var(--ds-text-lg); font-weight: 600; }
.mf-dr-b { padding: 20px; overflow-y: auto; display: grid; gap: 20px; align-content: start; flex: 1; overscroll-behavior: contain; }
.mf-dr-f { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ds-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf-dr-f-acts { display: flex; gap: 8px; }
.mf-total { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.mf-total b { color: var(--ds-ink); font-weight: 600; }
.mf-field { display: grid; gap: 6px; }
.mf-field > span { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-muted); }
.mf-field input[type="text"], .mf-field input[type="email"], .mf-field input:not([type]) { height: 42px; border: 1px solid var(--ds-line-strong); border-radius: 9px; padding: 0 12px; background: var(--ds-surface); font-size: 16px; }
.mf-field input[type="text"]:focus, .mf-field input[type="email"]:focus, .mf-field input:not([type]):focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-mist); }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-order { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ds-line); border-radius: 10px; }
.mf-order li { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px 8px 10px; border-bottom: 1px solid var(--ds-line); background: var(--ds-surface); }
.mf-order li:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
.mf-order li:first-child { border-radius: 10px 10px 0 0; }
.mf-order li.is-drag { box-shadow: var(--mf-float); border-radius: 8px; position: relative; z-index: 2; transform: scale(1.01); }
.mf-order-main { min-width: 0; display: grid; }
.mf-order .mf-t { font-size: var(--ds-text-sm); }
.mf-p { font-size: var(--ds-text-sm); color: var(--mf-ink-3); }
.mf-handle { width: 28px; height: 32px; border: 0; background: none; color: var(--mf-ink-3); cursor: grab; display: grid; place-items: center; border-radius: 6px; touch-action: none; }
.mf-handle:active { cursor: grabbing; }
.mf-dx-one { font-size: var(--ds-text-sm); color: var(--ds-ink); }
.mf-dx-edit { display: flex; gap: 8px; align-items: center; }
.mf-hint { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ds-text-sm); color: var(--mf-ink-3); }
.mf-dx-ok { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ds-text-sm); color: var(--ds-muted); background: var(--ds-mist); border-radius: 10px; padding: 10px 12px; }
.mf-dx-ok > .mf-ico { color: var(--ds-primary); margin-top: 2px; }
.mf-dx-ok > span { flex: 1; }
.mf-dx-ok b { color: var(--ds-ink); font-weight: 600; }
.mf-opts { display: grid; gap: 2px; }
.mf-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.mf-opt small { display: block; color: var(--mf-ink-3); font-size: var(--ds-text-sm); }
.mf-switch { appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--ds-line-strong); box-shadow: inset 0 0 0 1px var(--mf-ink-3); position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color 180ms ease; }
.mf-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-surface); box-shadow: 0 1px 3px rgb(20 35 31 / 0.2); transition: transform 180ms var(--mf-ease); }
.mf-switch:checked { background: var(--ds-primary); box-shadow: none; }
.mf-switch:checked::after { transform: translateX(-16px); }
.mf-switch:disabled { opacity: 0.5; cursor: default; }
/* the build button is its own progress */
.mf-btn-build { position: relative; overflow: hidden; min-width: 150px; }
.mf-btn-build .mf-fill { position: absolute; inset: 0; background: rgb(255 255 255 / 0.18); transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform 160ms linear; }
.mf-btn-build > span { position: relative; }
.mf-btn-build [data-label] { display: inline-flex; align-items: center; gap: 8px; }

/* bottom sheet (phone): follows the finger, closes on a flick */
.mf-sheet { position: fixed; z-index: 10011; inset-inline: 0; bottom: 0; max-height: 88dvh; background: var(--ds-surface); border-radius: 20px 20px 0 0; box-shadow: var(--mf-float); display: flex; flex-direction: column;
    transform: translateY(100%); visibility: hidden; transition: transform 240ms var(--mf-drawer), visibility 0s linear 240ms; }
.mf-sheet.is-on { transform: translateY(0); visibility: visible; transition: transform 320ms var(--mf-drawer), visibility 0s; }
.mf-sheet.is-dragging { transition: none; }
.mf-grab { padding: 10px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.mf-grab i { width: 40px; height: 5px; border-radius: 99px; background: var(--ds-line-strong); }
.mf-sheet .mf-dr-b { padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.mf-sheet .mf-dr-h { padding-top: 4px; }
/* the phone's action bar while choosing */
.mf-p-actions { position: fixed; z-index: 10000; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ds-surface); border-top: 1px solid var(--ds-line); box-shadow: 0 -8px 24px rgb(20 35 31 / 0.08);
    transform: translateY(100%); transition: transform 150ms var(--mf-ease); }
.mf-p-actions.is-on { transform: translateY(0); transition-duration: 220ms; }
.mf-p-actions .mf-btn { width: 100%; min-height: 44px; }
.mf-p-count { position: absolute; top: -36px; right: 12px; font-size: var(--ds-text-sm); font-weight: 600; background: var(--ds-ink); color: #fff; padding: 4px 10px; border-radius: 8px; }

/* dialogs: centred, so they scale from the centre */
dialog.mf-dlg { border: 0; padding: 0; border-radius: 16px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 24px 60px rgb(20 35 31 / 0.22); }
dialog.mf-dlg::backdrop { background: rgb(20 35 31 / 0.32); }
dialog.mf-dlg[open] { animation: mfDlgIn 200ms var(--mf-ease); display: flex; flex-direction: column; }
@keyframes mfDlgIn { from { opacity: 0; transform: scale(0.97); } }
dialog.mf-dlg.is-wide { width: min(880px, calc(100vw - 32px)); }
.mf-dlg-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ds-line); }
.mf-dlg-h h2 { font-size: var(--ds-text-lg); font-weight: 600; }
.mf-dlg-b { padding: 16px 20px; display: grid; gap: 14px; overflow-y: auto; }
.mf-dlg-f { padding: 12px 20px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--ds-line); }
.mf-dlg-f .mf-seg { margin-inline-start: auto; }
.mf-choice { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--ds-line-strong); border-radius: 12px; cursor: pointer; align-items: start; transition: border-color 140ms ease, background-color 140ms ease; }
.mf-choice > input { margin: 3px 0 0; accent-color: var(--ds-primary); width: 16px; height: 16px; }
.mf-choice b { font-weight: 600; }
.mf-choice small { display: block; color: var(--mf-ink-3); font-size: var(--ds-text-sm); margin-top: 2px; }
.mf-choice > span { display: block; min-width: 0; }
.mf-dx-as { unicode-bidi: plaintext; text-align: start; }
.mf-choice:has(input:checked) { border-color: var(--ds-primary); background: var(--ds-mist); }
.mf-choice.is-off { cursor: default; opacity: 0.7; }
.mf-soon { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-muted); border: 1px solid var(--ds-line-strong); border-radius: 999px; padding: 0 8px; margin-inline-start: 6px; }
.mf-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mf-who .mf-field input { width: 100%; }
.mf-l { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-muted); }
.mf-dlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mf-dlist li { display: grid; gap: 2px; padding: 10px 12px; background: var(--ds-page); border-radius: 9px; }
.mf-dlist small { color: var(--mf-ink-3); font-size: var(--ds-text-sm); }
.mf-warn { color: var(--mf-danger); font-size: var(--ds-text-sm); }
.mf-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ds-line-strong); border-radius: 10px; background: var(--ds-surface); }
.mf-seg button { border: 0; background: none; min-height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 500; font-size: var(--ds-text-sm); color: var(--ds-muted); cursor: pointer; white-space: nowrap; }
.mf-seg button[aria-pressed="true"] { background: var(--ds-mist); color: var(--ds-primary); }
.mf-upl-note { font-size: var(--ds-text-sm); color: var(--ds-muted); }
/* secure links: the dialog's fields, the result, and the rows under a report */
.mf-linkopts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.mf-linkopts .mf-field input { width: 100%; }
.mf-field select { height: 42px; border: 1px solid var(--ds-line-strong); border-radius: 9px; padding: 0 12px; background: var(--ds-surface); font: inherit; font-size: 16px; color: var(--ds-ink); }
.mf-field select:focus-visible { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-mist); }
.mf-copyrow { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mf-copyrow input { flex: 1; min-width: 0; width: 0; height: 42px; border: 1px solid var(--ds-line-strong); border-radius: 9px; padding: 0 12px; background: var(--ds-page); font-size: var(--ds-text-sm); color: var(--ds-ink); text-overflow: ellipsis; }
.mf-code { flex: 1; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ds-ink); text-align: left; }
.mf-links { grid-column: 2 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-link-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-page); }
.mf-link-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--ds-mist); color: var(--ds-primary); display: grid; place-items: center; }
.mf-link-ico .mf-ico { width: 16px; height: 16px; }
.mf-link-main { min-width: 0; display: grid; gap: 2px; }
.mf-link-main b { font-weight: 500; overflow-wrap: anywhere; }
.mf-link-state { font-weight: 500; color: var(--ds-primary); }
.mf-link-row:is(.is-expired, .is-revoked, .is-pending) .mf-link-state { color: var(--ds-muted); }
.mf-link-row.is-locked .mf-link-state { color: var(--mf-danger); }
.mf-link-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) {
    .mf-linkopts { grid-template-columns: 1fr; }
    .mf-links { grid-column: 1 / -1; }
    .mf-link-row { grid-template-columns: 28px minmax(0, 1fr); }
    .mf-link-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
    .mf-dlg-f .mf-seg { order: 3; width: 100%; margin: 0; }
    .mf-dlg-f .mf-seg button { flex: 1; }
    .mf-who { grid-template-columns: 1fr; }
}

/* the report's first page, in the preview */
.mf-a4-wrap { background: var(--ds-page); }
.mf-a4 { background: #fff; color: var(--ds-ink); width: 100%; max-width: 760px; margin: 0 auto; padding: 36px 40px; box-shadow: 0 1px 3px rgb(20 35 31 / 0.12), 0 8px 24px rgb(20 35 31 / 0.08); border-radius: 4px; display: grid; gap: 20px; font-size: var(--ds-text-sm); }
.mf-a4-h { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ds-primary); }
.mf-a4-h h3 { font-size: 1.2rem; font-weight: 600; }
.mf-a4-h p { color: var(--ds-muted); }
.mf-a4-who { display: grid; text-align: left; color: var(--ds-muted); align-content: start; }
.mf-a4-who b { color: var(--ds-ink); font-weight: 600; }
.mf-a4-who .mf-a4-anon { color: var(--ds-muted); }
.mf-a4-key { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mf-a4-key > div { border: 1px solid var(--ds-line-strong); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.mf-a4-key > div:first-child { border-color: var(--ds-primary); background: color-mix(in srgb, var(--ds-mist) 50%, #fff); }
.mf-a4-key span { color: var(--ds-muted); }
.mf-a4-key b { font-size: 1.15rem; font-weight: 600; }
.mf-a4-key small { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.mf-a4-t { width: 100%; border-collapse: collapse; }
.mf-a4-t th { text-align: start; font-weight: 600; color: var(--ds-muted); border-bottom: 1px solid #c3dccf; padding: 6px; }
.mf-a4-t td { vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--ds-line); }
.mf-a4-t td:nth-child(1), .mf-a4-t td:nth-child(2) { white-space: nowrap; }
.mf-a4-t th:nth-child(3) { width: 38%; }
.mf-a4-sub { color: var(--mf-ink-3); }
.mf-a4-sum-m { display: none; margin-top: 4px; }
.mf-a4-f { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--mf-ink-3); border-top: 1px solid var(--ds-line); padding-top: 10px; }
@media (max-width: 600px) {
    .mf-a4 { padding: 20px 16px; }
    .mf-a4-key { grid-template-columns: 1fr; }
    .mf-a4-h { flex-direction: column; }
    .mf-a4-who { text-align: start; }
    .mf-a4-t .mf-a4-sum { display: none; }
    .mf-a4-t th:nth-child(3) { width: auto; }
    .mf-a4-sum-m { display: block; }
}

/* toast */
.mf-toast { position: fixed; z-index: 10030; inset-inline: 0; bottom: 24px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); background: var(--ds-ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: var(--ds-text-sm); box-shadow: var(--mf-float); transition: transform 200ms var(--mf-ease), opacity 200ms ease; }
@starting-style { .mf-toast { transform: translateY(12px); opacity: 0; } }
.mf-toast.is-out { transform: translateY(12px); opacity: 0; transition-duration: 140ms; }
.mf-toast.is-raised { bottom: 96px; }

/* dropping files on the screen */
.mf-drop { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; background: color-mix(in srgb, var(--ds-mist) 88%, transparent); border: 2px dashed var(--ds-primary); border-radius: 16px; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.mf-drop.is-on { opacity: 1; }
.mf-drop div { display: grid; justify-items: center; gap: 6px; color: var(--ds-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .mf *, .mf-layer, .mf-layer *, .mf-layer *::before, .mf-layer *::after, .mf *::before, .mf *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
html.a11y-no-anim .mf *, html.a11y-no-anim .mf-layer, html.a11y-no-anim .mf-layer * { animation: none !important; transition: none !important; }
/* who sees my case (the access dialog) */
.mf-accs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mf-acc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-page); }
.mf-acc-main { display: grid; gap: 2px; min-width: 0; }
.mf-acc-main b { font-weight: 600; overflow-wrap: anywhere; }
.mf-acc-form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
.mf-acc-form h3 { font-size: var(--ds-text-base); font-weight: 600; }
.mf-acc-form .mf-field input, .mf-acc-form .mf-field select { width: 100%; }
@media (max-width: 600px) { .mf-acc { grid-template-columns: 1fr; } }
/* a professional's request for documents (top of the tab) */
.mf-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 14px; border-radius: 14px; background: var(--ds-mist); border: 1px solid #c3dccf; }
.mf-req h3 { font-size: var(--ds-text-base); font-weight: 600; margin: 0 0 6px; }
.mf-req ul { margin: 0 0 6px; padding-inline-start: 20px; display: grid; gap: 2px; font-size: var(--ds-text-base); }
.mf-req-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .mf-req { grid-template-columns: 1fr; } .mf-req-acts { justify-content: flex-start; } }

/* the secure links a professional made from the case («מי רואה את התיק שלי») */
.mf-acc-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.mf-acc-links li { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* the consent, word for word as it is kept (js/consent-text.js) */
.mf-consent { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--ds-page); border-inline-start: 4px solid var(--ds-primary); font-size: var(--ds-text-sm); line-height: 1.6; max-height: 260px; overflow-y: auto; }
.mf-consent p { margin: 0; }
.mf-agree { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ds-text-sm); cursor: pointer; }
.mf-agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ds-primary); flex: none; }
.mf-agree > span { flex: 1; min-width: 0; }
.mf-acc-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* signing a professional's document */
.mf-sign { display: flex; flex-direction: column; gap: 12px; }
.mf-sign > * { flex-shrink: 0; }
.mf-sigpad { display: block; width: 100%; height: 180px; border: 1.5px dashed var(--ds-line-strong); border-radius: 12px; background: #fff; cursor: crosshair; }
.mf-sign .mf-btn-ghost { justify-self: start; }
.mf-sign .mf-consent { max-height: none; overflow: visible; }
/* a scrolling box in the dialog's grid would shrink to nothing: it keeps a height of its own */
.mf-dlg-b .mf-consent { min-height: 132px; }