/*
 * Xantipa base styles: replaces Milligram with the same class names (.row, .column, .button,
 * .button-outline, .button-clear, .container, .float-right …) built on the colour tokens below.
 * html keeps 62.5 % so 1rem is 10px, as the rest of the stylesheets expect.
 */
:root {
    color-scheme: light;
    --bg: #eef2f8;
    --surface: #ffffff;
    --surface-soft: #f2f6fc;
    --surface-sunken: #e9eef6;
    --input-bg: #ffffff;
    --text: #0b1b31;
    --muted: #4a5a70;
    --faint: #7a8799;
    --primary: #0f5db8;
    --primary-strong: #0b4a93;
    --on-primary: #ffffff;
    --success: #1b8f45;
    --danger: #c73232;
    --warning: #c78316;
    --border: #bccce0;
    --line: #dde5ef;
    --brand-soft: #e8f0fc;
    --brand-text: #0b4a93;
    --brand-line: #a9c7ec;
    --ok-soft: #e7f5ec;
    --lime: #4d7c0f;
    --lime-soft: #ecfccb;
    --ok-text: #17613b;
    --ok-line: #9fd0ab;
    --warn-soft: #fff3dc;
    --warn-text: #7a4a06;
    --warn-line: #e3c27a;
    --bad-soft: #fdecec;
    --bad-text: #9b2c2c;
    --bad-line: #e7b4b4;
    --copper: #b9561f;
    --copper-soft: #fbeee5;
    --shadow-sm: 0 1px 2px rgba(13, 28, 54, 0.06), 0 4px 14px rgba(13, 28, 54, 0.06);
    --shadow-md: 0 14px 34px rgba(13, 28, 54, 0.14);
    --radius: 12px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Noto Sans", sans-serif;
    --sidebar-width: 248px;
    --layout-max-width: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0c121b;
        --surface: #141c28;
        --surface-soft: #1a2432;
        --surface-sunken: #101722;
        --input-bg: #0f1621;
        --text: #e6ecf5;
        --muted: #a3b0c2;
        --faint: #7d8a9c;
        --primary: #3b82f6;
        --primary-strong: #5b97f8;
        --on-primary: #ffffff;
        --success: #4cc182;
        --danger: #f07a70;
        --warning: #e0a14a;
        --border: #34445a;
        --line: #243041;
        --brand-soft: #172a46;
        --brand-text: #9cc2ff;
        --brand-line: #2f4f7d;
        --ok-soft: #12301f;
        --lime: #a3e635;
        --lime-soft: #23300d;
        --ok-text: #7ed6a0;
        --ok-line: #2c6343;
        --warn-soft: #33270f;
        --warn-text: #f0c27a;
        --warn-line: #6b5223;
        --bad-soft: #3a1c1b;
        --bad-text: #f4a29a;
        --bad-line: #74352f;
        --copper: #e78c55;
        --copper-soft: #3a2418;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c121b;
    --surface: #141c28;
    --surface-soft: #1a2432;
    --surface-sunken: #101722;
    --input-bg: #0f1621;
    --text: #e6ecf5;
    --muted: #a3b0c2;
    --faint: #7d8a9c;
    --primary: #3b82f6;
    --primary-strong: #5b97f8;
    --on-primary: #ffffff;
    --success: #4cc182;
    --danger: #f07a70;
    --warning: #e0a14a;
    --border: #34445a;
    --line: #243041;
    --brand-soft: #172a46;
    --brand-text: #9cc2ff;
    --brand-line: #2f4f7d;
    --ok-soft: #12301f;
    --lime: #a3e635;
    --lime-soft: #23300d;
    --ok-text: #7ed6a0;
    --ok-line: #2c6343;
    --warn-soft: #33270f;
    --warn-text: #f0c27a;
    --warn-line: #6b5223;
    --bad-soft: #3a1c1b;
    --bad-text: #f4a29a;
    --bad-line: #74352f;
    --copper: #e78c55;
    --copper-soft: #3a2418;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
}

*, *::after, *::before { box-sizing: inherit; }
html { box-sizing: border-box; font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
}

