/* =========================================
   Minimal-UI v0.2.0
   A minimalist CSS framework for rapid prototyping.
   https://github.com/s17labs/minimal-ui
   ========================================= */

:root {
   /* Color Palette */
   --mu-primary-bg: #0e0e10;
   --mu-accent: #ff4136;
   --mu-accent-hover: #e8372d;
   --mu-text-main: #f1f1f1;
   --mu-text-muted: #868686;
   --mu-surface: #1a1a1c;
   --mu-surface-hover: rgba(255, 255, 255, 0.03);
   --mu-surface-raised: #222224;
   --mu-border: rgba(255, 255, 255, 0.08);
   --mu-border-accent: rgba(255, 65, 54, 0.4);

   /* Typography */
   --mu-font-base: Verdana, sans-serif;
   --mu-font-heading: 'Aldrich', sans-serif;
   --mu-font-mono: 'Courier New', Courier, monospace;

   /* Layout */
   --mu-radius: 4px;
   --mu-radius-lg: 8px;
   --mu-transition: 0.3s ease;

   /* Spacing scale */
   --mu-space-1: 0.5rem;
   --mu-space-2: 1rem;
   --mu-space-3: 1.5rem;
   --mu-space-4: 2rem;
}

/* =========================================
   BASE RESET
   ========================================= */

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

/* Global selection style */
::selection {
  background-color: var(--mu-border-accent);  /* The highlight color */
  color: var(--mu-text-main);                /* The text color when selected */
}

html {
  scroll-padding-top: 68px;
   scroll-behavior: smooth;
}

body {
   margin: 0;
   padding: 0;
   background-color: var(--mu-primary-bg);
   color: var(--mu-text-main);
   font-family: var(--mu-font-base);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar {
   display: none;
}

a {
   color: inherit;
   text-decoration: none;
   transition: var(--mu-transition);
}

/* Remove default blue tap highlight on mobile for all interactive elements */
a, button, input, select, textarea, label,
[role="button"], [tabindex] {
   -webkit-tap-highlight-color: transparent;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

h1, h2, h3, h4, h5, h6 {
   font-family: var(--mu-font-heading);
   margin-top: 0;
   margin-bottom: 1rem;
   line-height: 1.2;
   color: var(--mu-text-main);
}

p {
   margin-top: 0;
   margin-bottom: 1.5rem;
   color: var(--mu-text-muted);
}

code {
   font-family: var(--mu-font-mono);
   font-size: 0.875em;
   background: var(--mu-surface);
   color: var(--mu-accent);
   padding: 0.15em 0.45em;
   border-radius: var(--mu-radius);
   border: 1px solid var(--mu-border);
}

/* Code Block */
.code-block {
   display: block;
   font-family: var(--mu-font-mono);
   font-size: 0.875rem;
   background: var(--mu-surface);
   color: var(--mu-text-main);
   padding: 1.25rem 1.5rem;
   border-radius: var(--mu-radius-lg);
   border: 1px solid var(--mu-border);
   overflow-x: auto;
   white-space: pre;
   line-height: 1.7;
   margin-bottom: 1.5rem;
}

.code-block::-webkit-scrollbar {
   height: 4px;
}

.code-block::-webkit-scrollbar-track {
   background: transparent;
}

.code-block::-webkit-scrollbar-thumb {
   background: var(--mu-border);
   border-radius: 2px;
}

/* Text Utilities */
.text-accent  { color: var(--mu-accent); }
.text-main    { color: var(--mu-text-main); }
.text-muted   { color: var(--mu-text-muted); }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-sm      { font-size: 0.875rem; }
.text-lg      { font-size: 1.2rem; }
.text-xl      { font-size: 1.5rem; }
.text-bold    { font-weight: bold; }
.font-heading { font-family: var(--mu-font-heading); }
.font-mono    { font-family: var(--mu-font-mono); }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase    { text-transform: uppercase; letter-spacing: 0.08em; }

/* =========================================
   LAYOUT & CONTAINERS
   ========================================= */

.container {
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
   padding: 20px;
}

.container-sm {
   width: 100%;
   max-width: 480px;
   margin: 0 auto;
   padding: 20px;
}

.container-lg {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 20px;
}

/* Flex */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }

.gap-1 { gap: var(--mu-space-1); }
.gap-2 { gap: var(--mu-space-2); }
.gap-3 { gap: var(--mu-space-3); }
.gap-4 { gap: var(--mu-space-4); }

/* Grid */
.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--mu-space-2);
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--mu-space-2);
}

