/*
 * IBCSC public tools
 * Compact diagnostic studio: paper catalogue + sticky navy workbench.
 */

.page-tools {
    background: #06131d;
}

.tools-page {
    --tools-navy: #06131d;
    --tools-navy-deep: #020b12;
    --tools-navy-soft: #0a202d;
    --tools-cyan: #19b9e6;
    --tools-cyan-ink: #087fa4;
    --tools-paper: #f2f0e9;
    --tools-paper-alt: #e9e7df;
    --tools-paper-soft: #f8f6ef;
    --tools-ink: #112630;
    --tools-muted: #586b73;
    --tools-line: #c5c8c1;
    --tools-line-dark: rgba(151, 183, 195, .32);
    --tools-good: #18885e;
    --tools-warning: #b86d13;
    --tools-danger: #ba3e3e;
    --tools-focus: #8eea35;
    color: var(--tools-ink);
    background: var(--tools-paper);
    overflow: clip;
}

.tools-copy-proxy {
    position: fixed;
    inset: 0 auto auto -9999px;
    opacity: 0;
    pointer-events: none;
}

.tools-page *,
.tools-page *::before,
.tools-page *::after {
    box-sizing: border-box;
}

.tools-page button,
.tools-page input,
.tools-page select,
.tools-page textarea {
    border-radius: 0;
}

.tools-page button {
    touch-action: manipulation;
}

.tools-page :where(button, input, select, textarea, a):focus-visible {
    outline: 2px solid var(--tools-focus);
    outline-offset: 3px;
}

.tools-page .button {
    min-height: 46px;
    padding: 0 20px;
    gap: 14px;
    border: 1px solid var(--tools-cyan);
    border-radius: 0;
    color: #00131c;
    background: var(--tools-cyan);
    box-shadow: none;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: none;
}

.tools-page .button:hover {
    color: #fff;
    background: var(--tools-cyan-ink);
    border-color: var(--tools-cyan-ink);
    box-shadow: none;
    transform: none;
}

.tools-page .button:disabled {
    opacity: .46;
    cursor: not-allowed;
}

/* Compact hero */

.tools-hero {
    position: relative;
    color: #eef3f4;
    border-bottom: 1px solid var(--tools-line-dark);
    background: var(--tools-navy);
}

.tools-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    min-height: 338px;
    padding-block: 40px 34px;
}

.tools-hero-copy {
    max-width: 650px;
}

.tools-hero-copy .section-index {
    margin-bottom: 16px;
    color: var(--tools-cyan);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.tools-hero-copy h1 {
    max-width: 620px;
    margin: 0 0 18px;
    color: #f3f1ea;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(2.65rem, 3.7vw, 4rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.tools-hero-copy > p {
    max-width: 560px;
    margin: 0;
    color: #b7c4c9;
    font-size: .98rem;
    line-height: 1.6;
}

.tools-hero-copy .belgian-rule {
    width: 126px;
    margin-top: 22px;
}

.connection-panel {
    border: 1px solid rgba(25, 185, 230, .56);
    color: #edf2f3;
    background: var(--tools-navy-deep);
}

.connection-panel > header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    margin-inline: 20px;
    border-bottom: 1px solid var(--tools-line-dark);
}

.connection-target {
    display: grid;
    place-items: center;
    color: var(--tools-cyan);
}

.connection-target svg {
    width: 28px;
    height: 28px;
}

.connection-panel h2 {
    margin: 0;
    color: var(--tools-cyan);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.connection-panel dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding-inline: 20px;
}

.connection-panel dl > div {
    display: grid;
    grid-template-columns: minmax(105px, .78fr) minmax(0, 1.22fr);
    gap: 12px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(151, 183, 195, .22);
}

.connection-panel dl > div:nth-child(odd) {
    padding-right: 18px;
    border-right: 1px solid rgba(151, 183, 195, .22);
}

.connection-panel dl > div:nth-child(even) {
    padding-left: 18px;
}

.connection-panel dl > div:last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(105px, .39fr) minmax(0, .61fr);
    padding-right: 0;
    border-right: 0;
}

