/*  File: common.css — Description: design tokens, reset and the shared components
    (cards, buttons, inputs, overlays, floating message). */

/* ====== TOKENS ====== */
:root {
    /* Spacing */
    --space-minimal: 5px;               /* hairline gaps inside a control */
    --space-small: 10px;                /* between related controls */
    --space-medium: 15px;               /* inside a card */
    --space-large: 20px;                /* between cards */

    /* Borders and radii */
    --border-strong: 4px;               /* accent stripe on a highlighted card */
    --radius-sm: 4px;                   /* inputs, buttons */
    --radius-md: 8px;                   /* cards */
    --radius-pill: 999px;               /* badges */

    /* Typography */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-md: 18px;
    --font-lg: 22px;
    --letter-spacing-sm: 0.5px;
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Layout */
    --content-max-width: 1500px;
    --content-padding: 20px;
    --content-padding-mobile: 5px;
    --content-min-width: 360px;

    /* Buttons */
    --button-padding-block: 10px;
    --button-padding-inline: 20px;

    /* Floating elements */
    --floating-button-size: 44px;
    --floating-button-offset: 20px;
    --overlay-padding-top: 90px;

    /* Motion */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --ease-out: cubic-bezier(0.25, 0, 0.2, 1);

    /* Surfaces */
    --surface-muted: #f8f8f8;           /* page background */
    --card-bg: #fff;                    /* card / main container */
    --panel-bg: #f9f9f9;                /* nested panel */
    --panel-alt-bg: #f1f1f1;            /* alternate panel, buttons, tags */
    --header-bg: #fff;                  /* sticky header */
    --card-border: #e0e0e0;
    --panel-border: #ddd;
    --frame-border: #ccc;               /* inputs, buttons */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Text */
    --text-strong: #333;
    --muted-text: #555;
    --text-inverse: #fff;

    /* Accents */
    --accent-primary: #007BFF;
    --accent-link: #0b63ce;
    --accent-hover: #eee;

    /* Status */
    --badge-success-bg: #e3f5e8;
    --badge-success-text: #1c6b34;
    --badge-danger-bg: #fdeaea;
    --badge-danger-text: #a32020;
    --badge-warn-bg: #fdf3e0;
    --badge-warn-text: #8a5b00;
    --mark-bg: yellow;
    --mark-text: #000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface-muted: #1a1a1a;
        --card-bg: #1e1e1e;
        --panel-bg: #252525;
        --panel-alt-bg: #2a2a2a;
        --header-bg: #1e1e1e;
        --card-border: #3a3a3a;
        --panel-border: #404040;
        --frame-border: #4a4a4a;
        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

        --text-strong: #e0e0e0;
        --muted-text: #b0b0b0;
        --text-inverse: #101010;

        --accent-primary: #4a9eff;
        --accent-link: #5ba3ff;
        --accent-hover: #2a2a2a;

        --badge-success-bg: #1d3325;
        --badge-success-text: #7fd4a0;
        --badge-danger-bg: #3a1f1f;
        --badge-danger-text: #ff9b9b;
        --badge-warn-bg: #3a2f18;
        --badge-warn-text: #ffcf7a;
        --mark-bg: #665500;
        --mark-text: #ffeb3b;
    }
}

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

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

body {
    background: var(--surface-muted);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--font-base);
    line-height: 1.5;
    min-width: var(--content-min-width);
}

h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--font-lg); }
h2 { font-size: var(--font-md); }
h3 { font-size: var(--font-base); }

a { color: var(--accent-link); }

code { font-family: var(--font-mono); font-size: 0.92em; }

mark { background: var(--mark-bg); color: var(--mark-text); }

/* Note: the `.is-hidden` utility sits at the end of nivelacka.css, so it wins
   the cascade over the components it hides without needing !important. */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ====== HEADER ====== */
.site-header {
    --header-padding-block: var(--space-small);
    --header-padding-inline: var(--content-padding);
    --header-brand-size: var(--font-lg);

    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-medium);
    flex-wrap: wrap;
    padding: var(--header-padding-block) var(--header-padding-inline);
    background: var(--header-bg);
    border-bottom: 1px solid var(--card-border);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    color: var(--text-strong);
    text-decoration: none;
    font-size: var(--header-brand-size);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-sm);
}

/* The mark is a levelled surface: a filled plane over an uneven one. */
.site-brand-mark {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(var(--accent-primary), var(--accent-primary)) bottom / 100% 40% no-repeat,
        repeating-linear-gradient(90deg,
            var(--panel-alt-bg) 0 4px, var(--panel-bg) 4px 8px);
}

.site-subtitle {
    color: var(--muted-text);
    font-size: var(--font-sm);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-actions {
    display: flex;
    gap: var(--space-small);
    margin-left: auto;
}

/* ====== MAIN ====== */
main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--content-padding);
}