/* Spacing Utilities */
.mt-1 { margin-top: var(--mu-space-1); }
.mt-2 { margin-top: var(--mu-space-2); }
.mt-3 { margin-top: var(--mu-space-3); }
.mt-4 { margin-top: var(--mu-space-4); }

.mb-1 { margin-bottom: var(--mu-space-1); }
.mb-2 { margin-bottom: var(--mu-space-2); }
.mb-3 { margin-bottom: var(--mu-space-3); }
.mb-4 { margin-bottom: var(--mu-space-4); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-1 { padding: var(--mu-space-1); }
.p-2 { padding: var(--mu-space-2); }
.p-3 { padding: var(--mu-space-3); }
.p-4 { padding: var(--mu-space-4); }

/* Legacy margin helpers (keep for compat) */
.margin-0   { margin: 0; }
.margin-min { margin-bottom: 5px; }

/* =========================================
   SURFACES
   ========================================= */

.surface {
   background: var(--mu-surface-hover);
   border-radius: var(--mu-radius);
   padding: var(--mu-space-3);
}

.surface-raised {
   background: var(--mu-surface-raised);
   border: 1px solid var(--mu-border);
   border-radius: var(--mu-radius);
   padding: var(--mu-space-3);
}

/* =========================================
   BUTTONS
   ========================================= */

/*
 * Normalize <a> and <button> so both render identically with .btn.
 * Without this, browser UA styles cause size/spacing differences.
 */
a.btn {
   display: inline-flex;
   text-decoration: none;
   -webkit-appearance: none;
}

button.btn {
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   font-size: 1rem;
   background: var(--mu-surface);
   border: 1px solid transparent;
   color: var(--mu-text-muted);
   cursor: pointer;
   padding: 0.75rem 1.4rem;
   border-radius: var(--mu-radius);
   font-family: inherit;
   line-height: 1;
   white-space: nowrap;
   box-sizing: border-box;
   transition: var(--mu-transition);
   user-select: none;
   -webkit-user-select: none;
}

.btn:hover {
   background: var(--mu-accent);
   color: var(--mu-text-main);
}

/* Accent — solid red fill */
.btn-accent {
   background: var(--mu-accent);
   color: var(--mu-text-main);
   border-color: transparent;
}

.btn-accent:hover {
   background: var(--mu-accent-hover);
   color: var(--mu-text-main);
}

/* Outline — border only */
.btn-outline {
   background: transparent;
   border: 1px solid var(--mu-border-accent);
   color: var(--mu-accent);
}

.btn-outline:hover {
   background: var(--mu-accent);
   color: var(--mu-text-main);
   border-color: transparent;
}

/* Ghost — no background */
.btn-ghost {
   background: transparent;
   border-color: transparent;
   padding: 0.5rem 1rem;
}

.btn-ghost:hover {
   color: var(--mu-accent);
   background: transparent;
}

/* Muted — subdued secondary action */
.btn-muted {
   background: transparent;
   border: 1px solid var(--mu-border);
   color: var(--mu-text-muted);
}

.btn-muted:hover {
   border-color: var(--mu-text-muted);
   color: var(--mu-text-main);
   background: transparent;
}

/* Sizes */
.btn-sm {
   font-size: 0.8rem;
   padding: 0.45rem 0.9rem;
   gap: 0.4rem;
}

.btn-lg {
   font-size: 1.15rem;
   padding: 1rem 2rem;
   gap: 0.75rem;
}

/* Icon-only square button */
.btn-icon {
   padding: 0.75rem;
   aspect-ratio: 1 / 1;
}

.btn-sm.btn-icon {
   padding: 0.45rem;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
}

/* =========================================
   LINKS
   ========================================= */

.link:hover,
.link:active {
   color: var(--mu-accent);
   text-decoration: underline;
}

.link-ghost:hover,
.link-ghost:active {
   text-decoration: underline;
}

.link-accent {
   color: var(--mu-accent);
}

.link-accent:hover {
   text-decoration: underline;
   opacity: 0.8;
}

/* =========================================
   FORMS
   ========================================= */

.form-group {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   margin-bottom: var(--mu-space-2);
}

label,
.label {
   font-size: 0.875rem;
   color: var(--mu-text-muted);
   font-family: var(--mu-font-base);
   letter-spacing: 0.02em;
}

.input,
.textarea,
.select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
   width: 100%;
   background: var(--mu-surface);
   border: 1px solid var(--mu-border);
   color: var(--mu-text-main);
   font-family: var(--mu-font-base);
   font-size: 1rem;
   padding: 0.7rem 1rem;
   border-radius: var(--mu-radius);
   outline: none;
   transition: border-color var(--mu-transition);
   appearance: none;
   -webkit-appearance: none;
}

