/* ck-site.css — Click's own look, loaded after house.css. Every class here starts ck-.

   The accent is indigo. Measured as text (the build script measures these on every build and stops under 4.5:1):
   paper  #4338CA on #ffffff 7.90:1, on the tint #FAFAFA 7.57:1
   dark   #A5B4FC on #0C1116 9.51:1, on the card #121920 8.88:1 */

:root {
    --accent:     #4338CA;
    --accent-ink: #4338CA;
    --on-accent:  #ffffff;
}
html[data-dark] {
    --accent:     #A5B4FC;
    --accent-ink: #A5B4FC;
    --on-accent:  #11161C;
}

/* ------------------------------------------------------------------ the instrument */
.ck-tool { padding-block: 0 clamp(36px, 5vw, 64px); }
.ck-panel {
    border: 1px solid var(--line); border-radius: 16px; background: var(--card);
    padding: clamp(18px, 3vw, 30px); display: grid; gap: 18px; max-width: 860px;
    box-shadow: 0 1px 0 var(--line-soft), 0 18px 40px -28px rgba(30, 38, 43, .35);
}
html[data-dark] .ck-panel { box-shadow: none; }
.ck-form { display: grid; gap: 12px; grid-template-columns: 1fr auto; align-items: end; }
.ck-form .field { grid-column: 1; }
.ck-form .btn { grid-column: 2; min-height: 46px; }
.ck-form .input { font-family: var(--mono); font-size: 1rem; }
.ck-hint { grid-column: 1 / -1; margin: 0; font-size: .84rem; color: var(--ink-55); }
@media (max-width: 560px) {
    .ck-form { grid-template-columns: 1fr; }
    .ck-form .btn { grid-column: 1; width: 100%; }
}

/* the answer's space is reserved before there is an answer: nothing below it moves when one arrives */
.ck-result {
    border: 1px dashed var(--line); border-radius: var(--radius); background: var(--tint);
    padding: 16px 18px; min-height: 236px; display: grid; align-content: center; gap: 8px; min-width: 0;
}
@media (max-width: 560px) { .ck-result { min-height: 300px; } }
.ck-result[data-state="ok"] { border-style: solid; border-color: var(--accent); }
.ck-result[data-state="error"] { border-style: solid; border-color: var(--bad); }
.ck-result p { margin: 0; }
.ck-result__idle { color: var(--ink-55); font-size: .92rem; max-width: 56ch; }
.ck-short { font-size: clamp(1.25rem, 4.6vw, 2rem); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.ck-short a { color: var(--accent-ink); text-decoration: none; }
.ck-short a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ck-to { font-size: .95rem; color: var(--ink-77); overflow-wrap: anywhere; }
.ck-to b { color: var(--ink); }
.ck-err { color: var(--bad); font-size: 1rem; font-weight: 500; max-width: 60ch; }
.ck-err__why { color: var(--ink-77); font-size: .88rem; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; align-items: center; }
.ck-result .ck-actions { margin-top: 8px; }
.ck-result .status { min-height: 1.5em; }

.ck-check { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.ck-check .status { grid-column: 1 / -1; margin: 0; }

/* ------------------------------------------------------------------ the drawing */
.ck-figure { margin: 0 0 8px; max-width: 760px; }
.ck-figure svg { display: block; width: 100%; height: auto; }
.ck-figure figcaption { font-size: .84rem; color: var(--ink-55); margin-top: 10px; }
.ck-d-page   { fill: var(--card); stroke: var(--line); }
.ck-d-bar    { fill: var(--tint); stroke: var(--line); }
.ck-d-row    { fill: var(--line-soft); }
.ck-d-host   { fill: var(--accent); }
.ck-d-btn    { fill: var(--ink); }
.ck-d-btn-t  { fill: var(--paper); font: 600 13px var(--sans); }
.ck-d-ghost  { fill: none; stroke: var(--line); }
.ck-d-lead   { stroke: var(--accent); stroke-width: 1.2; fill: none; }
.ck-d-dot    { fill: var(--accent); }
.ck-d-num    { fill: var(--on-accent); font: 600 12px var(--sans); }
.ck-d-small  { fill: var(--ink-55); font: 500 10px var(--mono); letter-spacing: .08em; }

/* ------------------------------------------------------------------ rules and facts */
.ck-rules { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width: none; }
.ck-rules li { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; background: var(--card); font-size: .92rem; line-height: 1.55; color: var(--ink-77); min-width: 0; overflow-wrap: anywhere; }
.ck-rules b { color: var(--ink); display: block; margin-bottom: 2px; }
.ck-hosts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: .4em 0 1.2em; padding: 0; }
.ck-hosts li { font: 400 .84rem/1 var(--mono); padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-77); background: var(--card); }
.ck-facts { max-width: 760px; margin: 0 0 1.4em; }
.band h2.ck-more { margin-top: 1.9em; }
.ck-facts table.t { min-width: 540px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.ck-mail { font-family: var(--mono); overflow-wrap: anywhere; }
.ck-template {
    font: 400 .88rem/1.6 var(--mono); background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-77); margin: 0 0 1.2em; max-width: 70ch;
}

