/* ════════════════════════════════════════════════════
   GK YARD TOOLS — tools.css
   Shared styles for all tool pages
════════════════════════════════════════════════════ */

/* ── TOOL PAGE WRAPPER ───────────────────────────── */
.tool-page { max-width: 860px; margin: 0 auto; padding: 40px 24px 60px; }

/* ── TOOL HEADER ─────────────────────────────────── */
.tool-header { margin-bottom: 32px; }
.tool-header .breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tool-header .breadcrumb a { color: var(--muted); transition: color var(--transition); }
.tool-header .breadcrumb a:hover { color: var(--accent); }
.tool-header .breadcrumb i { font-size: 9px; }
.tool-icon-wrap {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.tool-header h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 900; color: var(--text); margin-bottom: 10px; line-height: 1.2;
}
.tool-header p { font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 600px; }

/* ── TOOL CARD ───────────────────────────────────── */
.tool-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}
.tool-card-title {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700; color: var(--text);
    margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.tool-card-title i { color: var(--accent); }

/* ── TOOL INPUTS ─────────────────────────────────── */
.tool-input-group { margin-bottom: 16px; }
.tool-input-group label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text2); margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px;
}
.tool-input-group label i { color: var(--accent); font-size: 12px; }
.tool-input {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 15px; font-family: var(--font-body);
    background: var(--surface); color: var(--text);
    outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.tool-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,51,41,0.1); }
.tool-textarea {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 15px; font-family: var(--font-body);
    background: var(--surface); color: var(--text);
    outline: none; transition: border-color var(--transition), box-shadow var(--transition);
    resize: vertical; min-height: 160px; line-height: 1.6;
}
.tool-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,51,41,0.1); }
.tool-select {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: var(--font-body);
    background: var(--surface); color: var(--text);
    outline: none; cursor: pointer;
    transition: border-color var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.tool-select:focus { border-color: var(--accent); }

/* ── INPUT GRID ──────────────────────────────────── */
.tool-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.tool-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; }

/* ── BUTTONS ─────────────────────────────────────── */
.tool-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    padding: 12px 24px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    border: none; transition: all var(--transition);
    font-family: var(--font-body);
}
.tool-btn:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(230,51,41,0.3); }
.tool-btn:active { transform: translateY(0); }
.tool-btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; color: var(--text2);
    padding: 12px 24px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--border); transition: all var(--transition);
    font-family: var(--font-body);
}
.tool-btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.tool-btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface2); color: var(--text2);
    padding: 8px 14px; border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); transition: all var(--transition);
    font-family: var(--font-body);
}
.tool-btn-sm:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tool-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0px; }

/* ── RESULTS ─────────────────────────────────────── */
.tool-result {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    margin-top: 0px;
}
.tool-result-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
    display: flex; align-items: center; gap: 6px;
}
.tool-result-title i { color: var(--accent); }
.tool-result-value {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900; color: var(--accent);
    line-height: 1.1; margin-bottom: 6px;
}
.tool-result-value.mono {
    font-family: var(--font-mono);
    font-size: clamp(18px, 2.5vw, 26px);
    letter-spacing: 0.04em;
}
.tool-result-sub { font-size: 13px; color: var(--muted); }

/* ── STATS GRID ──────────────────────────────────── */
.tool-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.tool-stat-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
    text-align: center;
}
.tool-stat-box .stat-n {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 900; color: var(--accent);
    line-height: 1; margin-bottom: 5px;
}
.tool-stat-box .stat-l { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ── COLOR SWATCH ────────────────────────────────── */
.color-swatch {
    width: 100%; height: 120px; border-radius: 10px;
    margin-bottom: 16px; border: 1px solid var(--border);
    transition: background 0.3s ease;
    position: relative; overflow: hidden;
}
.color-swatch::after {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23ccc' opacity='0.2'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23ccc' opacity='0.2'/%3E%3C/svg%3E") repeat;
    z-index: -1;
}

/* ── COPY FIELD ──────────────────────────────────── */
.copy-field {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 8px; padding: 4px 4px 4px 14px;
    margin-bottom: 10px;
}
.copy-field input {
    flex: 1; border: none; outline: none; background: none;
    font-family: var(--font-mono); font-size: 14px; color: var(--text);
    padding: 8px 0;
}
.copy-field-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 32px; }

/* ── RANGE SLIDER ────────────────────────────────── */
.tool-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--border); outline: none; }
.tool-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 2px 8px rgba(230,51,41,0.4); }
.tool-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
.range-val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent); }

/* ── TYPING TEST ─────────────────────────────────── */
.typing-text-display {
    background: var(--surface2); border-radius: 10px; padding: 24px;
    font-size: 14px; line-height: 1.8; letter-spacing: 0.02em;
    border: 1.5px solid var(--border); margin-bottom: 16px;
    min-height: 100px; position: relative;
    max-height: 302px; overflow-y: auto;
}
.typing-char { transition: color 0.05s; }
.typing-char.correct { color: var(--accent2); }
.typing-char.incorrect { color: var(--accent); background: rgba(230,51,41,0.1); border-radius: 2px; }
.typing-char.cursor { border-left: 2px solid var(--accent); animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { border-color: var(--accent); } 50% { border-color: transparent; } }
.typing-timer-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.typing-timer-fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 2px; transition: width 1s linear; }

/* ── PASSWORD STRENGTH ───────────────────────────── */
.strength-bar { display: flex; gap: 4px; margin-top: 10px; }
.strength-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.3s; }
.strength-label { font-size: 12px; font-weight: 600; margin-top: 6px; }

