/*
 * File: common.css
 * Description: Design tokens, reset and the shared components.
 */

:root {
    /* ========================================
       LAYOUT AND SPACING
       ======================================== */
    --bp-desktop: 1200px;           /* Desktop breakpoint — documentation only */
    --bp-tablet: 768px;             /* Tablet breakpoint — documentation only */
    --content-max-width: 1500px;    /* Max readable width */
    --content-padding: 20px;        /* Default horizontal padding */
    --content-padding-mobile: 5px;  /* Mobile horizontal padding */
    --content-min-width: 360px;     /* Minimum layout width */
    --space-minimal: 5px;           /* Tightest spacing */
    --space-small: 10px;            /* Small spacing */
    --space-medium: 15px;           /* Medium spacing */
    --space-large: 20px;            /* Large spacing */

    /* ========================================
       BORDERS AND RADII
       ======================================== */
    --border-strong: 4px;           /* Emphasis border (accent stripe) */
    --radius-sm: 4px;               /* Panels, inputs, buttons */
    --radius-md: 8px;               /* Cards */
    --radius-pill: 999px;           /* Badges */

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-xs: 12px;                /* Badges, labels */
    --font-sm: 14px;                /* Metadata, secondary text */
    --font-base: 16px;              /* Default body */
    --font-md: 18px;                /* Inputs, buttons, subheadings */
    --font-lg: 22px;                /* Main headings */
    --letter-spacing-sm: 0.5px;     /* Subtle letter spacing */

    /* ========================================
       COMPONENT SIZING
       ======================================== */
    --button-padding-block: 10px;   /* Vertical padding for buttons */
    --button-padding-inline: 20px;  /* Horizontal padding for buttons */
    --floating-button-size: 44px;   /* Size of the floating info button */
    --floating-button-offset: 20px; /* Its distance from the edges */
    --overlay-padding-top: 90px;    /* Top padding for overlay content */
    --text-pad-inline: 10px;        /* Horizontal padding for inline text */
    --text-margin-inline: 5px;      /* Horizontal margin for inline text */
    --dropdown-max-height: 200px;   /* Maximum height for dropdown lists */
    --list-max-height: 400px;       /* Scrollable list inside a dialog */

    /* ========================================
       MOTION
       ======================================== */
    --transition-fast: 0.15s;       /* Hover effects */
    --transition-normal: 0.2s;      /* Indicators, dropdowns */
    --transition-slow: 0.3s;        /* Overlays, entry animations */
    --ease-out: cubic-bezier(0.25, 0, 0.2, 1);  /* Shared easing curve */

    /* ========================================
       LIGHT MODE COLORS (default)
       ======================================== */
    --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: #f0f0f0;           /* Header — a distinct plane, not --card-bg */
    --card-border: #e0e0e0;         /* Card border */
    --panel-border: #ddd;           /* Panel border */
    --frame-border: #ccc;           /* Inputs, buttons */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);  /* Card elevation */
    --text-strong: #333;            /* Primary text */
    --muted-text: #555;             /* Secondary text */
    --text-inverse: #fff;           /* Ink on a filled accent surface */
    --accent-primary: #007BFF;      /* Primary accent — a mark, never a fill */
    --accent-link: #0b63ce;         /* Links */
    --accent-hover: #eee;           /* Hover fill */
    --badge-success-bg: #d4edda;    /* Success badge bg */
    --badge-success-text: #155724;  /* Success badge text */
    --badge-danger-bg: #f8d7da;     /* Error badge bg */
    --badge-danger-text: #721c24;   /* Error badge text */
    --badge-warn-bg: #fdf3e0;       /* Warning badge bg — only where something warns */
    --badge-warn-text: #8a5b00;     /* Warning badge text */
    --mark-bg: yellow;              /* <mark> highlight background */
    --mark-text: #000;              /* <mark> highlight text */

    /* Tells the browser to paint its own widgets (scrollbars, checkboxes, the
       file picker) for the active theme instead of the light default. */
    color-scheme: light dark;
}

/* ========================================
   DARK MODE COLOR OVERRIDES
   Colors only — no layout or spacing changes.
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-muted: #1a1a1a;
        --card-bg: #1e1e1e;
        --panel-bg: #252525;
        --panel-alt-bg: #2a2a2a;
        --header-bg: #252525;
        --card-border: #3a3a3a;
        --panel-border: #404040;
        --frame-border: #4a4a4a;
        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        --text-strong: #e0e0e0;
        --muted-text: #b0b0b0;
        --text-inverse: #101010;
        --accent-primary: #4a9eff;
        --accent-link: #5ba3ff;
        --accent-hover: #2a2a2a;
        --badge-success-bg: #1a4d2e;
        --badge-success-text: #7ddf64;
        --badge-danger-bg: #4d1a1a;
        --badge-danger-text: #ff8080;
        --badge-warn-bg: #3a2f18;
        --badge-warn-text: #ffcf7a;
        --mark-bg: #665500;
        --mark-text: #ffeb3b;
    }
}

/* ========================================
   RESET
   Minimal and hand-written; no reset library.
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    min-width: var(--content-min-width);
    background-color: var(--surface-muted);
    color: var(--text-strong);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-strong);
}

h1 {
    font-size: var(--font-lg);
}

h2,
h3 {
    font-size: var(--font-md);
}

h4 {
    font-size: var(--font-base);
}

p {
    margin: 0;
    line-height: 1.5;
}

a {
    color: var(--accent-link);
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: break-word;
}

a:hover {
    text-decoration: underline;
}

/* Markers stay on prose lists; a list that is a component turns them off itself. */
ul, ol {
    margin: 0;
    padding: 0;
}