.input:focus,
.textarea:focus,
.select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
   border-color: var(--mu-accent);
}

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

textarea {
   resize: vertical;
   min-height: 100px;
   line-height: 1.6;
}

select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23868686' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
   padding-right: 2.5rem;
   cursor: pointer;
}

select option {
   background: var(--mu-surface);
   color: var(--mu-text-main);
}

/* Input + button row */
.input-group {
   display: flex;
   gap: 0;
}

.input-group .input,
.input-group input {
   border-radius: var(--mu-radius) 0 0 var(--mu-radius);
   flex: 1;
}

.input-group .btn {
   border-radius: 0 var(--mu-radius) var(--mu-radius) 0;
   flex-shrink: 0;
}

/* =========================================
   CHECKBOXES, RADIOS & TOGGLE
   ========================================= */

/*
 * All three hide the native input and replace it with a
 * fully custom ::before / ::after pseudo-element control.
 *
 * Usage:
 *   <label class="checkbox-group">
 *     <input type="checkbox"><span>Label</span>
 *   </label>
 *
 *   <label class="radio-group">
 *     <input type="radio" name="g"><span>Label</span>
 *   </label>
 *
 *   <label class="toggle">
 *     <input type="checkbox"><span>Label</span>
 *   </label>
 *
 *   Add disabled attribute to <input> for disabled state.
 */

/* --- Shared label wrapper --- */
.checkbox-group,
.radio-group,
.toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.65rem;
   cursor: pointer;
   color: var(--mu-text-muted);
   font-size: 0.95rem;
   font-family: var(--mu-font-base);
   user-select: none;
   position: relative;
   transition: color var(--mu-transition);
}

.checkbox-group:hover,
.radio-group:hover,
.toggle:hover {
   color: var(--mu-text-main);
}

/* Hide all native inputs */
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"],
.toggle input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
}

/* --- Disabled state (all three) --- */
.checkbox-group:has(input:disabled),
.radio-group:has(input:disabled),
.toggle:has(input:disabled) {
   opacity: 0.35;
   cursor: not-allowed;
   pointer-events: none;
}

/* --- Checkbox --- */

/* The box */
.checkbox-group::before {
   content: '';
   display: block;
   flex-shrink: 0;
   width: 1.1em;
   height: 1.1em;
   border: 1.5px solid var(--mu-border);
   border-radius: 3px;
   background: transparent center / 65% no-repeat;
   transition: background var(--mu-transition), border-color var(--mu-transition);
}

.checkbox-group:hover::before {
   border-color: var(--mu-text-muted);
}

/* Checked — red fill + SVG checkmark centered via background-image */
.checkbox-group:has(input:checked)::before {
   background-color: var(--mu-accent);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.8 2.8 5-5.5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   border-color: var(--mu-accent);
}

.checkbox-group:has(input:checked) {
   color: var(--mu-text-main);
}

/* --- Radio --- */

/* The circle */
.radio-group::before {
   content: '';
   display: block;
   flex-shrink: 0;
   width: 1.1em;
   height: 1.1em;
   border: 1.5px solid var(--mu-border);
   border-radius: 50%;
   background: transparent;
   transition: border-color var(--mu-transition);
}

