/* ============================================================================
   Madar POS user guide (29 Sep 2026): pos/guide.html and pos/guide-ar.html.
   On top of assets/madar.css, the site's one system: void and copper. Copper
   is the human side (the page you are on, the one action); ice is the machine
   side (the screen's own words, step numbers, the contents).
   Written with logical properties (inline-start, inline-end) so the Arabic
   page mirrors itself: the contents move to the right, the step numbers too.
   ========================================================================= */

/* The surfaces nobody draws, finished for this page as for the rest of the site. */
.doc a{color:var(--ice);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(155,193,224,.4)}
.doc a:hover{text-decoration-color:var(--ice)}

/* ---------------------------------------------------------------- intro */
/* Top and bottom only: .intro is also .wrap, and a padding shorthand here would take away its side gutter. */
.intro{padding-top:clamp(34px,5vw,64px);padding-bottom:clamp(26px,3.4vw,40px)}
.intro h1{margin-top:14px;font-size:clamp(32px,4.4vw,56px);line-height:1.06;max-width:18ch}
.intro .lede{margin-top:18px;max-width:62ch}
.intro .alt{margin-top:14px;font-size:14.5px;color:var(--dim)}
.intro .alt a{color:var(--ice);text-underline-offset:3px}

/* Start with your part: a table of contents by role. Rows, not a row of equal cards. */
.roles{margin-top:clamp(26px,3.4vw,38px);border-top:1px solid var(--line);max-width:920px}
.roles li{list-style:none;display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:6px 28px;padding:16px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.roles h2{font-size:19px;letter-spacing:-.01em;line-height:1.25}
.roles p{color:var(--dim);font-size:14.5px;line-height:1.6}
.roles .to{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.roles .to a{font-family:var(--mono);font-size:12.5px;color:var(--text);text-decoration:none;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 12px;transition:border-color .18s,color .18s}
.roles .to a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.roles .to a:hover{border-color:var(--copper);color:var(--text)}}

/* ------------------------------------------------------------ the layout */
.guide{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;padding-bottom:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,48px)}

/* The contents: sticky beside the text on a wide screen, folded above it on a phone. */
.toc{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;padding-inline-end:6px;scrollbar-width:thin}
.toc summary{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);cursor:pointer;list-style:none;padding:4px 0}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0}
.toc > ol{margin-top:10px;display:grid;gap:2px}
.toc a{display:block;text-decoration:none;color:var(--dim);font-size:14px;line-height:1.35;padding:6px 0;padding-inline-start:12px;border-inline-start:2px solid var(--line);transition:color .18s,border-color .18s}
.toc > ol > li > a{color:var(--text);font-weight:500}
.toc ol ol a{font-size:13px;padding:4px 0;padding-inline-start:22px}
.toc a[aria-current="location"]{color:var(--text);border-inline-start-color:var(--copper)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--text)}}
@media (min-width:981px){.toc summary{pointer-events:none}}

/* ---------------------------------------------------------------- text */
.doc{min-width:0;max-width:72ch}
.doc section{scroll-margin-top:88px}
.doc section + section{margin-top:clamp(56px,7vw,88px);padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--line)}
.doc h2{font-size:clamp(28px,3.2vw,38px);scroll-margin-top:88px}
.doc h2 + .lede{margin-top:12px;font-size:var(--t-lede)}
.doc h3{font-size:20px;margin:42px 0 0;scroll-margin-top:88px;line-height:1.25}
.doc h4{font-family:var(--body);font-size:15.5px;font-weight:600;letter-spacing:0;margin:22px 0 0;color:var(--text)}
.doc p{color:var(--dim);line-height:1.72;margin-top:12px}
.doc p b,.doc li b:not(.ui){color:var(--text);font-weight:500}
.doc ul.plain{margin:12px 0 0;padding-inline-start:20px;color:var(--dim);display:grid;gap:7px;line-height:1.65}
.doc ul.plain li::marker{color:var(--line-3)}

/* Steps: short, numbered, one action each. */
ol.steps{list-style:none;counter-reset:step;margin:14px 0 0;padding:0;display:grid;gap:10px}
ol.steps > li{counter-increment:step;position:relative;padding-inline-start:38px;color:var(--dim);line-height:1.7;min-height:26px}
ol.steps > li::before{content:counter(step);position:absolute;inset-inline-start:0;top:1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);font:500 12px/24px var(--mono);text-align:center;color:var(--ice);font-variant-numeric:tabular-nums}

