/* =============================================================================
   Certificates Are Encoded, Not Compressed

   The subject is byte layout and repetition, so the page is built out of
   monospace, byte counts and field chips rather than prose blocks. Palette is
   deliberately cooler than the ticket page's: this is about measurement, not
   cryptography.
   ========================================================================== */

:root {
    --cc-primary: #67e8f9;
    --cc-primary-dark: #0e7490;
    --cc-accent: #fca5a5;
    --cc-save: #4ade80;
    --cc-warn: #fbbf24;
    --cc-bg: #070a0f;
    --cc-card: #0f141d;
    --cc-card-2: #131a25;
    --cc-text: #ffffff;
    --cc-text-dim: #9fb0c3;
    --cc-muted: #64748b;
    --cc-border: #1e2a38;
    --cc-code-bg: #0b1017;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.cc-wrap {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding-block: 0 4rem;
    padding-left: 20px;
    padding-right: 20px;
}

/* --- Header --------------------------------------------------------------- */
/* The ambient canvas is `position: fixed`, so it forms a stacking context that
   paints over anything left in normal flow. Every band of page chrome has to
   opt back in, not just the article body. */
.cc-header { position: relative; z-index: 1; padding-block: 2.5rem 1.5rem; }

.header-container { max-width: 880px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

.header-content { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }

.logo-link { flex: 0 0 auto; line-height: 0; }
.logo-image { width: 56px; height: 56px; border-radius: 12px; }

.title-container { min-width: 0; }

.page-title {
    margin: 0;
    font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.page-subtitle {
    margin: 0.4rem 0 0;
    color: var(--cc-text-dim);
    font-size: 1rem;
}

/* --- Sections ------------------------------------------------------------- */
.cc-h2 {
    margin: 2.8rem 0 0.9rem;
    font-size: 1.35rem;
    color: var(--cc-primary);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cc-h3 {
    margin: 1.8rem 0 0.6rem;
    font-size: 1.05rem;
    color: var(--cc-text);
}

.cc-wrap p { max-width: 68ch; color: var(--cc-text-dim); }
.cc-wrap p strong { color: var(--cc-text); }

.cc-lede {
    border-left: 3px solid var(--cc-primary-dark);
    padding: 0.2rem 0 0.2rem 1.1rem;
    margin-block: 1.5rem 0;
}
.cc-lede p { font-size: 1.08rem; }

code {
    font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.875em;
    background: var(--cc-code-bg);
    border: 1px solid var(--cc-border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--cc-primary);
    overflow-wrap: anywhere;
}

/* --- Figure: the chain and its repeated structure ------------------------- */
.cc-figure {
    margin: 1.6rem 0 2rem;
    padding: 1.25rem;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
}

.cc-figure figcaption {
    margin-top: 1rem;
    color: var(--cc-muted);
    font-size: 0.87rem;
    line-height: 1.6;
}

.cc-chain { display: grid; gap: 0.6rem; }

.cc-cert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--cc-card-2);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
}

.cc-cert-name {
    font-size: 0.9rem;
    color: var(--cc-text);
    margin-bottom: 0.45rem;
}

.cc-cert-size {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--cc-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cc-fields { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.cc-field {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--cc-border);
    color: var(--cc-muted);
    white-space: nowrap;
}

/* The point of the diagram: the fields that recur across every certificate are
   the ones a general-purpose compressor gets to collapse. */
.cc-field-repeat {
    border-color: var(--cc-primary-dark);
    color: var(--cc-primary);
    background: rgba(103, 232, 249, 0.07);
}

.cc-legend {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--cc-muted);
}
.cc-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cc-swatch { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--cc-border); display: inline-block; }
.cc-swatch-repeat { border-color: var(--cc-primary-dark); background: rgba(103, 232, 249, 0.3); }

/* --- Bars ----------------------------------------------------------------- */
.cc-bars { display: grid; gap: 0.85rem; }

.cc-bar-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; }

.cc-bar-label { font-size: 0.85rem; color: var(--cc-text-dim); }

.cc-bar-track {
    position: relative;
    background: var(--cc-code-bg);
    border: 1px solid var(--cc-border);
    border-radius: 6px;
    height: 30px;
    overflow: hidden;
}

.cc-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--cc-bg);
    font-weight: 600;
    white-space: nowrap;
}