/* The inner dot */
.radio-group::after {
   content: '';
   position: absolute;
   left: 0.3em;
   top: 50%;
   width: 0.5em;
   height: 0.5em;
   border-radius: 50%;
   background: var(--mu-accent);
   transform: translateY(-50%) scale(0);
   transition: transform var(--mu-transition);
   pointer-events: none;
}

.radio-group:hover::before {
   border-color: var(--mu-text-muted);
}

.radio-group:has(input:checked)::before {
   border-color: var(--mu-accent);
}

.radio-group:has(input:checked)::after {
   transform: translateY(-50%) scale(1);
}

.radio-group:has(input:checked) {
   color: var(--mu-text-main);
}

/* --- Toggle / Switch --- */

/* The track */
.toggle::before {
   content: '';
   display: block;
   flex-shrink: 0;
   width: 2.4em;
   height: 1.3em;
   border-radius: 100px;
   background: var(--mu-surface);
   border: 1.5px solid var(--mu-border);
   transition: background var(--mu-transition), border-color var(--mu-transition);
}

/* The thumb */
.toggle::after {
   content: '';
   position: absolute;
   left: 0.25em;
   top: 50%;
   width: 0.85em;
   height: 0.85em;
   border-radius: 50%;
   background: var(--mu-text-muted);
   transform: translateY(-50%);
   transition: transform var(--mu-transition), background var(--mu-transition);
   pointer-events: none;
}

.toggle:hover::before {
   border-color: var(--mu-text-muted);
}

.toggle:has(input:checked)::before {
   background: var(--mu-accent);
   border-color: var(--mu-accent);
}

.toggle:has(input:checked)::after {
   transform: translateY(-50%) translateX(1.05em);
   background: #fff;
}

.toggle:has(input:checked) {
   color: var(--mu-text-main);
}


/* =========================================
   BADGES
   ========================================= */

.badge {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   font-size: 0.75rem;
   font-family: var(--mu-font-base);
   padding: 0.25em 0.65em;
   border-radius: 100px;
   background: var(--mu-surface);
   color: var(--mu-text-muted);
   border: 1px solid var(--mu-border);
   white-space: nowrap;
   line-height: 1.4;
}

.badge-accent {
   background: rgba(255, 65, 54, 0.15);
   color: var(--mu-accent);
   border-color: var(--mu-border-accent);
}

.badge-muted {
   background: transparent;
   color: var(--mu-text-muted);
   border-color: var(--mu-border);
}

.badge-outline {
   background: transparent;
   color: var(--mu-text-main);
   border-color: rgba(255, 255, 255, 0.2);
}

.badge-dot::before {
   content: '';
   display: inline-block;
   width: 0.45em;
   height: 0.45em;
   border-radius: 50%;
   background: currentColor;
}

/* =========================================
   ALERTS
   ========================================= */

.alert {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
   border-radius: var(--mu-radius-lg);
   border: 1px solid var(--mu-border);
   background: var(--mu-surface);
   color: var(--mu-text-muted);
   font-size: 0.95rem;
   line-height: 1.5;
   margin-bottom: var(--mu-space-2);
}

.alert-accent {
   background: rgba(255, 65, 54, 0.08);
   border-color: var(--mu-border-accent);
   color: var(--mu-text-main);
}

.alert-title {
   font-family: var(--mu-font-base);
   font-weight: bold;
   color: var(--mu-text-main);
   margin-bottom: 0.2rem;
   font-size: 0.95rem;
}

.alert-icon {
   flex-shrink: 0;
   margin-top: 0.1em;
   color: var(--mu-text-muted);
}

.alert-accent .alert-icon {
   color: var(--mu-accent);
}

/* =========================================
   CARDS & SURFACES
   ========================================= */

.card {
   background: var(--mu-surface-hover);
   border-radius: var(--mu-radius-lg);
   padding: 1.5rem;
   transition: var(--mu-transition);
}

/* =========================================
   FOOTER
   ========================================= */

