/* ==========================================================================
   MASAR — 2-base.css
   Reset, element defaults, typography, focus, scrollbars, utilities.
   No component lives here.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--ty-body);
  letter-spacing:var(--track-tight);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;               /* the shell scrolls its own panes */
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse;border-spacing:0;width:100%}
th{text-align:start;font-weight:550}
hr{border:0;border-top:1px solid var(--line);margin:0}
:where(h1){font:var(--ty-h1)}
:where(h2){font:var(--ty-h2)}
:where(h3){font:var(--ty-h3)}
b,strong{font-weight:650}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}

/* Every number in this product is compared against another number in the
   row above it, so figures are tabular everywhere, by default. */
body{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- focus */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.m-btn:focus-visible,.m-icon-btn:focus-visible,.m-chip:focus-visible,
.m-seg button:focus-visible,.m-nav-item:focus-visible,.m-tab:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}
.m-skip{
  position:absolute;inset-inline-start:-9999px;top:8px;z-index:var(--z-toast);
  background:var(--surface);color:var(--text);padding:10px 16px;
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);
}
.m-skip:focus{inset-inline-start:8px}

/* ---------------------------------------------------------------- selection */
::selection{background:var(--accent-soft);color:var(--text)}

/* ---------------------------------------------------------------- scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--c-n-300) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--c-n-300);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--c-n-400);background-clip:content-box}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--line-strong);background-clip:content-box}

/* ---------------------------------------------------------------- arabic */
html[dir="rtl"] body{font-family:var(--font-ar);letter-spacing:0}
html[dir="rtl"] :where(h1,h2,h3,.m-metric,.m-kpi-v){letter-spacing:0}
/* Identifiers, plates, coordinates, weights and times stay LTR inside RTL
   text — bidi reordering would put a minus sign or a colon on the wrong end. */
.m-id,.m-num,.m-mono,.m-time,.m-coord,.m-plate,.m-ref{
  font-family:var(--font-mono);
  direction:ltr;unicode-bidi:isolate;
}
.m-bidi{unicode-bidi:plaintext}

/* ---------------------------------------------------------------- utilities
   Deliberately few. A utility that starts describing a component is a
   component that has not been written yet.                                */
.m-grow{flex:1 1 auto;min-width:0}
.m-push{margin-inline-start:auto}
.m-row{display:flex;align-items:center;gap:var(--s-2)}
.m-row-3{display:flex;align-items:center;gap:var(--s-3)}
.m-col{display:flex;flex-direction:column;gap:var(--s-3)}
.m-wrap{flex-wrap:wrap}
.m-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* HIDDEN MEANS HIDDEN.
   Every component here sets its own display — a card is a flex column, a
   grid is a grid — and each of those beats the browser's own [hidden] rule,
   so a page that hid a block with el.hidden = true watched it stay on the
   screen. One line, once, for the whole product. */
[hidden]{display:none !important}
.m-scroll{overflow:auto;overscroll-behavior:contain}
.m-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.m-hide{display:none !important}

.m-dim{color:var(--text-2)}
.m-faint{color:var(--text-3)}
.m-cap{font:var(--ty-caption);color:var(--text-2)}
.m-label{font:var(--ty-label);color:var(--text-2)}
.m-label-up{font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:var(--track-wide)}

.t-ok{color:var(--ok)} .t-warn{color:var(--warn)} .t-crit{color:var(--critical)}
.t-info{color:var(--info)} .t-live{color:var(--live)} .t-chain{color:var(--chain)}
.t-neutral{color:var(--neutral)}

/* ---------------------------------------------------------------- motion */
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-slide-end{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes m-pulse-once{0%{box-shadow:0 0 0 0 var(--crit-line)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes m-breathe{0%,100%{opacity:1}50%{opacity:.38}}
@keyframes m-shimmer{from{background-position:-320px 0}to{background-position:320px 0}}
@keyframes m-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------- print */
@media print{
  :root{--bg:#fff;--surface:#fff}
  body{overflow:visible;background:#fff;color:#000}
  .m-nav,.m-top,.m-filterbar,.m-drawer,.m-toasts,.m-fab,.m-map-hud,
  .m-pager,.no-print{display:none !important}
  .m-shell{display:block !important;height:auto !important}
  .m-main{overflow:visible !important;position:static !important}
  .m-card{box-shadow:none !important;border:1px solid #ccc !important;break-inside:avoid}
  .m-table thead{display:table-header-group}
}