/* Code Converter — dark dashboard theme */

/* Fonts — self-hosted, public/assets/fonts/ Geist Sans: UI chrome + prose */
@font-face {
    font-family: 'Geist Sans';
    src: url('./assets/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Sans';
    src: url('./assets/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Sans';
    src: url('./assets/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('./assets/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('./assets/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Pixel Circle';
    src: url('./assets/fonts/geist-pixel/GeistPixel-Circle.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Design tokens (:root, color-scheme, semantic + legacy-alias variables) now
   live in the shared tokens.css, linked BEFORE this file on every page. Single
   source of truth — edit tokens there. See public/tokens.css. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.5;
    color: var(--foreground);
    background: var(--background);
}

/* Respect users who ask for less motion — neutralises the panel slide, toggle, chevron, and */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Skip-link — first focusable element; jumps past the sidebar to the editor */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    padding: var(--space-2) var(--space-4);
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    left: var(--space-2);
    top: var(--space-2);
}

/* App shell */
/* Three floating columns on the app background */
.app-shell {
    --gutter: var(--space-3);
    display: flex;
    height: 100vh;
    height: 100dvh;   /* dvh tracks the visible area so mobile browser chrome can't hide the footer */
    overflow: hidden;
    padding: var(--gutter);
    background: var(--background);
}

/* Shared card treatment for all three columns */
.sidebar,
.app-main,
.tips-panel {
    background: var(--card);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Main column */
/* position:relative makes this the containing block for the Preview overlay, which is */
.app-main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-background);
    display: flex;
    flex-direction: column;
    /* Top padding trimmed so the brand row's vertical center lines up with the */
    /* topbar's "Input"/"Ready" — see .sidebar-brand + .topbar-title h1.        */
    padding: 6px var(--space-3) var(--space-4);
    margin-right: var(--gutter);
    transition: width var(--dur) var(--ease-ui), padding var(--dur) var(--ease-ui);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3) var(--space-3);
    text-decoration: none;
    color: inherit;
}

/* White tile behind the logo — the logo.svg shows in its own colours on a white background */
.sidebar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--brand-mark-size);
    height: var(--brand-mark-size);
    padding: var(--brand-mark-pad);
    background: #fff;
    border-radius: var(--radius-xs);
}

.sidebar-brand-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.sidebar-brand-name {
    font-family: var(--font-decorative);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 30px;
}

/* Footer block — pushed to the bottom of the sidebar by the auto top margin */
.sidebar-footer {
    margin-top: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Icon + label row, same shape as .sidebar-nav-item but quieter (muted resting colour, no */
/* A <button>, not a link — opens a modal rather than navigating */
.sidebar-footer-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.sidebar-footer-link:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

.sidebar-footer-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
}

/* Chevron on the Help trigger — rotates open like the Docs nav item's */
.sidebar-footer-link-chevron {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    opacity: .7;
    transition: transform var(--dur) var(--ease-ui);
}

#help-btn[aria-expanded="true"] .sidebar-footer-link-chevron,
#mobile-help-btn[aria-expanded="true"] .sidebar-footer-link-chevron {
    transform: rotate(90deg);
}

/* Positions the Help popover relative to its trigger button */
.sidebar-help-wrap {
    position: relative;
}

/* Help popover — anchored ABOVE the Help trigger (opens upward: the trigger */
/* sits at the bottom of the sidebar, so there's no room to open downward). */
/* 10px gap between the popover and the Help button when open. */
.help-popover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--card);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-1);
    z-index: 50;
}

.help-popover.hidden {
    display: none;
}

.help-popover-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.help-popover-item:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

.help-popover-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.help-popover-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.help-popover-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
}

.help-popover-item-hint {
    font-size: 11.5px;
    color: var(--muted-foreground);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.sidebar-nav-item:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

/* Active tool: tinted background fill, no side marker */
.sidebar-nav-item.active,
.sidebar-nav-item[aria-current="page"] {
    background: var(--bg-active);
    color: var(--foreground);
}

.sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .85;
}

.sidebar-nav-chevron {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-ui), transform var(--dur) var(--ease-ui);
}

.sidebar-nav-item-docs:hover .sidebar-nav-chevron {
    opacity: .7;
}

/* In the mobile drawer there's no hover, so the chevron is always visible */
/* (any width the drawer renders at), not just on the current Docs page.   */
.mobile-nav .sidebar-nav-chevron {
    opacity: .7;
}

.sidebar-nav-item-docs[aria-current="page"] .sidebar-nav-chevron {
    opacity: 1;
}

.sidebar-nav-item-docs[aria-expanded="true"] .sidebar-nav-chevron {
    opacity: 1;
    transform: rotate(90deg);
}