/* The screen's own words: a button, a field, a menu, exactly as the app writes them. */
.ui{font-weight:600;color:var(--text);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;white-space:nowrap}
/* A short label stays on one line; a long one (a sentence the screen says) may wrap. */
.ui.l{white-space:normal;box-decoration-break:slice;-webkit-box-decoration-break:slice}
kbd{font:500 12.5px var(--mono);color:var(--text);border:1px solid var(--line-3);border-bottom-width:2px;border-radius:5px;padding:0 5px;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
code{font-family:var(--mono);font-size:13.5px;color:var(--ice);overflow-wrap:anywhere;direction:ltr;unicode-bidi:isolate}

/* A tip: one line where it matters. A box, never a stripe down one side. */
.tip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px;margin-top:16px;font-size:14.5px;line-height:1.65;color:var(--dim)}
.doc p.tip{margin-top:16px}
.tip .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-inline-end:8px}

/* Two lists side by side: what keeps working, what waits. */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.pair > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px}
.pair h4{margin:0 0 8px}
.pair ul{margin:0;padding-inline-start:18px;color:var(--dim);display:grid;gap:6px;font-size:14.5px;line-height:1.6}
.pair ul li::marker{color:var(--line-3)}

/* The switches and the roles, as a table. */
.tbl{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-s);overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:start;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top;line-height:1.55}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--text)}
/* The switches: "On" and "Off" never break; on the Arabic page each switch's meaning sits under its
   label, so the Arabic has the width of the table on a phone, not a third of it. */
.tbl.sw td:last-child{white-space:nowrap}
.tbl .mean{display:block;margin-top:6px}

.help-foot{margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid var(--line)}
.help-foot h2{font-size:clamp(24px,2.6vw,30px)}
.help-foot .btns{margin-top:20px}

@media (max-width:980px){
  .guide{grid-template-columns:minmax(0,1fr);gap:22px}
  .toc{position:static;max-height:none;overflow:visible;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px}
  .toc summary{font-size:12.5px}
  .toc summary::after{content:"+";float:inline-end;color:var(--copper);font-size:16px;line-height:1}
  .toc[open] summary::after{content:"−"}
}
@media (max-width:640px){
  .roles li{grid-template-columns:minmax(0,1fr)}
  .roles .to{grid-column:1}
  .pair{grid-template-columns:minmax(0,1fr)}
  .doc h3{font-size:19px}
  ol.steps > li{padding-inline-start:36px}
}

/* ------------------------------------------------------------ Arabic page */
/* Arabic joins its letters: any tracking breaks the word, so every heading,
   label and button on the Arabic page sets letter spacing to none and keeps
   its case. IBM Plex Sans Arabic sits beside the site's IBM Plex Mono. */
html[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .label,html[lang="ar"] .btn,html[lang="ar"] .tip .k,html[lang="ar"] .toc summary,
html[lang="ar"] .tbl th,html[lang="ar"] .nav .cta,html[lang="ar"] .nav .lk{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;letter-spacing:0;text-transform:none}
html[lang="ar"] .label{font-size:13px}
html[lang="ar"] h1{line-height:1.3}
html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.4}
html[lang="ar"] .doc p,html[lang="ar"] ol.steps > li,html[lang="ar"] .tip{line-height:1.85}
html[lang="ar"] .roles .to a{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;font-size:13.5px}
html[lang="ar"] .toc a{font-size:14.5px}
html[lang="ar"] .toc ol ol a{font-size:13.5px}
/* The app's own words stay in English, as the screen shows them, set apart from the Arabic around them. */
html[lang="ar"] .ui{font-family:"Inter",system-ui,sans-serif;font-size:.94em}
/* Arabic words on the English page (the language link, the footer) in a face that has them, untracked. */
[lang="ar"]{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;letter-spacing:0}
.nav .lk[lang="ar"]{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;font-size:14px;letter-spacing:0}
/* The site's cursor is drawn from the left edge: it stays left to right on the Arabic page. */
html[dir="rtl"] #mdc{direction:ltr}
/* The wordmark is Latin, and keeps its own tracking. */
html[lang="ar"] .wordmark{font-family:var(--display);letter-spacing:.4em}
@media (max-width:640px){html[lang="ar"] .wordmark{letter-spacing:.3em}}