/* code-style.css -- /code-style and its language pages. Loaded after
   schedule.css, see the order-significant $stylesheets list in
   src/view/layout.php. Reads the site's tokens; the highlighting colours
   for Java samples come from the .jw custom properties, so they are
   repeated here on .cs. */

.cs {
    --syn-kw: #1E1EC6;
    --syn-st: #0B6B3A;
    --syn-ty: #8A3B00;
    --syn-fn: #7A2E9E;
    --syn-nu: #A3300A;
    --syn-an: #8A3B00;
    --syn-cm: #5C5C5C;
    width: 100%;
    padding: var(--spacing-12) 0 var(--spacing-15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cs {
        --syn-kw: #9DB4FF;
        --syn-st: #7FD1A0;
        --syn-ty: #F0B27A;
        --syn-fn: #D6A8F5;
        --syn-nu: #FF9E80;
        --syn-an: #F0B27A;
        --syn-cm: #A0A0A0;
    }
}

:root[data-theme="dark"] .cs {
    --syn-kw: #9DB4FF;
    --syn-st: #7FD1A0;
    --syn-ty: #F0B27A;
    --syn-fn: #D6A8F5;
    --syn-nu: #FF9E80;
    --syn-an: #F0B27A;
    --syn-cm: #A0A0A0;
}

.cs-article {
    max-width: 880px;
}

.cs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-5);
    margin-bottom: var(--spacing-10);
    font-size: var(--text-size-label);
}

.cs-nav a {
    color: var(--fg-neutral-body);
    text-decoration: none;
    padding-bottom: 2px;
}

.cs-nav a:hover {
    color: var(--fg-neutral-accent);
}

.cs-nav a[aria-current="page"] {
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-semibold);
    border-bottom: 2px solid var(--fg-neutral-accent);
}

.cs h1 {
    margin: 0 0 var(--spacing-4);
    max-width: 18ch;
    font-size: var(--heading-size-h1);
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
    text-wrap: balance;
}

.cs-lead {
    max-width: 52ch;
    margin: 0;
    font-size: var(--text-size-lead);
    color: var(--fg-neutral-body);
}

.cs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-8);
    margin: var(--spacing-6) 0 0;
    padding: var(--spacing-3) 0;
    border-top: 1px solid var(--border-neutral-default);
    border-bottom: 1px solid var(--border-neutral-default);
    font-size: var(--text-size-label);
}

.cs-meta div {
    display: flex;
    gap: var(--spacing-2);
}

.cs-meta dt {
    color: var(--fg-neutral-muted);
}

.cs-meta dd {
    margin: 0;
    font-weight: var(--weight-medium);
}

.cs-section {
    margin-top: var(--spacing-12);
}

.cs-section h2 {
    margin: 0 0 var(--spacing-4);
    font-size: var(--heading-size-h3);
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
}

.cs-section p,
.cs-section li {
    max-width: var(--prose-width);
    color: var(--fg-neutral-body);
}

.cs-section ul {
    padding-left: 1.2em;
}

.cs-section li {
    padding: var(--spacing-1) 0;
}

.cs-pages,
.cs-sources {
    list-style: none;
    padding: 0;
}

.cs-note {
    margin-top: var(--spacing-4);
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

.cs-table-wrap {
    margin: var(--spacing-5) 0;
    overflow-x: auto;
}

.cs-table {
    border-collapse: collapse;
    font-size: var(--text-size-label);
}

.cs-table th,
.cs-table td {
    padding: var(--spacing-3) var(--spacing-5) var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.cs-table thead th {
    color: var(--fg-neutral-muted);
    font-weight: var(--weight-medium);
}

.cs-code {
    margin: var(--spacing-5) 0;
    line-height: 1.65;
}

.cs a:focus-visible,
.cs [tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* A table wider than the screen scrolls sideways. Shadows on the edges
   that still hide content, and a hint line on narrow screens, keep it
   from looking cut off. The shadows use background-attachment: local
   on top of scroll, so they vanish by themselves at the ends. */
.cs-table-wrap,
.jw-table-wrap {
    --scroll-cover: var(--bg-base);
    background:
        linear-gradient(to right, var(--scroll-cover) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--scroll-cover) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent) right center / 12px 100% no-repeat scroll;
}

.cs-table-hint {
    display: none;
    margin: 0;
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
}

@media (max-width: 720px) {
    .cs-table-hint {
        display: block;
    }

    .cs-table th,
    .cs-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.cs-table-hint[hidden] {
    display: none;
}