/* Collapsed by default; the reveal animates max-height + opacity so it eases */
/* open/closed instead of snapping (display can't be transitioned).            */
.sidebar-docs-sublist {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--dur-panel) var(--ease-ui),
                opacity var(--dur-panel) var(--ease-ui),
                margin var(--dur-panel) var(--ease-ui);
}

.sidebar-docs-sublist.is-open {
    max-height: 16rem;   /* comfortably clears the 5 fixed guide links */
    opacity: 1;
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}

.sidebar-docs-sublink {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.sidebar-docs-sublink:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

.sidebar-docs-sublink[aria-current="page"] {
    color: var(--foreground);
}

/* Mobile nav (hamburger + bottom sheet) — the only nav on mobile since the sidebar is hidden */
.mobile-nav-toggle {
    display: none;   /* shown only ≤768px */
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    flex-shrink: 0;
    margin-right: var(--space-2);
    background: transparent;
    border: none;
    color: var(--foreground);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui);
}

.mobile-nav-toggle:hover { background: var(--bg-hover); }

/* The drawer is display:none at all widths by default; the ≤768px media query flips it to */
.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur-panel) var(--ease-ui);
}

.mobile-nav.open .mobile-nav-backdrop { opacity: 1; }

/* The sheet — anchored to the bottom, slides up */
.mobile-nav-sheet {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-8);
    background: var(--card);
    border-top: 0.5px solid var(--border-strong);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
    transform: translateY(100%);
    transition: transform var(--dur-panel) var(--ease-ui);
}

.mobile-nav.open .mobile-nav-sheet { transform: translateY(0); }

/* Grab-handle affordance at the top of the sheet */
.mobile-nav-handle {
    width: var(--space-8);
    height: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--border-strong);
    margin: 0 auto var(--space-4);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.mobile-nav-title {
    font-family: var(--font-decorative);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    text-decoration: none;
}

.mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.mobile-nav-close:hover { background: var(--bg-hover); color: var(--foreground); }

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    min-height: 44px;   /* touch target */
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.mobile-nav-link:hover { background: var(--bg-hover); color: var(--foreground); }

.mobile-nav-link[aria-current="page"] {
    background: var(--bg-active);
    color: var(--foreground);
}

.mobile-nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .85;
}

/* Footer inside the sheet — Support / Help links, reusing .sidebar-footer-link */
.mobile-nav-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Support/Help must read at the same size as Converter/Documentation (.mobile-nav-link,
   15px) — .sidebar-footer-link's own 13px matches the Docs sub-list, not the top-level
   items, which looked mismatched here. Scoped to the mobile sheet only; the desktop
   sidebar footer keeps its smaller 13px. */
.mobile-nav-footer .sidebar-footer-link {
    font-size: 15px;
}

/* Mobile/tablet: Help expands IN PLACE below its trigger, same open/close */
/* mechanics as the Docs sub-list (.sidebar-docs-sublist) — animated */
/* max-height/opacity in normal flow, not the desktop sidebar's floating, */
/* absolutely-positioned popover. No click-outside/Escape handling here, */
/* matching how Docs behaves (a plain in-place toggle). */
#mobile-help-popover {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--dur-panel) var(--ease-ui),
                opacity var(--dur-panel) var(--ease-ui),
                margin var(--dur-panel) var(--ease-ui);
}

#mobile-help-popover.hidden {
    display: flex;   /* override the shared .hidden{display:none} — this uses max-height instead */
}

#mobile-help-popover:not(.hidden) {
    max-height: 12rem;
    opacity: 1;
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

/* Resolve-variables toggle — a small switch, styled as a control rather than a button so it */
/* Utility: hide an element while leaving it in the DOM (its inputs still submit) */
.is-hidden { display: none !important; }

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--bg-active);
    border: 1px solid var(--border-strong);
    transition: background var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
    flex-shrink: 0;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--muted-foreground);
    transition: transform var(--dur) var(--ease-ui), background var(--dur) var(--ease-ui);
}

/* On = accent, so the switch reads as "active/on" rather than just lit */
.toggle input:checked + .toggle-track {
    background: var(--primary);
    border-color: var(--primary);
}

.toggle input:checked + .toggle-track .toggle-thumb {
    transform: translateX(14px);
    background: var(--primary-foreground);
}

.toggle input:checked ~ .toggle-text {
    color: var(--foreground);
}

.topbar-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.topbar-title h1 {
    font-size: 15px;
    font-weight: 600;
}