.connection-panel dt {
    color: #8fa4ad;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.connection-panel dd {
    min-width: 0;
    margin: 0;
    color: #f3f1ea;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.connection-disclosure {
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(151, 183, 195, .22);
    color: #8fa4ad;
    font-size: .68rem;
    line-height: 1.45;
}

.connection-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 50px;
    margin-inline: 20px;
}

.connection-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 0;
    color: var(--tools-cyan);
    background: transparent;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
}

.connection-actions button + button {
    border-left: 1px solid var(--tools-line-dark);
}

.connection-actions button:hover {
    color: #fff;
    background: var(--tools-navy-soft);
}

.connection-actions button:disabled {
    opacity: .42;
    cursor: wait;
}

.tools-hero-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--tools-line-dark);
    border-inline: 1px solid var(--tools-line-dark);
}

.tools-hero-summary p {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 12px 18px;
    border-right: 1px solid var(--tools-line-dark);
}

.tools-hero-summary p:last-child {
    border-right: 0;
}

.tools-hero-summary strong {
    color: var(--tools-cyan);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
}

.tools-hero-summary span {
    color: #8fa4ad;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Catalogue heading and command bar */

.tools-catalog-section {
    padding-block: 46px 58px;
    color: var(--tools-ink);
    background: var(--tools-paper);
}

.tools-catalog-head {
    display: grid;
    grid-template-columns: minmax(280px, .76fr) minmax(360px, 1.24fr);
    gap: clamp(30px, 5vw, 76px);
    align-items: end;
    margin-bottom: 30px;
}

.tools-catalog-head .section-index {
    margin-bottom: 10px;
    color: var(--tools-cyan-ink);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tools-catalog-head h2 {
    margin: 0;
    color: var(--tools-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(2.2rem, 3vw, 3.2rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.tools-catalog-head > p {
    max-width: 650px;
    margin: 0;
    color: var(--tools-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.tools-command-bar {
    position: sticky;
    top: var(--header-h, 88px);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    border: 1px solid var(--tools-line);
    background: var(--tools-paper-soft);
}

.tools-search {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding-inline: 15px;
    border-right: 1px solid var(--tools-line);
    color: var(--tools-cyan-ink);
}

.tools-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--tools-ink);
    background: transparent;
    font-size: .82rem;
}

.tools-search input::placeholder {
    color: #74858b;
}

.tools-search:focus-within {
    outline: 2px solid var(--tools-cyan-ink);
    outline-offset: -2px;
}

.tools-filter-row {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tools-line) transparent;
}

.tools-filter-row button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding-inline: 15px;
    border: 0;
    border-right: 1px solid var(--tools-line);
    color: #52666f;
    background: transparent;
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

.tools-filter-row button span {
    display: grid;
    place-items: center;
    min-width: 22px;
    min-height: 20px;
    padding-inline: 5px;
    border: 1px solid currentColor;
    color: inherit;
    font-size: .62rem;
    line-height: 1;
}

.tools-filter-row button:hover,
.tools-filter-row button.is-active {
    color: #fff;
    background: var(--tools-ink);
}

/* Two-column diagnostic studio */

.tools-studio-layout {
    display: grid;
    grid-template-columns: minmax(340px, .72fr) minmax(480px, 1.28fr);
    align-items: start;
    height: min(760px, calc(100dvh - var(--header-h, 88px) - 86px));
    min-height: 520px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--tools-line);
    background: var(--tools-paper-soft);
}

.tools-catalog-pane {
    height: 100%;
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid var(--tools-line);
    scrollbar-width: thin;
    scrollbar-color: var(--tools-line) var(--tools-paper-soft);
}

.tools-catalog-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.tool-tile {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 13px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    padding: 14px 15px;
    border: 0;
    border-bottom: 1px solid var(--tools-line);
    color: var(--tools-ink);
    text-align: left;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.tool-tile:last-child {
    border-bottom: 0;
}

.tool-tile[hidden] {
    display: none;
}

.tool-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
}

.tool-tile-featured::before {
    background: var(--tools-cyan);
}

.tool-tile:hover {
    color: var(--tools-ink);
    background: var(--tools-paper-alt);
}

.tool-tile[aria-pressed="true"] {
    color: #fff;
    background: var(--tools-ink);
}

.tool-tile[aria-pressed="true"]::before {
    background: var(--tools-cyan);
}

.tool-tile-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--tools-cyan-ink);
}

.tool-tile-icon svg {
    width: 30px;
    height: 30px;
}

.tool-tile[aria-pressed="true"] .tool-tile-icon {
    color: var(--tools-cyan);
}

.tool-tile-copy {
    display: grid;
    min-width: 0;
}

.tool-tile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.tool-tile-number {
    color: var(--tools-cyan-ink);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .11em;
}

.tool-tile-badge {
    padding: 2px 5px;
    border: 1px solid #9fb2b9;
    color: #536871;
    font-size: .52rem;
    font-weight: 750;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tool-tile[aria-pressed="true"] .tool-tile-number,
.tool-tile[aria-pressed="true"] .tool-tile-badge {
    color: var(--tools-cyan);
    border-color: rgba(25, 185, 230, .55);
}

.tool-tile strong {
    display: block;
    min-width: 0;
    color: inherit;
    font-size: .9rem;
    font-weight: 720;
    line-height: 1.25;
}

.tool-tile small {
    display: -webkit-box;
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    color: var(--tools-muted);
    font-size: .69rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tool-tile[aria-pressed="true"] small {
    color: #aebdc3;
}

.tool-tile-arrow {
    justify-self: end;
    color: var(--tools-cyan-ink);
    font-size: 1rem;
    transition: transform .16s ease;
}

.tool-tile:hover .tool-tile-arrow,
.tool-tile[aria-pressed="true"] .tool-tile-arrow {
    color: var(--tools-cyan);
    transform: translateX(2px);
}

.tools-empty {
    margin: 0;
    padding: 28px 18px;
    color: var(--tools-muted);
    text-align: center;
}

.tools-workbench-section {
    position: relative;
    top: auto;
    align-self: start;
    width: 100%;
    height: 100%;
    max-height: none;
    min-width: 0;
    overflow: auto;
    color: #edf2f3;
    background: var(--tools-navy);
    scrollbar-width: thin;
    scrollbar-color: #315060 var(--tools-navy-deep);
}

.tools-workbench-section:focus {
    outline: none;
}

.tools-workbench-section:focus-visible {
    outline: 2px solid var(--tools-focus);
    outline-offset: -2px;
}

.tools-workbench-section > header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--tools-line-dark);
}

.tools-workbench-section .section-index {
    margin-bottom: 8px;
    color: var(--tools-cyan);
    font-size: .61rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tools-workbench-section h2 {
    margin: 0;
    color: #f3f1ea;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.75rem, 2.4vw, 2.55rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.tools-workbench-section > header > p {
    max-width: 680px;
    margin: 10px 0 0;
    color: #aebdc3;
    font-size: .76rem;
    line-height: 1.5;
}

.workbench-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(151, 183, 195, .2);
}

.workbench-notes p {
    display: flex;
    gap: 7px;
    margin: 0;
    color: #8299a2;
    font-size: .61rem;
    line-height: 1.4;
}

.workbench-notes span {
    color: var(--tools-cyan);
}

.tools-workbench {
    min-width: 0;
    min-height: 340px;
    padding: 24px 28px 30px;
}

.workbench-idle {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 290px;
    color: rgba(25, 185, 230, .16);
}

.workbench-idle span {
    position: absolute;
    color: rgba(242, 244, 243, .16);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .78rem;
    letter-spacing: .28em;
}

.workbench-idle svg {
    width: 118px;
    height: 118px;
}

/* Forms */

.tool-form {
    display: grid;
    gap: 18px;
}

.tool-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.tool-form-grid.tool-form-grid-3 {
    grid-template-columns: minmax(0, 1fr) minmax(118px, .3fr) auto;
}

.tool-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tool-field > span,
.tool-options legend {
    color: #91a7b0;
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tool-field input,
.tool-field select,
.tool-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(151, 183, 195, .48);
    outline: 0;
    color: #f2f4f3;
    background: var(--tools-navy-deep);
    box-shadow: none;
}

.tool-field textarea {
    min-height: 112px;
    resize: vertical;
}

.tool-field input::placeholder,
.tool-field textarea::placeholder {
    color: #687f89;
}

.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
    border-color: var(--tools-cyan);
    outline: 1px solid var(--tools-cyan);
    outline-offset: -2px;
}

