/* ============================================================================
   Modibbo Girei — base
   ----------------------------------------------------------------------------
   Reset, document defaults, typography rhythm, focus, and print. Element
   selectors only — no component classes. Loads after tokens.css.
   ============================================================================ */

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

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings carry their own rhythm; margins are collapsed to the top only so
   stacked content spaces predictably. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4, h5, h6 { font-size: var(--fs-base); }

p, ul, ol, dl, pre, blockquote, figure, table { margin: 0 0 var(--space-4); }
p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; }

/* Long prose stays readable; wide layouts do not stretch a paragraph to 200
   characters per line. */
p { max-width: var(--readable-max); }

a {
    color: var(--accent-text);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-semibold); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}
code {
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

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

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

/* Form controls do not inherit type by default — this is the fix that makes
   every input match the page instead of the browser. */
button, input, select, optgroup, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
textarea { resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { text-align: left; font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------------
   Focus
   Visible for keyboard users, invisible for mouse users — :focus-visible does
   exactly that. The old theme removed outlines outright, which left keyboard
   navigation with no indication of position at all.
   --------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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

/* ---------------------------------------------------------------------------
   Scrollbars — replaces the malihu jQuery plugin the old theme loaded on every
   page to achieve roughly this.
   --------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* ---------------------------------------------------------------------------
   Utilities that belong to the document rather than to any component.
   --------------------------------------------------------------------------- */

/* Visually hidden but announced by screen readers. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Keyboard users land here first; it stays hidden until focused. */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: var(--fw-medium);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--text-on-accent); }

/* Numbers that must line up in a column — money, counts, years. */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Reduced motion. Honoured globally rather than per-component, so a new
   animation cannot forget it.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Print. The portal's reports are printed regularly — that is what the
   [data-print] buttons are for — so this is a real output target, not an
   afterthought.
   --------------------------------------------------------------------------- */
@media print {
    :root { color-scheme: light; }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    /* Chrome: sidebar, topbar, drawers, toasts, and anything marked no-print. */
    .p-sidebar, .p-topbar, .c-drawer, .c-toast-stack,
    .skip-link, .no-print, [data-print] {
        display: none !important;
    }

    .p-content, .p-shell { margin: 0 !important; padding: 0 !important; display: block !important; }

    .c-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* A table split mid-row across a page break is unreadable. */
    table { break-inside: auto; }
    tr, img { break-inside: avoid; }
    thead { display: table-header-group; }

    h1, h2, h3 { break-after: avoid; }

    /* Print the destination of real links, but not of in-page anchors or the
       javascript: hrefs the legacy views still use. */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}