/*
 * LexiLab shared theme
 *
 * Loaded on every page. Defines the site-wide visual language: CSS variables
 * for the two-palette theme, helper classes used by tool pages, top-bar
 * layout, and the shared fade/animation helpers.
 *
 * Tailwind via CDN is still doing the bulk of the styling per page. This file
 * centralises anything that either can't be expressed as a utility or that we
 * want sync'd across tools.
 *
 * Palette by Claude Design (2026-04-24): warm paper + clay, dark earth tones.
 * Tile gradient (--tile-from / --tile-to) is the signature visual element.
 *
 * No build step. Keep this file lean: every byte ships uncompiled.
 */

/* ========================================================================
 * Palette
 * ======================================================================== */
:root {
    --bg: #FAF6EE;
    --bg-elev: #FFFFFF;
    --border: #E8DFC8;
    --text: #1F1B14;
    --text-muted: #6B6251;
    --text-faint: #8A816C;
    --accent: #3B342A;
    --accent-strong: #1F1B14;
    --accent-orange: #C27A4A;
    --accent-orange-ink: #FFFFFF;
    --tile-from: #F4EAD2;
    --tile-to: #E8DBBA;
    --tile-border: #D4C49A;
    --tile-ink: #2B2416;
    --success: #7CAE5F;
    --success-soft: #E8F2DE;
    --success-border: #BBD3A3;
    --warn: #B8936A;
    --ring: rgba(184, 147, 106, 0.22);
    --accent-soft: rgba(184, 147, 106, 0.14);
    --accent-soft-border: rgba(184, 147, 106, 0.38);
    --accent-soft-ink: #8C6A3F;
}
html.dark {
    --bg: #1A1814;
    --bg-elev: #232019;
    --border: #2F2B22;
    --text: #EDE8DD;
    --text-muted: #ADA794;
    --text-faint: #7E7A6B;
    --accent: #E08A5A;
    --accent-strong: #E08A5A;
    --accent-orange: #E08A5A;
    --accent-orange-ink: #1A1814;
    --tile-from: #2F2B22;
    --tile-to: #28241D;
    --tile-border: #3A362C;
    --tile-ink: #E8B890;
    --success: #8FB87A;
    --success-soft: rgba(143, 184, 122, 0.14);
    --success-border: rgba(143, 184, 122, 0.32);
    --warn: #E08A5A;
    --ring: rgba(224, 138, 90, 0.22);
    --accent-soft: rgba(224, 138, 90, 0.16);
    --accent-soft-border: rgba(224, 138, 90, 0.42);
    --accent-soft-ink: #F0A079;
}

/* ========================================================================
 * Base
 * ======================================================================== */
html, body {
    background: var(--bg);
    color: var(--text);
}
html {
    transition: background-color 0.2s, color 0.2s;
    /* Always show the scrollbar track so the page never shifts laterally
       when content grows tall enough to need one. overflow-y:scroll is the
       most reliable cross-browser way to prevent the mx-auto centering jump. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
body {
    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Scrollbars - follow the paper/earth palette. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ========================================================================
 * Surfaces and text helpers
 * ======================================================================== */
.ll-card { background: var(--bg-elev); border: 1px solid var(--border); }
.ll-border { border-color: var(--border); }
.ll-text-muted { color: var(--text-muted); }
.ll-text-faint { color: var(--text-faint); }
.ll-accent { color: var(--accent); }
.ll-bg { background: var(--bg); }
.ll-bg-elev { background: var(--bg-elev); }

/* Scrabble-like tile. Used in the landing logo, card icons, tool tiles. */
.ll-tile {
    background: linear-gradient(180deg, var(--tile-from) 0%, var(--tile-to) 100%);
    border: 1px solid var(--tile-border);
    color: var(--tile-ink);
}

/* ========================================================================
 * Form controls and buttons
 * ======================================================================== */
.ll-input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ll-input:focus {
    outline: none;
    border-color: var(--warn);
    box-shadow: 0 0 0 3px var(--ring);
}

.ll-btn-primary {
    background: var(--accent-orange);
    color: var(--accent-orange-ink);
    border-radius: 10px;
    font-weight: 600;
    transition: transform .15s ease, opacity .15s ease;
}
.ll-btn-primary:hover { opacity: 0.92; }
.ll-btn-primary:active { transform: translateY(1px); }
.ll-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ll-btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    transition: background .15s ease;
}
.ll-btn-ghost:hover { background: var(--bg); }
.ll-btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Segmented toggle used for mode switches (e.g. Full anagrams / Single words). */
.ll-seg {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    display: flex;
}
.ll-seg button {
    flex: 1;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 7px;
    transition: all .15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
.ll-seg button.active {
    background: var(--accent-orange);
    color: var(--accent-orange-ink);
    font-weight: 600;
}

/* On mobile, let each button's label wrap to two lines so both buttons
   stay side-by-side even on narrow screens. */
@media (max-width: 559px) {
    .ll-seg button {
        white-space: normal;
        padding: 8px 10px;
        line-height: 1.3;
    }
}

/* Result chip - hover reveals copy icon, click shows transient `copied` state. */
.ll-result {
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
    user-select: none;
    color: var(--text);
}
.ll-result:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
    color: var(--accent-soft-ink);
}
.ll-result .copy-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .15s ease;
    color: var(--accent-soft-ink);
}
.ll-result:hover .copy-icon { opacity: 1; }
.ll-result.copied {
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
    color: var(--accent-soft-ink);
}
.ll-result.copied .copy-icon { opacity: 1; }

