@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/TDC_Lt.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/TDC_LtIt.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/TDC_Rg.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/TDC_It.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/TDC_Bd.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/TDC_BdIt.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/TDC_Blk.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "TDC";
    font-style: italic;
    font-weight: 900;
    src: url("../fonts/TDC_BlkIt.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --color-brand-blue: #0000bf;
    --color-brand-navy: #141428;
    --color-brand-ink: #1a1a1a;
    --color-brand-cloud: #f1f2f4;
    --color-brand-warm: #e1e1d0;
    --color-brand-lavender: #969bff;
    --color-brand-mint: #54d3ba;
    --color-bg: #f7f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #eef0f5;
    --color-border: #dde1ea;
    --color-text: #1a1a1a;
    --color-text-muted: #616575;
    --color-input-bg: #f7f8fb;
    --color-input-text: #1a1a1a;
    --color-input-placeholder: #6a7080;
    --color-disabled-bg: #e4e7ef;
    --color-disabled-text: #596072;
    --color-sidebar: #ffffff;
    --color-sidebar-active: #ededff;
    --color-shadow: rgba(20, 20, 40, 0.1);
    --font-family-base: "TDC", "Aptos", "Segoe UI", Arial, sans-serif;
    --sidebar-width: 18rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --transition-fast: 160ms ease;
    --transition-base: 220ms ease;
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #20205a;
    --color-surface: #27276a;
    --color-surface-muted: #34347c;
    --color-border: rgba(150, 155, 255, 0.32);
    --color-text: #ffffff;
    --color-text-muted: #d7d9ff;
    --color-input-bg: #34347c;
    --color-input-text: #ffffff;
    --color-input-placeholder: #e3e5ff;
    --color-disabled-bg: #34347c;
    --color-disabled-text: #e3e5ff;
    --color-sidebar: #1b1b4f;
    --color-sidebar-active: rgba(150, 155, 255, 0.22);
    --color-shadow: rgba(4, 4, 38, 0.24);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at top right, rgba(150, 155, 255, 0.22), transparent 28rem),
        linear-gradient(160deg, color-mix(in srgb, var(--color-brand-blue) 18%, transparent), transparent 34rem),
        var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

button,
label[for],
select,
summary,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
[role="button"],
[data-sidebar-toggle],
[data-sidebar-close],
[data-nav-section-button],
[data-theme-toggle] {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

.app-shell__layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell__main {
    min-width: 0;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    border-right: 1px solid var(--color-border);
    background: var(--color-sidebar);
    box-shadow: 0.75rem 0 2.5rem var(--color-shadow);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5.5rem;
    padding: var(--space-5) var(--space-6);
}

.sidebar__logo-link {
    display: inline-flex;
    align-items: center;
}

.sidebar__logo {
    display: block;
    width: 9.5rem;
    height: auto;
}

.sidebar__logo--dark,
[data-theme="dark"] .sidebar__logo--light {
    display: none;
}

[data-theme="dark"] .sidebar__logo--dark {
    display: block;
}

.sidebar__close {
    display: none;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}

.sidebar__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    padding: 0 var(--space-4) var(--space-6);
}

.sidebar__section {
    border-radius: var(--radius-md);
}

.sidebar__section-button {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar__section-button:hover,
.sidebar__section--open .sidebar__section-button {
    background: var(--color-sidebar-active);
    color: var(--color-brand-blue);
}

[data-theme="dark"] .sidebar__section-button:hover,
[data-theme="dark"] .sidebar__section--open .sidebar__section-button {
    color: var(--color-brand-lavender);
}

.sidebar__section-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
}

.sidebar__icon {
    width: 1.2rem;
    height: 1.2rem;
}

