/* r11 lane S styles (7.11.2026): the shell, the global look, settings, sign-up and import. Logical properties only. */

/* ---------- LOOK M3 + L4: one type ladder, the same names as v2-kit.css (#408) ---------- */
:root{--t-title:1.75rem;--t-title-lh:2.25rem;--t-lead:1.125rem;--t-body:1rem;--t-meta:.875rem;--t-floor:.8125rem;--r-group:16px;--accent-tint:var(--action-soft);--surface-2:var(--line-soft)}
html.m{--t-title:1.5rem;--t-title-lh:2rem}

/* ---------- LOOK M4: one PageHeader. Row 1: icon disc 40, title 28/700, one quiet count line 14, then search,
   the help door and the one primary. Row 2 optional. A breadcrumb 14/500 above the title inside the same card. ---------- */
.pbar h1{font-size:var(--t-title);line-height:var(--t-title-lh);font-weight:700;letter-spacing:0}
.pbar .pb-ic{width:40px;height:40px}
.pbar .pb-ic .i{width:20px;height:20px}
.pbar .pbar-n{font-size:var(--t-meta);font-weight:500;color:var(--body)}
.pbar .pb-crumb{margin:0;font-size:var(--t-meta);font-weight:500;color:var(--body)}
.pbar .pb-crumb a{color:inherit}

/* ---------- LOOK M12: the scrim in dark mode; light stays rgba(23,37,30,.52) ---------- */
html[data-pal="dark"]{--scrim:rgba(10,9,8,.62)}

/* ---------- LOOK H4: the labelled icon rail (tablet, or the collapsed rail): a numbered badge on the icon's corner,
   items 64 high with a 4px gap, the label 13/500 under the icon, nothing overlapping ---------- */
html:not(.m):not(.nav-open) .rail .nl{gap:4px}
html:not(.m):not(.nav-open) .rail .nl>.ni{min-height:64px;height:auto;padding-block:6px;position:relative}
html:not(.m):not(.nav-open) .rail .nl>.ni .lbl{font-size:13px;font-weight:500;line-height:16px}
html:not(.m):not(.nav-open) .rail .nl>.ni .cdot{display:none}
html:not(.m):not(.nav-open) .rail .nl>.ni .cnt{position:absolute;inset-block-start:4px;inset-inline-end:calc(50% - 29px);min-width:18px;min-inline-size:18px;height:18px;block-size:18px;padding-inline:4px;margin:0;border-radius:999px;font:600 13px/18px Heebo,system-ui,sans-serif;background:var(--count-bg);color:var(--count-ink);box-shadow:0 0 0 2px var(--frame);display:inline-grid;place-items:center;z-index:2;opacity:1}

/* ---------- LOOK L7: the phone bottom bar "עוד" indicator gets the sun ring ---------- */
.tabbar #moreBtn .tb-dot{box-shadow:0 0 0 1.5px var(--sun-ring)}

/* ---------- LOOK M5: the top bar's help is a labelled "עזרה" button (icon + 14/500 word; on the phone the word under the icon) ---------- */
.tb-btn.sh-help{padding-inline:.625rem .75rem;gap:.375rem}
.tb-btn.sh-help .sh-hl{font-size:var(--t-meta);font-weight:500;white-space:nowrap}
html.m .mbar .tb-btn.sh-help{flex-direction:column;gap:0;padding-inline:.25rem;min-width:44px}
html.m .mbar .tb-btn.sh-help .i{width:20px;height:20px}
html.m .mbar .tb-btn.sh-help .sh-hl{font-size:var(--t-floor);line-height:1.1}

/* ---------- LOOK L2: the closed demo control reads as demo, not product: a 32px dark chip with the word "דמו".
   It keeps its header slot (r8: it never covers content); the hit area stays 44. ---------- */
.demo.min #demoMin{background:transparent;position:relative}
.demo.min #demoMin>.i{display:none}
.demo.min #demoMin::before{content:"דמו";position:absolute;inset-inline:0;inset-block:6px;border-radius:999px;background:#181C1A;color:#F2F2EF;font:600 13px/32px Heebo,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* ---------- LOOK M6: the settings index on the phone is one grouped list surface: 1px separators inset 16 from the start,
   rows 64, the chevron at the inline-end, no border per row ---------- */
html.m .st-groups>ul{gap:0;background:var(--sheet);border-radius:var(--r-group);box-shadow:var(--sh-card);overflow:hidden}
html.m .st-groups>ul>li{position:relative}
html.m .st-groups>ul>li+li::before{content:"";position:absolute;z-index:1;inset-block-start:0;inset-inline-start:16px;inset-inline-end:0;block-size:1px;background:var(--line)}
html.m .st-groups>ul .st-g{border-radius:0;box-shadow:none;background:transparent;min-height:64px}

/* ---------- the plan (#482) ---------- */
.st-plans{list-style:none;margin:.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.75rem}
.st-plan{padding:1rem;border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:.375rem}
.st-plan.on{box-shadow:0 0 0 2px var(--action);background:var(--accent-tint)}
.st-plan>b{font-size:var(--t-lead)}
.st-plan .st-pp{font-size:var(--t-body);color:var(--ink)}
.st-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;font-size:var(--t-meta)}
.st-plan li{display:flex;gap:.375rem;align-items:flex-start}
.st-plan li.no{color:var(--body)}
.sf-cap{margin-block-start:.25rem}

/* ---------- wizard and import ---------- */
.shab{border:0;margin:0;padding:0;min-width:0}
.shab legend{font-weight:600;margin-block-end:.375rem;padding:0}
.shab-o{display:flex;flex-direction:column;gap:.5rem}
.shab-o label{display:flex;gap:.625rem;align-items:flex-start;min-height:56px;height:auto;padding:.625rem .75rem;border-radius:12px;box-shadow:0 0 0 1px var(--line);background:var(--sheet);cursor:pointer}
.shab-o label input{margin-block-start:.25rem;flex:none}
.shab-o label span{display:flex;flex-direction:column;gap:2px;min-width:0}
.shab-o label small{color:var(--body);font-size:var(--t-meta);line-height:1.4}
.shab-o label:has(input:checked){box-shadow:0 0 0 2px var(--action);background:var(--accent-tint)}
.shab .tp-hint{margin-block-start:.5rem}
.ob-x{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;z-index:2}
.ob-main{position:relative}

/* ---------- the "עוד" screens (tasks, shop, attendance) ---------- */
.sh-tabs{align-self:flex-start}
.sh-filt{display:flex;flex-wrap:wrap;gap:.375rem}
.sh-filt .chip[aria-pressed="true"]{background:var(--accent-tint);box-shadow:0 0 0 2px var(--action)}
.sh-orow{display:flex;align-items:center;gap:.75rem;inline-size:100%;min-block-size:56px;text-align:start;padding-block:.375rem;border-radius:12px}
.sh-orow:hover{background:var(--hover)}
.sh-tk .tk{display:flex;align-items:center;gap:.625rem;flex:1;min-width:0;cursor:pointer}
.sh-tk .tk-done{text-decoration:line-through;color:var(--body)}
.sh-wa{padding:.75rem .875rem;border-radius:12px;background:var(--band);font-size:var(--t-body);line-height:1.5}
.sh-wa p{margin:0}