/* Browser-only text counters: one compact reference-desk system for three
   distinct workflows. The square borders and high-information layout inherit
   the site's edition colours when available and remain complete on main.css. */

.tc-page {
    --tc-ink: var(--color-primary, #18243a);
    --tc-paper: var(--bg-surface, #fffefa);
    --tc-page: var(--bg-page, #f4f1e9);
    --tc-border: var(--color-border-strong, #9d9587);
    --tc-blue: var(--color-link, #28647a);
    --tc-accent: var(--color-accent, #b5482c);
    --tc-highlight: #f2d94e;
    width: min(100%, 74rem);
    margin-inline: auto;
    padding: 0 1rem 4rem;
    color: var(--color-text, #20242b);
}

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

.tc-masthead {
    display: grid;
    grid-template-areas:
        "kicker deck"
        "title deck";
    grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr);
    align-items: end;
    gap: clamp(1.5rem, 5vw, 5rem);
    padding: clamp(2rem, 6vw, 5.5rem) 0 clamp(1.75rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--tc-ink);
}

.tc-masthead h1 {
    grid-area: title;
    margin: 0;
    color: var(--tc-ink);
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 0.84;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.tc-kicker,
.tc-label {
    margin: 0 0 0.65rem;
    color: var(--tc-accent);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tc-masthead .tc-kicker { grid-area: kicker; }

.tc-deck {
    grid-area: deck;
    max-width: 39rem;
    margin: 0;
    color: var(--color-text-secondary, #4f555d);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
}

.tc-page .answer-first {
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--tc-ink);
    border-left: 0.5rem solid var(--tc-ink);
    border-radius: 0;
    box-shadow: none;
    background: var(--tc-paper);
}

.tc-workbench {
    display: grid;
    grid-template-columns: minmax(18rem, 0.92fr) minmax(24rem, 1.08fr);
    margin: 2rem 0 clamp(4rem, 9vw, 7rem);
    border: 1px solid var(--tc-ink);
    background: var(--tc-paper);
}

.tc-workbench__input,
.tc-workbench__report {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.tc-workbench__input {
    align-self: start;
    position: sticky;
    top: 5.5rem;
    border-right: 1px solid var(--tc-ink);
    background: color-mix(in srgb, var(--tc-page) 82%, var(--tc-paper));
}

.tc-section-heading,
.tc-target__heading,
.tc-detail__heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.tc-section-heading h2,
.tc-target h3,
.tc-detail h3 {
    margin: 0;
    color: var(--tc-ink);
}

.tc-section-heading h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.tc-local-badge {
    flex: 0 0 auto;
    padding: 0.3rem 0.45rem;
    border: 1px solid currentColor;
    color: var(--color-success, #2f7458);
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-text-label {
    display: block;
    margin: 1.5rem 0 0.45rem;
    color: var(--tc-ink);
    font-size: 0.88rem;
    font-weight: 750;
}

.tc-textarea {
    display: block;
    width: 100%;
    min-height: 19rem;
    resize: vertical;
    padding: 1rem;
    border: 1px solid var(--tc-ink);
    border-radius: 0;
    outline: 0;
    background: var(--tc-paper);
    color: var(--color-text, #20242b);
    font: 1rem/1.55 var(--font-body, sans-serif);
    caret-color: var(--tc-accent);
}

.tc-textarea:focus {
    border-color: var(--tc-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-blue) 28%, transparent);
}

.tc-input-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.55rem;
    color: var(--color-text-muted, #62676f);
    font-size: 0.75rem;
    line-height: 1.45;
}

.tc-input-meta p {
    max-width: 29rem;
    margin: 0;
}

.tc-input-meta output {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.tc-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.tc-controls .btn {
    min-height: 2.75rem;
    border-radius: 0;
}

.tc-controls .btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.tc-privacy,
.tc-noscript {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--tc-border);
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.8rem;
    line-height: 1.55;
}

.tc-primary-result {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tc-ink);
}

.tc-primary-result h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0;
    color: var(--tc-ink);
    line-height: 1;
}

.tc-primary-result__number {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(4rem, 10vw, 7.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.06em;
}

.tc-primary-result__unit {
    font-size: clamp(1.1rem, 2.2vw, 1.65rem);
    font-weight: 650;
}

.tc-primary-result__note {
    min-height: 1.5em;
    margin: 0.55rem 0 0;
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.87rem;
}

.tc-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-left: 1px solid var(--tc-border);
    border-top: 1px solid var(--tc-border);
}

.tc-metric-grid > div {
    min-width: 0;
    padding: 0.8rem 0.7rem;
    border-right: 1px solid var(--tc-border);
    border-bottom: 1px solid var(--tc-border);
}

.tc-metric-grid dt {
    color: var(--color-text-muted, #62676f);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tc-metric-grid dd {
    overflow-wrap: anywhere;
    margin: 0.3rem 0 0;
    color: var(--tc-ink);
    font-size: clamp(1rem, 2vw, 1.28rem);
    font-variant-numeric: tabular-nums;
    font-weight: 730;
    line-height: 1.2;
}

.tc-target,
.tc-detail {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tc-ink);
}

.tc-target h3,
.tc-detail h3 {
    font-size: 1.05rem;
}

.tc-target p,
.tc-detail__heading p {
    margin: 0.3rem 0 0;
    color: var(--color-text-muted, #62676f);
    font-size: 0.78rem;
    line-height: 1.4;
}

.tc-target label {
    display: grid;
    gap: 0.25rem;
    color: var(--color-text-muted, #62676f);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-target input {
    width: 7.5rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--tc-ink);
    border-radius: 0;
    background: var(--tc-paper);
    color: var(--tc-ink);
    font: 700 1rem/1 var(--font-body, sans-serif);
    font-variant-numeric: tabular-nums;
}

.tc-target input:focus {
    outline: 3px solid color-mix(in srgb, var(--tc-blue) 28%, transparent);
    outline-offset: 0;
}

.tc-target progress {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0.75rem;
    margin-top: 1rem;
    border: 1px solid var(--tc-ink);
    border-radius: 0;
    background: var(--tc-page);
    color: var(--tc-blue);
}

.tc-target progress::-webkit-progress-bar { background: var(--tc-page); }
.tc-target progress::-webkit-progress-value { background: var(--tc-blue); }
.tc-target progress::-moz-progress-bar { background: var(--tc-blue); }
.tc-target progress.is-over::-webkit-progress-value { background: var(--tc-accent); }
.tc-target progress.is-over::-moz-progress-bar { background: var(--tc-accent); }

.tc-target__status {
    min-height: 1.4em;
    font-weight: 720;
}

.tc-table-wrap,
.tc-definition-table {
    overflow-x: auto;
    scrollbar-width: thin;
}

.tc-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.45;
}

.tc-table th,
.tc-table td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--tc-border);
    text-align: left;
    vertical-align: top;
}

.tc-table thead th {
    color: var(--color-text-muted, #62676f);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.tc-table tbody th {
    color: var(--tc-ink);
    font-weight: 720;
}

.tc-table--sentences th:first-child,
.tc-table--sentences td:nth-child(3) {
    width: 4rem;
    font-variant-numeric: tabular-nums;
}

.tc-table--sentences td:nth-child(2) {
    min-width: 18rem;
    max-width: 31rem;
    overflow-wrap: anywhere;
}

.tc-table__long {
    background: color-mix(in srgb, var(--tc-highlight) 22%, transparent);
}

.tc-empty-detail {
    margin: 0.75rem 0 0;
    color: var(--color-text-muted, #62676f);
    font-size: 0.78rem;
}

.tc-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0.85rem 0 0;
    background: var(--tc-border);
    border: 1px solid var(--tc-border);
}

.tc-breakdown > div {
    padding: 0.7rem;
    background: var(--tc-paper);
}

.tc-breakdown dt {
    color: var(--color-text-muted, #62676f);
    font-size: 0.7rem;
}

.tc-breakdown dd {
    margin: 0.2rem 0 0;
    color: var(--tc-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 720;
}

.tc-editorial,
.tc-faq {
    margin: clamp(4rem, 9vw, 7.5rem) 0 0;
    padding-top: 1.35rem;
    border-top: 1px solid var(--tc-ink);
}

.tc-editorial h2,
.tc-faq h2 {
    max-width: 51rem;
    margin: 0;
    color: var(--tc-ink);
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(2rem, 5vw, 3.85rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1;
}

.tc-editorial h3,
.tc-note h3 {
    color: var(--tc-ink);
}

.tc-editorial p,
.tc-editorial li,
.tc-faq p {
    line-height: 1.7;
}

.tc-editorial__lead {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: clamp(1.5rem, 6vw, 5rem);
    align-items: end;
}

.tc-editorial__lead > p:last-child {
    margin: 0;
    color: var(--color-text-secondary, #4f555d);
    font-size: 1.05rem;
}

.tc-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
    border: 1px solid var(--tc-ink);
}

.tc-rule-grid > div {
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border-right: 1px solid var(--tc-ink);
}

.tc-rule-grid > div:last-child { border-right: 0; }

.tc-rule-grid__mark {
    display: inline-grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding-inline: 0.35rem;
    background: var(--tc-highlight);
    color: #111827;
    font: 800 0.8rem/1 var(--font-mono, monospace);
}

.tc-rule-grid h3 {
    margin: 1.1rem 0 0;
    font-size: 1.05rem;
}

.tc-rule-grid p {
    margin: 0.6rem 0 0;
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.88rem;
}

.tc-editorial--split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
    gap: clamp(2rem, 7vw, 6rem);
}

.tc-editorial--split > div > p:not(.tc-label) {
    max-width: 46rem;
}

.tc-note {
    align-self: start;
    padding: 1.4rem;
    border: 1px solid var(--tc-ink);
    background: var(--tc-paper);
}

.tc-note h3 {
    margin: 0;
    font-size: 1.15rem;
}

.tc-note p,
.tc-note li {
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.86rem;
}

.tc-note dl {
    margin: 1rem 0;
}

.tc-note dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--tc-border);
}

.tc-note dt { color: var(--color-text-muted, #62676f); }
.tc-note dd { margin: 0; font-weight: 730; }

.tc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: tc-step;
    margin: 2rem 0 0;
    padding: 0;
    border: 1px solid var(--tc-ink);
    list-style: none;
}

.tc-steps li {
    counter-increment: tc-step;
    padding: 1.25rem;
    border-right: 1px solid var(--tc-ink);
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.88rem;
}

.tc-steps li:last-child { border-right: 0; }

.tc-steps li::before {
    display: block;
    margin-bottom: 1rem;
    color: var(--tc-accent);
    content: counter(tc-step, decimal-leading-zero);
    font: 800 0.75rem/1 var(--font-mono, monospace);
}

.tc-steps strong { color: var(--tc-ink); }

.tc-method-note {
    max-width: 59rem;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 0.35rem solid var(--tc-accent);
    color: var(--color-text-secondary, #4f555d);
    font-size: 0.88rem;
}

.tc-definition-table {
    margin-top: 2rem;
    border: 1px solid var(--tc-ink);
    background: var(--tc-paper);
}

.tc-definition-table .tc-table th,
.tc-definition-table .tc-table td {
    padding: 0.9rem;
}

.tc-definition-table .tc-table th:first-child { width: 10.5rem; }
.tc-sample { font-size: 1.8em; }

.tc-editorial--limits > p:not(.tc-label) {
    max-width: 56rem;
}

.tc-faq__list {
    margin-top: 2rem;
    border-top: 1px solid var(--tc-ink);
}

.tc-faq details {
    border-bottom: 1px solid var(--tc-ink);
}

.tc-faq summary {
    position: relative;
    padding: 1.15rem 3rem 1.15rem 0;
    cursor: pointer;
    color: var(--tc-ink);
    font-size: 1.02rem;
    font-weight: 720;
    list-style: none;
}

.tc-faq summary::-webkit-details-marker { display: none; }

.tc-faq summary::after {
    position: absolute;
    right: 0.35rem;
    content: '+';
    color: var(--tc-accent);
    font: 700 1.45rem/1 var(--font-mono, monospace);
}

.tc-faq details[open] summary::after { content: '−'; }

.tc-faq details p {
    max-width: 51rem;
    margin: -0.35rem 0 1.25rem;
    color: var(--color-text-secondary, #4f555d);
}

@media (max-width: 960px) {
    .tc-workbench { grid-template-columns: 1fr; }
    .tc-workbench__input {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--tc-ink);
    }
    .tc-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-steps li:nth-child(2) { border-right: 0; }
    .tc-steps li:nth-child(-n + 2) { border-bottom: 1px solid var(--tc-ink); }
}

@media (max-width: 720px) {
    .tc-page { padding-inline: 0.75rem; }
    .tc-masthead,
    .tc-editorial__lead,
    .tc-editorial--split { grid-template-columns: 1fr; }
    .tc-masthead {
        grid-template-areas:
            "kicker"
            "title"
            "deck";
        gap: 0.75rem;
        padding: 1.25rem 0 1rem;
    }
    .tc-masthead h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
    .tc-deck {
        font-size: 1rem;
        line-height: 1.4;
    }
    .tc-workbench { margin-top: 1rem; }
    .tc-rule-grid { grid-template-columns: 1fr; }
    .tc-rule-grid > div {
        border-right: 0;
        border-bottom: 1px solid var(--tc-ink);
    }
    .tc-rule-grid > div:last-child { border-bottom: 0; }
    .tc-input-meta { display: block; }
    .tc-input-meta output { display: block; margin-top: 0.35rem; }
}

@media (max-width: 480px) {
    .tc-workbench__input,
    .tc-workbench__report { padding: 1rem; }
    .tc-section-heading,
    .tc-target__heading { display: grid; }
    .tc-local-badge { justify-self: start; }
    .tc-textarea { min-height: 15rem; }
    .tc-controls .btn { flex: 1 1 100%; }
    .tc-metric-grid,
    .tc-breakdown { grid-template-columns: 1fr; }
    .tc-steps { grid-template-columns: 1fr; }
    .tc-steps li,
    .tc-steps li:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--tc-ink);
    }
    .tc-steps li:last-child { border-bottom: 0; }
}

[data-theme="dark"] .tc-page {
    --tc-highlight: #d9be3c;
}

[data-theme="dark"] .tc-workbench__input,
[data-theme="dark"] .tc-table__long {
    background: color-mix(in srgb, var(--bg-surface) 91%, var(--tc-highlight));
}

@media print {
    .tc-controls,
    .tc-target,
    .tc-faq,
    .tool-header-bar { display: none !important; }
    .tc-page { width: 100%; padding: 0; }
    .tc-workbench { display: block; }
    .tc-workbench__input { position: static; border: 0; border-bottom: 1px solid #000; }
    .tc-workbench__report { border: 0; }
}