/* Hreflang Validator — tool-specific styles (loaded on this tool only). */
.hv { position: relative; }
.hv [hidden] { display: none !important; }
.hv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ti-border);
}
.hv-privacy { margin: 0; color: var(--ti-muted-color); font-weight: var(--ti-fw-semi); }
.hv-privacy::before { content: "\1F512\00A0"; }
.hv-panel {
  padding: 20px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background: var(--ti-white);
}

/* ---------- Input ---------- */
.hv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 2px dashed var(--ti-border-strong);
  border-radius: var(--ti-radius-lg);
  background: var(--ti-bg);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hv-drop.is-over { border-color: var(--ti-primary); background: var(--ti-primary-tint); }
.hv-drop__title { margin: 0; font-size: 20px; font-weight: var(--ti-fw-bold); }
.hv-drop__text { max-width: 700px; margin: 0 0 10px; color: var(--ti-muted-color); }
.hv-file-btn { position: relative; cursor: pointer; }
.hv-file-btn:focus-within { box-shadow: var(--ti-focus); }
.hv-paste { margin-top: 14px; }
.hv-paste > summary { display: inline-block; padding: 6px 0; font-weight: var(--ti-fw-semi); color: var(--ti-primary); cursor: pointer; }
.hv-paste > summary:focus-visible { outline: none; box-shadow: var(--ti-focus); border-radius: 4px; }
.hv-paste__body { padding-top: 8px; }
.hv-paste__body .ti-actions { margin-top: 10px; }
.hv-paste textarea { min-height: 150px; }
#hv-status:not(:empty) { margin-top: 14px; }
.hv-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.hv-files li { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border: 1px solid var(--ti-border); border-radius: 999px; background: var(--ti-bg); overflow-wrap: anywhere; }
.hv-x {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--ti-font);
  font-size: 22px;
  line-height: 1;
  color: #B91C1C;
  cursor: pointer;
}
.hv-x:hover { background: rgba(220, 38, 38, 0.08); }
.hv-x:focus-visible { outline: none; box-shadow: var(--ti-focus); }

.hv-sec {
  margin-top: 14px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background: var(--ti-white);
}
.hv-sec > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--ti-radius-lg); }
.hv-sec > summary::-webkit-details-marker { display: none; }
.hv-sec > summary::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--ti-primary); border-bottom: 2px solid var(--ti-primary); transform: rotate(-45deg); transition: transform 0.15s ease; }
.hv-sec[open] > summary::before { transform: rotate(45deg); }
.hv-sec > summary:hover { background: var(--ti-bg); }
.hv-sec > summary:focus-visible { outline: none; box-shadow: var(--ti-focus); }
.hv-sec__title { flex: 1; margin: 0; font-size: 18px; font-weight: var(--ti-fw-bold); }
.hv-sec__tag { padding: 2px 10px; border-radius: 999px; background: var(--ti-bg); color: var(--ti-muted-color); font-weight: var(--ti-fw-semi); }
.hv-sec__body { padding: 4px 18px 18px; }
.hv-panel .ti-app-panel__title { margin-bottom: 14px; }
.hv-pageurl { margin-top: 10px; }
.hv-sec .ti-check { margin-bottom: 6px; }

/* Results */
.hv-results { margin-top: 24px; }
.hv-results:focus { outline: none; }
.hv-results__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.hv-results__title { margin: 0; font-size: 24px; }
.hv-results__meta { flex: 1 1 360px; margin: 0; color: var(--ti-muted-color); text-align: right; }
.hv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.hv-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: 100%; padding: 12px 14px;
  border: 1px solid var(--ti-border); border-radius: var(--ti-radius-md); background: var(--ti-white);
  font-family: var(--ti-font); font-size: 16px; color: var(--ti-text-color); text-align: left; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
