/* tools.css - Shared styles for Tools listing, CVE listing, Tool detail, CVE detail */

/* ═══ LISTING PAGES (tools.html, cves.html) ═══ */


.listing-header{margin-bottom:var(--space-7)}
.listing-header .section-title{margin-bottom:var(--space-2)}

/* Tool cards grid */
.tools-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);
    margin-top:var(--space-6)}

.tool-card{
    padding:2rem 2rem 2rem 1.8rem;
    transition:all .3s;
    position:relative;
    text-decoration:none;
    display:flex;gap:1.4rem;align-items:flex-start;
    color:inherit;
    overflow:hidden
}
.tool-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent),rgba(100,255,218,.15));
    opacity:0;transition:opacity .3s
}
.tool-card:hover{
    border-color:rgba(100,255,218,.3);
    transform:translateY(-3px);
    box-shadow:0 8px 40px rgba(0,0,0,.3);
    color:inherit
}
.tool-card:hover::before{opacity:1}

.tool-card-icon{
    width:56px;height:56px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,rgba(100,255,218,.1),rgba(100,255,218,.04));
    border:1px solid rgba(100,255,218,.15);
    font-family:var(--font-mono);
    font-size:1.2rem;font-weight:700;
    color:var(--accent);
    text-transform:uppercase;
    transition:all .3s
}
.tool-card:hover .tool-card-icon{
    box-shadow:0 0 24px rgba(100,255,218,.12);
    border-color:rgba(100,255,218,.3)
}
.tool-card-icon svg{width:30px;height:30px}

.tool-card-body{flex:1;min-width:0}

.tool-card-name{
    font-family:var(--font-display);
    font-size:1.2rem;font-weight:700;
    color:var(--text-bright);
    margin-bottom:.4rem
}

.tool-card-meta{
    display:flex;align-items:center;gap:.7rem;
    margin-bottom:.7rem;
    font-family:var(--font-mono);font-size:.75rem
}

.tool-card-lang{
    color:var(--accent);
    padding:.2rem .6rem;
    background:var(--accent-dim);
    border-radius:var(--radius);
    font-weight:500
}

.tool-card-stars{
    color:var(--accent-warm);
    display:inline-flex;align-items:center;gap:.35rem;
    background:var(--accent-warm-dim);
    padding:.2rem .6rem;
    border-radius:var(--radius);
    font-weight:600
}
.tool-card-stars::before{
    content:'\2605';
    font-size:.9rem
}

.tool-card-desc{
    color:var(--text-secondary);
    font-size:.9rem;
    line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

.tool-card-arrow{
    position:absolute;top:2rem;right:1.5rem;
    color:var(--text-muted);
    font-size:1.1rem;
    transition:all .3s;
    opacity:0;transform:translateX(-8px)
}
.tool-card:hover .tool-card-arrow{
    opacity:1;transform:translateX(0);color:var(--accent)
}

/* CVE cards grid */
.cves-grid{
    display:grid;grid-template-columns:1fr;gap:1.2rem;
    margin-top:var(--space-6)}

/* .cve-card* styles now live in common.css so the home /cves tab picks
   them up without loading tools.css. */

/* ═══ DETAIL PAGES (tool.htm, cve.htm) ═══ */


/* Loading state */
.loading-state{
    text-align:center;
    padding:4rem 2rem;
    color:var(--text-secondary);
    font-family:var(--font-mono);font-size:.9rem
}

/* Tool detail header */
.tool-header{
    display:flex;align-items:flex-start;justify-content:space-between;
    flex-wrap:wrap;gap:var(--space-5);
    margin-bottom:var(--space-6)}
.tool-header-left{flex:1;min-width:0}
.tool-header h1{
    font-size:2.4rem;
    margin-bottom:.4rem;
    display:flex;align-items:center;gap:.8rem
}
.tool-tagline{
    color:var(--text-secondary);font-size:1.05rem;line-height:1.6;
    max-width:600px
}

.tool-github-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.6rem 1.2rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text-primary);
    font-family:var(--font-mono);font-size:.82rem;
    text-decoration:none;
    transition:all .2s;
    flex-shrink:0
}
.tool-github-btn:hover{
    border-color:var(--border-hover);color:var(--accent);
    transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.2)
}
.tool-github-btn svg{width:1.1em;height:1.1em;fill:currentColor}
.tool-stars-count{
    color:var(--accent-warm);font-weight:600
}

