/* /tools/symbols/styles.css */

/* ─── Design tokens (matches FG Toolbox family) ─────────────────────────────── */

:root {
    --bg:            #0f1115;
    --surface:       #1a1e27;
    --surface-hover: #222839;
    --surface-active:#2a3349;
    --border:        #2c3444;
    --border-light:  #3a4455;
    --text:          #eef1f6;
    --text-muted:    #8a97b0;
    --text-dim:      #5a6478;
    --primary:       #6fa3f7;
    --primary-hover: #8db9ff;
    --primary-dim:   rgba(111, 163, 247, 0.13);
    --green:         #4ade80;
    --green-dim:     rgba(74, 222, 128, 0.13);
    --radius-lg:     20px;
    --radius:        12px;
    --radius-sm:     8px;
    --shadow:        0 8px 28px rgba(0,0,0,0.35);
    --shadow-sm:     0 3px 10px rgba(0,0,0,0.25);
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */

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

html { overflow-y: scroll; }

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size:   15px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

/* ─── Page Shell ─────────────────────────────────────────────────────────────── */

.sym-page {
    min-height: 100vh;
    padding:    36px 20px 80px;
}

.sym-container {
    width:         min(1300px, 100%);
    margin-inline: auto;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */

.sym-header {
    margin-bottom: 28px;
}

.sym-title {
    font-family:    "Syne", sans-serif;
    font-size:      2.6rem;
    font-weight:    800;
    letter-spacing: -0.06em;
    line-height:    1;
    margin-bottom:  8px;
}

.sym-title-accent {
    color: var(--primary);
}

.sym-subtitle {
    color:     var(--text-muted);
    font-size: 0.9rem;
}

/* ─── Search ─────────────────────────────────────────────────────────────────── */

.sym-search-wrap {
    position:      relative;
    margin-bottom: 32px;
}

.sym-search-icon {
    position:   absolute;
    left:       16px;
    top:        50%;
    transform:  translateY(-50%);
    width:      18px;
    height:     18px;
    color:      var(--text-dim);
    pointer-events: none;
}

.sym-search {
    width:         100%;
    padding:       14px 46px 14px 48px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    color:         var(--text);
    font-family:   "DM Sans", sans-serif;
    font-size:     0.96rem;
    outline:       none;
    transition:    border-color 150ms ease, box-shadow 150ms ease;
}

.sym-search::placeholder {
    color: var(--text-dim);
}

.sym-search:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px var(--primary-dim);
}

.sym-search-clear {
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    width:       30px;
    height:      30px;
    border:      none;
    border-radius: var(--radius-sm);
    background:  transparent;
    color:       var(--text-muted);
    font-size:   0.95rem;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  opacity 140ms ease, background 120ms ease, color 120ms ease;
}

.sym-search-clear:hover {
    background: rgba(255,255,255,0.07);
    color:      var(--text);
}

/* ─── Sections ───────────────────────────────────────────────────────────────── */

.sym-section {
    margin-bottom: 38px;
}

.sym-section-header {
    display:      flex;
    align-items:  center;
    gap:          10px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom: 1px solid var(--border);
}

.sym-section-title {
    font-family:    "Syne", sans-serif;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.sym-count {
    font-family:   "JetBrains Mono", monospace;
    font-size:     0.74rem;
    color:         var(--text-dim);
    background:    rgba(255,255,255,0.05);
    padding:       2px 7px;
    border-radius: 6px;
    margin-left:   auto;
}

/* Recently used – slightly distinguished */

.sym-recent .sym-section-header {
    border-bottom-color: var(--primary-dim);
}

.sym-recent .sym-section-title {
    color: var(--primary);
}

.sym-clear-recent {
    margin-left: auto;
    border:      none;
    background:  transparent;
    color:       var(--text-dim);
    font-size:   0.8rem;
    font-family: "DM Sans", sans-serif;
    cursor:      pointer;
    padding:     3px 8px;
    border-radius: var(--radius-sm);
    transition:  color 120ms, background 120ms;
}

.sym-clear-recent:hover {
    color:      var(--text);
    background: rgba(255,255,255,0.06);
}

/* ─── Symbol Grid ────────────────────────────────────────────────────────────── */

.sym-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap:                   8px;
}

/* ─── Symbol Tile ────────────────────────────────────────────────────────────── */

.sym-tile {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    padding:         14px 6px 10px;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    cursor:          pointer;
    user-select:     none;
    transition:
        transform    140ms cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 120ms ease,
        background   120ms ease,
        box-shadow   120ms ease;
    overflow:        hidden;
    -webkit-tap-highlight-color: transparent;
}

.sym-tile:hover {
    background:   var(--surface-hover);
    border-color: var(--primary);
    transform:    translateY(-3px) scale(1.04);
    box-shadow:   0 6px 20px rgba(111, 163, 247, 0.18), var(--shadow-sm);
    z-index:      2;
}

.sym-tile:active {
    transform: scale(0.96);
}

/* Copied state – green flash */

.sym-tile.copied {
    background:   var(--green-dim);
    border-color: var(--green);
    transform:    translateY(-3px) scale(1.04);
    box-shadow:   0 6px 20px rgba(74, 222, 128, 0.2);
}

.sym-tile.copied .sym-char {
    color: var(--green);
}

.sym-tile.copied .sym-name {
    color: var(--green);
}

/* LaTeX tooltip on hover – pure CSS, no JS needed */

.sym-tile[data-latex]:hover::before {
    content:         attr(data-latex);
    position:        absolute;
    bottom:          calc(100% + 6px);
    left:            50%;
    transform:       translateX(-50%);
    background:      #090c12;
    color:           var(--primary);
    border:          1px solid var(--border-light);
    padding:         3px 8px;
    border-radius:   6px;
    font-family:     "JetBrains Mono", monospace;
    font-size:       0.67rem;
    white-space:     nowrap;
    pointer-events:  none;
    z-index:         20;
    box-shadow:      var(--shadow-sm);
    /* Clamp so it doesn't clip at edge of viewport */
    max-width:       160px;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

/* ─── Symbol Character ───────────────────────────────────────────────────────── */

.sym-char {
    font-size:   1.85rem;
    line-height: 1;
    color:       var(--text);
    font-family: "Computer Modern", "STIX Two Math", Georgia, serif;
    pointer-events: none;
    /* Prevent tiny symbols from being invisible */
    min-height:  2rem;
    display:     flex;
    align-items: center;
}

/* ─── Symbol Name ────────────────────────────────────────────────────────────── */

.sym-name {
    font-size:     0.61rem;
    font-weight:   500;
    color:         var(--text-muted);
    text-align:    center;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     74px;
    pointer-events: none;
    transition:    color 100ms ease;
    line-height:   1.2;
}

/* ─── Small tiles (recently used) ───────────────────────────────────────────── */

.sym-tile-sm {
    padding: 10px 5px 8px;
}

.sym-tile-sm .sym-char {
    font-size: 1.5rem;
    min-height:1.6rem;
}

.sym-tile-sm .sym-name {
    font-size: 0.58rem;
}

/* ─── Search state ───────────────────────────────────────────────────────────── */

.sym-query {
    color:      var(--text);
    font-style: normal;
    font-weight:600;
}

.sym-empty {
    color:       var(--text-muted);
    font-size:   0.9rem;
    padding:     20px 0;
    line-height: 1.6;
}

.sym-error {
    color:     var(--primary);
    font-size: 0.9rem;
    padding:   20px 0;
}

/* ─── Copy Toast ─────────────────────────────────────────────────────────────── */

.copy-toast {
    position:      fixed;
    bottom:        28px;
    left:          50%;
    transform:     translateX(-50%) translateY(14px);
    background:    rgba(15,17,22,0.92);
    color:         var(--green);
    border:        1px solid rgba(74, 222, 128, 0.35);
    padding:       10px 20px;
    border-radius: 40px;
    font-family:   "JetBrains Mono", monospace;
    font-size:     0.83rem;
    pointer-events:none;
    opacity:       0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:    var(--shadow);
    white-space:   nowrap;
    z-index:       9999;
    transition:
        opacity   180ms ease,
        transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copy-toast.toast-visible {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .sym-grid {
        grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
        gap: 7px;
    }
}

@media (max-width: 600px) {
    .sym-page {
        padding: 24px 14px 60px;
    }

    .sym-title {
        font-size: 2rem;
    }

    .sym-grid {
        grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
        gap: 6px;
    }

    .sym-char {
        font-size: 1.55rem;
    }

    .sym-name {
        font-size: 0.57rem;
        max-width: 62px;
    }

    /* Hide LaTeX tooltip on touch screens (no hover) */
    .sym-tile[data-latex]:hover::before {
        display: none;
    }

    .sym-search {
        font-size: 0.9rem;
        padding:   12px 40px 12px 44px;
    }

    .copy-toast {
        bottom:    16px;
        font-size: 0.76rem;
        padding:   8px 16px;
    }
}

@media (max-width: 380px) {
    .sym-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    }

    .sym-tile {
        padding: 10px 4px 8px;
    }
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background:    var(--border-light);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}