/*
 * Base footer — always include .footer, then add one optional modifier:
 *
 *   .footer-solid      — raised solid surface, top border
 *   .footer-gradient   — fades from page bg down to accent color
 *   .footer-minimal    — just a top divider line, no background
 *   .footer-flush      — no padding, no border, sits tight to content
 *
 * Layout helpers (use inside .footer):
 *   .footer-cols       — multi-column layout (3-col, collapses on mobile)
 *   .footer-col        — individual column inside .footer-cols
 *   .footer-logo       — brand row: icon + name lockup
 *   .footer-links      — horizontal link list
 *   .footer-copy       — copyright / bottom bar text
 *   .footer-divider    — thin separator line inside the footer
 */

.footer {
   width: 100%;
   padding: 2.5rem 1.5rem 1.5rem;
   margin-top: auto;
   font-size: 0.9rem;
   color: var(--mu-text-muted);
   position: relative;
}

/* Links inside any footer variant */
.footer a {
   color: var(--mu-text-muted);
   transition: var(--mu-transition);
}

.footer a:hover,
.footer a:active {
   color: var(--mu-accent);
   text-decoration: underline;
}

/* --- Modifier: Solid --- */
/* Raised surface with a top border — clean separation from page content */
.footer.footer-solid {
   background: var(--mu-surface);
   border-top: 1px solid var(--mu-border);
}

/* --- Modifier: Gradient --- */
/* Fades from page background at top down to accent at bottom */
.footer.footer-gradient {
   background: linear-gradient(
      to bottom,
      var(--mu-primary-bg) 0%,
      rgba(255, 65, 54, 0.18) 100%
   );
   border-top: 1px solid var(--mu-border-accent);
}

/* Slightly dim the text in gradient footers so it doesn't clash */
.footer.footer-gradient .footer-copy {
   opacity: 0.7;
}

/* --- Modifier: Minimal --- */
/* Just a top rule, transparent background, no visual weight */
.footer.footer-minimal {
   border-top: 1px solid var(--mu-border);
   padding-top: 1.5rem;
   opacity: 0.65;
   text-align: center;
}

/* --- Modifier: Flush --- */
/* Zero padding, no border — attaches directly under content */
.footer.footer-flush {
   padding: 0;
   border: none;
   opacity: 0.55;
   text-align: center;
}

/* --- Layout: Columns --- */
.footer-cols {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--mu-space-4);
   margin-bottom: var(--mu-space-3);
}

.footer-col {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.footer-col-title {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--mu-text-main);
   margin-bottom: 0.4rem;
   font-family: var(--mu-font-heading);
}

/* --- Layout: Logo lockup --- */
.footer-logo {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-family: var(--mu-font-heading);
   font-size: 1.1rem;
   color: var(--mu-text-main) !important;
   margin-bottom: 0.6rem;
   text-decoration: none;
}

.footer-logo:hover {
   text-decoration: none;
   color: var(--mu-text-main) !important;
}

/*
 * Independent brand-cube positioning for footer context.
 * Adjust these without affecting the header version.
 * top/width/height can be tuned here freely.
 */
.footer-logo .brand-cube {
   width: 0.85em;
   height: 0.85em;
   top: -0.12em;
   vertical-align: middle;
}

/* --- Layout: Horizontal link list --- */
.footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 0.3rem 1.25rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.footer-links li {
   margin: 0;
   padding: 0;
}

/* --- Layout: Copyright / bottom bar --- */
.footer-copy {
   font-size: 0.85rem;
   color: var(--mu-text-muted);
   text-align: center;
   padding-top: var(--mu-space-2);
}

/* --- Layout: Internal divider --- */
.footer-divider {
   border: 0;
   border-top: 1px solid var(--mu-border);
   margin: var(--mu-space-2) 0;
}

/* --- Mobile --- */
@media (max-width: 580px) {
   .footer-cols {
      grid-template-columns: 1fr;
      gap: var(--mu-space-3);
   }

   .footer-links {
      flex-direction: column;
      gap: 0.5rem;
   }
}

/* =========================================
   INTERACTIVE LIST ITEMS
   ========================================= */

.list-group {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem;
   background: var(--mu-surface-hover);
   border-radius: var(--mu-radius);
   transition: all var(--mu-transition);
}

