/* ============================================================================
   LCD COMPONENT PRIMITIVES — LLM Explorer

   Two halves:
     1. The primitive vocabulary from the design canvas (.lcd-*), used by
        newly written markup.
     2. A mapping of the site's existing class names onto those primitives, so
        the seven page types with no mockup inherit the redesign instead of
        breaking. That mapping is what makes a page-by-page rollout safe.

   Loads last. Where llm.css uses !important, so does this file.
   ========================================================================= */

/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */

/* ----------------------------------------------------------------- keys */
/* Rest = 2px stamp. Hover = 4px. Pressed = no shadow, offset +1,+1. */

/* llm.css styles the bare `button` element with `color: #444 !important`, so
   these mirror that importance rather than fighting it with specificity.
   tools/cascade-audit.js is the gate that catches it when they don't. */
.lcd-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--lcd-font-data) !important;
    font-size: var(--fs-key) !important;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 6px 12px !important;
    border: 1.5px solid var(--lcd-line) !important;
    border-radius: 0 !important;
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: box-shadow .08s steps(2), transform .08s steps(2);
}

.lcd-key:hover,
.lcd-key:focus {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow-hover) !important;
    text-decoration: none !important;
}

.lcd-key:active {
    box-shadow: none !important;
    transform: translate(1px, 1px);
}

.lcd-key[disabled],
.lcd-key.is-disabled {
    color: var(--lcd-fg-ghost) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.lcd-key--primary,
.lcd-key--primary:hover,
.lcd-key--primary:focus {
    background: var(--lcd-sel-bg) !important;
    color: var(--lcd-sel-fg) !important;
}

.lcd-key--sm {
    padding: 4px 9px;
    font-size: var(--fs-micro);
}

/* ---------------------------------------------------------------- chips */

.lcd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 9px;
    border: 1px solid var(--lcd-hair);
    border-radius: 0;
    background: transparent;
    color: var(--lcd-fg-dim);
    cursor: pointer;
    transition: border-color .08s steps(2);
}

.lcd-chip:hover,
.lcd-chip:focus {
    border-color: var(--lcd-link);
    color: var(--lcd-fg);
    text-decoration: none;
}

.lcd-chip.is-active,
.lcd-chip[aria-pressed="true"] {
    background: var(--lcd-sel-bg);
    color: var(--lcd-sel-fg);
    border-color: var(--lcd-line);
}

/* ----------------------------------------------------------- search box */
/* Shared: home hero, /list/ toolbar and model page all render search_box.html.
   One flex row — field grows to the available width, key stays beside it. */

.lcd-search {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 4px;
}

.lcd-search__field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: var(--lcd-well);
    border: 1px solid var(--lcd-border);
    box-shadow: var(--lcd-inset);
    padding: 4px 12px;
}

.lcd-search__field:focus-within {
    border-color: var(--lcd-link);
}

.lcd-search__prompt {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data-lg);
    line-height: 1;
    color: var(--lcd-fg-faint);
    flex: none;
}

/* The field owns the frame; the input inside it is bare. The min-width:0
   matters — llm.css pins #search_input to min-width:400px, which would burst
   the field out of narrow columns. */
.lcd-search__field #search_input,
.lcd-search__field input[type="text"] {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    color: var(--lcd-fg) !important;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data-lg);
    letter-spacing: .04em;
}

.lcd-search__field #search_input:focus {
    background: transparent !important;
}

.lcd-search .lcd-key {
    flex: none;
}

#search_hints {
    position: static;
    top: auto;
    left: auto;
    margin-top: 8px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    color: var(--lcd-fg-faint);
}

.search_button_invalid {
    color: var(--lcd-bad) !important;
}

@media (max-width: 560px) {
    .lcd-search {
        flex-wrap: wrap;
    }

    .lcd-search__field {
        flex-basis: 100%;
    }
}

/* VRAM semantic chip: ok / mid / high */
.lcd-vram {
    display: inline-block;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-key);
    padding: 1px 6px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.lcd-vram--ok   { color: var(--lcd-ok); }
.lcd-vram--mid  { color: var(--lcd-link); }
.lcd-vram--high { color: var(--lcd-bad); }

/* --------------------------------------------------------------- panels */

/* Static frames are grouping, not affordance: a quiet 1px border and no
   stamp shadow. Interactive keys keep the strong border + stamp. */
.lcd-panel {
    background: var(--lcd-panel);
    border: 1px solid var(--lcd-border);
}