.tool-form .button {
    align-self: end;
    white-space: nowrap;
}

.tool-options {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin: 0;
    padding: 0;
    border: 0;
}

.tool-options legend {
    width: 100%;
    margin-bottom: 2px;
}

.tool-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c6d1d5;
    font-size: .73rem;
}

.tool-options input {
    accent-color: var(--tools-cyan);
}

/* Existing result primitives */

.tool-result {
    min-width: 0;
    min-height: 120px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--tools-line-dark);
}

.tool-result[hidden] {
    display: none;
}

.tool-result-title {
    margin-bottom: 12px;
    color: var(--tools-cyan);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tool-result pre {
    max-height: 330px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--tools-line-dark);
    color: #cce2e9;
    background: var(--tools-navy-deep);
    font: .72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.result-list {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--tools-line-dark);
}

.result-list > div {
    display: grid;
    grid-template-columns: minmax(130px, .38fr) minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(151, 183, 195, .22);
}

.result-list dt {
    color: #8fa5ae;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.result-list dd {
    min-width: 0;
    margin: 0;
    color: #e7edef;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.result-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 14px;
    padding: 7px 10px;
    border: 1px solid rgba(151, 183, 195, .42);
    color: #c6d2d6;
    background: transparent;
    font-size: .68rem;
    font-weight: 700;
}