a { color: var(--primary); text-decoration: none; }
a:hover, a:focus { color: var(--primary-strong); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

b, strong { font-weight: 700; }
p { margin-top: 0; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.6rem; margin-top: 0; text-wrap: balance; }
h1 { font-size: 3rem; line-height: 1.2; }
h2 { font-size: 2.5rem; line-height: 1.25; }
h3 { font-size: 2.1rem; line-height: 1.3; }
h4 { font-size: 1.8rem; line-height: 1.35; }
h5 { font-size: 1.6rem; line-height: 1.4; }
h6 { font-size: 1.5rem; line-height: 1.4; }

blockquote { border-left: 0.3rem solid var(--border); margin-left: 0; margin-right: 0; padding: 1rem 1.5rem; }
blockquote *:last-child { margin-bottom: 0; }
code { background: var(--surface-soft); border-radius: 0.4rem; font-size: 86%; margin: 0 0.2rem; padding: 0.2rem 0.5rem; white-space: nowrap; }
pre { background: var(--surface-soft); border-left: 0.3rem solid var(--primary); overflow-y: hidden; }
pre > code { border-radius: 0; display: block; padding: 1rem 1.5rem; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* Buttons: one primary per screen; outline is secondary, clear is quiet. */
.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
    align-items: center;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--on-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    gap: 0.6rem;
    height: 3.6rem;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 1.6rem;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.button:hover, .button:focus, button:hover, button:focus,
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    color: var(--on-primary);
    outline: 0;
}
.button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.button[disabled], button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] {
    cursor: default;
    opacity: 0.5;
}
.button.button-outline, button.button-outline, input[type="button"].button-outline, input[type="submit"].button-outline {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.button.button-outline:hover, .button.button-outline:focus, button.button-outline:hover, button.button-outline:focus {
    background: var(--surface-soft);
    border-color: var(--primary);
    color: var(--text);
}
.button.button-clear, button.button-clear, input[type="button"].button-clear, input[type="submit"].button-clear {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}
.button.button-clear:hover, .button.button-clear:focus, button.button-clear:hover, button.button-clear:focus {
    background: var(--surface-soft);
    border-color: transparent;
    color: var(--text);
}

/* Forms */
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"],
input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"],
input[type="text"], input[type="url"], input[type="week"], input:not([type]), textarea, select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    box-sizing: inherit;
    color: var(--text);
    font-family: inherit;
    font-size: 1.5rem;
    height: 3.8rem;
    padding: 0.6rem 1rem;
    width: 100%;
}
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus,
input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input:not([type]):focus, textarea:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: 0;
}
select {
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 1.6rem) 55%, calc(100% - 1.1rem) 55%;
    background-repeat: no-repeat;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
    padding-right: 3rem;
}
select[multiple] { background-image: none; height: auto; }
textarea { min-height: 6.5rem; }
input::placeholder, textarea::placeholder { color: var(--faint); }
label, legend { color: var(--muted); display: block; font-size: 1.3rem; font-weight: 600; margin-bottom: 0.4rem; }
fieldset { border-width: 0; padding: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); display: inline; }
.label-inline { display: inline-block; font-weight: normal; margin-left: 0.5rem; }

/* Grid */
.container { margin: 0 auto; max-width: 112rem; padding: 0 2rem; position: relative; width: 100%; }
.row { display: flex; flex-direction: column; padding: 0; width: 100%; }
.row.row-no-padding { padding: 0; }
.row.row-no-padding > .column { padding: 0; }
.row.row-wrap { flex-wrap: wrap; }
.row.row-top { align-items: flex-start; }
.row.row-bottom { align-items: flex-end; }
.row.row-center { align-items: center; }
.row.row-stretch { align-items: stretch; }
.row.row-baseline { align-items: baseline; }
.row .column { display: block; flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; }
.row .column.column-offset-10 { margin-left: 10%; }
.row .column.column-offset-20 { margin-left: 20%; }
.row .column.column-offset-25 { margin-left: 25%; }
.row .column.column-offset-33, .row .column.column-offset-34 { margin-left: 33.3333%; }
.row .column.column-offset-40 { margin-left: 40%; }
.row .column.column-offset-50 { margin-left: 50%; }
.row .column.column-offset-60 { margin-left: 60%; }
.row .column.column-offset-66, .row .column.column-offset-67 { margin-left: 66.6666%; }
.row .column.column-offset-75 { margin-left: 75%; }
.row .column.column-offset-80 { margin-left: 80%; }
.row .column.column-offset-90 { margin-left: 90%; }
.row .column.column-10 { flex: 0 0 10%; max-width: 10%; }
.row .column.column-20 { flex: 0 0 20%; max-width: 20%; }
.row .column.column-25 { flex: 0 0 25%; max-width: 25%; }
.row .column.column-33, .row .column.column-34 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.row .column.column-40 { flex: 0 0 40%; max-width: 40%; }
.row .column.column-50 { flex: 0 0 50%; max-width: 50%; }
.row .column.column-60 { flex: 0 0 60%; max-width: 60%; }
.row .column.column-66, .row .column.column-67 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.row .column.column-75 { flex: 0 0 75%; max-width: 75%; }
.row .column.column-80 { flex: 0 0 80%; max-width: 80%; }
.row .column.column-90 { flex: 0 0 90%; max-width: 90%; }
.row .column .column-top { align-self: flex-start; }
.row .column .column-bottom { align-self: flex-end; }
.row .column .column-center { align-self: center; }
@media (min-width: 40rem) {
    .row { flex-direction: row; margin-left: -1rem; width: calc(100% + 2rem); }
    .row .column { margin-bottom: inherit; padding: 0 1rem; }
}

/* Lists, spacing */
dl, ol, ul { list-style: none; margin-top: 0; padding-left: 0; }
dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul { font-size: 90%; margin: 1.5rem 0 1.5rem 3rem; }
ol { list-style: decimal inside; }
ul { list-style: circle inside; }
.button, button, dd, dt, li { margin-bottom: 1rem; }
fieldset, input, select, textarea { margin-bottom: 1.5rem; }
blockquote, dl, figure, form, ol, p, pre, table, ul { margin-bottom: 2.5rem; }

/* Tables */
table { border-spacing: 0; overflow-x: auto; text-align: left; width: 100%; }
td, th { border-bottom: 1px solid var(--line); padding: 1rem 1.2rem; }
td:first-child, th:first-child { padding-left: 0.6rem; }
td:last-child, th:last-child { padding-right: 0.6rem; }
td { font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { table { display: table; overflow-x: initial; } }

.clearfix::after { clear: both; content: " "; display: table; }
.float-left { float: left; }
.float-right { float: right; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}