.topbar-subtitle {
    font-size: 11px;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Top bar */
/* Left padding matches .panel-header/.editor-footer so "Input", the file tabs, */
/* and Clear all line up under the editor's gutter + content start.             */
.topbar {
    height: var(--header-height);
    padding: 0 var(--space-4) 0 var(--space-8);
    background: var(--bg-header);
    border-bottom: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Hairline separating the primary actions from the panel toggle, so the toggle reads as a */
.topbar-divider {
    width: 1px;
    height: var(--space-5);
    background: var(--border-strong);
    margin: 0 var(--space-1);
    flex-shrink: 0;
}

/* Buttons */
/* Desktop-and-above padding (12px left/right, 8px top/bottom); the existing */
/* @media (max-width: 768px) .btn rule below overrides this on mobile.        */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui), opacity var(--dur) var(--ease-ui);
    font-family: var(--font-ui);
    text-decoration: none;
    white-space: nowrap;
}

/* Icon-only button variant (the Preview eye, panel toggle) — square, snaps to the 32px min */
.btn-icon {
    padding: 0;
    width: var(--space-8);
    height: var(--space-8);
    justify-content: center;
    flex-shrink: 0;
}

.btn-secondary {
    background: transparent;
    border: 0.5px solid var(--border-strong);
    color: var(--foreground);
}

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

.btn-primary {
    background: var(--accent-hover);   /* brand blue-500 fill */
    color: var(--primary-foreground);
}

.btn-primary:hover {
    background: var(--accent-strong);   /* brand blue-600 hover */
}

.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Card/form/table/badge/alert primitives — not used by the Converter editor */

.card {
    background: var(--card);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
}

.card-header {
    padding: var(--space-6);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card-title {
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: 600;
    color: var(--foreground);
}

.card-description {
    font-family: var(--font-prose);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: var(--muted-foreground);
}

.card-content {
    padding: var(--space-6);
}

.card-header + .card-content {
    padding-top: var(--space-4);
}

.card-footer {
    padding: var(--space-6);
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Form primitives — replace the scattered .rp-* wrappers with one shared */
.label {
    display: block;
    font-family: var(--font-prose);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.input {
    display: flex;
    align-items: center;
    height: var(--input-height);
    width: 100%;
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    color: var(--foreground);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    transition: border-color var(--dur) var(--ease-ui);
}

.input:focus-within {
    border-color: var(--primary);
}

.input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
}

.input input:focus,
.input input:focus-visible {
    outline: none;
}

.textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    color: var(--foreground);
    font-family: var(--font-code);
    font-size: var(--text-sm);
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--dur) var(--ease-ui);
}

.textarea:focus-within,
.textarea:focus,
.textarea:focus-visible {
    outline: none;
    border-color: var(--primary);
}

.textarea[readonly] {
    color: var(--text-secondary);
}

/* Badge — replaces .help-pill */
.badge {
    display: inline-flex;
    align-items: center;
    background: var(--input);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Alert / callout — replaces .help-note */
.alert {
    display: flex;
    gap: var(--space-3);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-prose);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.alert-info {
    border-left: 3px solid var(--primary);
    background: var(--accent-soft);
}

/* .rp-table/.rp-table-base kept — rem-px.js writes them directly via innerHTML */
.table-wrap {
    overflow-x: auto;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.table thead {
    background: var(--bg-header);
    border-bottom: 0.5px solid var(--border);
}

.table th {
    height: var(--input-height);
    padding: 0 var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.5px solid var(--border);
    color: var(--text-secondary);
}

.table tr:last-child td {
    border-bottom: none;
}

.docs-pager {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 0.5px solid var(--border);
}

/* Each pager link is a bordered block. Both links present → they split the row */
/* equally; a single link (first/last guide) fills the full width. */
.docs-pager-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--foreground);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: border-color var(--dur) var(--ease-ui), background var(--dur) var(--ease-ui);
}

.docs-pager-link:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

/* Direction label (Previous / Next) above the target title */
.docs-pager-link::before {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.docs-pager-prev { align-items: flex-start; text-align: left; }
.docs-pager-prev::before { content: "\2039  Previous"; }
.docs-pager-next { align-items: flex-end; text-align: right; }
.docs-pager-next::before { content: "Next  \203A"; }

/* Narrow screens: stack the two buttons full-width so titles don't cramp/wrap */
@media (max-width: 640px) {
    .docs-pager { flex-direction: column; }
}

/* Editor area */
/* No padding: .app-main is itself the card now, so an inner inset would produce a */
.editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Likewise no border/radius here — the column card already provides both */
.panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card);
    min-height: 0;
}

.panel-header {
    height: var(--panel-header-height);
    padding: 0 var(--space-3) 0 var(--space-8);
    background: var(--bg-header);
    border-bottom: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Right side of the tab row: the Resolve-variables toggle, parallel to the HTML/CSS/JS tabs */
.panel-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: var(--space-4);
    min-width: 0;
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-1);
    align-items: flex-end;
}

.tab-btn {
    padding: var(--space-3);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
    white-space: nowrap;
    font-family: var(--font-ui);
}

