/* M.can base: tokens, primitives, forms. Direction-neutral: logical properties only;
   anything that must mirror uses [dir] selectors. */
/* The hidden attribute always wins over component display rules. */
[hidden]{display:none !important}

:root{
  /* Colours live in theme.css (loaded first). */
  --cut:14px;
  --cut-sm:8px;
  --hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Type and spacing scale (task D2, decisions 18.114): the one place these sizes are set. The cashier screen sets its own (pos.css); printed documents do not use them. */
  --fs-base:14px;          /* body text */
  --fs-table:13px;         /* tables and lists */
  --fs-secondary:12px;     /* secondary text: the minimum */
  --fs-control:14px;       /* buttons and fields */
  --fs-figure:21px;        /* the big number on a card */
  --fs-h1:20px;
  --fs-h2:16px;
  --fs-greeting:18px;      /* the greeting and page title on a photo */
  --sp-card-y:11px;        /* inside a card or a toolbar */
  --sp-card-x:14px;
  --sp-cell-y:8px;         /* inside a table cell */
  --sp-cell-x:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{flex:none}
.num{font-variant-numeric:tabular-nums}
/* Task G3 part 8 (decisions 18.139): a figure outside a table cell (a tile, a definition, a figure in a line) is isolated and laid out left to right, as the numeric
   table cells are (N1), so its minus sign, separators and currency symbol never flip inside Arabic text; match-parent keeps the block's own alignment (start of the
   page's direction). Table cells keep their column rules (col-num) and are left out here. */
:not(td,th).num{direction:ltr;unicode-bidi:isolate;text-align:match-parent}
.ltr{direction:ltr;unicode-bidi:isolate}
/* LTR content (dates, codes) inside RTL pages keeps the page's start alignment */
[dir="rtl"] .ltr:not(.end):not(input){text-align:right}
.mono{font-family:var(--mono)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Icons drawn for RTL that must point the other way in LTR */
[dir="ltr"] .dir-icon{transform:scaleX(-1)}
/* "Back" uses the forward icon mirrored, in both directions */
[dir="rtl"] .dir-icon.flip-back{transform:scaleX(-1)}
[dir="ltr"] .dir-icon.flip-back{transform:none}

/* ---- Signature cut corners ---- */
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cut-sm{clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))}
.hex{clip-path:var(--hex)}

/* ---- Tags ---- */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-secondary);font-weight:600;line-height:1;padding-block:5px;padding-inline:12px 9px;white-space:nowrap;clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}
.tag svg{width:11px;height:11px}
.tag-critical{background:var(--critical-50);color:var(--critical)}
.tag-warn{background:var(--orange-50);color:var(--orange-700)}
.tag-neutral{background:var(--navy-50);color:var(--ink-2)}
.tag-info{background:var(--navy-50);color:var(--mc-link)}
.tag-ok{background:var(--ok-50);color:var(--ok)}
.kbd{font-family:var(--mono);font-size:var(--fs-secondary);line-height:1.4;padding:0 6px;border:1px solid currentColor;opacity:.75;direction:ltr;unicode-bidi:isolate}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding-inline:22px;font-weight:600;font-size:var(--fs-control);transition:background .12s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--navy);color:var(--mc-on-dark)}
.btn-primary:hover{background:var(--navy-hover)}
.btn-accent{background:var(--orange-soft);color:var(--orange-ink);box-shadow:inset 0 0 0 1px var(--orange-line)}
.btn-accent:hover{background:var(--orange-soft-hover)}
.btn-ghost{background:var(--navy-50);color:var(--navy)}
.btn-ghost:hover{background:var(--navy-100)}
.btn-block{width:100%}