/* ------------------------------------------------------------------ the preview page (go.php) */
.ck-pre { padding-bottom: clamp(40px, 6vw, 84px); }
.ck-pre .ck-pre__h { max-width: 24ch; overflow-wrap: anywhere; font-size: clamp(1.8rem, 4.6vw, 3.2rem); }
.ck-pre .ck-pre__h b { color: var(--accent-ink); }
.ck-pre__card { margin-top: 28px; max-width: 860px; }
.ck-url { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; word-break: break-all; color: var(--ink-77); }
.ck-url b { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 4px; padding: 1px 3px; }
.ck-idn { margin: 8px 0 0; }
.ck-pre .kv dd b { overflow-wrap: anywhere; }
.ck-pre .kv .tag { vertical-align: middle; margin-left: 4px; }
.ck-go { white-space: normal; overflow-wrap: anywhere; text-align: center; padding-block: 10px; max-width: 100%; line-height: 1.3; }
.ck-pre .ck-actions .btn--ghost { white-space: normal; text-align: center; padding-block: 10px; }
.ck-pre .note { margin-top: 18px; }
.ck-code-line { margin: 18px 0 0; font-size: 1.05rem; color: var(--ink-77); overflow-wrap: anywhere; }

/* house nav on a narrow phone: five short words fit once the gaps are tight */
@media (max-width: 480px) {
    .mast__brand span { display: none; }
    .mast__nav a { padding: 8px 7px; }
}

/* ------------------------------------------------------------------ fingers
   On a phone, and on anything driven by touch, every control that is not a link inside a sentence is at least
   44 px tall: the masthead's links, the two edition buttons, the footer's links, the breadcrumb. */
@media (max-width: 640px), (pointer: coarse) {
    .mast__nav a { min-height: 44px; display: inline-flex; align-items: center; }
    .ed { padding: 0; gap: 0; }
    .ed button { width: 44px; height: 44px; }
    .foot ul { gap: 0; }
    .foot li a { display: inline-flex; align-items: center; min-height: 44px; }
    .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
    .foot__legal { align-items: center; }
    .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
    .crumbs ol { align-items: center; }
    .crumbs { padding-top: 10px; }
}

/* a button inside running text is still a button: .prose a would paint its label in the ink of its own ground */
.prose a.btn { color: var(--paper); text-decoration: none; }
.prose a.btn:hover { color: var(--paper); }
html[data-dark] .prose a.btn:hover { color: var(--on-accent); }
.prose a.btn--ghost, .prose a.btn--ghost:hover, html[data-dark] .prose a.btn--ghost:hover { color: var(--ink); }

@media (max-width: 640px), (pointer: coarse) {
    .mast__brand { min-height: 44px; min-width: 44px; }
    .crumbs a, .foot__legal a { min-width: 44px; }
}

/* 360 px: the mark, three links and the switch share one row, none of them scrolled out of sight */
@media (max-width: 400px) {
    .mast .wrap { padding-inline: 12px; }
    .mast__in { gap: 6px; }
    .mast__nav { gap: 2px; }
    .mast__nav a { padding-inline: 6px; }
}