.tab-btn:hover {
    color: var(--foreground);
}

/* Active tab: raised surface + an accent top border marks the current file */
.tab-btn.active,
.tab-btn[aria-selected="true"] {
    background: var(--card);
    color: var(--foreground);
    border-top-color: var(--primary);
}

/* Editor */
.editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Editor footer — holds Clear, below the code area */
.editor-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8);
    border-top: 0.5px solid var(--border);
    background: var(--bg-header);
}

/* Clear is a quiet, compact control — not competing with Convert */
.editor-footer .btn {
    font-size: 12px;
}

/* CodeMirror — dark */
/* Hide the raw textarea until CodeMirror replaces it (prevents a load flash) */
.editor-container > textarea {
    display: none;
}

.CodeMirror {
    height: 100% !important;
    /* !important overrides vendor/codemirror's own font-family rule */
    font-family: var(--font-code) !important;
    font-size: 12.5px;
    line-height: 1.7;
    background: var(--card) !important;
    color: var(--foreground) !important;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    color: var(--foreground) !important;
}

.CodeMirror-gutters {
    background: var(--bg-header) !important;
    border-right: 0.5px solid var(--border) !important;
}

.CodeMirror-linenumber {
    color: var(--muted-foreground) !important;
}

.CodeMirror-cursor {
    border-left-color: var(--foreground) !important;
}

.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
    background: rgba(255,255,255,.12) !important;
}

.CodeMirror-placeholder {
    color: var(--muted-foreground) !important;
    opacity: .7;
}

