/* r10 HOW (#401): "ככה זה עובד" on every screen. The door, the panel's article, the inline version and the ring. */

/* the door: one name and one icon in every title card; the name hides where the card is narrow (the .tp-help rule) */
.tp-help.how-b{display:inline-flex}
html.m .tp-help.how-b:not(.desk){display:inline-flex;width:44px;padding:0;justify-content:center;order:9}
html.m .tp-help.how-b span{display:none}
#calSheet .toolbar .how-b{flex:none}
.how-ico{flex:none}
.how-ico .i{color:var(--body)}

/* the article in the panel: what the screen is for, then numbered tasks with numbered steps */
.hdr .how-what{margin:0;font-size:var(--fs-m);line-height:1.6;color:var(--ink)}
.how-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.how-tl > li{display:flex;flex-direction:column;gap:.375rem}
.how-t h3,.how-t h2{margin:0}
.how-in .how-t h2{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-m);font-weight:600;color:var(--ink)}
.how-st{margin:0;padding-inline-start:1.375rem;display:flex;flex-direction:column;gap:.25rem;font-size:var(--fs-m);line-height:1.5;color:var(--body)}
.how-st li::marker{color:var(--mute);font-variant-numeric:tabular-nums}
.how-t .tp-hshow{margin-block-start:.125rem}
.how-show{display:inline-flex;align-items:center;gap:.375rem;min-height:44px;font-size:var(--fs-m);font-weight:600;color:var(--action)}
.how-show .i{color:var(--action)}
.how-rel h3{margin:0 0 .25rem;font-size:var(--fs-m);font-weight:700;color:var(--ink)}
.how-rel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.how-rel .hd-link{min-height:44px;height:auto}
.hdr .how-body > .primary{flex:none}

/* "הראו לי" where the spotlight cannot run: a ring on the element itself, for a moment */
.how-ring{outline:3px solid var(--action)!important;outline-offset:4px;border-radius:var(--r-m)}
@media (prefers-reduced-motion:no-preference){.how-ring{transition:outline-color var(--t-fast)}}

/* full-page layers (sign-up, wizard, import, the accountant): the same text inline under the title */
.how-line{margin:.25rem 0 .75rem;font-size:var(--fs-m);line-height:1.55;color:var(--body)}
.how-line b{color:var(--ink)}
.how-in{margin:.25rem 0 .875rem;border-radius:var(--r-m);background:var(--band)}
.how-in > summary{display:flex;align-items:center;gap:.5rem;min-height:44px;padding-inline:.75rem;font-size:var(--fs-m);font-weight:600;color:var(--action);cursor:pointer;list-style:none}
.how-in > summary::-webkit-details-marker{display:none}
.how-in > summary .i{color:var(--action)}
.how-in-b{display:flex;flex-direction:column;gap:.625rem;padding:0 .75rem .75rem}
.how-in-b .how-what{margin:0;font-size:var(--fs-m);line-height:1.6;color:var(--ink)}
.how-in .hd-t{background:var(--sheet)}
.mz-acct > .how-in{margin-inline:1rem}

/* r11 (LOOK H1, M5, #510): on the computer the page door is one quiet line, "ככה זה עובד ›" (14/500, no question mark);
   on the phone it stays the question-mark icon at the end of the title card */
.how-b .how-ll{display:none}
html:not(.m) .tp-help.how-b:not(.how-ico){width:auto;height:40px;padding-inline:.5rem;gap:.25rem;font-size:var(--fs-s);font-weight:500;color:var(--action)}
html:not(.m) .tp-help.how-b:not(.how-ico) > .how-qi,html:not(.m) .tp-help.how-b:not(.how-ico) > .how-dl{display:none}
html:not(.m) .tp-help.how-b:not(.how-ico) > .how-ll{display:inline-flex;align-items:center;gap:.125rem;position:static;width:auto;height:auto;overflow:visible;clip-path:none}
html:not(.m) .tp-help.how-b .how-ll .i{color:var(--action)}
html:not(.m) .tp-help.how-b:not(.how-ico):hover{background:var(--hover)}
html.m .tp-help.how-b .how-dl{display:none}