.cc-bar-before { background: var(--cc-accent); width: 100%; }
.cc-bar-after  { background: var(--cc-primary); width: 69.2%; }
.cc-bar-hs-before { background: var(--cc-accent); width: 100%; }
.cc-bar-hs-after  { background: var(--cc-primary); width: 78.7%; }

/* --- Budget diagram ------------------------------------------------------- */
.cc-budget { display: grid; gap: 0.5rem; }

.cc-budget-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: var(--cc-card-2);
}

.cc-budget-row span:first-child { font-size: 0.9rem; color: var(--cc-text-dim); }

.cc-budget-n {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    white-space: nowrap;
}
.cc-budget-add  { color: var(--cc-accent); }
.cc-budget-save { color: var(--cc-save); }
.cc-budget-net  { color: var(--cc-primary); font-weight: 600; }
.cc-budget-total { border-color: var(--cc-primary-dark); background: rgba(103, 232, 249, 0.05); }

/* --- Table ---------------------------------------------------------------- */
.cc-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.8rem; }

.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 30rem;
}

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

.cc-table th {
    color: var(--cc-text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cc-table td:last-child, .cc-table th:last-child { text-align: right; }

.cc-num {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--cc-text);
}

.cc-table tbody tr:last-child td { border-bottom: none; }
.cc-row-total td { border-top: 1px solid var(--cc-primary-dark); color: var(--cc-text); }

/* --- Callout / limits ----------------------------------------------------- */
.cc-note {
    margin: 1.4rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--cc-border);
    border-left: 3px solid var(--cc-warn);
    border-radius: 8px;
    background: var(--cc-card);
}
.cc-note p { margin: 0; }
.cc-note p + p { margin-top: 0.7rem; }

.cc-limits { margin-top: 1rem; }
.cc-limits ul { padding-left: 1.1rem; color: var(--cc-text-dim); max-width: 68ch; }
.cc-limits li { margin-bottom: 0.55rem; }

/* --- Code block ----------------------------------------------------------- */
.cc-code {
    margin: 1.1rem 0 1.8rem;
    padding: 1rem 1.15rem;
    background: var(--cc-code-bg);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    overflow-x: auto;
}

.cc-code pre { margin: 0; }

.cc-code code {
    background: none;
    border: none;
    padding: 0;
    color: var(--cc-text-dim);
    font-size: 0.83rem;
    line-height: 1.75;
    white-space: pre;
}

.cc-code .cc-hl { color: var(--cc-primary); }

/* --- Footer --------------------------------------------------------------- */
.cc-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--cc-border);
    padding-block: 2rem;
    margin-top: 3rem;
}
.footer-container { max-width: 880px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; padding: 0; margin: 0 0 1rem; }
.footer-link { color: var(--cc-text-dim); text-decoration: none; font-size: 0.9rem; }
.footer-link:hover { color: var(--cc-primary); }
.footer-copy { margin: 0; color: var(--cc-muted); font-size: 0.85rem; }

a { color: var(--cc-primary); }

/* --- Narrow widths -------------------------------------------------------- */
@media (max-width: 640px) {
    .cc-bar-row { grid-template-columns: 1fr; gap: 0.3rem; }
    .cc-cert { grid-template-columns: 1fr; }
    .cc-cert-size { text-align: left; }
}

/* --- Evidence blocks ------------------------------------------------------
   Everything below belongs to a section that shows measured output rather
   than describing it, so the styling leans monospace and keeps byte counts
   in a column the eye can run down. */

/* A split bar showing what share of a message cannot compress at all. */
.cc-split {
    display: flex;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cc-border);
    margin: 1.4rem 0 0.6rem;
}

.cc-split-part {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    padding: 0 0.4rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* 1,209 of 3,435 bytes: signatures and public keys. */
.cc-split-entropy {
    flex: 0 0 35.2%;
    background: rgba(252, 165, 165, 0.16);
    color: var(--cc-accent);
    border-right: 1px solid var(--cc-border);
}

/* The remaining 2,226 bytes, which are structure and do compress. */
.cc-split-structure {
    flex: 1 1 64.8%;
    background: rgba(103, 232, 249, 0.12);
    color: var(--cc-primary);
}

.cc-split-legend {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--cc-muted);
    margin-bottom: 1.6rem;
}

/* Ratio callouts: three numbers that only mean something side by side. */
.cc-ratios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin: 1.6rem 0;
}