code {
    background: var(--panel-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Roboto Mono', monospace;
    font-size: var(--font-sm);
}

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

/* ========================================
   SCROLLBARS (both engines)
   ======================================== */
* {
    scrollbar-color: var(--panel-border) var(--panel-bg);
}

*::-webkit-scrollbar-track {
    background: var(--panel-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--panel-border);
    border-radius: var(--radius-sm);
    border: 2px solid var(--panel-bg);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--frame-border);
}

/* ========================================
   MAIN CONTAINER
   Horizontal padding only — vertical rhythm belongs to the page's own gap.
   ======================================== */
main {
    padding: 0 var(--content-padding);
    max-width: var(--content-max-width);
    margin: 0 auto;
}

@media (max-width: 767px) {
    main {
        padding: 0 var(--content-padding-mobile);
    }
}

/* ========================================
   FORM ELEMENTS
   Styled on the element selector — one neutral button style is the whole
   vocabulary. A variant class is an addition to record, not a default.
   ======================================== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: var(--card-bg);
    color: var(--text-strong);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-sm);
}

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

button,
input[type="submit"],
input[type="button"] {
    background-color: var(--panel-alt-bg);
    color: var(--text-strong);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--panel-bg);
}

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

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

/* ========================================
   CARDS AND SURFACES
   A card is a plain box; spacing between its children is the page's job.
   ======================================== */
.card {
    padding: var(--space-medium);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
}

.card-small {
    padding: var(--space-small);
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
}

/* ========================================
   BADGES
   A status word, not a control: no border, no hover, no cursor.
   ======================================== */
.badge {
    display: inline-block;
    padding: var(--space-minimal) var(--space-small);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: 600;
    text-align: center;
}

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

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

/* Only where the project genuinely warns about something. */
.badge--warn {
    background-color: var(--badge-warn-bg);
    color: var(--badge-warn-text);
}

/* ========================================
   PILL ACTIONS
   A compact row of small commands — sharing, downloads, exports. The one
   sanctioned button variant; it stays neutral, the accent never fills it.
   ======================================== */
.action-row {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    flex-wrap: wrap;
}

.pill-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-minimal);
    padding: 4px 10px;
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-pill);
    background: var(--panel-alt-bg);
    color: var(--text-strong);
    font-family: inherit;
    font-size: var(--font-xs);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
}

.pill-button:hover {
    background: var(--accent-hover);
    border-color: var(--muted-text);
}

/* Confirmation after a copy — the success badge colours, for two seconds. */
.pill-button--copied {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    border-color: var(--badge-success-text);
}

/* A pill waiting for data it cannot act on yet stays visible and inert. */
.pill-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pill-button:disabled:hover {
    background: var(--panel-alt-bg);
    border-color: var(--frame-border);
}

/* ========================================
   OVERLAYS
   One pattern for every modal. JS only toggles .is-visible.
   ======================================== */
.floating-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--overlay-padding-top);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow) var(--ease-out),
                visibility var(--transition-slow);
}

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

.floating-message {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    padding: var(--space-large);
    max-width: 520px;
    width: calc(100% - 40px);
    border: 1px solid var(--card-border);
    text-align: center;
}

.floating-message p {
    margin: 0 0 var(--space-medium);
    color: var(--text-strong);
    font-size: var(--font-md);
    line-height: 1.4;
}

.floating-message button {
    padding: var(--button-padding-block) var(--button-padding-inline);
    font-size: var(--font-base);
    font-weight: 600;
}

/* A dialog larger than a message adds a modifier next to .floating-message. */
.dialog-wide {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

/* ========================================
   FILTER LIST
   The checkbox list inside a .dialog-wide overlay — the house way to narrow
   a listing. What is selected lives in the URL, not in the dialog (§9).
   ======================================== */
.filter-description {
    margin-bottom: var(--space-medium);
    color: var(--muted-text);
    font-size: var(--font-sm);
}

/* The select-all row is separated from the options by its own rule. */
.select-all-label {
    margin-bottom: var(--space-small);
    padding: var(--space-small);
    border-bottom: 2px solid var(--panel-border);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    margin-bottom: var(--space-large);
    max-height: var(--list-max-height);
    overflow-y: auto;
    padding: var(--space-small);
    background: var(--surface-muted);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding: var(--space-minimal);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.filter-checkbox-label:hover {
    background-color: var(--accent-hover);
}

/* ========================================
   FLOATING INFO BUTTON
   Hover is reversed compared to an ordinary button. It is not hidden on
   mobile: it is often the only route to what the about dialog holds.
   ======================================== */
.floating-info-button {
    position: fixed;
    bottom: var(--floating-button-offset);
    right: var(--floating-button-offset);
    width: var(--floating-button-size);
    height: var(--floating-button-size);
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: var(--panel-bg);
    color: var(--muted-text);
    font-size: var(--font-lg);
    font-weight: 600;
    cursor: pointer;
    z-index: 2100;
    box-shadow: var(--card-shadow);
}

.floating-info-button:hover {
    background: var(--panel-alt-bg);
}

/* ========================================
   ABOUT CONTENT
   The body of the about overlay: left-aligned prose inside a box whose other
   contents are centred, closed by the build line. The gaps come from the
   flex column — never from <br> tags.
   ======================================== */
.about-content {
    text-align: left;
    padding: var(--space-small);
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.about-content p {
    font-size: var(--font-sm);
    text-align: left;
}

.about-content ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    font-size: var(--font-xs);
}

.version-info {
    margin-top: var(--space-medium);
    font-size: var(--font-xs);
    color: var(--muted-text);
    text-align: right;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
/* Hidden visually, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.loading {
    text-align: center;
    display: none;
}

/* ========================================
   SHARED KEYFRAMES
   Fires automatically when an element enters the DOM; no JS needed.
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ========================================
   REDUCED MOTION
   The one sanctioned use of !important.
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}