/* Dark syntax colours */
.CodeMirror .cm-keyword     { color: #c084fc !important; }
.CodeMirror .cm-atom        { color: #22d3ee !important; }
.CodeMirror .cm-number      { color: #22d3ee !important; }
.CodeMirror .cm-def         { color: #fbbf24 !important; }
.CodeMirror .cm-variable    { color: #60a5fa !important; }
.CodeMirror .cm-variable-2  { color: #60a5fa !important; }
.CodeMirror .cm-variable-3  { color: #2dd4bf !important; }
.CodeMirror .cm-type        { color: #2dd4bf !important; }
.CodeMirror .cm-property    { color: #60a5fa !important; }
.CodeMirror .cm-operator    { color: var(--foreground) !important; }
.CodeMirror .cm-comment     { color: #6b7280 !important; font-style: italic; }
.CodeMirror .cm-string      { color: #4ade80 !important; }
.CodeMirror .cm-string-2    { color: #4ade80 !important; }
.CodeMirror .cm-meta        { color: #60a5fa !important; }
.CodeMirror .cm-qualifier   { color: #fbbf24 !important; }
.CodeMirror .cm-builtin     { color: #2dd4bf !important; }
.CodeMirror .cm-bracket     { color: #d97706 !important; }
.CodeMirror .cm-error       { color: var(--error) !important; }
.CodeMirror .cm-tag         { color: #60a5fa !important; }
.CodeMirror .cm-tag.cm-bracket { color: #6b7280 !important; }
.CodeMirror .cm-attribute   { color: #22d3ee !important; }
.CodeMirror .cm-unit        { color: #22d3ee !important; }
.CodeMirror .cm-colorKeyword { color: #4ade80 !important; }
.CodeMirror .cm-string.cm-property { color: #60a5fa !important; }

/* CodeMirror search dialog */
.CodeMirror-dialog {
    background: var(--bg-header) !important;
    border-bottom: 0.5px solid var(--border) !important;
    color: var(--foreground) !important;
    padding: 4px 8px !important;
}

.CodeMirror-dialog input {
    background: var(--input) !important;
    border: 0.5px solid var(--border-strong) !important;
    color: var(--foreground) !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-xs) !important;
}

/* AI Prompt Tips panel — real 3rd flex column, collapsible via width animation (not an */
.tips-panel {
    --tips-width: 340px;
    width: var(--tips-width);
    flex-shrink: 0;
    margin-left: var(--gutter);
    transition: width var(--dur) var(--ease-ui), margin-left var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}

/* The negative margin cancels this column's own gutter so nothing is left floating in the */
.tips-panel.collapsed {
    width: 0;
    margin-left: 0;
    border-color: transparent;
}

/* Inner wrapper keeps a fixed width so content doesn't reflow/wrap during the collapse */
.tips-panel-inner {
    width: var(--tips-width);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tips-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
}

.panel-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

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

/* Open state reads as active, so the icon communicates panel state rather than just being a */
.panel-collapse-btn[aria-expanded="true"] {
    background: var(--bg-active);
    color: var(--foreground);
}

.tips-panel-header h2 {
    font-size: 15px;
    font-weight: 600;
}

/* In-panel close button — only shown when the panel is a mobile/tablet overlay (≤768px), */
.tips-panel-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    flex-shrink: 0;
    margin: -4px -4px 0 var(--space-2);
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.tips-panel-close:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

/* Backdrop behind the tips panel when it overlays (≤768px) */
.tips-backdrop {
    display: none;
}

.tips-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tips-prompt-block {
    position: relative;
    background: var(--input);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

.tips-prompt-block pre {
    font-family: var(--font-code);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: var(--space-8);
}

.tips-copy-icon-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.tips-copy-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

.docs-prompt-block {
    position: relative;
}

.docs-prompt-block pre {
    padding-right: var(--space-8);
}

.docs-prompt-block .tips-copy-icon-btn {
    top: 0;
    right: 0;
}

.tips-docs-link {
    display: block;
    text-align: center;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 12px;
    padding: var(--space-2) 0;
    transition: color var(--dur) var(--ease-ui);
}

.tips-docs-link:hover {
    color: var(--primary);
}

/* Help & Docs page Reuses the app shell (.app-shell/.sidebar/.app-main/.topbar) */
.help-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-10) var(--space-8) var(--space-16);
    /* Prose reads in sans; chrome (headings/labels) stays mono via explicit rules below */
    font-family: var(--font-prose);
}

.help-inner { max-width: 760px; margin: 0 auto; }

/* Docs "on this page" TOC — a right rail beside the reading column, desktop only.
   JS injects .docs-toc into .help-content and adds .has-toc when h2s exist and
   the viewport is wide enough. The layout then centers [reading col][toc] as a
   row so the prose stays put and the TOC floats to its right. */
.help-content.has-toc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-12);
    align-items: flex-start;
}
.help-content.has-toc .help-inner { margin: 0; }

.docs-toc {
    position: sticky;
    top: var(--space-2);
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-1);
}
.docs-toc-label {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding: 0 var(--space-3) var(--space-2);
}
.docs-toc-link {
    padding: var(--space-1) var(--space-3);
    border-left: 2px solid transparent;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: var(--text-xs);
    line-height: 1.4;
    transition: color var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}
.docs-toc-link:hover { color: var(--text-secondary); }
.docs-toc-link.is-active { color: var(--foreground); border-left-color: var(--primary); }

/* TOC is desktop-only chrome — hide below the tablet breakpoint */
@media (max-width: 1000px) {
    .help-content.has-toc { display: block; }
    .help-content.has-toc .help-inner { margin: 0 auto; }
    .docs-toc { display: none; }
}

/* Docs prose type scale — Linear-style: larger readable body, generous line
   height, clear hierarchy. Mobile steps down slightly (media query below). */
.help-title { font-family: var(--font-ui); font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: var(--space-2); color: var(--foreground); }
.help-lede { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin-bottom: var(--space-8); }

.help-content h2 {
    font-family: var(--font-ui);
    font-size: 20px; letter-spacing: -.01em; margin: var(--space-10) 0 var(--space-4);
    color: var(--foreground);
}
.help-content h3 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; margin: var(--space-6) 0 var(--space-2); color: var(--foreground); }
.help-content p, .help-content li { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.help-content p { margin-bottom: var(--space-4); }

/* Clean, Linear-style docs: prose sits bare on the page — no card border/box
   around headings and paragraphs. Scoped to #docs-main (the 5 guide pages)
   only, so REM↔PX (#rp-main) and the app-wide .card keep their boxes. The
   AI-prompt card opts back in via .docs-boxed. */
#docs-main .card {
    background: transparent;
    border: none;
    border-radius: 0;
}
#docs-main .card-content { padding: 0; }
#docs-main .card-header { padding: 0; }
#docs-main .card-header + .card-content { padding-top: var(--space-3); }

/* The one exception: only the monospace prompt text itself is boxed — the
   Geist Sans heading/subtitle/footer around it stay borderless prose, same
   as the rest of #docs-main. */
#docs-main .docs-prompt-boxed {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

/* In-prose links read as body text with an offset underline that fades in on hover */
.help-content p a,
.help-content li a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--dur) var(--ease-ui);
}
.help-content p a:hover,
.help-content li a:hover { text-decoration-color: currentColor; }
.help-content ul, .help-content ol { margin: 0 0 var(--space-4) var(--space-5); }
.help-content li { margin-bottom: var(--space-2); }
.help-content strong { color: var(--foreground); font-weight: 600; }
.help-content code {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border: none;
    border-radius: 4px; padding: .1em .4em; font-size: .875em;
    font-family: var(--font-code); color: #9cc2fb;
}

/* Numbered quick-start steps */
.help-steps { counter-reset: step; list-style: none; margin-left: 0; }
.help-steps > li {
    counter-increment: step; position: relative; padding-left: var(--space-10); margin-bottom: var(--space-4);
}
.help-steps > li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--accent-soft); border: 0.5px solid var(--primary);
    color: var(--primary); font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}

/* Do / Don't columns — the cards themselves are .card (shadcn primitive); this only lays */
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-4) 0 var(--space-6); }

/* Stack the do/don't columns on narrow screens (same 768 breakpoint the shell uses) */
@media (max-width: 768px) {
    .help-cols { grid-template-columns: 1fr; }
    .help-content { padding: var(--space-6) var(--space-4) var(--space-12); }
    /* Docs type steps down slightly on mobile (Linear-style readable scale) */
    .help-title { font-size: 26px; }
    .help-lede { font-size: 16px; }
    .help-content h2 { font-size: 18px; margin-top: var(--space-8); }
    .help-content p, .help-content li { font-size: 15px; }
}

/* REM ⇄ PX converter page Reuses .help-content/.help-inner/.help-title/.help-lede and the */
.rp-base-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 0.5px solid var(--border);
}

.rp-base-input {
    display: flex;
    align-items: center;
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    width: 110px;
    transition: border-color var(--dur) var(--ease-ui);
}

.rp-base-input:focus-within { border-color: var(--primary); }

.rp-base-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--foreground);
    font-family: var(--font-ui);
    font-size: 13px;
    padding: var(--space-2) 0;
}

/* The wrapper carries the focus ring, so the bare input inside doesn't also draw one */
.rp-base-input input:focus,
.rp-base-input input:focus-visible { outline: none; }
.rp-base-input input::-webkit-outer-spin-button,
.rp-base-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rp-base-unit { font-size: 12px; color: var(--muted-foreground); margin-left: var(--space-1); }

.rp-base-hint {
    flex: 1;
    min-width: 180px;
    font-size: 12px;
    color: var(--muted-foreground);
}

.rp-converter {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.rp-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    margin-bottom: var(--space-1);
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
    flex-shrink: 0;
}

.rp-swap:hover { background: var(--bg-hover); color: var(--foreground); border-color: var(--primary); }

.rp-formula {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: var(--background);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-10);
}

.rp-formula code {
    background: var(--input); border: 0.5px solid var(--border);
    border-radius: 4px; padding: .2em .5em; font-size: .85em;
    font-family: var(--font-code); color: var(--foreground);
}

.rp-formula-example {
    font-size: 12px;
    color: var(--muted-foreground);
    font-family: var(--font-code);
}

.rp-formula-actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

/* Common conversions table */
.rp-table-wrap {
    overflow-x: auto;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin: var(--space-4) 0 var(--space-10);
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rp-table th, .rp-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    white-space: nowrap;
}

.rp-table th {
    background: var(--bg-header);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 0.5px solid var(--border);
}

.rp-table td { color: var(--text-secondary); border-bottom: 0.5px solid var(--border); }
.rp-table tr:last-child td { border-bottom: none; }

/* Base row (the root font size) highlighted with an accent tint + left marker */
.rp-table tr.rp-table-base td {
    color: var(--foreground);
    background: var(--accent-soft);
    font-weight: 500;
}
.rp-table tr.rp-table-base td:first-child {
    box-shadow: inset 2px 0 0 var(--primary);
}

.rp-field { flex: 1; min-width: 140px; }

.rp-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.rp-input-wrap {
    display: flex;
    align-items: center;
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    transition: border-color var(--dur) var(--ease-ui);
}

.rp-input-wrap input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--foreground);
    font-family: var(--font-ui);
    font-size: 15px;
    padding: var(--space-2) 0;
}

.rp-input-wrap input:focus,
.rp-input-wrap input:focus-visible { outline: none; }
.rp-input-wrap:focus-within { border-color: var(--primary); }

.rp-unit { font-size: 12px; color: var(--muted-foreground); margin-left: var(--space-2); }

.rp-unit-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.rp-unit-copy:hover { background: var(--bg-hover); color: var(--foreground); }

.rp-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin: var(--space-4) 0 var(--space-6);
}

.rp-list-col label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.rp-list-out-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rp-list textarea {
    width: 100%;
    resize: vertical;
    background: var(--input);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--foreground);
    font-family: var(--font-code);
    font-size: 13px;
    line-height: 1.6;
    padding: var(--space-3);
    transition: border-color var(--dur) var(--ease-ui);
}

.rp-list textarea:focus-within { border-color: var(--primary); }
.rp-list textarea[readonly] { color: var(--text-secondary); }

@media (max-width: 768px) {
    .rp-list { grid-template-columns: 1fr; }
    .rp-converter { flex-direction: column; align-items: stretch; }
    .rp-swap { align-self: center; transform: rotate(90deg); }
    .rp-formula-actions { margin-left: 0; }

    /* Root-font-size row: let it wrap so the reset button can't overflow. Input
       + reset stay on the top line; the hint text flows to a full-width line
       below (no min-width forcing it wide). */
    .rp-base-row { flex-wrap: wrap; }
    .rp-base-hint { min-width: 0; order: 3; flex-basis: 100%; }
    .rp-base-input { order: 1; }
    #rp-base-reset { order: 2; margin-left: auto; }
}

/* Upload modal + Support modal. z-index above .mobile-nav (1000) so a modal
   opened from the mobile/tablet drawer's Support button renders on top of
   (not behind/dimmed under) the still-open drawer, and its Ko-fi link stays
   clickable. Below .toast (1100)/.skip-link (1200) so those still surface. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    width: min(720px, calc(100vw - 48px));
    background: var(--card);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal);
    padding: var(--space-6);
}

/* Tally's own overlay class (injected by their embed script, tally.so/widgets/ embed.js) — */
.tally-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.modal-header h2 {
    font-size: 17px;
    font-weight: 600;
}

.modal-subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--muted-foreground);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--foreground);
}

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