/* ── RELATED TOOLS ───────────────────────────────── */
.related-tools { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--text); }
.related-tools h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.related-tools h3 i { color: var(--accent); }
.related-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-tool-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 18px;
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--text);
    transition: all var(--transition);
}
.related-tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-tool-card:hover .rtc-name { color: var(--accent); }
.rtc-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rtc-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; transition: color var(--transition); }
.rtc-desc { font-size: 11px; color: var(--muted); }

/* ── OVERFLOW & BASE PROTECTION ──────────────────── */
/* Prevents any tool page from causing horizontal scroll */
.tool-page { overflow-x: hidden; }
.tool-page * { box-sizing: border-box; }

/* Inline grid containers used across tool pages */
/* Collapses all hardcoded 2-col and 3-col inline grids on mobile */
.tool-page [style*="grid-template-columns:1fr 1fr"],
.tool-page [style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
}
.tool-page [style*="grid-template-columns:1fr 1fr"] > *,
.tool-page [style*="grid-template-columns: 1fr 1fr"] > * {
    margin-bottom: 12px;
    min-width: 0;
}

/* Prevent mono/hash/long strings from breaking layout */
.tool-page [style*="font-mono"],
.tool-page [style*="font-family:var(--font-mono)"],
.tool-page code,
.tool-page pre,
.tool-result-value.mono { overflow-wrap: break-word; word-break: break-all; max-width: 100%; }

/* Prevent button rows from overflowing */
.tool-btn-row { flex-wrap: wrap; }
.tool-card > div[style*="display:flex"] { flex-wrap: wrap; }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
    .tool-page { padding: 20px 16px 40px; }
    .tool-card { padding: 18px 16px; }
    .tool-card-title { font-size: 15px; }

    /* Named utility grids */
    .tool-grid-2 { grid-template-columns: 1fr; }
    .tool-grid-3 { grid-template-columns: 1fr 1fr; }
    .tool-stats  { grid-template-columns: repeat(2, 1fr); }
    .related-tools-grid { grid-template-columns: 1fr 1fr; }

    /* ── Per-tool inline grid collapses ── */

    /* QR Code, SIP, URL Encoder, Hash Generator — all use grid-template-columns:1fr 1fr for two-panel layouts */
    .tool-page > div[style*="grid-template-columns:1fr 1fr"],
    .tool-page > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Color Converter: 3-col and 4-col result grids */
    .tool-page div[style*="grid-template-columns:repeat(3,1fr)"],
    .tool-page div[style*="grid-template-columns:repeat(4,1fr)"],
    .tool-page div[style*="grid-template-columns: repeat(3, 1fr)"],
    .tool-page div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* IP Lookup result grids (auto-fill) — already responsive, just ensure min-width */
    .tool-page div[style*="auto-fill"] { min-width: 0; }

    /* Reading Time — 4-col stat grid to 2-col */
    .tool-page div[style*="repeat(4,1fr)"],
    .tool-page div[style*="repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* GST calculator 3-col */
    .tool-page div[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Password generator checkbox grid */
    .tool-page div[style*="grid-template-columns:1fr 1fr 1fr"],
    .tool-page div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Buttons: full-width stacking */
    .tool-btn, .tool-btn-outline {
        justify-content: center;
    }
    /* Exception: small inline button pairs meant to sit next to inputs */
    .tool-card > .tool-input-group > div > .tool-btn,
    .tool-card > .tool-input-group > div > .tool-btn-outline,
    div[style*="display:flex"] > .tool-btn,
    div[style*="display:flex"] > .tool-btn-outline { width: auto; }

    /* Flex rows inside tool cards: wrap */
    .tool-card div[style*="display:flex;"] { flex-wrap: wrap; }
    .tool-card div[style*="display:flex; "] { flex-wrap: wrap; }

    /* Regex tester flag buttons — keep compact */
    #flagBtns { gap: 3px; }
    #flagBtns button { width: 26px; height: 26px; font-size: 12px; }

    /* QR preview centering */
    #qrPreview img, #qrPreview canvas { max-width: 100% !important; height: auto !important; }

    /* SIP canvas */
    #sipChart { width: 120px !important; height: 120px !important; }

    /* Markdown preview: side-by-side editor to stacked */
    .md-split { grid-template-columns: 1fr !important; }

    /* Color swatch full width */
    .color-swatch { height: 80px; }

    /* Table overflow handling */
    .tool-card table { display: table; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

    /* Word counter stats */
    .tool-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .tool-page { padding: 16px 14px 32px; }
    .tool-card { padding: 14px 12px; }

    .tool-grid-3 { grid-template-columns: 1fr; }
    .related-tools-grid { grid-template-columns: 1fr; }
    .tool-stats { grid-template-columns: 1fr 1fr; }

    /* All 2-col grids to single column on small phones */
    .tool-page div[style*="grid-template-columns:1fr 1fr"],
    .tool-page div[style*="grid-template-columns: 1fr 1fr"],
    .tool-page div[style*="1fr 1fr 1fr"],
    .tool-page div[style*="repeat(4,1fr)"],
    .tool-page div[style*="repeat(3,1fr)"],
    .tool-page div[style*="repeat(4, 1fr)"],
    .tool-page div[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .tool-input { font-size: 14px; padding: 10px 12px; }
    .tool-btn, .tool-btn-outline { padding: 10px 16px; font-size: 13px; }
    .tool-result-value { font-size: clamp(22px, 6vw, 32px); }
    .tool-header h1 { font-size: clamp(22px, 5.5vw, 28px); }

    /* IP lookup result sections: always single column */
    #locationGrid, #networkGrid, #securityGrid {
        grid-template-columns: 1fr !important;
    }

    /* Hash output: smaller mono font */
    #hashGrid div[id^="hash-"] { font-size: 11px; }
}