/* combined-site-tool: converted from /CombinedTool.html 2026-11-03. Every rule is fenced inside .tool-app. */
.tool-app *{margin: 0;
            padding: 0;
            box-sizing: border-box;}
.tool-app{font-family: inherit;
            background: transparent;
            
            padding: 20px;}
.tool-app .container{background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 40px;
            max-width: 1400px;
            margin: 0 auto;}
.tool-app .tool-title{color: var(--navy);
            margin-bottom: 10px;
            font-size: 32px;
            text-align: center;}
.tool-app .subtitle{color: var(--navy-76);
            margin-bottom: 30px;
            font-size: 14px;
            text-align: center;}
.tool-app .form-section{background: #f8f9fa;
            padding: 30px;
            border-radius: 8px;
            margin-bottom: 30px;}
.tool-app .form-group{margin-bottom: 20px;}
.tool-app label{display: block;
            margin-bottom: 8px;
            color: var(--navy);
            font-weight: bold;}
.tool-app input[type="text"]{width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;}
.tool-app input[type="text"]:focus{outline: none;
            border-color: var(--orange);}
.tool-app .device-selector{display: flex;
            gap: 10px;
            margin-bottom: 20px;}
.tool-app .device-btn{flex: 1;
            padding: 12px;
            background: white;
            border: 2px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;}
.tool-app .device-btn.active{background: var(--orange);
            color: white;
            border-color: var(--orange);}
.tool-app .device-btn:hover{transform: translateY(-2px);}
.tool-app button[type="submit"]{width: 100%;
            padding: 16px;
            background: var(--orange);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;}
.tool-app button[type="submit"]:hover{transform: translateY(-2px);}
.tool-app button[type="submit"]:disabled{opacity: 0.6;
            cursor: not-allowed;
            transform: none;}
.tool-app .loading{text-align: center;
            color: var(--orange);
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            display: none;}
.tool-app .loading.show{display: block;}
.tool-app .loading-spinner{border: 4px solid #f3f3f3;
            border-top: 4px solid var(--orange);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;}
@keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
.tool-app .error{background: #fee;
            color: #c33;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            display: none;}
.tool-app .error.show{display: block;}
.tool-app .results-container{margin-top: 30px;
            display: none;}
.tool-app .results-container.show{display: block;}
.tool-app .results-grid{display: grid;
            grid-template-columns: 400px 1fr;
            gap: 30px;
            margin-top: 20px;}
@media (max-width: 1200px){.tool-app .results-grid{grid-template-columns: 1fr;}}
.tool-app .left-column{display: flex;
            flex-direction: column;
            gap: 30px;}
.tool-app .info-section{background: #f8f9fa;
            border-radius: 10px;
            padding: 30px;}
.tool-app .section-header{font-size: 24px;
            color: var(--navy);
            margin-bottom: 20px;
            font-weight: bold;
            border-bottom: 3px solid var(--orange);
            padding-bottom: 10px;}
.tool-app .result-item{margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;}
.tool-app .result-item:last-child{margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;}
.tool-app .result-label{font-weight: bold;
            color: var(--orange);
            margin-bottom: 5px;
            font-size: 14px;}
.tool-app .result-value{color: var(--navy);
            font-size: 16px;}
.tool-app .age-highlight{font-size: 28px;
            color: var(--navy);
            font-weight: bold;}
.tool-app .moz-metrics-grid{display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;}
.tool-app .moz-metric-card{background: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            border-left: 4px solid var(--orange);}
.tool-app .moz-metric-label{font-size: 11px;
            color: var(--navy-76);
            margin-bottom: 10px;
            font-weight: bold;
            text-transform: uppercase;}
.tool-app .moz-metric-value{font-size: 32px;
            color: var(--navy);
            font-weight: bold;}
.tool-app .moz-metric-value.good{color: #0cce6b;}
.tool-app .moz-metric-value.average{color: #ffa400;}
.tool-app .moz-metric-value.poor{color: #ff4e42;}
.tool-app .pagespeed-section{background: #f8f9fa;
            border-radius: 10px;
            padding: 30px;}
.tool-app .score-card{background: white;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;}
.tool-app .score-circle{width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
            color: white;}
.tool-app .score-circle.good{background: linear-gradient(135deg, #0cce6b 0%, #08a552 100%);}
.tool-app .score-circle.average{background: linear-gradient(135deg, #ffa400 0%, #ff8c00 100%);}
.tool-app .score-circle.poor{background: linear-gradient(135deg, #ff4e42 0%, #d32f2f 100%);}
.tool-app .score-label{font-size: 18px;
            color: var(--navy-76);
            font-weight: bold;}
.tool-app .metrics-grid{display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;}
.tool-app .metric-card{background: white;
            border-radius: 8px;
            padding: 15px;
            border-left: 4px solid var(--orange);}
.tool-app .metric-title{font-size: 12px;
            color: var(--navy-76);
            margin-bottom: 8px;
            font-weight: bold;}
.tool-app .metric-value{font-size: 20px;
            color: var(--navy);
            font-weight: bold;
            margin-bottom: 5px;}
.tool-app .metric-rating{display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;}
.tool-app .metric-rating.good{background: #e8f5e9;
            color: #2e7d32;}
.tool-app .metric-rating.needs-improvement{background: #fff3e0;
            color: #f57c00;}
.tool-app .metric-rating.poor{background: #ffebee;
            color: #c62828;}
.tool-app .section-title{font-size: 18px;
            color: var(--navy);
            margin-bottom: 15px;
            margin-top: 20px;
            font-weight: bold;}
.tool-app .opportunities{background: white;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;}
.tool-app .opportunity-item{padding: 10px 0;
            border-bottom: 1px solid #ddd;}
.tool-app .opportunity-item:last-child{border-bottom: none;}
.tool-app .opportunity-title{font-weight: bold;
            color: var(--navy);
            margin-bottom: 5px;}
.tool-app .opportunity-description{font-size: 13px;
            color: var(--navy-76);}
.tool-app .url-display{background: white;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            word-break: break-all;}
.tool-app .url-label{font-size: 12px;
            color: var(--navy-76);
            margin-bottom: 5px;}
.tool-app .url-value{font-size: 16px;
            color: var(--navy);
            font-weight: bold;}
.tool-app .note{background: #fff3cd;
            border: 1px solid #ffc107;
            padding: 12px;
            border-radius: 5px;
            margin-top: 15px;
            font-size: 12px;
            color: #856404;}
/* Clickable metric cards and their diagnostics panel (2026-11-03) */
.tool-app button.metric-card{display:block;width:100%;font:inherit;color:inherit;text-align:left;border:0;border-left:4px solid var(--orange);cursor:pointer;transition:box-shadow .15s,transform .15s}
.tool-app button.metric-card:hover{box-shadow:0 4px 14px rgba(17,5,87,.12);transform:translateY(-1px)}
.tool-app button.metric-card:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.tool-app button.metric-card[aria-expanded="true"]{box-shadow:0 0 0 2px var(--navy)}
.tool-app .metric-more{display:block;margin-top:10px;font-size:12px;font-weight:bold;color:var(--orange)}
.tool-app .metrics-grid:has(+ .diag-panel:not([hidden])){margin-bottom:15px}
.tool-app .diag-panel{background:white;border-radius:8px;padding:20px;margin-bottom:30px;border-top:4px solid var(--navy);font-size:14px;line-height:1.55;color:var(--navy)}
.tool-app .diag-panel[hidden]{display:none}
.tool-app .diag-title{font-size:18px;margin:0 0 8px;color:var(--navy)}
.tool-app .diag-what{margin:0 0 12px;color:var(--navy-76)}
.tool-app .diag-lead{margin:0 0 10px;font-weight:bold}
.tool-app .diag-ok{margin:0;color:#1b7a3a;font-weight:bold}
.tool-app .diag-item{border:1px solid #e3e1ee;border-radius:6px;margin-bottom:8px;background:#fff}
.tool-app .diag-item summary{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;font-weight:bold;list-style-position:inside}
.tool-app .diag-item[open] summary{border-bottom:1px solid #e3e1ee}
.tool-app .diag-name{flex:1 1 200px}
.tool-app .diag-save{font-size:12px;color:var(--orange);white-space:nowrap}
.tool-app .diag-body{padding:12px 14px;min-width:0}
.tool-app .diag-body p{margin:0 0 10px;font-size:13px}
.tool-app .diag-body a{color:var(--orange)}
.tool-app .diag-body code{background:#f3f2f8;padding:1px 4px;border-radius:3px;font-size:12px;word-break:break-word}
.tool-app .diag-fix{background:#fff4ec;border-left:3px solid var(--orange);padding:8px 10px;border-radius:0 4px 4px 0}
.tool-app .diag-table{overflow-x:auto;max-width:100%}
.tool-app .diag-table table{border-collapse:collapse;width:100%;font-size:12px}
.tool-app .diag-table th,.tool-app .diag-table td{text-align:left;padding:5px 8px;border-bottom:1px solid #eee;vertical-align:top}
.tool-app .diag-table th{color:var(--navy-76);font-weight:bold;white-space:nowrap}
.tool-app .diag-url{word-break:break-all}
.tool-app .diag-more{color:var(--navy-76);font-size:12px}
.tool-app .diag-check{list-style:none;margin:0 0 10px;padding:0;font-size:13px}
.tool-app .diag-check li{padding:2px 0}
.tool-app .diag-check .ok{color:#1b7a3a}
.tool-app .diag-check .bad{color:#c62828;font-weight:bold}
.tool-app .diag-cta{margin:14px 0 0;font-weight:bold}
.tool-app .diag-cta a{color:var(--orange)}
.tool-app .opportunities .diag-item{margin-bottom:8px}
/* "Save report as PDF" beside the analysed address */
.tool-app .url-display{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tool-app button.pdf-btn{flex:0 0 auto;background:var(--orange);color:#fff;border:0;border-radius:6px;padding:10px 18px;font:600 15px var(--font,inherit);cursor:pointer}
.tool-app button.pdf-btn:hover{filter:brightness(.95)}
.tool-app button.pdf-btn:disabled{opacity:.6;cursor:wait}