/* the first-visit card on the phone: one line that unfolds in place */
.fv-body{display:contents}
.fv.fv-min,html.m .fv.fv-min{padding:0;gap:0}
.fv.fv-min > .fv-body{display:none}
.fv-open{display:flex;align-items:center;gap:.5rem;inline-size:100%;min-block-size:44px;padding-inline:.75rem;font-size:var(--fs-m);font-weight:600;color:var(--action);text-align:start}
.fv-open > span{flex:1}
.fv-open .i{color:var(--action)}
.fv:not(.fv-min) > .fv-open{flex:1 1 100%;min-block-size:40px;padding-inline:0}
.fv:not(.fv-min) > .fv-open .i:last-child{transform:rotate(180deg)}

/* r11 B (addendum 4, HL-07, HL-11): the help centre in "כל העזרה": the two doors, results by kind, the map, the words.
   Lists are one grouped surface with inset separators, like the questions (LOOK M6). */
#helpd .hc-res{display:flex;flex-direction:column;gap:1rem}
#helpd .hc-g{display:flex;flex-direction:column;gap:.5rem}
#helpd .hc-g > h3,#helpd .hc-g > h4{display:flex;align-items:center;gap:.375rem;margin:0;font-size:var(--fs-m);font-weight:700;color:var(--ink)}
#helpd .hc-g > h4 .i{color:var(--body)}
#helpd .hc-l{list-style:none;margin:0;padding:0;border-radius:var(--r-group,16px);background:var(--sheet);box-shadow:0 0 0 1px var(--line);overflow:hidden}
#helpd .hc-l > li,#helpd .hc-l > .hc-gi{position:relative}
#helpd .hc-l > li + li::before,#helpd .hc-l > .hc-gi + .hc-gi::before{content:"";position:absolute;inset-block-start:0;inset-inline:16px 0;block-size:1px;background:var(--line)}
#helpd .hc-i{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;min-block-size:52px}
#helpd .hc-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:32px;block-size:32px;border-radius:50%;background:var(--band)}
#helpd .hc-ic .i{color:var(--body)}
#helpd .hc-tx{flex:1 1 12rem;min-inline-size:0;display:flex;flex-direction:column;gap:.125rem;text-align:start}
#helpd .hc-tx b{font-size:var(--fs-m);font-weight:600;color:var(--ink)}
#helpd .hc-tx p,#helpd .hc-tx > span{margin:0;font-size:var(--fs-s);line-height:1.5;color:var(--body)}
#helpd .hc-tx .hc-p{font-weight:500;color:var(--ink)}
#helpd .hc-tx small{font-size:var(--fs-s);line-height:1.5;color:var(--body)}
#helpd .hc-go{min-block-size:44px;height:auto;margin-block:-.25rem -.5rem}
#helpd .hc-door{display:flex;align-items:center;gap:.75rem;inline-size:100%;min-block-size:56px;padding:.625rem 1rem;color:var(--ink);text-align:start}
#helpd .hc-door > .i{flex:none;color:var(--body)}
#helpd .hc-door:hover{background:var(--hover)}
#helpd .hc-gl{margin:0}
#helpd .hc-gi{padding:.75rem 1rem}
#helpd .hc-gi dt{font-size:var(--fs-m);font-weight:600;color:var(--ink)}
#helpd .hc-gi dd{margin:.125rem 0 0;font-size:var(--fs-s);line-height:1.55;color:var(--body)}
#helpd .hc-gi .lawp{margin-block:4px 0}
#helpd .hc-t:focus{outline:none}
#helpd .hc-t{margin:0;font-size:var(--t-lead,1.125rem);font-weight:700;color:var(--ink)}
#helpd .hc-back{min-block-size:44px;height:auto}
#helpd .hc-note{margin:0;font-size:var(--fs-s);line-height:1.5;color:var(--body)}