/* ===== rulers tools — shared UI (used by all /tools/ pages) ===== */

.tool-hero {
    position:relative;
    padding:140px 32px 40px;
    max-width:var(--max);
    margin:0 auto;
}
.tool-hero .t-eyebrow { margin-bottom:20px; }
.tool-hero h1 {
    font-family:'Druk', sans-serif;
    font-size:clamp(2.4rem, 7vw, 6rem);
    font-weight:900;
    line-height:.95;
    letter-spacing:.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 28px;
    max-width:1030px;
}
.tool-hero .lede {
    font-family:'Monoela', monospace;
    font-size:clamp(1rem, 1.4vw, 1.2rem);
    font-weight:300;
    line-height:1.6;
    opacity:.88;
    max-width:720px;
}

.tool-shell {
    max-width:960px;
    margin:30px auto 0;
    padding:0 32px 80px;
}

/* Input panel */
.tool-panel {
    background:#FFFFFF;
    border-radius:22px;
    padding:34px 34px 30px;
    box-shadow:0 12px 50px rgba(2,34,208,0.07);
}
.tool-panel .panel-label {
    font-family:'Monoela', monospace;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.72;
    margin-bottom:14px;
}
.tool-row { display:flex; gap:12px; flex-wrap:wrap; }
.tool-row input[type="url"],
.tool-row input[type="text"],
.tool-panel input[type="text"],
.tool-panel input[type="url"],
.tool-panel select,
.tool-panel textarea {
    flex:1 1 320px;
    background:var(--bg);
    border:1.5px solid rgba(2,34,208,0.25);
    border-radius:12px;
    padding:14px 16px;
    font-family:'Monoela', monospace;
    font-size:1rem;
    color:var(--ink);
    outline:none;
    transition:border-color .2s;
    min-width:0;
}
.tool-panel textarea { width:100%; min-height:140px; resize:vertical; }
.tool-panel input:focus, .tool-panel textarea:focus, .tool-panel select:focus { border-color:var(--ink); }
.tool-row .btn { white-space:nowrap; }
.tool-hint {
    font-family:'Monoela', monospace;
    font-size:.78rem;
    line-height:1.5;
    opacity:.72;
    margin-top:12px;
}
.tool-hint a { color:var(--ink); }

/* Field grid for builder tools */
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:6px; }
.tool-grid .full { grid-column:1 / -1; }
.tool-grid label {
    display:block;
    font-family:'Monoela', monospace;
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.72;
    margin-bottom:7px;
}

/* Status / progress */
.tool-status {
    font-family:'Monoela', monospace;
    font-size:.85rem;
    margin-top:16px;
    min-height:1.4em;
}
.tool-status.err { color:#B3231A; }

/* Score header */
.score-wrap {
    display:flex;
    align-items:center;
    gap:26px;
    margin:34px 0 8px;
    flex-wrap:wrap;
}
.score-ring {
    width:118px; height:118px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Druk', sans-serif;
    font-size:2.4rem;
    font-weight:900;
    color:var(--ink);
    background:conic-gradient(var(--neo) calc(var(--pct,0)*1%), rgba(2,34,208,.08) 0);
    position:relative;
}
.score-ring::before {
    content:'';
    position:absolute; inset:10px;
    border-radius:50%;
    background:var(--bg);
}
.score-ring span { position:relative; }
.score-meta { font-family:'Monoela', monospace; }
.score-meta .big {
    font-family:'Druk', sans-serif;
    font-size:1.5rem;
    font-weight:800;
    text-transform:uppercase;
    line-height:1.05;
}
.score-meta .sub { font-size:.85rem; opacity:.72; margin-top:6px; }

/* Findings */
.findings { margin-top:22px; display:grid; gap:10px; }
.finding {
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#FFFFFF;
    border-radius:14px;
    padding:15px 18px;
    box-shadow:0 6px 24px rgba(2,34,208,0.05);
    font-family:'Monoela', monospace;
    font-size:.92rem;
    line-height:1.5;
}
.finding .dot {
    flex-shrink:0;
    width:13px; height:13px;
    border-radius:50%;
    margin-top:4px;
}
.finding.ok .dot   { background:#2E9E44; }
.finding.warn .dot { background:#E7A917; }
.finding.bad .dot  { background:#D6402F; }
.finding .f-title { font-weight:700; }
.finding .f-tip { opacity:.72; font-size:.85rem; margin-top:3px; }
.finding code {
    background:rgba(2,34,208,.07);
    border-radius:5px;
    padding:1px 6px;
    font-size:.83em;
    word-break:break-all;
}

/* Category headline inside results */
.cat-head {
    font-family:'Druk', sans-serif;
    font-size:1.25rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.01em;
    margin:30px 0 12px;
    display:flex;
    align-items:baseline;
    gap:12px;
}
.cat-head .pts {
    font-family:'Monoela', monospace;
    font-size:.8rem;
    font-weight:500;
    opacity:.72;
}

/* Output code block (builders) */
.code-out {
    margin-top:22px;
    background:var(--ink);
    color:#DFE6FF;
    border-radius:16px;
    padding:22px 24px;
    font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size:.85rem;
    line-height:1.55;
    overflow-x:auto;
    white-space:pre;
}
.copy-row { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.copy-ok {
    font-family:'Monoela', monospace;
    font-size:.8rem;
    color:#2E9E44;
    opacity:0;
    transition:opacity .3s;
}
.copy-ok.show { opacity:1; }

/* SEO text section under tool */
.tool-text {
    max-width:760px;
    margin:50px auto 0;
    font-family:'Monoela', monospace;
}
.tool-text h2 {
    font-family:'Druk', sans-serif;
    font-size:clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.005em;
    margin:36px 0 14px;
}
.tool-text p { font-size:1rem; line-height:1.7; margin-bottom:1.1em; }
.tool-text a { color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.tool-text ul { font-size:.98rem; line-height:1.65; padding-left:1.3em; margin-bottom:1.2em; }
.tool-text li { margin-bottom:.45em; }

@media (max-width:900px) {
    .tool-hero { padding:110px 22px 26px; }
    .tool-shell { padding:0 22px 60px; }
    .tool-panel { padding:24px 20px; }
    .tool-grid { grid-template-columns:1fr; }
}