/* Midas help center — "Phone notifications: step-by-step setup" (help/notifications.html). Page-specific styles only.
   The step layout (.steps / .step-head / .step-num / .step-body), the "You should see" box (.expect) and .note come from
   css/install.css; colors from the css/style.css variables. Logical properties throughout, so the page mirrors in RTL. */

/* how it fits together: phone -> terminal on the VPS -> push */
.help-body .ntf-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:20px 0 0;padding:0;counter-reset:ntf;}
.help-body .ntf-flow li{margin:0;padding:14px 16px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--text-dim);}
.ntf-flow .ntf-ico{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--gold);}
.ntf-flow .ntf-ico svg{width:22px;height:22px;flex-shrink:0;}
.ntf-flow .ntf-ico::before{counter-increment:ntf;content:counter(ntf);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:12px;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#1a1408;background:var(--gold);flex-shrink:0;}
.ntf-flow strong{display:block;color:var(--text);font-size:14px;margin-bottom:2px;}
@media(max-width:700px){.help-body .ntf-flow{grid-template-columns:1fr;}}

/* diagrams (inline SVG, drawn for this page: no screenshots, no logos) */
.ntf-fig{margin:20px 0 0;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-strong);max-width:100%;}
.ntf-fig.narrow{max-width:340px;}
.ntf-fig.mid{max-width:420px;}
/* two phones: side by side on a wide screen, one under the other on a phone */
.ntf-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.ntf-pair svg{flex:1 1 220px;max-width:290px;}
.ntf-fig svg{display:block;width:100%;height:auto;direction:ltr;}
.ntf-fig svg text{font-family:'Onest',system-ui,sans-serif;}
.ntf-fig svg .mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.ntf-fig figcaption{margin-top:10px;padding:0 4px 2px;font-size:12.5px;line-height:1.45;color:var(--text-faint);}

/* tables: scroll inside their own box on a narrow screen instead of widening the page */
.ntf-table{overflow-x:auto;margin-top:14px;}
.ntf-table .kv-table{margin-top:0;}
.ntf-table .kv-table td{vertical-align:top;}
.ntf-table .kv-table .nw{white-space:nowrap;}
/* a narrow phone (360 px): the three columns fit without a sideways scroll inside the box; long words may break */
@media(max-width:420px){
  .ntf-table .kv-table th,.ntf-table .kv-table td{padding:9px 6px;}
  .ntf-table .kv-table td{overflow-wrap:anywhere;hyphens:auto;}
}
/* headings reached from the contents (#what, #nothing, #limits) stop below the sticky header, like the steps do (install.css) */
.install-body h2[id]{scroll-margin-top:96px;}
.install-body h3{margin-top:22px;}
.install-body .step-body h3:first-child{margin-top:14px;}
.ntf-docs{font-size:13.5px;}
/* Hebrew: a line break inside a left-to-right code chip scrambles it, so chips stay on one line (the he texts keep them short) */
html[dir="rtl"] .install-body code{white-space:nowrap;}