.lcd-panel__head {
    padding: 9px 14px;
    background: var(--lcd-well);
    box-shadow: inset 0 -1px 0 var(--lcd-border);
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lcd-fg-dim);
}

/* --------------------------------------------------------- LCD numerals */

.lcd-num {
    font-family: var(--lcd-font-data);
    font-weight: 500;
    line-height: 1;
    color: var(--lcd-accent);
    text-shadow: var(--lcd-glow);
    font-variant-numeric: tabular-nums;
}

.lcd-num--sm    { font-size: var(--fs-num-sm); }
.lcd-num--md    { font-size: var(--fs-num); }
.lcd-num--lg    { font-size: var(--fs-num-lg); }

/* Blinking terminal cursor */
.lcd-cursor {
    font-family: var(--lcd-font-data);
    color: var(--lcd-accent);
    line-height: 1;
    animation: lcdblink 1.1s steps(1) infinite;
}

/* Chip/tag row */
.lcd-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}

/* Eyebrow / meta label */
.lcd-label {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint);
}

/* ------------------------------------------------------------- app bars */

.lcd-bar-top,
.lcd-bar-bottom {
    background: var(--lcd-panel);
    padding: 10px 28px;
}

.lcd-bar-top {
    box-shadow: inset 0 -1px 0 var(--lcd-border);
}

.lcd-bar-bottom {
    box-shadow: inset 0 1px 0 var(--lcd-border);
}

@media (max-width: 768px) {
    .lcd-bar-top,
    .lcd-bar-bottom {
        padding: 10px 14px;
    }
}

/* ==========================================================================
   2. LEGACY CLASS MAPPING
   Existing markup keeps its class names and inherits the redesign.
   ========================================================================== */

/* ------------------------------------------------------- keys / buttons */

.mm_button,
.back_button,
.model_button,
.pill_bench,
.show-expand-btn,
.reaction_button,
#subscribe_button,
#iframe-close-button,
#close-button,
.dt-button,
.dt-buttons button,
button.buttons-collection,
button.buttons-colvis {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--lcd-font-data) !important;
    font-size: var(--fs-key) !important;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 12px !important;
    border: 1.5px solid var(--lcd-line) !important;
    border-radius: 0 !important;
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: box-shadow .08s steps(2), transform .08s steps(2);
}

.mm_button:hover,
.back_button:hover,
.model_button:hover,
.pill_bench:hover,
.show-expand-btn:hover,
.reaction_button:hover,
#subscribe_button:hover,
#iframe-close-button:hover,
#close-button:hover,
.dt-button:hover,
.dt-buttons button:hover,
button.buttons-collection:hover,
button.buttons-colvis:hover {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow-hover) !important;
    text-decoration: none !important;
}

.mm_button:active,
.back_button:active,
.model_button:active,
.pill_bench:active,
.show-expand-btn:active,
.reaction_button:active,
.dt-button:active,
.dt-buttons button:active {
    box-shadow: none !important;
    transform: translate(1px, 1px);
}

.mini_button {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 6px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--lcd-fg-dim) !important;
}

.mini_button:hover {
    background: none !important;
    color: var(--lcd-link) !important;
}

.show-expand-btn {
    width: 100%;
    margin-bottom: 28px;
    color: var(--lcd-fg-faint) !important;
    box-shadow: none !important;
    border-width: 1.5px 0 0 0 !important;
}

/* The key mapping above pins display:inline-flex !important, so inline
   style.display cannot hide the button; llm.js toggles this class instead. */
.show-expand-btn.is-hidden {
    display: none !important;
}

.show-expand-btn:hover {
    background: var(--lcd-row) !important;
    color: var(--lcd-fg) !important;
    box-shadow: none !important;
}

/* Category tiles on home / list */
.pill_bench,
.model_list_pillow {
    width: auto;
    min-width: 260px;
    justify-content: flex-start !important;
    text-align: left;
}

.model_list_pillow {
    display: inline-flex !important;
    align-items: center;
    width: 250px;
    height: 92px;
    padding: 12px 14px !important;
    border: 1.5px solid var(--lcd-line) !important;
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow) !important;
    font-family: var(--lcd-font-ui);
    font-size: var(--fs-ui) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.model_list_pillow:hover {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    box-shadow: var(--lcd-key-shadow-hover) !important;
}

/* --------------------------------------------------------------- chips */