.result-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.result-status.is-good {
    border-color: rgba(81, 205, 145, .58);
    color: #80d9ad;
}

.result-status.is-bad {
    border-color: rgba(245, 130, 105, .62);
    color: #f59a83;
}

.result-status.is-warning {
    border-color: rgba(237, 177, 77, .62);
    color: #edb14d;
}

.tool-result-link {
    display: inline-flex;
    margin-top: 14px;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: var(--cyan-deep);
    font-size: .76rem;
    font-weight: 700;
}

.tool-result-link:hover { color: #075d7d; }

.password-output {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid rgba(25, 185, 230, .5);
}

.password-output code {
    min-width: 0;
    padding: 13px;
    color: #f2f4f3;
    font: .84rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.password-output button {
    min-width: 94px;
    border: 0;
    border-left: 1px solid rgba(25, 185, 230, .5);
    color: var(--tools-cyan);
    background: transparent;
    cursor: pointer;
}

.password-output button:hover {
    color: #fff;
    background: var(--tools-navy-soft);
}

.strength-meter {
    height: 6px;
    margin: 12px 0;
    background: rgba(151, 183, 195, .2);
}

.strength-meter span {
    display: block;
    width: calc(var(--meter, 0) * 1%);
    height: 100%;
    background: var(--tools-cyan);
    transition: width .2s ease;
}

.meter-0 { --meter: 0; }
.meter-5 { --meter: 5; }
.meter-10 { --meter: 10; }
.meter-15 { --meter: 15; }
.meter-20 { --meter: 20; }
.meter-25 { --meter: 25; }
.meter-30 { --meter: 30; }
.meter-35 { --meter: 35; }
.meter-40 { --meter: 40; }
.meter-45 { --meter: 45; }
.meter-50 { --meter: 50; }
.meter-55 { --meter: 55; }
.meter-60 { --meter: 60; }
.meter-65 { --meter: 65; }
.meter-70 { --meter: 70; }
.meter-75 { --meter: 75; }
.meter-80 { --meter: 80; }
.meter-85 { --meter: 85; }
.meter-90 { --meter: 90; }
.meter-95 { --meter: 95; }
.meter-100 { --meter: 100; }

/* Rich result components */

.tool-assessment {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
    padding: 18px 0;
    border-block: 1px solid var(--tools-line-dark);
}

.tool-assessment.is-text-only {
    grid-template-columns: 1fr;
}

.tool-assessment-copy {
    min-width: 0;
}

.tool-assessment-copy h3 {
    margin: 0 0 6px;
    color: #f3f1ea;
    font-size: 1rem;
    line-height: 1.25;
}

.tool-assessment-copy p {
    margin: 0;
    color: #a8b8be;
    font-size: .74rem;
    line-height: 1.5;
}

.tool-score-ring {
    --score-color: var(--tools-cyan);
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--tools-navy) 76%, transparent 77% 100%),
        conic-gradient(var(--score-color) calc(var(--meter, 0) * 1%), rgba(151, 183, 195, .2) 0);
}