.list-item:hover {
   background: linear-gradient(90deg, rgba(255, 65, 54, 0.0) 0%, rgba(255, 65, 54, 0.2) 100%);
   transform: translateX(8px);
}

.list-item h3 {
   margin: 0 0 0.4rem;
   font-size: 1.3rem;
   font-family: var(--mu-font-base);
   color: var(--mu-text-main);
}

.list-item p {
   margin: 0;
   font-size: 0.95rem;
}

.list-item .icon-arrow {
   font-size: 1.2rem;
   color: var(--mu-text-muted);
   transition: var(--mu-transition);
}

.list-item:hover .icon-arrow {
   color: var(--mu-accent);
   transform: translateX(4px);
}

/* =========================================
   DIVIDERS
   ========================================= */

.divider {
   border: 0;
   border-top: 1px solid var(--mu-border);
   margin: var(--mu-space-3) 0;
}

.divider-label {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: var(--mu-space-3) 0;
   color: var(--mu-text-muted);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.divider-label::before,
.divider-label::after {
   content: '';
   flex: 1;
   border-top: 1px solid var(--mu-border);
}

/* =========================================
   BRAND CUBE
   ========================================= */

/*
 * The s17 Labs red square icon. Scales with parent font-size via em units.
 *
 * USAGE — pick one:
 *
 * 1. CDN (no file needed — recommended for external projects):
 *    <img class="brand-cube"
 *         src="https://cdn.jsdelivr.net/gh/s17labs/minimal-ui@latest/s17-icon.svg"
 *         alt="s17 Labs">
 *
 * 2. Local file (copy s17-icon.svg into your project):
 *    <img class="brand-cube" src="s17-icon.svg" alt="s17 Labs">
 *
 * 3. CSS-only fallback (no SVG file at all — renders a plain red square):
 *    <span class="brand-cube"></span>
 */
.brand-cube {
   display: inline-block;
   width: 0.85em;
   height: 0.85em;
   vertical-align: baseline;
   position: relative;
   top: 0.08em;          /* pushes bottom edge past the baseline — the "sticking out" effect */
   margin-right: 0.22em;
   flex-shrink: 0;

   /* CSS fallback — only visible when used as a <span> */
   background-color: var(--mu-accent);
}

/* When used as <img>, strip the CSS background so only the SVG renders */
img.brand-cube {
   background-color: transparent;
   object-fit: contain;
}

/* =========================================
   ANIMATIONS
   ========================================= */

.fade-in {
   animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* =========================================
   NAVBAR
   ========================================= */

/*
 * Usage:
 *   <nav class="navbar">
 *     <a class="navbar-brand" href="#">
 *       <img class="brand-cube" src="s17-icon.svg" alt=""> s17 Labs.
 *     </a>
 *     <button class="navbar-hamburger" id="nav-toggle" aria-label="Menu">
 *       <span></span><span></span><span></span>
 *     </button>
 *     <div class="navbar-menu" id="nav-menu">
 *       <a href="#" class="navbar-link">Home</a>
 *       <a href="#" class="navbar-link">Projects</a>
 *     </div>
 *     <div class="navbar-actions">
 *       <a href="#" class="btn btn-accent btn-sm">Sign up</a>
 *     </div>
 *   </nav>
 *
 * Modifiers:
 *   .navbar-sticky  — sticks to top of viewport while scrolling
 *   .navbar-blur    — frosted glass backdrop blur background
 *
 * JS toggle (add to your page):
 *   document.getElementById('nav-toggle')
 *     .addEventListener('click', () =>
 *       document.getElementById('nav-menu').classList.toggle('open'));
 */

.navbar {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 1.5rem;
   height: 3.5rem;
   background: var(--mu-primary-bg);
   border-bottom: 1px solid var(--mu-border);
   position: relative;
   z-index: 100;
   user-select: none;
   -webkit-user-select: none;
}

/* Sticky modifier */
.navbar.navbar-sticky {
   position: sticky;
   top: 0;
}

/* Blur modifier */
.navbar.navbar-blur {
   background: rgba(14, 14, 16, 0.75);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

/* Brand / logo slot */
.navbar-brand {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-family: var(--mu-font-heading);
   font-size: 1.1rem;
   color: var(--mu-text-main) !important;
   white-space: nowrap;
   text-decoration: none;
   flex-shrink: 0;
}

.navbar-brand:hover {
   color: var(--mu-text-main) !important;
   text-decoration: none;
}

/* Brand cube inside navbar — matches footer-logo .brand-cube positioning */
.navbar-brand .brand-cube {
   width: 0.85em;
   height: 0.85em;
   top: -0.12em;
   vertical-align: middle;
}

/* Nav links — desktop */
.navbar-menu {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex: 1;
}

.navbar-link {
   font-size: 0.9rem;
   color: var(--mu-text-muted);
   padding: 0.4rem 0.75rem;
   border-radius: var(--mu-radius);
   transition: var(--mu-transition);
   white-space: nowrap;
   text-decoration: none;
}

.navbar-link:hover {
   color: var(--mu-text-main);
   background: var(--mu-surface-hover);
}

.navbar-link.active {
   color: var(--mu-text-main);
}

.navbar-link.active:hover {
   background: var(--mu-surface-hover);
}

/* Right-side slot for buttons/icons */
.navbar-actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-left: auto;
   flex-shrink: 0;
}

/* Hamburger button — hidden on desktop */
.navbar-hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 2rem;
   height: 2rem;
   padding: 0;
   background: none;
   border: none;
   cursor: pointer;
   margin-left: auto;
   flex-shrink: 0;
}

.navbar-hamburger span {
   display: block;
   width: 100%;
   height: 1.5px;
   background: var(--mu-text-muted);
   border-radius: 2px;
   transition: var(--mu-transition);
}

.navbar-hamburger:hover span {
   background: var(--mu-text-main);
}

/* Hamburger → X when open */
.navbar-hamburger.open span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg);
}
.navbar-hamburger.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}
.navbar-hamburger.open span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile breakpoint */
@media (max-width: 580px) {
   .navbar-hamburger {
      display: flex;
   }

   .navbar-actions {
      display: none;
   }

   .navbar-menu {
      display: none;
      position: absolute;
      top: 3.5rem;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--mu-surface);
      border-bottom: 1px solid var(--mu-border);
      padding: 0.5rem 0;
      z-index: 99;
      animation: fadeIn 0.2s ease-out;
   }

   .navbar-menu.open {
      display: flex;
   }

   .navbar-link {
      padding: 0.75rem 1.5rem;
      border-radius: 0;
      font-size: 1rem;
   }
}