/* Install block */
.install-block{
    padding:1.2rem 1.5rem;
    margin-bottom:2.5rem;
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-4);
    position:relative;
    overflow:hidden
}
.install-block::before{
    content:'$';
    color:var(--accent);opacity:.5;
    font-family:var(--font-mono);font-size:.9rem;
    margin-right:.5rem;flex-shrink:0
}
.install-cmd{
    font-family:var(--font-mono);font-size:.85rem;
    color:var(--text-bright);
    flex:1;overflow-x:auto;white-space:nowrap
}
.install-copy{
    background:none;border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text-secondary);
    font-family:var(--font-mono);font-size:.72rem;
    padding:.3rem .7rem;cursor:pointer;
    transition:all .2s;flex-shrink:0
}
.install-copy:hover{border-color:var(--accent);color:var(--accent)}
.install-copy.copied{border-color:var(--accent);color:var(--accent)}

/* Hero diagram */
.tool-hero-diagram{
    margin-bottom:var(--space-7);
    padding:var(--space-6);
    text-align:center;
    overflow:hidden
}
.tool-hero-diagram img{
    max-width:100%;height:auto;
    filter:brightness(.95) contrast(1.05)
}
.diagram-scroll-hint{display:none}

/* Description block */
.tool-description{
    color:var(--text-secondary);
    font-size:1rem;line-height:1.8;
    margin-bottom:var(--space-7);
    max-width:800px
}

/* Section dividers */
.detail-block{margin-bottom:var(--space-7)}
.detail-block-title{
    font-family:var(--font-display);
    font-size:1.4rem;font-weight:700;
    color:var(--text-bright);
    margin-bottom:var(--space-5);
    padding-bottom:.6rem;
    border-bottom:1px solid var(--border)
}

/* Flow steps */
.flow-steps{
    display:grid;grid-template-columns:1fr;gap:0;
    counter-reset:flow-step;
    position:relative
}
.flow-step{
    display:flex;gap:1.2rem;align-items:flex-start;
    padding:1.2rem 0;
    position:relative;
    counter-increment:flow-step
}
.flow-step+.flow-step{border-top:1px solid var(--border)}
.flow-step-num{
    width:36px;height:36px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--accent-dim);
    border:1px solid rgba(100,255,218,.2);
    font-family:var(--font-mono);font-size:.78rem;font-weight:700;
    color:var(--accent)
}
.flow-step-num::before{content:counter(flow-step)}
.flow-step-body{flex:1}
.flow-step-name{
    font-family:var(--font-display);font-weight:600;
    color:var(--text-bright);font-size:.95rem;
    margin-bottom:.2rem
}
.flow-step-desc{
    color:var(--text-secondary);font-size:.88rem;line-height:1.6
}

/* Features list */
.features-list{
    list-style:none;
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem
}
.features-list li{
    color:var(--text-secondary);font-size:.88rem;
    padding:.4rem 0 .4rem 1.4rem;
    position:relative;line-height:1.5
}
.features-list li::before{
    content:'\25B9';position:absolute;left:0;
    color:var(--accent);font-size:.8rem;top:.5rem
}

/* Data tables (methods, verification, options) */
.detail-table{
    width:100%;border-collapse:collapse;
    font-size:.88rem
}
.detail-table th{
    text-align:left;
    font-family:var(--font-mono);font-size:.72rem;
    color:var(--accent);letter-spacing:.5px;
    text-transform:uppercase;
    padding:.7rem 1rem;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--border)
}
.detail-table td{
    padding:.7rem 1rem;
    color:var(--text-secondary);
    border-bottom:1px solid var(--border);
    vertical-align:top
}
.detail-table tr:last-child td{border-bottom:none}
.detail-table tr:hover td{background:var(--bg-surface-hover)}
.detail-table .td-name{
    color:var(--text-bright);font-weight:500;
    white-space:nowrap
}
.detail-table .td-type{
    font-family:var(--font-mono);font-size:.75rem
}
.detail-table .type-free{color:var(--accent)}
.detail-table .type-freetier{color:var(--accent-warm)}
.detail-table .type-paid{color:var(--danger)}