.tool-score-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(151, 183, 195, .22);
    border-radius: 50%;
    pointer-events: none;
}

.tool-score-ring strong {
    position: relative;
    z-index: 1;
    color: #f3f1ea;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: .9;
}

.tool-score-ring span {
    position: relative;
    z-index: 1;
    margin-top: -18px;
    color: #8fa5ae;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tool-score-ring.is-good {
    --score-color: #51cd91;
}

.tool-score-ring.is-warning {
    --score-color: #edb14d;
}

.tool-score-ring.is-bad {
    --score-color: #f58269;
}

.tool-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 20px;
    border-top: 1px solid var(--tools-line-dark);
    border-left: 1px solid var(--tools-line-dark);
}

.tool-check,
.tool-check-grid > article,
.tool-check-grid > div,
.tool-check-grid > li {
    position: relative;
    min-width: 0;
    min-height: 76px;
    padding: 12px 13px 12px 32px;
    border-right: 1px solid var(--tools-line-dark);
    border-bottom: 1px solid var(--tools-line-dark);
    list-style: none;
}

.tool-check::before,
.tool-check-grid > article::before,
.tool-check-grid > div::before,
.tool-check-grid > li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 13px;
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: #8fa5ae;
}

.tool-check.is-good::before,
.tool-check-grid > .is-good::before {
    color: #51cd91;
    background: #51cd91;
}

.tool-check.is-warning::before,
.tool-check-grid > .is-warning::before {
    color: #edb14d;
    background: #edb14d;
}

.tool-check.is-bad::before,
.tool-check-grid > .is-bad::before {
    color: #f58269;
    background: #f58269;
}

.tool-check h3,
.tool-check strong,
.tool-check-grid > * > strong {
    display: block;
    margin: 0 0 4px;
    color: #eaf0f1;
    font-size: .76rem;
    line-height: 1.3;
}

.tool-check p,
.tool-check small,
.tool-check-grid > * > small {
    display: block;
    margin: 0;
    color: #8fa5ae;
    font-size: .64rem;
    line-height: 1.4;
}

.tool-record-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.tool-record-group,
.tool-record-groups > section,
.tool-record-groups > article {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--tools-line-dark);
    background: var(--tools-navy-deep);
}

.tool-record-group h3,
.tool-record-groups > * > h3 {
    margin: 0 0 9px;
    color: var(--tools-cyan);
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tool-record-group ul,
.tool-record-groups > * > ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-record-group li,
.tool-record-groups > * > ul > li {
    min-width: 0;
    color: #cbd7db;
    font: .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.tool-route {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tools-line-dark);
}

.tool-route-step,
.tool-route > li,
.tool-route > article,
.tool-route > div {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--tools-line-dark);
}

.tool-route-step::before,
.tool-route > li::before,
.tool-route > article::before,
.tool-route > div::before {
    content: "";
    display: grid;
    place-items: center;
    width: 8px;
    height: 8px;
    margin: 5px 0 0 8px;
    border: 2px solid var(--tools-cyan);
    border-radius: 50%;
}

.tool-route strong {
    color: #e9eff0;
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.tool-route small {
    color: #8fa5ae;
    font-size: .62rem;
    white-space: nowrap;
}

.tool-cookie-table {
    width: 100%;
    margin-bottom: 20px;
    overflow-x: auto;
    border: 1px solid var(--tools-line-dark);
}

.tool-cookie-table table,
table.tool-cookie-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: #dce5e8;
    font-size: .67rem;
}

