:root {
    --bg: #ffffcc;
    --fg: #000080;
    --accent: #008080;
    --accent-2: #3f7f00;
    --link: #0000ff;
    --visited: #9b4a00;
    --link-hover: #3f7f00;
    --muted: #555;
    --error: #c00;
    --surface: #c0c0c0;
    --surface-fg: #000;
    --surface-border: #008080;
    --button-fg: #ffffcc;
    --button-border: #000080;

    --font-body: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
    --font-mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
    --font-heading: var(--font-mono);
    --measure: 72ch;
    --measure-prose: 65ch;

    font-size: 17px;
}

:root[data-theme="dark"] {
    --bg: #0f1020;
    --fg: #ffffcc;
    --accent: #5fd1d1;
    --accent-2: #a6e22e;
    --link: #7fb8ff;
    --visited: #ffb86c;
    --link-hover: #a6e22e;
    --muted: #9a9ab0;
    --error: #ff7070;
    --surface: #1f2040;
    --surface-fg: #ffffcc;
    --surface-border: #5fd1d1;
    --button-fg: #0f1020;
    --button-border: #5fd1d1;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    line-height: 1.6;
    max-width: var(--measure);
    margin: 24px auto;
    padding: 0 20px;
}

h1 {
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 0.25em;
}

.article-date {
    font-size: 0.95em;
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--muted);
}

h2 {
    color: var(--accent-2);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1.25;
}

h3 {
    color: var(--fg);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.25;
}

h4 {
    color: var(--fg);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.25;
}

a {
    color: var(--link);
}

a:visited {
    color: var(--visited);
}

a:hover,
a:focus {
    color: var(--link-hover);
}

hr {
    border: none;
    border-top: 2px solid var(--accent);
    margin: 20px 0;
}

.section {
    margin-bottom: 25px;
}

ul {
    list-style-type: disc;
}

input[type="text"] {
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 2px 4px;
}

input[type="number"] {
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    width: 4em;
}

button {
    background-color: var(--accent);
    color: var(--button-fg);
    border: 1px solid var(--button-border);
    padding: 4px 10px;
    font-family: var(--font-body);
}

label {
    display: block;
    margin-top: 6px;
}

#pw-output {
    display: block;
    margin-top: 4px;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 2px 4px;
    font-family: var(--font-mono);
}

#pw-copy-msg {
    font-size: 0.9em;
    margin-left: 6px;
}

.pw-privacy,
.tool-privacy-note {
    font-size: 0.9em;
    color: var(--muted);
    margin: 8px 0;
}

.tool-privacy-note {
    border-left: 2px solid var(--accent);
    padding-left: 10px;
}

.pw-list {
    margin-top: 10px;
}

.pw-list[aria-hidden="true"] {
    display: none;
}

.pw-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.pw-list-pw {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    padding: 2px 6px;
    border: 1px solid var(--surface-border);
    flex: 1 1 200px;
    min-width: 0;
}

.pw-list-copy {
    flex-shrink: 0;
}

.pw-list-msg {
    font-size: 0.9em;
    color: var(--muted);
}

.tool-output {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 8px;
    margin: 4px 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.tool-error {
    color: var(--error);
    font-size: 0.95em;
    margin: 4px 0;
}

/* === Contact page === */
.contact-card {
    border: 1px solid var(--surface-border);
    background-color: var(--surface);
    color: var(--surface-fg);
    box-shadow: 4px 4px 0 var(--accent);
    padding: 14px 16px;
    margin: 16px 0;
}
.contact-card p:first-child { margin-top: 0; }
.contact-output {
    min-height: 1.6em;
    font-family: var(--font-mono);
    font-size: 1.05em;
}

/* === Site nav === */
.site-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.site-nav a {
    text-decoration: none;
    color: var(--accent);
}
.site-nav a:hover { text-decoration: underline; }
.site-nav #theme-toggle { margin-left: auto; }

/* === Post pages === */
.post-meta {
    font-size: 0.95em;
    color: var(--muted);
    margin: 0 0 6px 0;
}
.post-summary {
    color: var(--muted);
    font-size: 0.95em;
    margin: 4px 0 8px 16px;
}
.post-tags { margin: 4px 0; }
.post-tags .tag,
.tag-cloud .tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    text-decoration: none;
    font-size: 0.9em;
}
.post-tags .tag:hover,
.tag-cloud .tag:hover { text-decoration: underline; }
.tag-cloud {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
}
.tag-cloud .tag-count { color: var(--muted); font-size: 0.85em; }