.single_tag,
.common_tag,
.similar_tag,
.maintainer_tag,
.benchm_card,
.featured_host,
.sponsored_by {
    display: inline-flex;
    align-items: center;
    /* Flex drops whitespace-only text nodes, so an <i> icon would otherwise
       sit flush against the label ("✔Single Agent"). */
    gap: 6px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro) !important;
    letter-spacing: .06em;
    padding: 3px 8px !important;
    border: 1px solid var(--lcd-hair) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--lcd-fg-dim) !important;
    white-space: nowrap;
}

.single_tag a,
.similar_tag a,
.maintainer_tag a {
    color: var(--lcd-fg-dim) !important;
    text-decoration: none;
}

.single_tag:hover,
.similar_tag:hover,
.maintainer_tag:hover,
.benchm_card:hover {
    border-color: var(--lcd-link) !important;
    background: transparent !important;
    color: var(--lcd-fg) !important;
}

.benchm_card,
.benchm_card_avg {
    justify-content: center;
    height: auto;
    min-height: 34px;
    padding: 6px 10px !important;
    font-size: var(--fs-key) !important;
    background: var(--lcd-well) !important;
    border: 1px solid var(--lcd-border) !important;
    box-shadow: var(--lcd-inset) !important;
    color: var(--lcd-fg) !important;
}

.like_tag,
.label_num {
    display: inline-block;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 0;
    background: var(--lcd-sel-bg);
    color: var(--lcd-sel-fg);
}

/* ------------------------------------------------------------- surfaces */

/* In-flow surfaces: quiet frame. */
.model_description,
.blog_wrapping_block,
.similar_models {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    border: 1px solid var(--lcd-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Floating overlays sit above content and keep the strong frame + stamp. */
.modal-content,
.modal-content-iframe,
.column-menu,
.dt-button-collection,
.two-column {
    background: var(--lcd-panel) !important;
    color: var(--lcd-fg) !important;
    border: 1.5px solid var(--lcd-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--lcd-key-shadow) !important;
}

.model_description {
    box-shadow: var(--lcd-inset) !important;
    background: var(--lcd-well) !important;
}

.column-menu div:hover,
.dt-button-collection .dt-button:hover {
    background-color: var(--lcd-row) !important;
}

/* Buttons inside a colvis collection are menu rows, not keys */
.dt-button-collection .dt-button {
    display: block !important;
    width: 100%;
    text-align: left !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-transform: none;
    letter-spacing: .04em;
}

/* ------------------------------------------------------------ typography */

.main_title {
    font-family: var(--lcd-font-ui);
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--lcd-fg);
    opacity: 1;
}

.notes,
.eph,
.hosting_section_description,
.post_date,
.rss_link,
.smallerfont,
.font_small,
.font_smaller {
    color: var(--lcd-fg-faint);
    font-family: var(--lcd-font-data);
}

.list_text,
.list_details_text,
.static-text,
.blog-text,
.gpu_text {
    color: var(--lcd-fg-dim);
}

.static-text h1, .static-text h2, .static-text h3,
.blog-text h1, .blog-text h2, .blog-text h3,
.bench_title,
.blog_list_title a {
    color: var(--lcd-fg) !important;
}

.exp_collapse_link,
.light_link {
    color: var(--lcd-fg-faint) !important;
}

.exp_collapse_link:hover {
    color: var(--lcd-link) !important;
}

.loader,
.model_td_icon,
.llmico,
.llmicor,
.hfrico,
.main_ico_color {
    color: var(--lcd-fg-faint) !important;
}

/* ------------------------------------------------------------- semantics */

.red, .decreased_color, .merge_tag   { color: var(--lcd-bad) !important; }
.green, .increased_color, .better,
.original_tag                        { color: var(--lcd-ok) !important; }
.orange                              { color: var(--lcd-link) !important; }

.stars, .stars_2, .stars_3, .stars_4 { color: var(--lcd-accent) !important; }
.stars_1                             { color: var(--lcd-bad) !important; }
.stars_disabled                      { color: var(--lcd-fg-ghost) !important; }

.voted-item {
    color: var(--lcd-sel-fg) !important;
    background: var(--lcd-sel-bg) !important;
}

.filter_count,
.filter_enabled,
.quicksearch_filter_active,
.sorting_desc,
.sorting_asc {
    color: var(--lcd-link) !important;
}

.column-hidden,
.column-hidden:hover {
    color: var(--lcd-bad) !important;
}

/* ----------------------------------------------------------------- misc */

.model_descr_table .level_1,
table.level_1 { background: var(--lcd-panel) !important; border-left: 2px solid var(--lcd-border) !important; }
table.level_2 { background: var(--lcd-well) !important; }
table.level_3 { background: var(--lcd-bg) !important; }
table.level_4 { background: var(--lcd-well) !important; }
table.level_4 td:first-child { background: var(--lcd-well) !important; }

/* :not(.expanded) matters. llm.css clears the mask via a bare `.expanded`
   rule, which this sheet would otherwise beat on load order -- leaving the
   bottom third of an expanded block faded to invisible. */
.content-block-gradual:not(.expanded) {
    -webkit-mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
}

.content-block-gradual.expanded {
    -webkit-mask-image: none;
    mask-image: none;
    max-height: none;
}

/* Collapsed but nothing clipped: no fade, no expand affordance (llm.js adds
   .is-complete after measuring). */
.content-block-gradual.is-complete {
    -webkit-mask-image: none;
    mask-image: none;
}

tr.featured_hosting td {
    background-color: var(--lcd-row) !important;
}

.featured_link {
    background-color: var(--lcd-row) !important;
    color: var(--lcd-link) !important;
}

#main_menu_ad {
    background: var(--lcd-well) !important;
    color: var(--lcd-fg) !important;
    border: 1px solid var(--lcd-border);
    border-radius: 0 !important;
    box-shadow: var(--lcd-inset);
}