.tool-cookie-table th,
.tool-cookie-table td {
    padding: 9px 10px;
    border-right: 1px solid rgba(151, 183, 195, .2);
    border-bottom: 1px solid rgba(151, 183, 195, .2);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.tool-cookie-table th {
    color: var(--tools-cyan);
    background: var(--tools-navy-deep);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tool-cookie-table tr:last-child td {
    border-bottom: 0;
}

.tool-cookie-table th:last-child,
.tool-cookie-table td:last-child {
    border-right: 0;
}

.tool-social-card {
    display: grid;
    grid-template-columns: minmax(132px, .42fr) minmax(0, 1fr);
    min-width: 0;
    margin-bottom: 20px;
    border: 1px solid var(--tools-line-dark);
    background: var(--tools-navy-deep);
}

.tool-social-card img,
.tool-social-card-visual {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 120px;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid var(--tools-line-dark);
    color: rgba(25, 185, 230, .66);
    background: var(--tools-navy-soft);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.tool-social-card-copy {
    min-width: 0;
    padding: 14px;
}

.tool-social-card-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #e9eff0;
    font-size: .84rem;
    line-height: 1.3;
}

.tool-social-card-copy p {
    margin: 0 0 8px;
    color: #a0b1b7;
    font-size: .68rem;
    line-height: 1.45;
}

.tool-social-card-copy small {
    display: block;
    color: var(--tools-cyan);
    font-size: .61rem;
    overflow-wrap: anywhere;
}

.tool-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--tools-line-dark);
}

.tool-result-actions button,
.tool-result-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding-inline: 13px;
    border: 1px solid rgba(25, 185, 230, .48);
    color: var(--tools-cyan);
    background: transparent;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.tool-result-actions button:hover,
.tool-result-actions a:hover {
    color: #00131c;
    background: var(--tools-cyan);
}

/* Loading skeletons */

.tool-loading,
.tool-loading-skeleton,
.loading-skeleton {
    display: grid;
    gap: 9px;
    padding-block: 4px;
}

.tool-loading::before,
.tool-loading::after,
.tool-loading-skeleton::before,
.tool-loading-skeleton::after,
.loading-skeleton::before,
.loading-skeleton::after,
.tool-skeleton-line {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    background: rgba(151, 183, 195, .2);
    animation: tools-skeleton-pulse 1.15s ease-in-out infinite alternate;
}

.tool-loading::before,
.tool-loading-skeleton::before,
.loading-skeleton::before {
    width: 42%;
    height: 18px;
}

.tool-loading::after,
.tool-loading-skeleton::after,
.loading-skeleton::after {
    width: 78%;
}

.tool-skeleton-line:nth-child(2n) {
    width: 84%;
}

.tool-skeleton-line:nth-child(3n) {
    width: 58%;
}

[aria-busy="true"] .workbench-idle {
    opacity: .34;
}

@keyframes tools-skeleton-pulse {
    from { opacity: .34; }
    to { opacity: .92; }
}

/* Advanced diagnostic hand-off */

.tools-advanced {
    color: #eef3f4;
    border-top: 1px solid var(--tools-line-dark);
    background: var(--tools-navy-deep);
}

.tools-advanced > .container {
    display: grid;
    grid-template-columns: 42px minmax(260px, .72fr) minmax(420px, 1.28fr);
    gap: 20px;
    align-items: center;
    min-height: 148px;
    padding-block: 24px;
}

.advanced-target {
    color: var(--tools-cyan);
}

.advanced-target svg {
    width: 36px;
    height: 36px;
}

.tools-advanced h2 {
    margin: 0 0 5px;
    color: #f3f1ea;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.tools-advanced p {
    max-width: 540px;
    margin: 0;
    color: #9eafb6;
    font-size: .72rem;
    line-height: 1.45;
}

.tools-advanced-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.tools-advanced-form input {
    width: 100%;
    min-height: 46px;
    padding-inline: 13px;
    border: 1px solid rgba(25, 185, 230, .5);
    outline: 0;
    color: #fff;
    background: var(--tools-navy);
}

.tools-advanced-form input:focus {
    border-color: var(--tools-cyan);
    outline: 1px solid var(--tools-cyan);
    outline-offset: -2px;
}

/* Responsive studio */

