@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap');

/*
 * FM ToolShelf — self-contained site theme.
 * Palette defaults are baked in below; the component's config params override
 * these via an inline :root{} block emitted by the view (addStyleDeclaration).
 */
:root {
    --tshelf-dark: #1E4E79;
    --tshelf-primary: #3F7CA6;
    --tshelf-light: #A7C4D9;
    --tshelf-accent: #F28C28;
    --tshelf-accent-hover: #d9771f;
    --tshelf-bg: #F4EFEA;
    --tshelf-text: #2A2A2A;
    --tshelf-border: #E0D8CE;
}

.tshelf {
    background: var(--tshelf-bg);
    color: var(--tshelf-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    padding: 1.5rem;
    border-radius: .75rem;
}

.tshelf h1, .tshelf h2, .tshelf h3 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--tshelf-dark);
}

/* ---- Hero ---- */
.tshelf-hero { margin-bottom: 1.75rem; }
.tshelf-hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .35rem; }
.tshelf-hero-sub { font-size: 1.05rem; max-width: 60ch; color: var(--tshelf-text); opacity: .85; margin: 0; }

/* ---- Category filter chips ---- */
.tshelf-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tshelf-chip {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--tshelf-primary);
    background: #fff;
    border: 1px solid var(--tshelf-border);
    transition: background .15s, color .15s;
}
.tshelf-chip:hover { background: var(--tshelf-light); color: var(--tshelf-dark); }
.tshelf-chip.is-active { background: var(--tshelf-primary); color: #fff; border-color: var(--tshelf-primary); }

/* ---- Card grid ---- */
.tshelf-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--tshelf-border);
    border-radius: .75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: box-shadow .15s, transform .15s;
}
.tshelf-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.tshelf-card-body { text-decoration: none; color: inherit; display: block; flex: 1 1 auto; }
.tshelf-card-icon { font-size: 1.8rem; color: var(--tshelf-primary); display: inline-block; margin-bottom: .5rem; }
.tshelf-card-logo { display: block; width: 48px; height: 48px; object-fit: contain; margin-bottom: .6rem; }
.tshelf-card-title { font-size: 1.15rem; margin: 0 0 .35rem; }
.tshelf-card-tagline { font-size: .92rem; color: var(--tshelf-text); opacity: .8; margin: 0 0 .6rem; }
.tshelf-card-solves { font-size: .85rem; color: var(--tshelf-dark); margin: 0 0 .6rem; }
.tshelf-solves-label { font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; margin-right: .3rem; color: var(--tshelf-primary); }

.tshelf-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--tshelf-light);
    color: var(--tshelf-dark);
}

