/* Document defaults, focus handling and the skip link. */

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

html,
body{min-height:100%;margin:0;overflow-x:clip}

body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--samai-ink);
  line-height:1.85;
  background:
    radial-gradient(1100px 560px at 92% -12%,#3fae9a12,transparent 60%),
    radial-gradient(900px 500px at -8% 34%,#73c2670f,transparent 55%),
    linear-gradient(180deg,#fbfdff 0%,var(--samai-page) 100%);
}

button,
input,
textarea,
select{font:inherit}

button,
a,
[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:var(--samai-tap-highlight);
}

/* The tap minimum. A control that draws smaller keeps the minimum as a hit
   area instead of overriding this — see `.s-dot` and `.s-button--sm`. */
button:not([hidden]),
[role="button"]{min-block-size:var(--samai-tap)}

a{color:var(--samai-primary)}

:focus-visible{
  outline:3px solid var(--samai-focus-ring);
  outline-offset:3px;
}

[hidden]{display:none!important}

/* An inline diagram or a raster stand-in for one is sized by its container,
   whichever it turns out to be. */
.samai-markup-diagram img,
.samai-markup-diagram svg{
  max-inline-size:100%;
  block-size:auto;
  display:block;
  margin-inline:auto;
}

.samai-skip-link{
  position:fixed;
  inset-block-start:var(--samai-space-2);
  inset-inline-start:var(--samai-space-2);
  z-index:1000;
  padding:var(--samai-space-2) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  color:var(--samai-primary);
  font-weight:var(--samai-weight-black);
  text-decoration:none;
  transform:translateY(-180%);
  box-shadow:var(--samai-shadow);
}

.samai-skip-link:focus{transform:none}