@media (max-width: 1180px) {
    .tools-hero-grid {
        grid-template-columns: minmax(0, .78fr) minmax(440px, 1.22fr);
        gap: 34px;
    }

    .tools-studio-layout {
        grid-template-columns: minmax(320px, .78fr) minmax(440px, 1.22fr);
    }

    .tools-workbench-section > header,
    .tools-workbench {
        padding-inline: 22px;
    }

    .tool-check-grid,
    .tool-record-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .tools-hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 34px 28px;
    }

    .tools-hero-copy {
        max-width: 760px;
    }

    .connection-panel {
        max-width: none;
    }

    .tools-catalog-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tools-command-bar {
        grid-template-columns: 1fr;
    }

    .tools-search {
        border-right: 0;
        border-bottom: 1px solid var(--tools-line);
    }

    .tools-studio-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tools-catalog-pane {
        order: 2;
        width: 100%;
        height: auto;
        overflow: visible;
        border-top: 1px solid var(--tools-line);
        border-right: 0;
    }

    .tools-workbench-section {
        position: relative;
        top: auto;
        order: 1;
        width: 100%;
        max-height: none;
    }

    .tools-studio-layout:has(.workbench-idle) .tools-workbench-section {
        display: none;
    }

    .tools-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-tile:nth-child(odd) {
        border-right: 1px solid var(--tools-line);
    }

    .tools-advanced > .container {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tools-advanced-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .tools-hero-grid {
        padding-block: 28px 22px;
    }

    .tools-hero-copy h1 {
        font-size: clamp(2.45rem, 12vw, 3.35rem);
    }

    .tools-hero-copy > p {
        font-size: .88rem;
    }

    .connection-panel dl {
        grid-template-columns: 1fr;
    }

    .connection-panel dl > div,
    .connection-panel dl > div:last-child {
        grid-column: auto;
        grid-template-columns: minmax(108px, .82fr) minmax(0, 1.18fr);
        padding-inline: 0;
        border-right: 0;
    }

    .tools-hero-summary {
        grid-template-columns: 1fr 1fr;
    }

    .tools-hero-summary p:nth-child(2) {
        border-right: 0;
    }

    .tools-hero-summary p:nth-child(-n + 2) {
        border-bottom: 1px solid var(--tools-line-dark);
    }

    .tools-catalog-section {
        padding-block: 34px 42px;
    }

    .tools-catalog-head {
        margin-bottom: 22px;
    }

    .tools-catalog-head h2 {
        font-size: 2.35rem;
    }

    .tools-command-bar {
        position: relative;
        top: auto;
    }

    .tools-filter-row button {
        min-height: 46px;
        padding-inline: 12px;
    }

    .tools-catalog-grid {
        grid-template-columns: 1fr;
    }

    .tool-tile {
        min-height: 84px;
        padding-block: 12px;
    }

    .tool-tile:nth-child(odd) {
        border-right: 0;
    }

    .tools-workbench-section > header {
        padding: 20px 18px 17px;
    }

    .tools-workbench {
        min-height: 300px;
        padding: 20px 18px 24px;
    }

    .workbench-notes {
        display: grid;
    }

    .tool-form-grid,
    .tool-form-grid.tool-form-grid-3 {
        grid-template-columns: 1fr;
    }

    .tool-form .button {
        width: 100%;
    }

    .result-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .password-output {
        grid-template-columns: 1fr;
    }

    .password-output button {
        min-height: 42px;
        border-top: 1px solid rgba(25, 185, 230, .5);
        border-left: 0;
    }

    .tool-assessment {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 14px;
    }

    .tool-score-ring {
        width: 76px;
    }

    .tool-score-ring strong {
        font-size: 1.28rem;
    }

    .tool-score-ring span {
        margin-top: -14px;
        font-size: .46rem;
    }

    .tool-check-grid,
    .tool-record-groups {
        grid-template-columns: 1fr;
    }

    .tool-social-card {
        grid-template-columns: 1fr;
    }

    .tool-social-card img,
    .tool-social-card-visual {
        max-height: 180px;
        border-right: 0;
        border-bottom: 1px solid var(--tools-line-dark);
    }

    .tool-result-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tools-advanced > .container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .advanced-target {
        display: none;
    }

    .tools-advanced-form {
        grid-template-columns: 1fr;
    }

    .tools-advanced-form .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tools-page *,
    .tools-page *::before,
    .tools-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .tool-loading::before,
    .tool-loading::after,
    .tool-loading-skeleton::before,
    .tool-loading-skeleton::after,
    .loading-skeleton::before,
    .loading-skeleton::after,
    .tool-skeleton-line {
        opacity: .72;
        animation: none;
    }
}