.table-wrap{
    overflow-x:auto
}

/* Usage examples */
.usage-examples{
    display:grid;grid-template-columns:1fr;gap:.8rem
}
.usage-example{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem 1.2rem;
    transition:border-color .2s
}
.usage-example:hover{border-color:var(--border-hover)}
.usage-cmd{
    font-family:var(--font-mono);font-size:.82rem;
    color:var(--accent);margin-bottom:.3rem;
    word-break:break-all
}
.usage-cmd::before{content:'$ ';opacity:.4}
.usage-desc{
    color:var(--text-secondary);font-size:.82rem;line-height:1.5
}

/* Options table */
.options-table .td-flag{
    font-family:var(--font-mono);font-size:.82rem;
    color:var(--accent);white-space:nowrap
}

/* Detail footer (version, lang, license) */
.detail-footer{
    display:flex;gap:var(--space-6);flex-wrap:wrap;
    padding:1.5rem 0;
    border-top:1px solid var(--border);
    margin-top:var(--space-7);
    font-family:var(--font-mono);font-size:.78rem;
    color:var(--text-muted)
}
.detail-footer-item{
    display:flex;align-items:center;gap:.4rem
}
.detail-footer-item strong{
    color:var(--text-secondary);font-weight:500
}

/* ═══ CVE DETAIL ═══ */

.cve-detail-header{
    margin-bottom:var(--space-6)}
.cve-detail-header h1{
    font-size:2.4rem;margin-bottom:.6rem;
    display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap
}

.severity-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    font-family:var(--font-mono);font-size:.82rem;font-weight:700;
    padding:.3rem .9rem;border-radius:var(--radius-pill);
    vertical-align:middle
}
.severity-badge.sev-critical{border:1px solid rgba(255,71,87,.35)}
.severity-badge.sev-high{border:1px solid rgba(255,107,53,.35)}
.severity-badge.sev-medium{border:1px solid rgba(255,209,102,.35)}
.severity-badge.sev-low{border:1px solid rgba(100,255,218,.35)}
.severity-badge.sev-insane{border:1px solid rgba(191,90,242,.35)}

.cve-summary{
    color:var(--text-secondary);font-size:1.05rem;line-height:1.7;
    margin-bottom:2.5rem;max-width:800px
}

/* CVE details table */
.cve-details-table{
    overflow:hidden;
    margin-bottom:var(--space-7)
}
.cve-details-table table{
    width:100%;border-collapse:collapse
}
.cve-details-table th{
    text-align:left;
    width:180px;
    font-family:var(--font-mono);font-size:.78rem;
    color:var(--text-secondary);font-weight:500;
    padding:.9rem 1.2rem;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--border);
    vertical-align:top
}
.cve-details-table td{
    padding:.9rem 1.2rem;
    color:var(--text-primary);font-size:.9rem;
    border-bottom:1px solid var(--border);
    vertical-align:top
}
.cve-details-table tr:last-child th,
.cve-details-table tr:last-child td{border-bottom:none}

.cve-vector{
    font-family:var(--font-mono);font-size:.78rem;
    color:var(--text-secondary);word-break:break-all
}

/* Writeup cross-link box (CVE → blog post). Renders below the details
   table when /cves/writeups.json contains an entry for this CVE. */
.cve-writeup-box{
    display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
    padding:1rem 1.2rem;
    margin-bottom:var(--space-6);
    background:var(--accent-dim);
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:var(--radius);
    text-decoration:none;
    transition:border-color .2s,background .2s
}
.cve-writeup-box:hover{
    border-color:var(--accent);
    background:rgba(100,255,218,.14)
}
.cve-writeup-box .cwb-label{
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.6px
}
.cve-writeup-box .cwb-title{
    color:var(--text-bright);
    font-family:var(--font-display);
    font-size:.95rem;
    font-weight:600;
    line-height:1.35
}
.cve-writeup-box:hover .cwb-title{color:var(--accent)}
.cve-writeup-box .cwb-cta{
    margin-left:auto;
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:.78rem;
    white-space:nowrap
}

