/* Case Converter — isolated editorial workbench. */

.cc-page {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

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

.cc-page :where(p, li, dd) {
    line-height: 1.65;
}

.cc-page code,
.cc-page kbd {
    padding: 0.08em 0.3em;
    border: 1px solid var(--color-border-strong, #0b1020);
    color: var(--color-primary, #0b1020);
    background: var(--bg-surface, #fffef9);
    font-family: var(--font-mono, monospace);
    font-size: 0.87em;
    overflow-wrap: anywhere;
}

.cc-kicker,
.cc-panel-number,
.cc-card-number {
    margin: 0 0 9px;
    color: var(--color-text-muted, #586077);
    font-family: var(--font-mono, monospace);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cc-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    align-items: end;
    gap: clamp(28px, 6vw, 90px);
    margin-bottom: clamp(26px, 4vw, 48px);
    padding-bottom: clamp(22px, 3vw, 36px);
    border-bottom: 3px solid var(--color-border-strong, #0b1020);
}

.cc-masthead h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--color-primary, #0b1020);
    font-size: clamp(3.8rem, 7.2vw, 7rem);
    line-height: 0.84;
    letter-spacing: -0.078em;
}

.cc-deck {
    max-width: 50ch;
    margin: 0;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
}

.cc-workbench {
    margin-bottom: clamp(62px, 10vw, 130px);
    border: 2px solid var(--color-border-strong, #0b1020);
    background: var(--bg-surface, #fffef9);
    box-shadow: 10px 10px 0 var(--color-border-strong, #0b1020);
}

.cc-workbench__bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(20px, 3vw, 34px);
    border-bottom: 2px solid #0b1020;
    color: #ffffff;
    background: var(--color-accent, #1748ff);
}

.cc-workbench__bar .cc-kicker {
    color: #ffffff;
}

.cc-workbench__bar h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.8rem);
}

.cc-local-badge {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 11px;
    border: 1.5px solid #0b1020;
    color: #0b1020;
    background: var(--signal, #e9ff32);
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cc-mode-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--color-border-strong, #0b1020);
}

.cc-mode-picker label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.cc-mode-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cc-mode-picker span {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    padding: 13px 16px;
    border-right: 1.5px solid var(--color-border-strong, #0b1020);
    color: var(--color-primary, #0b1020);
    background: var(--bg-surface, #fffef9);
}

.cc-mode-picker label:last-child span {
    border-right: 0;
}

.cc-mode-picker strong,
.cc-mode-picker small {
    display: block;
}

.cc-mode-picker strong {
    font-size: 0.9rem;
}

.cc-mode-picker small {
    margin-top: 3px;
    color: var(--color-text-muted, #586077);
    font-size: 0.68rem;
}

.cc-mode-picker input:checked + span {
    color: #0b1020;
    background: var(--signal, #e9ff32);
}

.cc-mode-picker input:checked + span small {
    color: #293000;
}

.cc-mode-picker input:focus-visible + span {
    outline: 3px solid var(--color-accent, #1748ff);
    outline-offset: -5px;
}

.cc-mode-help {
    margin: 0;
    padding: 11px 18px;
    border-bottom: 1.5px solid var(--color-border-strong, #0b1020);
    color: var(--color-text-secondary, #394158);
    background: var(--paper-blue, #dce4ff);
    font-size: 0.76rem;
}

.cc-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-editor {
    min-width: 0;
    padding: clamp(20px, 3vw, 34px);
}

.cc-editor--input {
    border-right: 2px solid var(--color-border-strong, #0b1020);
}

.cc-editor--output {
    background: color-mix(in srgb, var(--paper-blue, #dce4ff) 45%, var(--bg-surface, #fffef9));
}

.cc-editor__heading {
    display: flex;
    min-height: 62px;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.cc-editor__heading h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
}

.cc-text-button {
    min-height: 44px;
    padding: 7px 10px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    color: var(--color-primary, #0b1020);
    background: var(--bg-surface, #fffef9);
    font-family: var(--font-mono, monospace);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.cc-text-button:hover {
    color: #0b1020;
    background: var(--signal, #e9ff32);
}

.cc-active-mode {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    color: #ffffff;
    background: var(--color-accent, #1748ff);
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.cc-editor textarea {
    display: block;
    width: 100%;
    min-height: 310px;
    resize: vertical;
    padding: 15px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    border-radius: 0;
    outline: 0;
    color: var(--color-primary, #0b1020);
    background: var(--input-bg, #fffef9);
    box-shadow: none;
    font: 1rem/1.6 var(--font-body, sans-serif);
}

.cc-editor textarea[readonly] {
    background: var(--bg-surface, #fffef9);
}

.cc-editor textarea:focus-visible,
.cc-heuristics input:focus-visible,
.cc-page button:focus-visible,
.cc-table-wrap:focus-visible {
    outline: 3px solid var(--signal, #e9ff32);
    outline-offset: 2px;
}

.cc-editor textarea[aria-invalid="true"],
.cc-heuristics input[aria-invalid="true"] {
    border-color: var(--color-error, #a91c16);
    box-shadow: inset 4px 0 0 var(--color-error, #a91c16);
}

.cc-input-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0 12px;
    color: var(--color-text-muted, #586077);
    font-size: 0.7rem;
}

.cc-input-meta p,
.cc-output-help {
    margin: 0;
}

.cc-input-meta output {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
}

.cc-output-help {
    min-height: 4.6em;
    padding: 7px 0 12px;
    color: var(--color-text-muted, #586077);
    font-size: 0.7rem;
}

.cc-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1.5px solid var(--color-border-strong, #0b1020);
    border-left: 1.5px solid var(--color-border-strong, #0b1020);
}

.cc-counts div {
    min-width: 0;
    padding: 10px;
    border-right: 1.5px solid var(--color-border-strong, #0b1020);
    border-bottom: 1.5px solid var(--color-border-strong, #0b1020);
}

.cc-counts dt {
    color: var(--color-text-muted, #586077);
    font-family: var(--font-mono, monospace);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cc-counts dd {
    margin: 4px 0 0;
    color: var(--color-primary, #0b1020);
    font-size: 1.12rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    line-height: 1.1;
}

.cc-heuristics {
    margin-top: 18px;
    padding: 16px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    background: var(--bg-surface, #fffef9);
}

.cc-heuristics[data-enabled="false"] {
    background: var(--color-bg-alt, #e3dfd3);
}

.cc-heuristics h4,
.cc-heuristics p {
    margin: 0;
}

.cc-heuristics h4 {
    font-size: 0.9rem;
}

.cc-heuristics > div p,
.cc-heuristics > p {
    margin-top: 3px;
    color: var(--color-text-muted, #586077);
    font-size: 0.68rem;
}

.cc-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    margin: 13px 0;
    padding-block: 10px;
    border-top: 1px solid var(--color-border-strong, #0b1020);
    border-bottom: 1px solid var(--color-border-strong, #0b1020);
    cursor: pointer;
}

.cc-check input {
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--color-accent, #1748ff);
}

.cc-check strong,
.cc-check small {
    display: block;
}

.cc-check strong {
    font-size: 0.78rem;
}

.cc-check small {
    margin-top: 2px;
    color: var(--color-text-muted, #586077);
    font-size: 0.65rem;
}

.cc-heuristics > label[for="cc-protected-terms"] {
    display: block;
    margin-bottom: 5px;
    font-size: 0.75rem;
    font-weight: 800;
}

.cc-heuristics > label span {
    color: var(--color-text-muted, #586077);
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    text-transform: uppercase;
}

.cc-heuristics input[type="text"] {
    width: 100%;
    min-height: 46px;
    padding: 9px 11px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    color: var(--color-primary, #0b1020);
    background: var(--input-bg, #fffef9);
}

.cc-heuristics input:disabled,
.cc-check:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.cc-validation {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1.5px solid var(--color-error, #a91c16);
    color: #ffffff;
    background: var(--color-error, #a91c16);
    font-size: 0.77rem;
    font-weight: 750;
}

.cc-input-actions,
.cc-output-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cc-input-actions span {
    color: var(--color-text-muted, #586077);
    font-size: 0.65rem;
}

.cc-input-actions .btn,
.cc-output-actions .btn {
    min-height: 46px;
}

.cc-input-actions .btn:disabled,
.cc-output-actions .btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.cc-mode-summary,
.cc-privacy,
.cc-noscript {
    margin: 16px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--color-border-strong, #0b1020);
    color: var(--color-text-secondary, #394158);
    font-size: 0.72rem;
}

.cc-noscript {
    padding: 12px;
    border: 1.5px solid var(--color-border-strong, #0b1020);
    background: var(--paper-pink, #ffdce9);
}

.cc-answer,
.cc-comparison,
.cc-modes,
.cc-rules,
.cc-unicode,
.cc-uses,
.cc-limits,
.cc-page .faqs-section,
.cc-related {
    margin: 0;
    padding: clamp(42px, 7vw, 86px) 0;
    border-top: 3px solid var(--color-border-strong, #0b1020);
}

.cc-answer {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    column-gap: clamp(35px, 7vw, 100px);
    background: var(--paper-blue, #dce4ff);
    box-shadow: 0 0 0 100vmax var(--paper-blue, #dce4ff);
    clip-path: inset(0 -100vmax);
}

.cc-answer,
.cc-answer > * {
    min-width: 0;
    max-width: 100%;
}

.cc-answer > * {
    overflow-wrap: anywhere;
}

.cc-answer .cc-kicker,
.cc-answer h2 {
    grid-column: 1;
}

.cc-answer h2 {
    max-width: 12ch;
    margin: 0;
}

.cc-answer > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-family: var(--font-editorial, Georgia, serif);
    font-size: clamp(1.3rem, 2.4vw, 2.1rem);
    line-height: 1.38;
}

.cc-section-lead {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 6vw, 82px);
    margin-bottom: 34px;
}

.cc-section-lead .cc-kicker,
.cc-section-lead h2 {
    grid-column: 1;
}

.cc-section-lead h2,
.cc-section-lead > p:last-child {
    margin: 0;
}

.cc-section-lead > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.cc-table-wrap {
    overflow-x: auto;
    border: 2px solid var(--color-border-strong, #0b1020);
    background: var(--bg-surface, #fffef9);
}

.cc-comparison-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.cc-comparison-table caption {
    padding: 13px 15px;
    border-bottom: 2px solid var(--color-border-strong, #0b1020);
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
}

.cc-comparison-table th,
.cc-comparison-table td {
    padding: 15px;
    border-right: 1px solid var(--color-border-strong, #0b1020);
    border-bottom: 1px solid var(--color-border-strong, #0b1020);
    text-align: left;
    vertical-align: top;
}

.cc-comparison-table thead th {
    color: #ffffff;
    background: var(--bg-ink, #0b1020);
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cc-comparison-table tbody th {
    color: var(--color-accent, #1748ff);
}

.cc-mode-cards,
.cc-unicode-grid,
.cc-use-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid var(--color-border-strong, #0b1020);
    border-left: 2px solid var(--color-border-strong, #0b1020);
}

.cc-mode-cards article,
.cc-unicode-grid article,
.cc-use-grid article {
    min-width: 0;
    padding: clamp(22px, 3vw, 34px);
    border-right: 2px solid var(--color-border-strong, #0b1020);
    border-bottom: 2px solid var(--color-border-strong, #0b1020);
}

.cc-card-number {
    color: var(--color-accent, #1748ff);
}

.cc-mode-cards h3,
.cc-unicode-grid h3,
.cc-use-grid h3 {
    margin-bottom: 12px;
}

.cc-mode-cards p,
.cc-unicode-grid p,
.cc-use-grid p {
    margin: 0;
}

.cc-rules {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(36px, 7vw, 94px);
}

.cc-rules > div:first-child h2 {
    max-width: 12ch;
}

.cc-rule-list {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--color-border-strong, #0b1020);
    counter-reset: case-rules;
    list-style: none;
}

.cc-rule-list li {
    position: relative;
    padding: 18px 0 18px 54px;
    border-bottom: 1px solid var(--color-border-strong, #0b1020);
    counter-increment: case-rules;
}

.cc-rule-list li::before {
    content: counter(case-rules, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--color-accent, #1748ff);
    font-family: var(--font-mono, monospace);
    font-size: 0.67rem;
    font-weight: 850;
}

.cc-rules--sentence {
    grid-template-columns: 1fr;
}

.cc-rules--sentence > div:first-child {
    display: grid;
    grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.2fr);
    gap: 50px;
}

.cc-rules--sentence > div:first-child .cc-kicker,
.cc-rules--sentence > div:first-child h2 {
    grid-column: 1;
}

.cc-rules--sentence > div:first-child > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

.cc-sentence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
    border-top: 2px solid var(--color-border-strong, #0b1020);
    border-left: 2px solid var(--color-border-strong, #0b1020);
}

.cc-sentence-grid article {
    padding: 24px;
    border-right: 2px solid var(--color-border-strong, #0b1020);
    border-bottom: 2px solid var(--color-border-strong, #0b1020);
}

.cc-sentence-grid h3,
.cc-sentence-grid p {
    margin: 0;
}

.cc-sentence-grid h3 {
    min-height: 2.5em;
    margin-bottom: 12px;
}

.cc-uses h2,
.cc-limits h2,
.cc-related h2 {
    max-width: 18ch;
}

.cc-use-grid {
    margin-top: 30px;
}

.cc-limits ul,
.cc-related ul {
    margin: 30px 0 0;
    padding: 0;
    border-top: 2px solid var(--color-border-strong, #0b1020);
    list-style: none;
}

.cc-limits li,
.cc-related li {
    position: relative;
    padding: 14px 0 14px 34px;
    border-bottom: 1px solid var(--color-border-strong, #0b1020);
}

.cc-limits li::before,
.cc-related li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent, #1748ff);
    font-family: var(--font-mono, monospace);
    font-weight: 900;
}

.cc-page .faq-list {
    margin: 30px 0 0;
    border-top: 2px solid var(--color-border-strong, #0b1020);
}

.cc-page .faq-item {
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
    gap: 38px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border-strong, #0b1020);
}

.cc-page .faq-question,
.cc-page .faq-answer {
    margin: 0;
}

.cc-page .faq-question {
    font-weight: 850;
}

.cc-copy-fallback,
.cc-download-link {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 1040px) {
    .cc-masthead {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cc-masthead h1 {
        max-width: none;
    }

    .cc-deck {
        max-width: 70ch;
    }

    .cc-editor-grid {
        grid-template-columns: 1fr;
    }

    .cc-editor--input {
        border-right: 0;
        border-bottom: 2px solid var(--color-border-strong, #0b1020);
    }

    .cc-editor textarea {
        min-height: 260px;
    }
}

@media (max-width: 820px) {
    .cc-masthead,
    .cc-answer,
    .cc-section-lead,
    .cc-rules,
    .cc-rules--sentence > div:first-child {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-masthead h1 {
        font-size: clamp(3.7rem, 16vw, 6.2rem);
    }

    .cc-workbench__bar {
        align-items: stretch;
        flex-direction: column;
    }

    .cc-local-badge {
        flex: 1 1 auto;
    }

    .cc-mode-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-mode-picker label:nth-child(2) span {
        border-right: 0;
    }

    .cc-mode-picker label:nth-child(-n + 2) span {
        border-bottom: 1.5px solid var(--color-border-strong, #0b1020);
    }

    .cc-answer .cc-kicker,
    .cc-answer h2,
    .cc-answer > p:last-child,
    .cc-section-lead .cc-kicker,
    .cc-section-lead h2,
    .cc-section-lead > p:last-child,
    .cc-rules--sentence > div:first-child .cc-kicker,
    .cc-rules--sentence > div:first-child h2,
    .cc-rules--sentence > div:first-child > p:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .cc-answer > p:last-child,
    .cc-section-lead > p:last-child,
    .cc-rules--sentence > div:first-child > p:last-child {
        margin-top: 22px;
    }

    .cc-mode-cards,
    .cc-unicode-grid,
    .cc-use-grid,
    .cc-sentence-grid {
        grid-template-columns: 1fr;
    }

    .cc-sentence-grid h3 {
        min-height: 0;
    }

    .cc-page .faq-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .cc-workbench {
        box-shadow: 5px 5px 0 var(--color-border-strong, #0b1020);
    }

    .cc-workbench__bar,
    .cc-editor {
        padding-inline: 16px;
    }

    .cc-mode-picker {
        grid-template-columns: 1fr;
    }

    .cc-mode-picker span,
    .cc-mode-picker label:nth-child(2) span {
        min-height: 64px;
        border-right: 0;
        border-bottom: 1.5px solid var(--color-border-strong, #0b1020);
    }

    .cc-mode-picker label:last-child span {
        border-bottom: 0;
    }

    .cc-editor__heading,
    .cc-input-meta,
    .cc-input-actions,
    .cc-output-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cc-text-button,
    .cc-input-actions .btn,
    .cc-output-actions .btn {
        width: 100%;
    }

    .cc-counts {
        grid-template-columns: 1fr;
    }

    .cc-editor textarea {
        min-height: 230px;
    }

    .cc-rule-list li {
        padding-left: 42px;
    }
}

@media print {
    .cc-workbench,
    .cc-related {
        display: none !important;
    }

    .cc-table-wrap {
        overflow: visible;
    }

    .cc-comparison-table {
        min-width: 0;
    }
}