.post-list { padding-left: 20px; }
.post-list li { margin-bottom: 12px; }
.post-list .post-meta { display: inline; font-size: 0.9em; }

.post-body { line-height: 1.65; max-width: var(--measure-prose); }
.post-body p { margin: 1em 0; }
.post-body li + li { margin-top: 0.35em; }
.post-body h2,
.post-body h3 { margin-top: 1.6em; }
.post-body code {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    padding: 0 4px;
    border: 1px solid var(--surface-border);
    font-size: 0.95em;
}
.post-body pre {
    position: relative;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 8px;
    padding-right: 56px;
    overflow: auto;
    font-family: var(--font-mono);
}
.post-body pre code {
    background: none;
    border: none;
    padding: 0;
}
.post-body blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.6em 0;
    padding: 0 0 0 12px;
    color: var(--muted);
}

/* Click-to-reveal spoiler blocks (<details class="spoiler">) */
.post-body details.spoiler {
    border: 1px dashed var(--accent);
    border-radius: 4px;
    padding: 0.4em 0.8em;
    margin: 1em 0;
    background: transparent;
}
.post-body details.spoiler > summary {
    cursor: pointer;
    color: var(--accent);
    font-style: italic;
    list-style: none;
    padding: 0.1em 0;
}
.post-body details.spoiler > summary::-webkit-details-marker { display: none; }
.post-body details.spoiler > summary::before {
    content: "▸ ";
    display: inline-block;
    width: 1em;
}
.post-body details.spoiler[open] > summary::before { content: "▾ "; }
.post-body details.spoiler[open] > summary {
    margin-bottom: 0.4em;
    border-bottom: 1px dashed var(--accent);
}
.post-body details.spoiler > *:not(summary) { margin: 0.5em 0; }

/* markdown-it-anchor permalinks (linkInsideHeader) */
.post-body h2 a.header-anchor,
.post-body h3 a.header-anchor,
.post-body h4 a.header-anchor {
    color: var(--muted);
    text-decoration: none;
    font-weight: normal;
    margin-right: 6px;
    opacity: 0.55;
}
.post-body h2:hover a.header-anchor,
.post-body h3:hover a.header-anchor,
.post-body h4:hover a.header-anchor { opacity: 1; }

.backlinks {
    border-top: 2px solid var(--accent);
    padding-top: 8px;
    margin-top: 32px;
}
.backlinks h2 { margin-top: 0; }