.upload-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur) var(--ease-ui), background var(--dur) var(--ease-ui);
}

.upload-slot:hover,
.upload-slot.drag-over {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.upload-slot.has-file {
    border-style: solid;
    border-color: var(--success);
}

.upload-slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: 50%;
    background: var(--input);
    color: var(--foreground);
    font-size: 16px;
}

.upload-slot-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
}

.upload-slot-hint {
    font-size: 11px;
    color: var(--muted-foreground);
}

.upload-slot-hint strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
}

/* Support the Converter modal — narrower + centered, unlike the 3-column Upload modal */
.modal-support {
    width: min(420px, calc(100vw - 48px));
    padding: var(--space-6);
    text-align: center;
    position: relative;
}

.support-modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.support-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--primary);
}

.support-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.support-modal-subtitle {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: var(--space-5);
}

.support-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--input);
    color: var(--foreground);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}

.support-option:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.support-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    background: var(--accent-soft);
    color: var(--primary);
}

.support-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.support-option-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13.5px;
    font-weight: 600;
}

.support-option-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--primary);
}

.support-option-hint {
    font-size: 12px;
    color: var(--muted-foreground);
}

.support-option-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.support-modal-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    font-size: 11.5px;
    color: var(--muted-foreground);
}

@media (max-width: 640px) {
    .modal-body {
        grid-template-columns: 1fr;
    }
}