.tshelf-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---- Buttons (one orange CTA per view) ---- */
.tshelf-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tshelf-btn-cta { background: var(--tshelf-accent); color: #fff; }
.tshelf-btn-cta:hover { background: var(--tshelf-accent-hover); color: #fff; }
.tshelf-btn-secondary { background: var(--tshelf-primary); color: #fff; }
.tshelf-btn-secondary:hover { background: var(--tshelf-dark); color: #fff; }
.tshelf-btn-ghost { background: #fff; color: var(--tshelf-primary); border-color: var(--tshelf-border); }
.tshelf-btn-ghost:hover { background: var(--tshelf-light); color: var(--tshelf-dark); }
.tshelf-btn-block { display: flex; width: 100%; justify-content: center; }
.tshelf-btn-ver { font-weight: 500; opacity: .9; font-size: .8rem; }

.tshelf-empty { padding: 2rem; text-align: center; color: var(--tshelf-text); opacity: .7; }

/* ---- Detail page ---- */
.tshelf-back { margin-bottom: 1rem; }
.tshelf-back a { color: var(--tshelf-primary); text-decoration: none; font-weight: 600; }
.tshelf-back a:hover { color: var(--tshelf-dark); }

.tshelf-tool-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.tshelf-tool-icon { font-size: 2.6rem; color: var(--tshelf-primary); }
.tshelf-tool-logo { width: 84px; height: 84px; object-fit: contain; flex: 0 0 auto; border-radius: .5rem; }
@media (max-width: 575.98px) {
    .tshelf-tool-logo { width: 60px; height: 60px; }
}
.tshelf-tool-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .3rem; }
.tshelf-tool-tagline { font-size: 1.05rem; opacity: .85; margin: 0 0 .5rem; }

.tshelf-solves-box {
    background: #fff;
    border: 1px solid var(--tshelf-border);
    border-left: 4px solid var(--tshelf-primary);
    border-radius: .5rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
}

.tshelf-shot { margin: 0 0 1.5rem; }
.tshelf-shot img { max-width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--tshelf-border); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }

.tshelf-desc { line-height: 1.65; margin-bottom: 2rem; }
.tshelf-desc img { max-width: 100%; height: auto; }

.tshelf-changelog { border-top: 1px solid var(--tshelf-border); padding-top: 1.25rem; }
.tshelf-changelog h2 { font-size: 1.3rem; }
.tshelf-changelog-entry { margin-bottom: 1.25rem; }
.tshelf-changelog-version { font-size: 1.05rem; display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .35rem; }
.tshelf-changelog-date { font-family: system-ui, sans-serif; font-weight: 400; font-size: .8rem; opacity: .65; }
.tshelf-changelog-body { line-height: 1.6; }
.tshelf-changelog-body :first-child { margin-top: 0; }

/* ---- Sidebar / versions ---- */
.tshelf-sidebar {
    background: #fff;
    border: 1px solid var(--tshelf-border);
    border-radius: .75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    position: sticky;
    top: 1rem;
}
.tshelf-dl-meta { text-align: center; font-size: .85rem; opacity: .75; margin: .5rem 0 1rem; }
.tshelf-links { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; margin-bottom: 1.25rem; }

.tshelf-versions h3 { font-size: 1.05rem; margin: 0 0 .75rem; border-top: 1px solid var(--tshelf-border); padding-top: 1rem; }

/* Version accordion (native <details>) */
.tshelf-version { border: 1px solid var(--tshelf-border); border-radius: .5rem; margin-bottom: .75rem; overflow: hidden; }
.tshelf-version.is-current { border-color: var(--tshelf-primary); }
.tshelf-version[open] { background: rgba(63, 124, 166, .05); }
.tshelf-version-summary { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; cursor: pointer; list-style: none; user-select: none; }
.tshelf-version-summary::-webkit-details-marker { display: none; }
.tshelf-version-summary:hover { background: rgba(63, 124, 166, .06); }
.tshelf-version-num { font-weight: 700; color: var(--tshelf-dark); }
.tshelf-version-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 12px; background: var(--tshelf-primary); color: #fff; }
.tshelf-version-date { font-size: .78rem; opacity: .65; }
.tshelf-version-chevron { margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--tshelf-primary); border-bottom: 2px solid var(--tshelf-primary); transform: rotate(45deg); transition: transform .18s ease; flex: 0 0 auto; }
.tshelf-version[open] .tshelf-version-chevron { transform: rotate(-135deg); }
.tshelf-version-body { padding: 0 .9rem .8rem; }
.tshelf-version-meta { display: flex; gap: .75rem; font-size: .78rem; opacity: .7; margin: 0 0 .4rem; }
.tshelf-version-actions { display: flex; gap: .9rem; align-items: center; }
.tshelf-version-dl, .tshelf-version-docs { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--tshelf-primary); text-decoration: none; }
.tshelf-version-dl:hover, .tshelf-version-docs:hover { color: var(--tshelf-accent-hover); }
.tshelf-version-changelog { font-size: .82rem; opacity: .85; margin-top: .5rem; }

/* ---- Credit ---- */
.tshelf-credit {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tshelf-border);
    text-align: center;
    font-size: .85rem;
    color: var(--tshelf-dark);
    opacity: .8;
}
.tshelf-credit a { color: var(--tshelf-primary); text-decoration: none; }
.tshelf-credit a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .tshelf-sidebar { position: static; margin-top: 1.5rem; }
}