/* === Adjacent-post nav (on each post page) === */
.post-nav {
    display: flex;
    gap: 10px;
    margin: 24px 0 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--surface-border);
}
.post-nav-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    text-decoration: none;
    font-size: 0.95em;
}
.post-nav-link:visited { color: var(--surface-fg); }
.post-nav-link:hover,
.post-nav-link:focus {
    border-color: var(--accent);
    outline: none;
}
.post-nav-next { text-align: right; }
.post-nav-label {
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: 0.85em;
}
a.post-nav-link .post-nav-title {
    color: var(--link);
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-nav-link.disabled {
    opacity: 0.5;
    cursor: default;
}
.post-nav-link.disabled .post-nav-title {
    color: var(--muted);
    font-style: italic;
}
@media (max-width: 480px) {
    .post-nav { flex-direction: column; }
    .post-nav-next { text-align: left; }
}

/* === Pagination (used on /blog/all/) === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 32px 0 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--surface-border);
    flex-wrap: wrap;
}
.pagination-link {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--surface-border);
    background-color: var(--surface);
    color: var(--surface-fg);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
.pagination-link:visited { color: var(--surface-fg); }
.pagination-link:hover,
.pagination-link:focus {
    border-color: var(--accent);
    outline: none;
}
.pagination-link.disabled {
    color: var(--muted);
    opacity: 0.5;
    cursor: default;
}
.pagination-info {
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: 0.9em;
}

.post-footer { margin-top: 24px; font-size: 0.95em; }
.post-source { color: var(--muted); }

/* === Code-block copy button === */
.code-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 0.8em;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.post-body pre:hover .code-copy { opacity: 1; }
.code-copy:hover,
.code-copy:focus {
    color: var(--surface-fg);
    border-color: var(--surface-border);
    outline: none;
}
.code-copy[data-copied="true"] { color: var(--accent); border-color: var(--accent); opacity: 1; }

/* === Share buttons === */
.share-buttons {
    margin: 32px 0 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--surface-border);
}
.share-buttons-label {
    font-size: 0.9em;
    color: var(--muted);
    margin: 0 0 8px;
}
.share-buttons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.share-buttons-list li { margin: 0; }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    text-decoration: none;
    font-size: 0.85em;
    font-family: var(--font-body);
    cursor: pointer;
    line-height: 1.2;
}
.share-btn:visited { color: var(--surface-fg); }
.share-btn:hover,
.share-btn:focus { border-color: var(--accent); outline: none; }
.share-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}
.share-btn[data-copied="true"] { border-color: var(--accent); color: var(--accent); }

/* === Back-to-top button === */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.back-to-top[data-visible="true"] { display: inline-flex; }
.back-to-top svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.back-to-top .btt-track {
    fill: none;
    stroke: var(--surface-border);
    stroke-width: 3;
    opacity: 0.4;
}
.back-to-top .btt-progress {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.1s linear;
}
.back-to-top .btt-arrow {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top .btt-progress { transition: none; }
}
@media (max-width: 480px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 12px;
        right: 12px;
    }
}

.back-to-top-link {
    display: inline-block;
    margin-bottom: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    padding: 4px 10px;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
    background-color: var(--accent);
    color: var(--bg);
}

/* === Translation toggle === */
.post-translations {
    margin: 8px 0 12px;
    padding: 6px 10px;
    border: 1px dashed var(--accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.95em;
}
.post-translations-label {
    color: var(--muted);
    font-family: var(--font-heading);
}
.post-translations-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.post-translations-list li {
    margin: 0;
}
.post-translations-list a,
.post-translations-list .post-translations-current {
    text-decoration: none;
    padding: 1px 8px;
    border: 1px solid var(--surface-border);
    background-color: var(--surface);
    color: var(--surface-fg);
}
.post-translations-list a:hover,
.post-translations-list a:focus {
    border-color: var(--accent);
    outline: none;
    text-decoration: underline;
}
.post-translations-list .post-translations-current {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--button-fg);
    font-weight: bold;
}

/* === Recipe servings scaler === */
.recipe-scale {
    border: 1px dashed var(--accent);
    background: transparent;
    padding: 10px 14px;
    margin: 1.5em 0;
    border-radius: 4px;
}
.recipe-scale-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-family: var(--font-heading);
    color: var(--accent);
}
.recipe-scale-label > span {
    margin-right: 2px;
}
.recipe-scale input[type="number"] {
    width: 4.5em;
    font-family: var(--font-mono);
    text-align: center;
}
.recipe-scale-btn {
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 2px 10px;
    font-family: var(--font-mono);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.2;
    min-width: 2em;
}
.recipe-scale-btn:hover,
.recipe-scale-btn:focus {
    border-color: var(--accent);
    outline: none;
}
.recipe-scale-note {
    font-size: 0.9em;
    color: var(--muted);
    margin: 8px 0 0;
}
.recipe-ingredients .qty {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 0 4px;
}
.post-body .qty {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 0 4px;
    font-size: 0.95em;
}