/* Collapsible group used for anagram result sections. */
.ll-group-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--text);
}
.ll-group-btn .chev {
    transition: transform .2s ease;
    color: var(--text-faint);
}
.ll-group-btn.collapsed .chev { transform: rotate(-90deg); }
.ll-group-body {
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, margin .2s ease;
}
.ll-group-body.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Pill (used for page-title tag above tool headlines). */
.ll-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--warn) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--warn) 28%, transparent);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}

/* Crossword fragment icon on the landing page. */
.ll-xword .xw-cell {
    fill: #F4EAD2;
    stroke: #C9B98A;
    stroke-width: 1;
}
html.dark .ll-xword .xw-cell {
    fill: #F0E6D0;
    stroke: #3A362C;
}
.ll-xword .xw-num {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 6px;
    font-weight: 600;
    fill: #5E5442;
}
html.dark .ll-xword .xw-num { fill: #2B2416; }

/* ========================================================================
 * Wordle tiles - the only saturated colours on a Wordle page.
 * ======================================================================== */
.wd-tile {
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease;
    user-select: none;
}
.wd-tile:active { transform: scale(0.96); }
.wd-tile.empty {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text);
    cursor: text;
}
.wd-tile.gray { background: #8A8578; }
html.dark .wd-tile.gray { background: #3A362C; color: #ADA794; }
.wd-tile.yellow { background: #D4B250; }
html.dark .wd-tile.yellow { background: #B89F4E; }
.wd-tile.green { background: #7CAE5F; }
html.dark .wd-tile.green { background: #6E9159; }

/* Wordle suggestion row (rank | word | entropy bar). */
.wd-row {
    display: grid;
    grid-template-columns: 28px 90px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}
.wd-row + .wd-row { border-top: 1px solid var(--border); }
.wd-rank {
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.wd-word {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.wd-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
}
.wd-bar > span {
    display: block;
    height: 100%;
    background: var(--accent-orange);
    border-radius: 999px;
    transition: width .3s ease;
}

/* ========================================================================
 * Top bar
 * ======================================================================== */

/* Outer wrapper that constrains width and handles horizontal padding */
#lexilab-topbar {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 0;
}

/* The nav itself: wordmark on far left, right-group on far right */
.lexilab-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Wordmark (Lx tile + "LexiLab" text) */
.topbar-wordmark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.topbar-wordmark:hover { opacity: 0.85; }

/* Right group: links + toggle */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

/* Tool links row */
.topbar-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-toollink {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
    white-space: nowrap;
}
.topbar-toollink:hover { color: var(--text); }
.topbar-toollink.active {
    color: var(--text);
    font-weight: 500;
}

.topbar-sep {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--text-faint);
    opacity: 0.6;
    display: inline-block;
    flex-shrink: 0;
}

/* Theme toggle button */
.lexilab-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
    cursor: pointer;
    flex-shrink: 0;
}
.lexilab-theme-toggle:hover { transform: scale(1.05); }

/* --- Narrow viewports (≤700px): hide inline links, show Tools dropdown --- */
@media (max-width: 700px) {
    .topbar-links { display: none; }
    .topbar-right { gap: 0.5rem; }
}

/* --- Wide viewports (>700px): hide the Tools dropdown button --- */
@media (min-width: 701px) {
    .topbar-tools-wrap { display: none; }
}

/* --- Small desktop: slightly tighter for three links --- */
@media (min-width: 701px) and (max-width: 1023px) {
    .topbar-links { gap: 0.625rem; }
    .topbar-right { gap: 1rem; }
    .topbar-toollink { font-size: 13px; }
}

/* Tools dropdown button */
.topbar-tools-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.topbar-tools-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
}
.topbar-tools-btn .tools-chev {
    transition: transform .2s ease;
    color: var(--text-faint);
    flex-shrink: 0;
}
.topbar-tools-btn[aria-expanded="true"] .tools-chev {
    transform: rotate(180deg);
}

/* Dropdown panel */
.topbar-tools-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 100;
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}
.topbar-tools-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.topbar-tools-menu a {
    display: block;
    padding: 11px 16px;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.topbar-tools-menu a:hover {
    background: var(--accent-soft);
    color: var(--text);
}
.topbar-tools-menu a.active {
    color: var(--text);
    font-weight: 600;
    background: color-mix(in oklab, var(--accent-orange) 8%, transparent);
}
.topbar-tools-menu a + a {
    border-top: 1px solid var(--border);
}

/* Wrapper needed for absolute positioning of the dropdown panel */
.topbar-tools-wrap {
    position: relative;
}


/* ========================================================================
 * Focus ring, toasts, and misc
 * ======================================================================== */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--warn);
    outline-offset: 2px;
}

/* Fade-in on entry */
@keyframes ll-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.ll-fade-up { animation: ll-fade-up .35s ease both; }

/* Toast animations - shared by both tools so notifications feel identical. */
.toast-enter { animation: toastSlideIn 0.3s ease-out forwards; }
.toast-exit  { animation: toastSlideOut 0.3s ease-in forwards; }
@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* Mobile tuning */
@media (max-width: 640px) {
    .ll-result { padding: 12px 14px; font-size: 14px; }
    .wd-row { grid-template-columns: 24px 80px 1fr; gap: 10px; }
    .wd-word { font-size: 18px; }
}