.sidebar__section-label {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__chevron {
    font-size: 1rem;
    transform: rotate(-90deg);
    transition: transform var(--transition-base);
}

.sidebar__section--open .sidebar__chevron {
    transform: rotate(0deg);
}

.sidebar__items {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    padding-left: 2.75rem;
    transition: max-height var(--transition-base);
}

.sidebar__section--open .sidebar__items {
    max-height: 16rem;
}

.sidebar__item {
    border-left: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 650;
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.sidebar__item:hover,
.sidebar__item--active {
    border-color: var(--color-brand-blue);
    color: var(--color-brand-blue);
}

[data-theme="dark"] .sidebar__item:hover,
[data-theme="dark"] .sidebar__item--active {
    border-color: var(--color-brand-mint);
    color: var(--color-brand-mint);
}

.sidebar-backdrop {
    display: none;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5.5rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 86%, transparent);
    backdrop-filter: blur(1rem);
    gap: var(--space-4);
    padding: 0 var(--space-8);
}

.topbar__menu-button {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    place-items: center;
}

.topbar__menu-line {
    display: block;
    width: 1.15rem;
    height: 0.125rem;
    background: currentColor;
}

.topbar__title-group {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.topbar__kicker {
    color: var(--color-brand-blue);
    font-size: 0.95rem;
    font-weight: 850;
    white-space: nowrap;
}

.topbar__kicker::after {
    content: "/";
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

[data-theme="dark"] .topbar__kicker {
    color: var(--color-brand-mint);
}

.topbar__title {
    overflow: hidden;
    font-size: 1.15rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
}

.theme-toggle__track {
    position: relative;
    width: 2.6rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--color-brand-cloud);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.theme-toggle__thumb {
    position: absolute;
    top: 0.175rem;
    left: 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--color-brand-blue);
    transition: transform var(--transition-base), background var(--transition-base);
}

[data-theme="dark"] .theme-toggle__track {
    background: var(--color-brand-navy);
}

[data-theme="dark"] .theme-toggle__thumb {
    background: var(--color-brand-mint);
    transform: translateX(1.2rem);
}

.theme-toggle__label {
    font-size: 0.9rem;
    font-weight: 750;
}

.content-area {
    width: 100%;
    min-height: calc(100vh - 5.5rem);
    margin: 0;
    padding: clamp(2.25rem, 4vw, 4rem);
}

.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-brand-blue) 9%, transparent), transparent 44%),
        var(--color-surface);
    box-shadow: 0 1.5rem 3rem var(--color-shadow);
}

.page-hero__content {
    padding: clamp(2rem, 5vw, 4.5rem);
}

.page-hero__eyebrow,
.section-block__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-blue);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

[data-theme="dark"] .page-hero__eyebrow,
[data-theme="dark"] .section-block__eyebrow {
    color: var(--color-brand-mint);
}

.page-hero__title {
    max-width: 48rem;
    margin: 0;
    font-size: clamp(2rem, 4vw, 4.2rem);
    letter-spacing: 0;
    line-height: 1.03;
}

.page-hero__text {
    max-width: 44rem;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.page-hero__panel {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    min-height: 22rem;
}

.page-hero__swatch--blue {
    background: var(--color-brand-blue);
}

.page-hero__swatch--navy {
    background: var(--color-brand-navy);
}

.page-hero__swatch--mint {
    background: var(--color-brand-mint);
}

.page-hero__swatch--lavender {
    background: var(--color-brand-lavender);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.metric-card {
    min-height: 9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-5);
}

.metric-card--blue {
    border-top: 0.35rem solid var(--color-brand-blue);
}

.metric-card--mint {
    border-top: 0.35rem solid var(--color-brand-mint);
}

.metric-card--lavender {
    border-top: 0.35rem solid var(--color-brand-lavender);
}

.metric-card__label {
    color: var(--color-text-muted);
    font-weight: 700;
}

.metric-card__value {
    display: block;
    margin-top: var(--space-3);
    font-size: 2.4rem;
    line-height: 1;
}

.section-block {
    margin-top: 0;
}

.section-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section-block__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 800;
    padding: 0 var(--space-5);
}

.button:disabled {
    cursor: not-allowed;
    border-color: var(--color-border);
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    opacity: 1;
}

.button--primary {
    background: var(--color-brand-blue);
    color: #ffffff;
}

[data-theme="dark"] .button--primary {
    background: var(--color-brand-mint);
    color: var(--color-brand-navy);
}

.button--secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-brand-blue);
}

[data-theme="dark"] .button--secondary {
    color: var(--color-brand-mint);
}

.button--compact {
    min-height: 2.25rem;
    padding: 0 var(--space-3);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.tool-card,
.placeholder-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 1rem 2rem var(--color-shadow);
}

.tool-card {
    min-height: 13rem;
    padding: var(--space-5);
}

.tool-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.tool-card__area,
.tool-card__status,
.status-pill {
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    padding: var(--space-1) var(--space-3);
}

.tool-card__status,
.status-pill--ready {
    background: color-mix(in srgb, var(--color-brand-mint) 18%, var(--color-surface));
    color: color-mix(in srgb, var(--color-brand-navy) 80%, var(--color-brand-mint));
}

[data-theme="dark"] .tool-card__status,
[data-theme="dark"] .status-pill--ready {
    color: var(--color-brand-mint);
}

.tool-card__title {
    margin: var(--space-5) 0 var(--space-2);
    font-size: 1.25rem;
}

.tool-card__text,
.placeholder-panel__text {
    margin: 0;
    color: var(--color-text-muted);
}

.placeholder-panel {
    padding: clamp(2rem, 5vw, 4rem);
}

.placeholder-panel__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.error-helper__layout {
    display: grid;
    grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
    gap: var(--space-5);
    height: calc(100vh - 5.5rem - (clamp(2.25rem, 4vw, 4rem) * 2));
    min-height: 34rem;
    overflow: hidden;
    width: 100%;
}

.error-helper__panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 1rem 2rem var(--color-shadow);
}

.error-helper__controls {
    overflow: auto;
    padding: var(--space-5);
}