/* Broken wikilinks (marker class injected by the interlinker plugin) */
a.internal.new,
a.broken-link {
    color: var(--error);
    text-decoration: underline wavy;
}

/* === Pagefind UI theme overrides === */
:root {
    --pagefind-ui-scale: 0.9;
    --pagefind-ui-primary: var(--accent);
    --pagefind-ui-text: var(--fg);
    --pagefind-ui-background: var(--bg);
    --pagefind-ui-border: var(--surface-border);
    --pagefind-ui-tag: var(--surface);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 0;
    --pagefind-ui-font: var(--font-body);
}
:root[data-theme="dark"] {
    --pagefind-ui-primary: var(--accent);
    --pagefind-ui-text: var(--fg);
    --pagefind-ui-background: var(--bg);
    --pagefind-ui-border: var(--surface-border);
    --pagefind-ui-tag: var(--surface);
}

/* === Retro accents === */
:root[data-theme="dark"] h1 {
    text-shadow: 0 0 2px var(--accent);
}

/* === Home intro === */
.home-intro {
    line-height: 1.55;
    max-width: var(--measure-prose);
}
.home-intro p {
    margin: 0.7em 0;
}
.home-intro .bsg-quote {
    font-style: italic;
    color: var(--accent-2);
    margin-top: 1.4em;
    margin-bottom: 0.2em;
}
.home-intro .signoff {
    margin-top: 0.2em;
    margin-bottom: 1.2em;
    font-family: var(--font-mono);
}
.home-intro .cv-link {
    color: var(--muted);
    font-size: 0.95em;
}

/* === Tools grid (homepage) === */
.tool-grid-intro {
    color: var(--muted);
    font-size: 0.95em;
    margin: 4px 0 12px;
}
.tool-grid {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.tool-grid li { margin: 0; }
.tool-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--accent);
    transition: transform 0.08s, box-shadow 0.08s, border-color 0.08s;
}
.tool-card:visited { color: var(--surface-fg); }
.tool-card:hover,
.tool-card:focus {
    border-color: var(--accent);
    box-shadow: 5px 5px 0 var(--accent-2);
    transform: translate(-2px, -2px);
    outline: none;
}
.tool-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.tool-card-icon {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 1.1em;
    font-weight: bold;
    min-width: 1.8em;
    text-align: center;
    flex-shrink: 0;
}
.tool-card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--accent-2);
    text-decoration: underline;
    flex: 1;
}
.tool-card-desc {
    font-size: 0.9em;
    color: var(--muted);
    line-height: 1.4;
    margin: 0;
}
.tool-card:hover .tool-card-icon,
.tool-card:focus .tool-card-icon {
    color: var(--accent-2);
}
@media (max-width: 480px) {
    .tool-grid { grid-template-columns: 1fr; }
}

/* === Tool page panel === */
.tool-h1 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.tool-h1 .tool-icon {
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: 0.9em;
    flex-shrink: 0;
}
.tool-panel {
    border: 1px solid var(--surface-border);
    background-color: var(--surface);
    color: var(--surface-fg);
    margin: 16px 0;
    box-shadow: 4px 4px 0 var(--accent);
}
.tool-panel-title {
    background-color: var(--accent);
    color: var(--button-fg);
    padding: 4px 12px;
    font-family: var(--font-heading);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--surface-border);
    letter-spacing: 0.04em;
}
.tool-panel-title::before {
    content: "● ●  ●";
    letter-spacing: 0.15em;
    color: var(--button-fg);
    opacity: 0.55;
    font-size: 0.8em;
}
.tool-panel-body {
    padding: 14px 16px;
}
.tool-panel-body > h3:first-child { margin-top: 0; }
.tool-panel-body > p:first-child { margin-top: 0; }
.tool-panel-body label { margin-top: 10px; }
.tool-panel-body input[type="text"],
.tool-panel-body input[type="number"],
.tool-panel-body select {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--surface-border);
    padding: 4px 6px;
    font-family: var(--font-mono);
}
.tool-panel-body input[type="text"]:focus,
.tool-panel-body input[type="number"]:focus,
.tool-panel-body select:focus,
.tool-panel-body textarea:focus {
    outline: 1px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}