/* Full-screen overlay rendering raw HTML/CSS/JS in a sandboxed iframe — not the */
.preview-overlay {
    /* Scoped to the editor column via .app-main's position:relative, not the viewport */
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: var(--card);
    animation: preview-in 220ms var(--ease-ui) both;
}

@keyframes preview-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.preview-overlay.hidden { display: none; }

/* Top bar: title · device toggle · Copy to Webflow · Close */
.preview-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-header);
    border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
}

.preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

/* In-preview copy feedback — same 11px size as .topbar-subtitle. Fills the gap
   after the title (holds the margin-right:auto so the controls stay right). */
.preview-subtitle {
    font-size: 11px;
    color: var(--success);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
}
.preview-subtitle.is-error { color: var(--error); }

/* Segmented device switcher */
.preview-devices {
    display: inline-flex;
    align-items: stretch;
    height: var(--space-8);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Icon-only — width matches the segment height so each segment is a square, matching the */
.preview-device {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    border: 0;
    background: var(--card);
    color: var(--muted-foreground);
    padding: 0;
    cursor: pointer;
    transition: background var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui);
}

.preview-device + .preview-device {
    border-left: 1px solid var(--border-strong);
}

.preview-device[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--primary);
}

/* Copy-to-Webflow reuses .btn/.btn-primary; this only fixes its height to the bar's control */
.preview-bar .btn { height: var(--space-8); }

/* Stage — centres the frame; scrolls if the frame is taller than the viewport */
.preview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    background: var(--bg-depth);
}

.preview-stage:has(.preview-empty) {
    background: var(--card);
}

.preview-stage.is-tablet,
.preview-stage.is-mobile {
    padding: var(--space-5) var(--space-4);
}

.preview-frame {
    border: 0;
    background: #fff;   /* the rendered page's own canvas, not app chrome */
    width: 100%;
    height: 100%;
    display: block;
}

.preview-stage.is-tablet .preview-frame,
.preview-stage.is-mobile .preview-frame {
    height: 100%;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-overlay);
}

.preview-stage.is-tablet .preview-frame {
    width: var(--preview-tablet);
    max-width: 100%;
    border-radius: var(--preview-radius-tablet);
}

