/*
 * VRX Contract App — application stylesheet.
 *
 * This file is written by hand rather than generated by Tailwind's build
 * pipeline so the project keeps zero Node.js dependency (required on o2switch).
 * It mirrors the Tailwind utility classes actually used in the views.
 * When adding new class names in templates, add the matching rule here.
 */

/* --------------------------------------------------------------------- */
/* Fonts — system stack that covers Latin + Japanese on every platform   */
/* without a 9 MB self-hosted download.                                  */
/*   - Inter-like: Apple / modern Win / Linux                            */
/*   - Japanese: "Hiragino Sans" (macOS), "Yu Gothic" / "Meiryo" (Win),  */
/*     "Noto Sans CJK JP" (Linux distros that ship it)                   */
/* The PDF uses the bundled Noto Sans JP TTF in vrx-private/fonts/ for   */
/* consistent rendering; the browser UI relies on what the OS provides.  */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Tiny reset — without this, .w-full inputs with padding+border overflow */
/* because the default box-sizing is content-box. Also normalises button  */
/* and form element defaults so utility classes behave consistently.      */
/* --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
button { cursor: pointer; background: transparent; border: 0; padding: 0; }
input, textarea, select { max-width: 100%; }
img { max-width: 100%; height: auto; }
/* Inherit body colour by default — utility classes (text-rose-700,
   text-white, …) still override when an anchor needs a distinct colour.
   Without this, browsers fall back to their blue/violet defaults, which
   look especially wrong in dark mode. */
a { color: inherit; text-decoration: none; }
/* Strip the default list padding / bullets — templates never rely on
   them (every list item is styled through utility classes). Without
   this, sidebar history entries sit 40 px inset with a disc bullet,
   breaking alignment with sibling blocks. */
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