.tool-panel-body textarea {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--surface-border);
    padding: 6px 8px;
    font-family: var(--font-mono);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.4;
}
.tool-panel-body button {
    cursor: pointer;
    transition: background-color 0.08s, color 0.08s, transform 0.06s;
}
.tool-panel-body button:not(.tool-card):hover,
.tool-panel-body button:not(.tool-card):focus {
    background-color: var(--accent-2);
    outline: none;
}
.tool-panel-body button:active {
    transform: translateY(1px);
}
.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}
.tool-status {
    font-size: 0.9em;
    color: var(--muted);
    min-height: 1.2em;
    display: inline-block;
}
.tool-status[data-state="ok"] { color: var(--accent); }
.tool-status[data-state="error"] { color: var(--error); }

/* === Color converter swatch === */
.color-swatch {
    display: inline-block;
    width: 96px;
    height: 96px;
    border: 2px solid var(--surface-border);
    box-shadow: 3px 3px 0 var(--accent);
    vertical-align: middle;
    margin: 8px 12px 8px 0;
    background:
        linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%),
        linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%) #ddd;
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.color-swatch-fill {
    display: block;
    width: 100%;
    height: 100%;
}

/* === Cron builder === */
.cron-expr-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0;
}
.cron-expr-input {
    flex: 1 1 280px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    padding: 8px 10px !important;
    letter-spacing: 0.08em;
}
.cron-fields {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 12px 0;
}
@media (max-width: 640px) {
    .cron-fields { grid-template-columns: repeat(2, 1fr); }
}
.cron-field {
    border: 1px solid var(--surface-border);
    background-color: var(--bg);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cron-field-label {
    font-family: var(--font-heading);
    font-size: 0.8em;
    color: var(--accent-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cron-field-input {
    font-family: var(--font-mono);
    background-color: var(--surface);
    color: var(--surface-fg);
    border: 1px solid var(--surface-border);
    padding: 4px 6px;
    width: 100%;
    box-sizing: border-box;
}
.cron-field-range {
    font-size: 0.78em;
    color: var(--muted);
}
.cron-explanation {
    border: 1px dashed var(--accent);
    padding: 10px 14px;
    margin: 12px 0;
    font-family: var(--font-mono);
    background: transparent;
    color: var(--fg);
}
.cron-explanation[data-state="error"] {
    border-color: var(--error);
    color: var(--error);
}
.cron-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}
.cron-preset {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--surface-border);
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    cursor: pointer;
}
.cron-preset:hover,
.cron-preset:focus {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--button-fg);
    outline: none;
}
.cron-next {
    margin: 12px 0;
}
.cron-next-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
.cron-next-list li {
    padding: 2px 0;
    color: var(--surface-fg);
}

/* === Morse audio controls === */
.morse-output {
    font-family: var(--font-mono);
    font-size: 1.05em;
    letter-spacing: 0.05em;
    word-break: break-word;
}

/* === Case grid output === */
.case-results {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 14px;
    margin: 10px 0;
    align-items: baseline;
}
.case-label {
    font-family: var(--font-heading);
    font-size: 0.85em;
    color: var(--accent-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.case-value {
    font-family: var(--font-mono);
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--surface-border);
    padding: 3px 8px;
    word-break: break-word;
    cursor: copy;
}
.case-value:hover { border-color: var(--accent); }
.case-value[data-copied="true"] { border-color: var(--accent); color: var(--accent); }