/* Box-sizing reset, body and base element styles.
   Loaded on every page. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    font-optical-sizing: auto;
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Form controls take the page's font instead of the browser's default. */
button,
input,
select,
textarea {
    font-family: inherit;
}

code,
kbd,
pre {
    font-family: var(--font-mono);
}

svg text {
    font-family: inherit;
}

::selection {
    background: var(--primary-soft-2);
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── reading comfort, for everyone, in any language ───────────────────────── */

/* Headings that wrap break into even lines instead of leaving a lone word. */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* Figures — hours, points, dates, counts — line up down a column. */
table,
.key,
.pts,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* A long unbroken word, address or name wraps inside its box instead of pushing the layout wide. */
p,
li,
dd,
.muted,
.isum {
    overflow-wrap: break-word;
}

/* Text a person typed keeps its own direction — a name or a note in Arabic or Hebrew reads right to left
   inside a left-to-right page. */
[dir="auto"],
.isum,
.ws-task__title,
.ws-details {
    unicode-bidi: plaintext;
}

/* A phone zooms into any field smaller than 16px; keep the page where it is. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}