/* Kin OS — element defaults.
 *
 * Deliberately small. Kin OS uses no CSS framework: an operational platform of this shape
 * needs about two hundred lines of reset and element styling, and owning them outright is
 * cheaper than owning someone else's opinions plus a build step to strip them.
 */

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

html {
    -webkit-text-size-adjust: 100%;
    background: var(--paper-2);
}

body {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-family: system-ui, "Segoe UI", sans-serif;
    color: #16202c;
    background: var(--paper-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Every branded region carries its own typeface and ink. Because this is scoped to
   [data-workspace], the typeface can never be inherited from another brand's region — there
   is only ever one on a page. */
[data-workspace] {
    font-family: var(--brand-font);
    color: var(--brand-ink);
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: var(--leading-tight);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.014em;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-md); }
h3 { font-size: var(--text-base); }
h4 { font-size: var(--text-sm); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-3); padding-left: 1.15rem; }

/* Links carry the brand in the underline rather than in the text colour — no brand publishes
   a link colour, and this avoids inventing four. The underline uses the accent where the
   accent is legible against light grounds and would otherwise be the contrast-safe accent
   ink, which for every workspace is guaranteed readable. */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--brand-accent-ink, currentColor);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    border-radius: 2px;
}

a:hover { text-decoration-thickness: 2.5px; }

a.kin-plain { text-decoration: none; }
a.kin-plain:hover { text-decoration: none; }

/* One focus treatment everywhere, always visible, never removed. The ring's colour follows
   the ground it sits on: the accent-ink mix on light surfaces, the rail's accent on the dark
   rail, and the deep ink on the entry gradient — a single dark ring would vanish exactly
   where keyboard users need it most. */
:focus-visible {
    outline: 2px solid var(--brand-focus, #1f5f8b);
    outline-offset: 2px;
}

.kin-rail :focus-visible {
    outline-color: var(--brand-rail-accent);
}

/* FocusOnNavigate moves programmatic focus to the page heading after every navigation, purely
   to reset the reading position. A heading is not operable, so it gets no ring — without this,
   every page arrives with a box drawn around its own title. */
h1:focus-visible, h1:focus {
    outline: none;
}

/* A dialog's title takes focus only when the dialog has no field to put the reader on (a
   confirmation, P40-108): a place to be, not a control, for the same reason as the h1. */
.kin-dialog-title:focus, .kin-dialog-title:focus-visible {
    outline: none;
}

/* THE SAME MOVE, FOR THE TWO OTHER THINGS A READER HAS TO BE BROUGHT TO (P19-102).
 *
 * A refusal panel rendered at the top of a page whose Save is 650 lines below it, and a detail
 * card revealed after 97 further rows of table, are both invisible answers to a visible action.
 * KinAttention moves focus to them, which scrolls, moves the keyboard and announces in one act.
 *
 * Neither is operable, so neither gets a ring — exactly the reason the h1 above has none. The
 * ring would say "you may type here", and the reader would be looking for a control that does
 * not exist. Everything inside them is focusable in the ordinary way and keeps its own ring;
 * tabindex="-1" keeps the containers themselves out of the tab order entirely. */
.kin-attention:focus, .kin-attention:focus-visible {
    outline: none;
}

.kin-login :focus-visible,
.kin-doors :focus-visible {
    outline-color: var(--brand-deep-ink);
}

/* The entry panel itself is light again. */
.kin-login-panel :focus-visible {
    outline-color: var(--brand-focus);
}

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

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

img, svg { max-width: 100%; }

hr {
    border: 0;
    border-top: 1px solid var(--brand-line);
    margin: var(--space-5) 0;
}

/* Monospace is where Kin OS puts the values that have no spaces in them: correlation ids, dotted
   .NET categories, file paths, stack frames. Those are exactly the values that push a layout
   wider than its container, so the wrap is part of the utility rather than something each screen
   remembers to add. The same size as the text around it (--mono-match, QCR-20261104-01.03). */
code, .kin-mono { font-family: var(--mono); font-size: var(--mono-match); overflow-wrap: anywhere; }

/* Screen-reader-only text — used for accessible names on icon-only controls, and for the
   textual half of every status so meaning never depends on colour. */
.kin-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip link — the first thing in the shell, so keyboard users are not walked through the
   whole navigation on every page. */
.kin-skip {
    position: absolute;
    left: var(--space-3);
    top: -3rem;
    z-index: 100;
    background: var(--brand-surface);
    color: var(--brand-ink);
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    transition: top var(--motion) var(--ease);
}

.kin-skip:focus { top: var(--space-3); }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-5);
    background: var(--state-note-bg);
    color: var(--state-note-ink);
    border-top: 1px solid var(--state-note-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    border: 0;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.3rem;
    color: inherit;
}

#blazor-error-ui .reload { color: inherit; }