/* ---- Forms ---- */
.form{display:flex;flex-direction:column;gap:18px}
.field label,.field .label{display:block;font-size:var(--fs-table);font-weight:500;color:var(--ink-2);margin-bottom:6px}
.hint{font-size:var(--fs-secondary);color:var(--ink-3);margin-top:5px}
.field .req{color:var(--critical);margin-inline-start:3px}
.input{
  display:flex;align-items:stretch;min-height:46px;
  background:var(--navy-50);border:1px solid var(--line);
  transition:border-color .12s,background .12s,box-shadow .12s;
}
.input:focus-within{background:var(--surface);border-color:var(--link);box-shadow:0 0 0 3px var(--focus-ring)}
.input .ii{width:46px;flex:none;display:grid;place-items:center;color:var(--ink-3);border-inline-end:1px solid var(--line)}
.input:focus-within .ii{color:var(--navy)}
.input .ii svg{width:18px;height:18px}
.input input,.input select{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-control);padding-inline:14px;color:var(--ink)}
.input select{cursor:pointer}
/* Latin-only fields (email, codes) keep LTR text but sit on the page's start side */
.input input.ltr{direction:ltr}
[dir="rtl"] .input input.ltr{text-align:right}
.input.has-error{border-color:var(--critical);background:var(--surface)}
.field-error{display:block;color:var(--critical);font-size:var(--fs-secondary);margin-top:5px}
.field-error:empty{display:none}
.form-alert{background:var(--critical-50);color:var(--critical);font-size:var(--fs-table);padding:10px 14px;border-inline-start:3px solid var(--critical)}
.form-alert ul{list-style:none}
.form-alert:empty,.validation-summary-valid{display:none}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer;font-size:var(--fs-table)}
.check input{width:16px;height:16px;accent-color:var(--navy)}

.notice{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:var(--fs-table)}
.notice svg{width:18px;height:18px}
.notice-ok{background:var(--ok-50);color:var(--ok)}
.notice-info{background:var(--navy-50);color:var(--navy)}
.notice-warn{background:var(--orange-50);color:var(--orange-700)}
.notice-critical{background:var(--critical-50);color:var(--critical);border-inline-start:3px solid var(--critical)}
.notice .lines{display:flex;flex-direction:column;gap:3px}
.notice .lines a{color:inherit;text-decoration:underline}
.validation-summary-valid{display:none}
.input.is-readonly{background:var(--paper)}.input.is-readonly input{color:var(--ink-2)}
.btn-danger{background:var(--critical-50);color:var(--critical);box-shadow:inset 0 0 0 1px var(--critical-line)}.btn-danger:hover{background:var(--critical-hover)}

/* Numeric table column (task N1, decisions 18.77): the header cell and every figure cell of a numeric column carry the SAME class, so the figure sits under its
   header: right in Arabic (RTL), left in English (LTR). Physical sides on purpose: a figure cell is direction:ltr (digits keep their order), where "start" would
   always mean left. The selector is deliberately specific so table rules such as ".list thead th" or ".stmt td" cannot move one side of the column. */
html[dir] table th.col-num,html[dir] table td.col-num{text-align:left;font-variant-numeric:tabular-nums}
html[dir="rtl"] table th.col-num,html[dir="rtl"] table td.col-num{text-align:right}
html[dir] table td.col-num{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* Task G3 parts 5 and 6 (decisions 18.136, 18.137): a message that says why an action is not available, placed beside the action's place, in body ink (contrast
   at least 4.5:1 in both themes) with its icon at text size. */
.action-blocked{display:flex;align-items:flex-start;gap:8px;margin:8px 0;padding:8px 12px;font-size:var(--fs-table);color:var(--ink);background:var(--navy-50);border-inline-start:3px solid var(--orange-700)}
.action-blocked svg{inline-size:18px;block-size:18px;flex:none;margin-top:2px}
/* Task G4 (decisions 18.140): the balance refusal beside a payment's submit button, a title and the message with the available balance and the fix. */
.balance-refused p{margin:2px 0 0}

/* Task G3 part 6 (decisions 18.137): the shift page showed the «users» icon of the approval refusal as two huge grey arcs. Every icon of UI/Icons is an svg with
   only a viewBox, so where no rule sizes it, it stretched to its box's width. A zero-specificity default gives every such icon the size of the text around it; any
   component rule (.btn svg, .notice svg…) still wins. Charts and avatars carry their own classes and sizes. */
:where(svg[viewBox="0 0 24 24"][aria-hidden="true"]){inline-size:1.15em;block-size:1.15em;vertical-align:-.2em}
.hint svg{inline-size:16px;block-size:16px;vertical-align:-3px;margin-inline-end:4px}
.self-approved{margin-inline-start:6px}