.preview-stage.is-mobile .preview-frame {
    width: var(--preview-mobile);
    max-width: 100%;
    border-radius: var(--preview-radius-mobile);
}

/* Empty state — shown instead of a blank frame when there's no HTML */
.preview-empty {
    margin: auto;
    max-width: 32ch;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .preview-bar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
    .preview-title { width: 100%; margin-right: 0; }
    .preview-stage.is-tablet .preview-frame,
    .preview-stage.is-mobile .preview-frame { width: 100%; }
}

/* Toast */
.toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-5);
    background: var(--card);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--foreground);
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    z-index: 1100;
    transition: opacity var(--dur) var(--ease-ui), transform var(--dur) var(--ease-ui);
}

.toast.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;
}

.toast.success { border-color: var(--success); }
.toast.error   { border-color: var(--error); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--foreground) 15%, transparent);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 25%, transparent); }

/* Focus states One rule for every interactive element — accent ring, 2px offset */
:where(
    a, button, input, textarea, select,
    .toggle, .upload-slot, .tab-btn, .sidebar-nav-item,
    [tabindex]
):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* The toggle's ring should sit on its track, not the label box */
.toggle input:focus-visible + .toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Responsive Three stages, matching the pattern of collapsing the least essential column */

/* Stage 1 — icon rail */
@media (max-width: 1100px) {
    .sidebar {
        width: 56px;
        padding: var(--space-4) var(--space-2);
        align-items: center;
    }

    .sidebar-brand { padding: var(--space-2) 0 var(--space-5); }
    .sidebar-brand-name { display: none; }

    /* .sidebar-brand/.sidebar-nav's larger padding (space-5/30px) is a desktop-only
       (>1100px) refinement — reset back down for the icon-rail here. */
    .sidebar-nav { width: 100%; padding-top: 16px; }

    .sidebar-nav-item {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Label text inside the nav item — the icon span is the first child and stays visible */
    .sidebar-nav-item > span:not(.sidebar-nav-icon) { display: none; }
    /* Icon-rail: no room for the sub-list, so keep it fully collapsed */
    .sidebar .sidebar-docs-sublist { display: none; }

    /* Footer (Support / Help) collapses to icon-only, same treatment as the */
    /* nav items above — it stays VISIBLE here, just without labels/chevron. */
    /* Scoped to .sidebar (the desktop rail) — .sidebar-footer-link is a shared */
    /* class also used by the mobile drawer's footer, which must keep its labels. */
    .sidebar .sidebar-footer {
        width: 100%;
        padding: var(--space-3) 0 0;
    }

    .sidebar .sidebar-footer-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar .sidebar-footer-link > span:not(.sidebar-footer-link-icon) { display: none; }

    /* No room to render the popover anchored to a 32px icon column; the Help */
    /* trigger still opens it (JS untouched) — anchor to the icon's left edge */
    /* and grow rightward into the canvas instead of stretching edge-to-edge. */
    .sidebar .help-popover { right: auto; width: 220px; }
}

@media (max-width: 900px) {
    .tips-panel { --tips-width: min(320px, 80vw); }
}

/* Stage 2 — small screens */
@media (max-width: 768px) {
    .app-shell { --gutter: var(--space-2); }

    .sidebar { display: none; }

    /* Hamburger replaces the (hidden) sidebar as the nav entry point */
    .mobile-nav-toggle { display: inline-flex; }

    /* Drawer becomes usable at this width (block unless JS has hidden it) */
    .mobile-nav { display: block; }
    .mobile-nav.hidden { display: none; }

    .topbar { padding: 0 var(--space-3); }
    /* "Input" (Converter) / "Converter" (Docs breadcrumb) hidden on mobile for a
       cleaner topbar — the hamburger + page content already say where you are. */
    .topbar-title h1 { display: none; }
    .topbar-subtitle { display: none; }
    .btn { padding: var(--space-2) var(--space-3); font-size: 11px; }
    .btn-icon { padding: 0; }

    /* Preview is hidden here: its device-frame modal (Desktop 768 / Mobile 390) can't render */
    #preview-btn { display: none; }

    .tips-panel {
        --tips-width: min(340px, calc(100vw - 16px));
        position: fixed;
        top: var(--space-2);
        right: var(--space-2);
        bottom: var(--space-2);
        margin-left: 0;
        z-index: 910;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    }

    .tips-panel.collapsed {
        width: 0;
        border-color: transparent;
        box-shadow: none;
    }

    /* The in-panel close button is the reachable control at this width — the top-bar "AI Prompt */
    .tips-panel-close {
        display: inline-flex;
    }

    /* Backdrop appears only while the panel is open (i.e */
    .tips-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(0, 0, 0, .5);
    }

    .tips-backdrop.hidden {
        display: none;
    }
}