/* ====== CARD ====== */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: var(--space-medium);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
}

/* A card is a flex container, so the `hidden` attribute alone would not hide it. */
.card[hidden] { display: none; }

/* ====== BUTTONS ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-minimal);
    min-height: 40px;
    padding: var(--button-padding-block) var(--button-padding-inline);
    background: var(--panel-alt-bg);
    color: var(--text-strong);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-sm);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out),
                border-color var(--transition-fast) var(--ease-out);
}

.btn:hover { background: var(--panel-bg); }

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.btn[disabled] { opacity: 0.5; cursor: default; }

.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
    font-weight: 500;
}

.btn-primary:hover { background: var(--accent-link); border-color: var(--accent-link); }

.btn-danger { color: var(--badge-danger-text); }

.btn-danger:hover { background: var(--badge-danger-bg); }

.btn-wide { width: 100%; }

.button-row {
    display: flex;
    gap: var(--space-small);
    flex-wrap: wrap;
}

.button-row > .btn { flex: 1 1 140px; }

/* ====== SEGMENTED CONTROL ====== */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1px;
    padding: 2px;
    background: var(--panel-alt-bg);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-sm);
}

.segmented-btn {
    padding: 6px 12px;
    min-height: 32px;
    background: transparent;
    color: var(--muted-text);
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out),
                color var(--transition-fast) var(--ease-out);
}

.segmented-btn:hover { color: var(--text-strong); }

.segmented-btn.is-active {
    background: var(--card-bg);
    color: var(--text-strong);
    font-weight: 500;
}

/* ====== FIELDS ====== */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-minimal);
    min-width: 0;
}

/* A field only grows inside a row; in a column-flow card growing would stretch
   it vertically. */
.field-row > .field { flex: 1 1 140px; }

.field-label {
    color: var(--muted-text);
    font-size: var(--font-xs);
    letter-spacing: var(--letter-spacing-sm);
}

.field-row {
    display: flex;
    gap: var(--space-small);
    flex-wrap: wrap;
}

input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    background: var(--card-bg);
    color: var(--text-strong);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-sm);
}

textarea {
    font-family: var(--font-mono);
    resize: vertical;
}

input::placeholder, textarea::placeholder { color: var(--muted-text); opacity: 0.7; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    border-color: var(--accent-primary);
}

input[disabled] { background: var(--panel-alt-bg); color: var(--muted-text); }

.check {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--font-sm);
    cursor: pointer;
}

.check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.check-row {
    display: flex;
    gap: var(--space-medium);
    flex-wrap: wrap;
}

.hint {
    color: var(--muted-text);
    font-size: var(--font-xs);
}

.muted { color: var(--muted-text); }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--panel-alt-bg);
    color: var(--muted-text);
    font-size: var(--font-xs);
}

.badge.is-done { background: var(--badge-success-bg); color: var(--badge-success-text); }

/* ====== OVERLAY ====== */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--overlay-padding-top) var(--content-padding) var(--content-padding);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity var(--transition-normal) var(--ease-out),
                visibility var(--transition-normal) var(--ease-out);
}

.overlay.is-visible { opacity: 1; visibility: visible; }

.overlay-panel {
    width: 100%;
    max-width: 680px;
}

.overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-medium);
}

.overlay-close {
    min-width: var(--floating-button-size);
    min-height: var(--floating-button-size);
    padding: 0;
    font-size: var(--font-lg);
    line-height: 1;
}

/* ====== FLOATING MESSAGE ====== */
.floating-message {
    position: fixed;
    left: 50%;
    bottom: var(--floating-button-offset);
    z-index: 2100;
    max-width: min(90vw, 520px);
    padding: var(--space-small) var(--space-large);
    background: var(--text-strong);
    color: var(--surface-muted);
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    text-align: center;
    transform: translate(-50%, 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal) var(--ease-out),
                visibility var(--transition-normal) var(--ease-out),
                transform var(--transition-normal) var(--ease-out);
}

.floating-message.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ====== ERROR PAGE ====== */
.error-card {
    max-width: 520px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
}

.error-code {
    font-family: var(--font-mono);
    font-size: 64px;
    line-height: 1;
    color: var(--muted-text);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1199px) {
    .site-header { --header-padding-inline: var(--space-medium); }
    main { padding: var(--space-medium); }
}

@media (max-width: 767px) {
    .site-header {
        --header-padding-inline: var(--space-small);
        --header-brand-size: var(--font-md);
    }

    main { padding: var(--content-padding-mobile); }

    .site-subtitle { flex-basis: 100%; order: 3; }

    .overlay { --overlay-padding-top: var(--space-medium); }
}

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