/* --------------------------------------------------------------------- */
/* Design tokens                                                         */
/* --------------------------------------------------------------------- */
:root {
    color-scheme: light dark;
    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    --rose-50:  #fff1f2;  --rose-200: #fecdd3;  --rose-300: #fda4af;  --rose-800: #9f1239;  --rose-900: #881337;  --rose-950: #4c0519;
    --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-300: #6ee7b7; --emerald-700: #047857; --emerald-800: #065f46; --emerald-900: #064e3b; --emerald-950: #022c22;
    --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-800: #92400e; --amber-900: #78350f; --amber-950: #451a03;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans',
                 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', Roboto, sans-serif;
    font-feature-settings: 'cv11';
    font-size: 15px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------- */
/* Utility-class layer                                                   */
/* --------------------------------------------------------------------- */

/* Layout */
.min-h-screen { min-height: 100vh; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-6xl { max-width: 72rem; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.grid.md\:grid-cols-2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid.md\:grid-cols-2 { grid-template-columns: 1fr 1fr; } }

/* Spacing */
.p-1 { padding: .25rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }

/* Typography */
.text-xs  { font-size: .75rem; }
.text-sm  { font-size: .875rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-5xl { font-size: 3rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.tracking-wide { letter-spacing: .025em; }
.text-center { text-align: center; }
.underline { text-decoration: underline; }
.hover\:underline:hover { text-decoration: underline; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cursor-pointer { cursor: pointer; }

/* Colors (light) */
.bg-neutral-50   { background-color: var(--neutral-50); }
.bg-white        { background-color: #fff; }
.bg-neutral-100  { background-color: var(--neutral-100); }
.bg-neutral-900  { background-color: var(--neutral-900); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-900 { color: var(--neutral-900); }
.text-white       { color: #fff; }
.bg-rose-50    { background-color: var(--rose-50); }
.text-rose-800 { color: var(--rose-800); }
.border-rose-300 { border-color: var(--rose-300); }
.bg-emerald-100   { background-color: var(--emerald-100); }
.text-emerald-700 { color: var(--emerald-700); }
.bg-amber-50    { background-color: var(--amber-50); }
.text-amber-800 { color: var(--amber-800); }
.bg-amber-100   { background-color: var(--amber-100); }
.border-amber-300 { border-color: var(--amber-300); }
.border-emerald-300 { border-color: var(--emerald-300); }
.bg-emerald-50 { background-color: var(--emerald-50); }
.text-emerald-800 { color: var(--emerald-800); }

/* Borders & radius */
.border     { border-width: 1px; border-style: solid; border-color: var(--neutral-200); }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--neutral-200); }
.border-neutral-200 { border-color: var(--neutral-200); }
.border-neutral-300 { border-color: var(--neutral-300); }
.rounded    { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }

/* Sizing */
.h-8  { height: 2rem; }   .w-8  { width: 2rem; }
.h-12 { height: 3rem; }   .w-12 { width: 3rem; }
.h-14 { height: 3.5rem; } .w-14 { width: 3.5rem; }
.w-full { width: 100%; }

/* Forms — base reset lives at the top of the file; utility classes on each
   input/button supply their own padding, border, and radius. */
form button[type="submit"], button.primary { cursor: pointer; }

/* Transitions & focus ring */
.transition { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.hover\:bg-neutral-800:hover { background-color: var(--neutral-800); }
.hover\:bg-neutral-100:hover { background-color: var(--neutral-100); }
.hover\:bg-neutral-700:hover { background-color: var(--neutral-700); }
.focus\:border-neutral-500:focus { border-color: var(--neutral-500); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--neutral-500); }
.focus\:ring-neutral-500:focus { box-shadow: 0 0 0 1px var(--neutral-500); }
.outline-none:focus { outline: none; }

/* Details/summary */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: .5rem;
    transition: transform .15s ease;
    color: var(--neutral-500);
}
details[open] > summary::before { transform: rotate(90deg); }

/* --------------------------------------------------------------------- */
/* Dark mode overrides                                                   */
/* --------------------------------------------------------------------- */
html.dark body { background-color: var(--neutral-950); color: var(--neutral-100); }
html.dark .dark\:bg-neutral-900 { background-color: var(--neutral-900); }
html.dark .dark\:bg-neutral-950 { background-color: var(--neutral-950); }
html.dark .dark\:bg-neutral-950\/30 { background-color: rgb(10 10 10 / .3); }
html.dark .dark\:bg-white      { background-color: #fff; }
html.dark .dark\:text-neutral-100 { color: var(--neutral-100); }
html.dark .dark\:text-neutral-300 { color: var(--neutral-300); }
html.dark .dark\:text-neutral-400 { color: var(--neutral-400); }
html.dark .dark\:text-neutral-500 { color: var(--neutral-500); }
html.dark .dark\:text-white        { color: #fff; }
html.dark .dark\:text-neutral-900 { color: var(--neutral-900); }
html.dark .dark\:border-neutral-700 { border-color: var(--neutral-700); }
html.dark .dark\:border-neutral-800 { border-color: var(--neutral-800); }
html.dark .dark\:border-rose-900    { border-color: var(--rose-900); }
html.dark .dark\:bg-rose-950\/30    { background-color: rgb(76 5 25 / .3); }
html.dark .dark\:text-rose-200      { color: #fecdd3; }
html.dark .dark\:border-amber-900    { border-color: var(--amber-900); }
html.dark .dark\:bg-amber-950\/30    { background-color: rgb(69 26 3 / .3); }
html.dark .dark\:text-amber-100      { color: #fef3c7; }
html.dark .dark\:text-amber-200      { color: #fde68a; }
html.dark .dark\:bg-amber-900\/40    { background-color: rgb(120 53 15 / .4); }
html.dark .dark\:border-emerald-900  { border-color: var(--emerald-900); }
html.dark .dark\:bg-emerald-950\/30  { background-color: rgb(2 44 34 / .3); }
html.dark .dark\:text-emerald-200    { color: #a7f3d0; }
html.dark .dark\:text-emerald-300    { color: var(--emerald-300); }
html.dark .dark\:bg-emerald-900\/40  { background-color: rgb(6 78 59 / .4); }
html.dark .dark\:hover\:bg-neutral-100:hover { background-color: var(--neutral-100); }
html.dark .dark\:hover\:bg-neutral-800:hover { background-color: var(--neutral-800); }

/* --------------------------------------------------------------------- */
/* Extra utilities (Phase 2 + Phase 3)                                   */
/* --------------------------------------------------------------------- */
.w-14  { width: 3.5rem; }
.w-72  { width: 18rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-xs  { max-width: 20rem; }
.min-w-0   { min-width: 0; }

.flex-1         { flex: 1 1 0%; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.divide-y > * + *  { border-top-width: 1px; border-top-style: solid; border-top-color: var(--neutral-200); }
.divide-neutral-200 > * + * { border-top-color: var(--neutral-200); }
html.dark .dark\:divide-neutral-800 > * + * { border-top-color: var(--neutral-800); }

.border-r      { border-right-width: 1px; border-right-style: solid; border-right-color: var(--neutral-200); }
.border-dashed { border-style: dashed; }

.overflow-y-auto   { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-hidden   { overflow: hidden; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-words       { overflow-wrap: anywhere; word-break: break-word; }

.p-2   { padding: .5rem; }
.p-3   { padding: .75rem; }
.px-2  { padding-left: .5rem; padding-right: .5rem; }
.py-1  { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.pb-4  { padding-bottom: 1rem; }
.pt-2  { padding-top: .5rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.mr-2  { margin-right: .5rem; }
.mr-3  { margin-right: .75rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-6  { margin-top: 1.5rem; }
.ml-1  { margin-left: .25rem; }
.ml-2  { margin-left: .5rem; }

.text-lg { font-size: 1.125rem; }
.text-base { font-size: 1rem; }

.select-none { user-select: none; }
.cursor-help { cursor: help; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .05em; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.sticky  { position: sticky; }
.bottom-0 { bottom: 0; }
.backdrop-blur { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bg-neutral-50\/90 { background-color: rgb(250 250 250 / .9); }
html.dark .dark\:bg-neutral-950\/80 { background-color: rgb(10 10 10 / .8); }
.object-contain { object-fit: contain; }

.min-h-\[calc\(100vh-3\.5rem\)\] { min-height: calc(100vh - 3.5rem); }
.max-h-48 { max-height: 12rem; }
.max-h-xs { max-height: 20rem; }

/* File input styling for uploaders. */
input[type=file]::file-selector-button {
    margin-right: .75rem;
    border: 0;
    border-radius: .375rem;
    background: var(--neutral-100);
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--neutral-200); }
html.dark input[type=file]::file-selector-button { background: var(--neutral-800); color: var(--neutral-100); }
html.dark input[type=file]::file-selector-button:hover { background: var(--neutral-700); }

/* Rose / amber / emerald dark bg extras used in tables. */
html.dark .dark\:bg-neutral-800\/40 { background-color: rgb(38 38 38 / .4); }
html.dark .dark\:bg-rose-950\/40 { background-color: rgb(76 5 25 / .4); }
html.dark .dark\:bg-amber-950\/40 { background-color: rgb(69 26 3 / .4); }

/* Buttons that look like anchors get no default cursor/style. */
button:focus { outline: none; }

/* --------------------------------------------------------------------- */
/* Responsive utilities (breakpoint md = 768px)                          */
/*                                                                       */
/* Mobile-first: utilities without a breakpoint prefix apply always.     */
/* `md:` variants apply only at ≥ 768 px, overriding the base via CSS    */
/* cascade specificity. Pair them as e.g. `class="w-full md:w-72"`.      */
/* --------------------------------------------------------------------- */

/* Shared (no media query needed) */
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.min-w-full      { min-width: 100%; }
.max-h-64        { max-height: 16rem; }

@media (min-width: 768px) {
    .md\:flex            { display: flex; }
    .md\:inline-flex     { display: inline-flex; }
    .md\:block           { display: block; }
    .md\:hidden          { display: none; }

    .md\:flex-row        { flex-direction: row; }
    .md\:flex-col        { flex-direction: column; }

    .md\:w-72            { width: 18rem; }
    .md\:w-auto          { width: auto; }

    .md\:border-r        { border-right-width: 1px; border-right-style: solid; border-right-color: var(--neutral-200); }
    .md\:border-b-0      { border-bottom-width: 0; }

    .md\:max-h-none      { max-height: none; }

    .md\:px-4            { padding-left: 1rem; padding-right: 1rem; }
    .md\:px-6            { padding-left: 1.5rem; padding-right: 1.5rem; }
    .md\:py-6            { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .md\:py-10           { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    .md\:gap-3           { gap: .75rem; }
    .md\:gap-4           { gap: 1rem; }
    .md\:text-xl         { font-size: 1.25rem; }

    .md\:-mx-6           { margin-left: -1.5rem; margin-right: -1.5rem; }

    html.dark .md\:border-r { border-right-color: var(--neutral-800); }
}

/* --------------------------------------------------------------------- */
/* Missing utilities detected by find_missing_css.php                    */
/* --------------------------------------------------------------------- */
.border-t   { border-top-width: 1px; border-top-style: solid; border-top-color: var(--neutral-200); }
.inline     { display: inline; }
.group      { /* marker class for pseudo-group hover targeting */ }
.h-full     { height: 100%; }
/* .w-full is already declared earlier — re-declaring it here would come
   AFTER the @media block above and win over any .md:w-* variant, which
   is exactly how the desktop sidebar collapsed back to full width. */

.gap-1      { gap: .25rem; }
.gap-y-2    { row-gap: .5rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }

.items-start { align-items: flex-start; }
.justify-end { justify-content: flex-end; }

.mb-2 { margin-bottom: .5rem; }
.p-10 { padding: 2.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }

.text-left  { text-align: left; }
.text-right { text-align: right; }

.text-neutral-400 { color: var(--neutral-400); }
.text-amber-700  { color: #b45309; }
.text-amber-900  { color: #78350f; }
.text-rose-600   { color: #e11d48; }
.text-rose-700   { color: #be123c; }
.bg-rose-100     { background-color: #ffe4e6; }

.hover\:bg-rose-50:hover       { background-color: var(--rose-50); }
.hover\:text-rose-600:hover    { color: #e11d48; }

html.dark .dark\:block         { display: block; }
html.dark .dark\:hidden        { display: none; }
html.dark .dark\:bg-neutral-800 { background-color: var(--neutral-800); }
html.dark .dark\:text-amber-300 { color: #fcd34d; }
html.dark .dark\:text-rose-300  { color: var(--rose-300); }
html.dark .dark\:hover\:bg-rose-950\/30:hover { background-color: rgb(76 5 25 / .3); }

/* ::file-selector-button styling — specific utilities for file inputs */
.file\:mr-3::file-selector-button         { margin-right: .75rem; }
.file\:rounded-md::file-selector-button   { border-radius: .375rem; }
.file\:border-0::file-selector-button     { border: 0; }
.file\:bg-neutral-100::file-selector-button { background: var(--neutral-100); }
.file\:px-4::file-selector-button         { padding-left: 1rem; padding-right: 1rem; }
.file\:py-2::file-selector-button         { padding-top: .5rem; padding-bottom: .5rem; }
.file\:text-sm::file-selector-button      { font-size: .875rem; }
.file\:font-medium::file-selector-button  { font-weight: 500; }
.hover\:file\:bg-neutral-200:hover::file-selector-button { background: var(--neutral-200); }
html.dark .dark\:file\:bg-neutral-800::file-selector-button { background: var(--neutral-800); color: var(--neutral-100); }
html.dark .dark\:hover\:file\:bg-neutral-700:hover::file-selector-button { background: var(--neutral-700); }

/* --------------------------------------------------------------------- */
/* Polish: focus rings, transitions, help popover, nicer form elements   */
/* --------------------------------------------------------------------- */
:root {
    --ring: 0 0 0 3px rgb(23 23 23 / .08);
    --ring-dark: 0 0 0 3px rgb(250 250 250 / .12);
}
*:focus-visible { outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
    border-color: var(--neutral-500);
    box-shadow: var(--ring);
}
html.dark input:focus-visible,
html.dark textarea:focus-visible,
html.dark select:focus-visible {
    box-shadow: var(--ring-dark);
}
button:focus-visible { box-shadow: var(--ring); border-radius: .375rem; }
html.dark button:focus-visible { box-shadow: var(--ring-dark); }

/* Gentle hover transition everywhere, but no layout jump */
a, button, input, textarea, select, summary {
    transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

/* Help tooltip — replaces the default browser `title` attribute with a nicer popover.
   Works on any element that has data-hint="..." as an attribute.
   Hover or keyboard-focus shows the bubble. */
[data-hint] {
    position: relative;
    cursor: help;
}
[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--neutral-900);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    max-width: 260px;
    width: max-content;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 40;
    box-shadow: 0 10px 30px rgb(0 0 0 / .12);
}
[data-hint]:hover::after,
[data-hint]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
html.dark [data-hint]::after {
    background: var(--neutral-100);
    color: var(--neutral-900);
}

/* Sticky save-bar polish */
.sticky { box-shadow: 0 -1px 0 var(--neutral-200); }
html.dark .sticky { box-shadow: 0 -1px 0 var(--neutral-800); }

/* Subtle entry animation for pages */
@media (prefers-reduced-motion: no-preference) {
    main { animation: fadeIn .18s ease-out both; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Buttons come in three flavours. */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    background: var(--neutral-900); color: #fff;
    padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500;
}
.btn-primary:hover { background: var(--neutral-800); }
html.dark .btn-primary { background: #fff; color: var(--neutral-900); }
html.dark .btn-primary:hover { background: var(--neutral-100); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    border: 1px solid var(--neutral-300); background: #fff;
    padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500;
    color: var(--neutral-900);
}
.btn-secondary:hover { background: var(--neutral-100); }
html.dark .btn-secondary { border-color: var(--neutral-700); background: var(--neutral-900); color: var(--neutral-100); }
html.dark .btn-secondary:hover { background: var(--neutral-800); }

/* Selection color branding */
::selection { background: rgb(250 204 21 / .35); }

/* --------------------------------------------------------------------- */
/* Misc nice touches                                                     */
/* --------------------------------------------------------------------- */
button[data-theme-toggle] { line-height: 0; }