/* =========================================
   TOOLTIP
   ========================================= */

/*
 * Pure CSS — no JS required.
 * Add data-tooltip="Your text" to any element.
 *
 * Position modifiers (add to same element):
 *   .tooltip-bottom
 *   .tooltip-left
 *   .tooltip-right
 *
 * Usage:
 *   <button class="btn" data-tooltip="Save changes">Save</button>
 *   <span data-tooltip="Info" class="tooltip-bottom">Hover me</span>
 */

[data-tooltip] {
   position: relative;
}

/* The tooltip bubble */
[data-tooltip]::before {
   content: attr(data-tooltip);
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   background: var(--mu-surface-raised);
   color: var(--mu-text-main);
   font-family: var(--mu-font-base);
   font-size: 0.78rem;
   line-height: 1.4;
   white-space: nowrap;
   padding: 0.35em 0.7em;
   border-radius: var(--mu-radius);
   border: 1px solid var(--mu-border);
   pointer-events: none;
   opacity: 0;
   transition: opacity var(--mu-transition), transform var(--mu-transition);
   z-index: 9999;
}

/* The arrow */
[data-tooltip]::after {
   content: '';
   position: absolute;
   bottom: calc(100% + -2px);
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid transparent;
   border-top-color: var(--mu-border);
   pointer-events: none;
   opacity: 0;
   transition: opacity var(--mu-transition);
   z-index: 9999;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
   opacity: 1;
}

/* Bottom */
.tooltip-bottom[data-tooltip]::before {
   bottom: auto;
   top: calc(100% + 8px);
}