#llm_num {
    background-color: var(--lcd-sel-bg) !important;
    color: var(--lcd-sel-fg) !important;
    border-radius: 0;
    font-family: var(--lcd-font-data);
}

/* Cookie notice. llm.css pins it to `right:100px; width:330px`, which hangs
   off the left edge of a 390px phone. */
div[data-storage-item="llm_extractum_cookiename"] {
    background-color: var(--lcd-panel) !important;
    border: 2px solid var(--lcd-line);
    border-radius: 0 !important;
    box-shadow: var(--lcd-key-shadow) !important;
    max-width: calc(100vw - 24px);
}

@media (max-width: 768px) {
    div[data-storage-item="llm_extractum_cookiename"] {
        right: 12px !important;
        left: 12px;
        bottom: 12px;
        width: auto !important;
    }
}

.llm_cookie_text {
    color: var(--lcd-fg) !important;
    background: transparent !important;
    font-size: var(--fs-ui);
}

html body .llm_close_button {
    background: var(--lcd-well) !important;
    border: 1px solid var(--lcd-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1;
}

/* ------------------------------------------------ fixed widths -> fluid */
/* llm.css pins several blocks to pixel widths that predate the current
   layout (#mcard_ad 600px, .other_blog_items 800px, .rank_table_width 550px).
   Each one pushed the document wider than the viewport -- 42px on desktop and
   224px on a 390px phone. */

#mcard_ad,
.lcd-cardslot {
    width: auto !important;
    max-width: 100%;
    min-height: 0;
}

.lcd-blog-col {
    max-width: 970px;
}

.other_blog_items,
.main_static_content,
.rank_table_width {
    width: 100% !important;
    max-width: 100%;
}

.other_blog_items li,
.other_blog_items li .image-container {
    width: 100%;
    max-width: 300px;
    margin-right: 0;
}

.other-posts {
    margin-left: 0;
    padding-left: 0;
    background: transparent !important;
}

.toptable_container,
.canvas-container,
.canvas-container-radar,
.sliders_range,
#mcard_ad img,
.similar_models,
table {
    max-width: 100%;
}

.canvas-container-radar {
    margin-left: 0;
}

/* Long, unbroken model ids and URLs are the other source of overflow. */
.model_descr_table td,
.similar_models td,
.static-text,
.blog-text {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .model_list_pillow,
    .pill_bench {
        width: 100%;
        min-width: 0;
    }

    /* The LCD search field is a flex row (prompt + input); forcing the input
       to 100% would push the prompt onto its own line. */
    #search_input {
        min-width: 0 !important;
        width: auto !important;
        flex: 1 1 auto;
    }

    #email_subscribe {
        min-width: 0 !important;
        width: 100% !important;
    }

    .lcd-subscribe form {
        width: 100%;
    }
}

/* The logo bitmap is a black wordmark; invert it in dark themes only. */
[data-theme="dark"] .header img {
    filter: invert(90%) sepia(18%) saturate(340%) hue-rotate(6deg);
}

/* The generated OG card is light text on a dark plate; the light theme has
   always inverted it. Keep that, and drop the invert in dark themes. */
.image_card {
    filter: invert(100%) grayscale(100%);
}

[data-theme="dark"] .image_card {
    filter: grayscale(100%);
}