.cc-ratio {
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.cc-ratio-n {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cc-ratio-good .cc-ratio-n { color: var(--cc-save); }
.cc-ratio-mid .cc-ratio-n { color: var(--cc-primary); }
.cc-ratio-bad .cc-ratio-n { color: var(--cc-accent); }

.cc-ratio-label {
    margin-top: 0.35rem;
    font-size: 0.84rem;
    color: var(--cc-text-dim);
    line-height: 1.45;
}

.cc-ratio-sub {
    margin-top: 0.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--cc-muted);
}

/* The back-reference listing. Each row is one LZ77 match the compressor made. */
.cc-refs {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    margin: 1.2rem 0;
}

.cc-ref {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--cc-border);
}

.cc-ref:first-child { border-top: 1px solid var(--cc-border); }

.cc-ref-len {
    color: var(--cc-save);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cc-ref-what { color: var(--cc-text-dim); min-width: 0; overflow-wrap: anywhere; }

.cc-ref-dir {
    color: var(--cc-muted);
    white-space: nowrap;
    font-size: 0.72rem;
}

/* Probe results, where the positive control matters as much as the finding. */
.cc-probe { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.cc-probe th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cc-muted);
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--cc-border);
    font-weight: 600;
}

.cc-probe td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--cc-border);
    vertical-align: top;
}

.cc-probe code { font-size: 0.8rem; }

.cc-yes { color: var(--cc-save); font-weight: 600; }
.cc-no { color: var(--cc-accent); font-weight: 600; }
.cc-ctrl { color: var(--cc-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }

/* A warning about method rather than about configuration. */
.cc-method {
    background: rgba(251, 191, 36, 0.07);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-left: 3px solid var(--cc-warn);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 1.6rem 0;
}

.cc-method p { margin: 0 0 0.7rem; font-size: 0.92rem; }
.cc-method p:last-child { margin-bottom: 0; }
.cc-method strong { color: var(--cc-warn); }

/* Download row for the reproduction script. */
.cc-repro {
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    padding: 1.2rem 1.3rem;
    margin: 1.6rem 0;
}

.cc-repro-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.cc-repro-title { font-weight: 600; font-size: 1rem; }

.cc-dl {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(103, 232, 249, 0.12);
    border: 1px solid var(--cc-primary-dark);
    color: var(--cc-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.cc-dl:hover { background: rgba(103, 232, 249, 0.2); }
.cc-dl:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }

@media (max-width: 640px) {
    .cc-ref { grid-template-columns: 52px 1fr; }
    .cc-ref-dir { grid-column: 1 / -1; }
    .cc-split { height: auto; flex-direction: column; }
    .cc-split-part { padding: 0.5rem; }
    .cc-split-entropy { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--cc-border); }
}

/* --- The short version ----------------------------------------------------
   A summary of the whole argument, for the reader who wants the conclusion
   before deciding whether to read the measurements behind it. Plainer voice
   than the sections below, so it gets its own quieter treatment rather than
   competing with the lede. */
.cc-tldr {
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-left: 3px solid var(--cc-primary);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    margin: 2rem 0 2.4rem;
}

.cc-tldr-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-primary);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.cc-tldr p { margin: 0 0 0.8rem; }
.cc-tldr p:last-child { margin-bottom: 0; }

.cc-tldr-punch {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cc-border);
    font-size: 1.02rem;
    line-height: 1.6;
}

.cc-tldr-punch strong { color: var(--cc-primary); }

/* Correcting a claim the page would otherwise be read as making. */
.cc-myth {
    background: var(--cc-card-2);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin: 1.6rem 0;
}

.cc-myth-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cc-accent);
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.cc-myth p { margin: 0 0 0.7rem; font-size: 0.94rem; }
.cc-myth p:last-child { margin-bottom: 0; }

.cc-pct {
    /* Narrower than the prose so the figures sit beside their label rather
       than stranded at the far edge of the column. */
    width: auto;
    min-width: min(100%, 420px);
    border-collapse: collapse;
    font-size: 0.86rem;
    margin: 0.9rem 0 1.1rem;
}
.cc-pct td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--cc-border); }
.cc-pct td:first-child { color: var(--cc-text-dim); width: 100%; }
.cc-pct td:nth-child(2), .cc-pct td:nth-child(3) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cc-pct td:nth-child(3) { color: var(--cc-save); }