/* ==========================================================================
   Diplomax HRMS - base reset and element defaults
   Normalises browser defaults and sets the typographic baseline. Relies on
   the tokens defined in base/tokens.css.
   ========================================================================== */

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { font-size: var(--text-base); }

p, ul, ol, dl, figure, blockquote, pre, table {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button {
    cursor: var(--cursor-hand, pointer);
    background: none;
    border: 0;
    padding: 0;
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    padding: 0.1em 0.4em;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: start;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

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

/* Accessibility helpers */
[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: var(--space-4);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-4);
}

/* Utility text */
.text-muted {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- the UMS chip, when we know where that system is ----------------------

   Beside the <code> chip above, and in this file rather than a page one,
   because the dashboard and both Organization screens all draw it and a
   page stylesheet would have styled it on exactly one of them.

   The chip names a university's own system. Where the record carries its
   address the chip becomes the way to it, and says so with the little
   corner arrow that every interface uses for "this leaves here". */

.ums-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

/* The chips share a width so the arrows stand in a column instead of
   following each code's own length - UMS_IU is a character shorter than the
   other two and its arrow sat seven pixels to their left. The unit is ch,
   which is exact here because the chip is set in a monospace face: seven
   characters is the longest UMS code in use. A longer one still fits, it
   just takes its arrow with it, which is the honest way for this to give. */
.ums-link code {
    display: inline-block;
    /* content-box so the seven characters mean seven characters: this
       document is border-box throughout, which would have folded the chip's
       padding into the minimum and left it never reached. */
    box-sizing: content-box;
    min-width: 7ch;
    text-align: center;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ums-link:hover code {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.ums-link:focus-visible { outline: none; }
.ums-link:focus-visible code { box-shadow: var(--focus-ring); }

.ums-link__away {
    width: 12px;
    height: 12px;
    background: var(--color-text-faint);
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 11 13'/><path d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 11 13'/><path d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.ums-link:hover .ums-link__away { background: var(--color-accent); }