/* CVE description and impact */
.cve-description{
    color:var(--text-secondary);font-size:.95rem;line-height:1.8;
    margin-bottom:var(--space-7);max-width:800px
}

/* Timeline */
.cve-timeline{
    position:relative;
    padding-left:2rem;
    counter-reset:timeline-step
}
.cve-timeline::before{
    content:'';
    position:absolute;left:.45rem;top:.5rem;bottom:.5rem;
    width:2px;
    background:var(--border)
}
.timeline-item{
    position:relative;
    padding:0 0 1.5rem 1.2rem;
    counter-increment:timeline-step
}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
    content:'';
    position:absolute;left:-1.55rem;top:.45rem;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid var(--bg-deep);
    z-index:1
}
.timeline-date{
    font-family:var(--font-mono);font-size:.75rem;
    color:var(--accent);display:block;
    margin-bottom:.2rem
}
.timeline-event{
    color:var(--text-secondary);font-size:.9rem;line-height:1.5
}

/* References */
.cve-references{
    list-style:none
}
.cve-references li{
    padding:.5rem 0;
    border-bottom:1px solid var(--border)
}
.cve-references li:last-child{border-bottom:none}
.cve-references a{
    color:var(--accent);
    font-family:var(--font-mono);font-size:.85rem;
    text-decoration:none;
    display:inline-flex;align-items:center;gap:.4rem;
    transition:color .2s
}
.cve-references a:hover{color:var(--text-bright)}
.cve-references a::after{
    content:'\2197';font-size:.7rem;opacity:.6
}

/* ═══ RESPONSIVE ═══ */

@media(max-width:968px){
    .tools-grid{grid-template-columns:1fr}
    .features-list{grid-template-columns:1fr}
    .tool-header{flex-direction:column}
    .tool-header h1{font-size:1.8rem}
    .cve-detail-header h1{font-size:1.8rem}
}

@media(max-width:768px){
    .tool-card{padding:1.4rem;gap:var(--space-4)}
    .tool-card-icon{width:46px;height:46px;border-radius:var(--radius-lg)}
    .tool-card-icon svg{width:25px;height:25px}
    .tool-card-name{font-size:1.05rem}
    .tool-card-arrow{top:1.4rem;right:1.2rem}
    .install-block{flex-wrap:wrap}
    .install-copy{margin-left:auto}
    .cve-details-table th{width:130px;font-size:.72rem;padding:.7rem .8rem}
    .cve-details-table td{padding:.7rem .8rem;font-size:.85rem}
    .detail-table{font-size:.82rem}
    .detail-table th,.detail-table td{padding:.6rem .7rem}
    .usage-cmd{font-size:.75rem}
    /* Scaled to a phone width, the diagrams' monospace labels drop to ~4px
       and stop being readable. Let each SVG keep its intrinsic size (its
       viewBox, since none of them declare width/height) and scroll inside
       its own container instead: the page body still never scrolls
       sideways because the container owns the overflow. */
    .tool-hero-diagram{
        overflow-x:auto;overflow-y:hidden;
        padding:var(--space-4);text-align:left;
        -webkit-overflow-scrolling:touch
    }
    .tool-hero-diagram img{max-width:none}
    .diagram-scroll-hint{
        position:sticky;left:0;bottom:0;display:block;width:max-content;
        margin:.75rem 0 0 auto;padding:.35rem .6rem;border-radius:var(--radius-pill);
        color:var(--text-secondary);background:color-mix(in srgb,var(--bg-primary) 92%,transparent);
        border:1px solid var(--border);font-family:var(--font-mono);font-size:.68rem
    }
    .cve-references a,.back-link{display:inline-flex;align-items:center;min-height:44px}
}