.tooltip-bottom[data-tooltip]::after {
   bottom: auto;
   top: calc(100% + -2px);
   border-top-color: transparent;
   border-bottom-color: var(--mu-border);
}

/* Left */
.tooltip-left[data-tooltip]::before {
   bottom: auto;
   top: 50%;
   left: auto;
   right: calc(100% + 8px);
   transform: translateY(-50%);
}

.tooltip-left[data-tooltip]::after {
   bottom: auto;
   top: 50%;
   left: auto;
   right: calc(100% + -2px);
   transform: translateY(-50%);
   border-top-color: transparent;
   border-left-color: var(--mu-border);
}

/* Right */
.tooltip-right[data-tooltip]::before {
   bottom: auto;
   top: 50%;
   left: calc(100% + 8px);
   transform: translateY(-50%);
}

.tooltip-right[data-tooltip]::after {
   bottom: auto;
   top: 50%;
   left: calc(100% + -2px);
   transform: translateY(-50%);
   border-top-color: transparent;
   border-right-color: var(--mu-border);
}

/* =========================================
   ACCORDION
   ========================================= */

/*
 * Built on native <details>/<summary> — zero JS required.
 *
 * Usage:
 *   <div class="accordion">
 *     <details class="accordion-item">
 *       <summary class="accordion-header">Question or title</summary>
 *       <div class="accordion-body">
 *         <p>Content goes here.</p>
 *       </div>
 *     </details>
 *   </div>
 *
 * Modifiers:
 *   .accordion-flush  — no outer border, borderless variant
 */

.accordion {
   border: 1px solid var(--mu-border);
   border-radius: var(--mu-radius-lg);
   overflow: hidden;
}

.accordion-item {
   border-bottom: 1px solid var(--mu-border);
}

.accordion-item:last-child {
   border-bottom: none;
}

/* Remove default browser triangle */
.accordion-item summary {
   list-style: none;
}
.accordion-item summary::-webkit-details-marker {
   display: none;
}

/* Header row */
.accordion-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 1.25rem;
   cursor: pointer;
   color: var(--mu-text-main);
   font-size: 0.95rem;
   font-family: var(--mu-font-base);
   background: transparent;
   user-select: none;
   transition: background var(--mu-transition), color var(--mu-transition);
}

.accordion-header:hover {
   background: var(--mu-surface-hover);
}

/* Custom arrow — rotates when open */
.accordion-header::after {
   content: '';
   display: block;
   flex-shrink: 0;
   width: 0.5em;
   height: 0.5em;
   border-right: 1.5px solid var(--mu-text-muted);
   border-bottom: 1.5px solid var(--mu-text-muted);
   transform: rotate(45deg) translateY(-2px);
   transition: transform var(--mu-transition), border-color var(--mu-transition);
}

.accordion-item[open] .accordion-header::after {
   transform: rotate(-135deg) translateY(-2px);
   border-color: var(--mu-accent);
}

.accordion-item[open] .accordion-header {
   color: var(--mu-text-main);
}

/* Body content */
.accordion-body {
   padding: 0 1.25rem 1.25rem;
   color: var(--mu-text-muted);
   font-size: 0.95rem;
   line-height: 1.7;
}

.accordion-body p:last-child {
   margin-bottom: 0;
}

/* Flush variant — no outer border */
.accordion.accordion-flush {
   border: none;
   border-radius: 0;
}

.accordion.accordion-flush .accordion-item {
   border-bottom: 1px solid var(--mu-border);
}

.accordion.accordion-flush .accordion-item:last-child {
   border-bottom: none;
}



@media (max-width: 580px) {
   /* Buttons only go full-width when inside .mobile-col */
   .mobile-col .btn {
      width: 100%;
   }

   .mobile-col {
      flex-direction: column;
   }

   .grid-2,
   .grid-3 {
      grid-template-columns: 1fr;
   }

   .input-group {
      flex-direction: column;
      gap: var(--mu-space-1);
   }

   .input-group .input,
   .input-group input {
      border-radius: var(--mu-radius);
   }

   .input-group .btn {
      border-radius: var(--mu-radius);
      width: 100%;
   }
}