button.hv-kpi:hover { border-color: var(--ti-primary); }
.hv-kpi:focus-visible { outline: none; box-shadow: var(--ti-focus); }
.hv-kpi[aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-tint); box-shadow: inset 0 0 0 1px var(--ti-primary); }
.hv-kpi--static { background: var(--ti-bg); cursor: default; }
.hv-kpi__n { font-size: 26px; font-weight: var(--ti-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hv-kpi__l { color: var(--ti-muted-color); font-weight: var(--ti-fw-semi); }
.hv-kpi--error .hv-kpi__n { color: #B91C1C; }
.hv-kpi--warning .hv-kpi__n { color: #92400E; }
.hv-tabs { flex-wrap: wrap; margin-bottom: 14px; }
.hv-tab-n { color: var(--ti-muted-color); font-weight: var(--ti-fw-regular); }
.hv-view { padding: 18px; border: 1px solid var(--ti-border); border-radius: var(--ti-radius-lg); background: var(--ti-white); }
.hv-split { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.hv-types { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hv-type {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--ti-border); border-radius: var(--ti-radius-md); background: var(--ti-white);
  font-family: var(--ti-font); font-size: 16px; color: var(--ti-text-color); text-align: left; cursor: pointer;
}
.hv-type:hover { border-color: var(--ti-primary); }
.hv-type:focus-visible { outline: none; box-shadow: var(--ti-focus); }
.hv-type[aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-tint); box-shadow: inset 0 0 0 1px var(--ti-primary); }
.hv-type__t { font-weight: var(--ti-fw-semi); }
.hv-type__n { font-weight: var(--ti-fw-bold); font-variant-numeric: tabular-nums; }
.hv-none { padding: 14px; border: 1px dashed var(--ti-border-strong); border-radius: var(--ti-radius-md); color: var(--ti-muted-color); }
.hv-sev { display: inline-flex; padding: 0 8px; border-radius: 10px; font-weight: var(--ti-fw-semi); line-height: 1.5; white-space: nowrap; }
.hv-sev--error { background: #FEE2E2; color: #7F1D1D; }
.hv-sev--warning { background: #FEF3C7; color: #78350F; }
.hv-sev--notice { background: #E0E7FF; color: #312E81; }
.hv-detail { min-width: 0; }
.hv-h3 { margin: 0 0 8px; font-size: 20px; }
.hv-why, .hv-intro { margin: 0 0 8px; color: var(--ti-muted-color); }
.hv-how { margin: 0 0 12px; }
.hv-detail__actions { margin-top: 12px; }
.hv-empty { margin: 0; padding: 16px; border: 1px dashed var(--ti-border-strong); border-radius: var(--ti-radius-md); color: var(--ti-muted-color); }
.hv-muted { color: var(--ti-muted-color); font-weight: var(--ti-fw-regular); }
.hv-bad { color: #B91C1C; font-weight: var(--ti-fw-bold); }
.hv-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; margin-bottom: 4px; }
.hv-filters .ti-field { flex: 1 1 240px; }
.hv-count { margin: 0 0 10px; color: var(--ti-muted-color); }
.hv-count:empty { display: none; }
.hv-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--ti-border); border-radius: var(--ti-radius-md); }
.hv-table-wrap:empty { display: none; }
.hv-table-wrap:focus-visible { outline: none; box-shadow: var(--ti-focus); }
.hv-table { width: 100%; border-collapse: collapse; }
.hv-table th, .hv-table td { padding: 10px 12px; border-bottom: 1px solid var(--ti-border); text-align: left; vertical-align: top; }
.hv-table thead th { background: var(--ti-bg); font-weight: var(--ti-fw-semi); white-space: nowrap; }
.hv-table tbody th { font-weight: normal; min-width: 220px; }
.hv-table tbody tr:last-child th, .hv-table tbody tr:last-child td { border-bottom: 0; }
.hv-table .hv-num { text-align: right; font-variant-numeric: tabular-nums; }
.hv-table code { font-size: 16px; }
.hv-url { overflow-wrap: anywhere; word-break: break-word; }
.hv-link { display: block; margin: 0 0 4px; padding: 0; border: 0; background: none; font-family: var(--ti-font); font-size: 16px; color: var(--ti-primary); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hv-link:hover { color: var(--ti-text-color); }
.hv-link:focus-visible { outline: none; box-shadow: var(--ti-focus); border-radius: 4px; }
.hv-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.hv-pager:empty { display: none; }
.hv-pager__pos { color: var(--ti-muted-color); font-variant-numeric: tabular-nums; }

/* Coverage */
.hv-cover { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 22px; margin: 0 0 20px; padding: 0; list-style: none; }
.hv-cover li { display: grid; grid-template-columns: minmax(0, 1fr) 90px; align-items: center; gap: 2px 10px; }
.hv-cover__c { min-width: 0; overflow-wrap: anywhere; }
.hv-cover__c code { font-size: 16px; font-weight: var(--ti-fw-semi); }
.hv-cover__bar { display: block; height: 8px; border-radius: 4px; background: #E2E8F0; overflow: hidden; }
.hv-cover__bar span { display: block; height: 100%; border-radius: 4px; background: #2A78D6; }
.hv-cover__n { grid-column: 1 / -1; color: var(--ti-muted-color); }
.hv-matrix { max-height: 560px; overflow: auto; }
.hv-table--matrix th.hv-c, .hv-table--matrix td.hv-c { text-align: center; white-space: nowrap; }
.hv-table--matrix tbody th { min-width: 260px; }
.hv-yes { color: #166534; font-weight: var(--ti-fw-bold); }
.hv-no { color: #94A3B8; }

/* Fixed tags */
.hv-fixbar { display: flex; flex-wrap: wrap; gap: 0 14px; }
.hv-fixbar .ti-field { flex: 1 1 360px; }
.hv-note { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--ti-radius-md); background: #FFFBEB; color: #78350F; overflow-wrap: anywhere; }
.hv-label { margin: 6px 0 6px; font-weight: var(--ti-fw-semi); }
.hv-code { white-space: pre; }
.hv-code:focus-visible { outline: none; box-shadow: var(--ti-focus); }
.hv-fix-actions { margin-top: 10px; }

/* Export */
.hv-export { margin-top: 18px; padding: 18px; border: 1px solid var(--ti-border); border-radius: var(--ti-radius-lg); background: var(--ti-bg); }
.hv-export__title { margin: 0 0 12px; font-size: 18px; }
.hv-export .ti-help { margin: 10px 0 0; }

@media (max-width: 1100px) {
  .hv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hv-split { grid-template-columns: minmax(0, 1fr); }
  .hv-results__meta { text-align: left; }
  .hv-table-wrap:not(.hv-matrix) { overflow: visible; border: 0; }
  .hv-table-wrap:not(.hv-matrix) .hv-table, .hv-table-wrap:not(.hv-matrix) .hv-table tbody, .hv-table-wrap:not(.hv-matrix) .hv-table tr { display: block; }
  .hv-table-wrap:not(.hv-matrix) .hv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hv-table-wrap:not(.hv-matrix) .hv-table tr { margin-bottom: 12px; border: 1px solid var(--ti-border); border-radius: var(--ti-radius-md); }
  .hv-table-wrap:not(.hv-matrix) .hv-table th, .hv-table-wrap:not(.hv-matrix) .hv-table td { display: block; text-align: left; }
  .hv-table-wrap:not(.hv-matrix) .hv-table tbody th { min-width: 0; }
  .hv-table-wrap:not(.hv-matrix) .hv-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ti-muted-color); font-weight: var(--ti-fw-semi); }
  .hv-table-wrap:not(.hv-matrix) .hv-table tbody tr td:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .hv-panel, .hv-view, .hv-export { padding: 16px; }
  .hv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-export .ti-actions .ti-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-drop, .hv-sec > summary::before, .hv-kpi { transition: none; }
}