.error-helper__section {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.error-helper__section + .error-helper__section {
    padding-top: var(--space-6);
}

.error-helper__section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.error-helper__section-header,
.error-helper__toolbar,
.error-helper__result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.error-helper__section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 850;
}

.error-helper__badge {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-mint) 18%, var(--color-surface));
    color: color-mix(in srgb, var(--color-brand-navy) 78%, var(--color-brand-mint));
    font-size: 0.78rem;
    font-weight: 850;
    padding: var(--space-1) var(--space-3);
}

[data-theme="dark"] .error-helper__badge {
    color: var(--color-brand-mint);
}

.error-helper__field {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.error-helper__label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 750;
}

.error-helper__input {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-input-text);
    padding: var(--space-2) var(--space-3);
}

.error-helper__input::placeholder {
    color: var(--color-input-placeholder);
    opacity: 1;
}

.error-helper__input:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}

.error-helper__input option {
    background: var(--color-input-bg);
    color: var(--color-input-text);
}

.error-helper__input:focus {
    border-color: var(--color-brand-blue);
    outline: 3px solid color-mix(in srgb, var(--color-brand-blue) 18%, transparent);
}

[data-theme="dark"] .error-helper__input:focus {
    border-color: var(--color-brand-mint);
    outline-color: color-mix(in srgb, var(--color-brand-mint) 22%, transparent);
}

.error-helper__input--single-line {
    height: 2.75rem;
    min-height: 2.75rem;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
}

.error-helper__hint {
    color: var(--color-text-muted);
    font-size: 0.84rem;
}

.error-helper__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.error-helper__results {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.error-helper__toolbar {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
}

.error-helper__result-actions {
    justify-content: flex-end;
}

.error-helper__wrap-toggle {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 750;
    gap: var(--space-2);
    white-space: nowrap;
}

.error-helper__wrap-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand-blue);
}

[data-theme="dark"] .error-helper__wrap-toggle input {
    accent-color: var(--color-brand-mint);
}

.error-helper__table-wrap {
    min-height: 0;
    overflow: auto;
    padding: var(--space-5);
    background: var(--color-bg);
}

.error-helper__table-wrap--hidden,
.error-helper__raw-box--hidden {
    display: none;
}

.error-helper__table-title {
    margin-bottom: var(--space-3);
    font-weight: 900;
}

.error-helper__table-title--error {
    color: #b42318;
}

[data-theme="dark"] .error-helper__table-title--error {
    color: #ffb4ad;
}

.error-helper__table {
    width: 100%;
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 0.92rem;
    overflow: hidden;
}

.error-helper__table th,
.error-helper__table td {
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.error-helper__table tr:last-child th,
.error-helper__table tr:last-child td {
    border-bottom: 0;
}

.error-helper__table th {
    width: 12rem;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-weight: 850;
}

.error-helper__table thead th {
    width: auto;
    color: var(--color-brand-blue);
}

[data-theme="dark"] .error-helper__table thead th {
    color: var(--color-brand-mint);
}

.error-helper__table--nested {
    margin: calc(var(--space-1) * -1) 0;
    font-size: 0.86rem;
}

.error-helper__muted-cell {
    color: var(--color-text-muted);
    font-style: italic;
}

.error-helper__raw-box {
    margin: 0;
    min-height: 0;
    overflow: auto;
    background: #10172f;
    color: #e7ebff;
    font: 0.86rem/1.55 "Cascadia Mono", Consolas, "Courier New", monospace;
    overflow-wrap: anywhere;
    padding: var(--space-5);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .error-helper__raw-box {
    background: #111140;
}

.error-helper__raw-box--nowrap {
    overflow-wrap: normal;
    white-space: pre;
    word-break: normal;
}

.error-helper__empty {
    color: #aeb8d8;
}

.error-helper__result-heading,
.error-helper__raw-heading {
    color: #93f2d8;
    font-weight: 850;
}

.error-helper__result-heading--error {
    color: #fca5a5;
}

@media (max-width: 64rem) {
    .app-shell__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-105%);
        transition: transform var(--transition-base);
    }

    [data-sidebar-open="true"] .sidebar {
        transform: translateX(0);
    }

    .sidebar__close,
    .topbar__menu-button {
        display: inline-grid;
    }

    .topbar__menu-button {
        gap: 0.22rem;
    }

    [data-sidebar-open="true"] .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 25;
        display: block;
        background: rgba(20, 20, 40, 0.45);
    }

    .topbar {
        padding: 0 var(--space-4);
    }

    .content-area {
        padding: var(--space-5);
    }

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

    .page-hero__panel {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        min-height: 5rem;
    }

    .metric-grid,
    .tool-grid,
    .error-helper__layout {
        grid-template-columns: 1fr;
    }

    .error-helper__layout {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
}

@media (max-width: 36rem) {
    .theme-toggle__label {
        display: none;
    }

    .topbar__title {
        max-width: 10rem;
    }

    .section-block__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .error-helper__toolbar,
    .error-helper__result-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}