/* Cron tool page (/tools/cron/). Loaded after sr.css and uses only its tokens.
   No motion on this page (DESIGN-SYSTEM.md). Colour carries state only: red = error, amber = check. */
.page-tool { --warn: var(--cron); }
.page-tool code { font-family: var(--mono); font-size: .9em; }
.page-tool .notes code, .page-tool .logic code, .page-tool .macro code, .page-tool .diffs code, .page-tool .dt code {
  padding: .05em .35em; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* ---------- input ---------- */
.tool-top { padding-block: 56px 28px; }
@media (min-width: 1020px) { .tool-top { padding-top: 72px; } }
.tool-top h1 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.06; max-width: 21ch; }
.tool-top .lead { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); max-width: 68ch; }
.tool { margin-top: 36px; display: grid; gap: 20px; }
.page-tool .field label { color: var(--ink); }
.expr-field input { min-height: 60px; padding: 12px 16px; font: 500 clamp(18px, 2.3vw, 24px)/1.3 var(--mono); letter-spacing: .01em; }
.page-tool .field select { font-size: 14.5px; }
.fields { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; min-height: 40px; }
.fv { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
.fv b { font: 600 15px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.fv span { font-size: 12px; color: var(--mute); white-space: nowrap; }
.fv.bad b, .fv.bad span, .fv.x b { color: var(--bad); }
.macro { font-size: 14.5px; color: var(--ink-2); }
.tool-opts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hint { font-size: 13px; color: var(--mute); }
.examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; }
.ex-label { color: var(--mute); }
.examples ul { display: flex; flex-wrap: wrap; row-gap: 4px; }
.examples li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--mute); } /* plain list, no chips */
.examples a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.examples a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- output ---------- */
.tool-out { display: grid; gap: 40px 56px; padding-block: 20px 96px; }
@media (min-width: 1020px) { .tool-out { grid-template-columns: 7fr 5fr; align-items: start; } }
@media (max-width: 720px) { .tool-out { padding-bottom: 64px; } }
.tool-out > * { min-width: 0; }
.desc { font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; text-wrap: pretty; }
.desc.muted { color: var(--mute); font-weight: 500; }
.logic { margin-top: 8px; color: var(--ink-2); }
.logic:empty { display: none; }
.out-h { margin: 32px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.out-side .out-h:first-child { margin-top: 0; }

.rt-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.rt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rt th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; vertical-align: bottom; }
.rt th span { display: block; font: 500 12px var(--sans); color: var(--mute); }
.rt td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 0; }
.rt tr:last-child td, .rt tr:has(+ tr.flag) td { border-bottom: 0; }
.rt .n { width: 44px; padding-right: 0; font: 12px/1.9 var(--mono); color: var(--mute); }
.rt .d { display: block; font: 12.5px/1.6 var(--mono); color: var(--mute); }
.rt .tm { font: 600 16px/1.5 var(--mono); color: var(--ink); margin-right: 8px; }
.rt .of { font: 12px var(--mono); color: var(--mute); white-space: nowrap; }
.rt tr.flag td { padding-top: 0; font-size: 13.5px; line-height: 1.5; color: var(--warn); }
.rt tr.skip .tm { color: var(--mute); text-decoration: line-through; }
.rt tr.skip .of { color: var(--warn); }
@media (max-width: 560px) {
  .rt th, .rt td { padding-inline: 10px; }
  .rt .n { width: 30px; }
  .rt .tm { font-size: 15px; margin-right: 6px; }
  .rt .of { font-size: 11.5px; }
}
.empty { padding: 18px; color: var(--mute); }
.empty.bad { color: var(--bad); }
.funnel { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.funnel a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.notes { border-top: 1px solid var(--line); }
.notes li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.notes p { overflow-wrap: anywhere; }
.notes .lv { font: 600 11.5px/2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.notes .error .lv { color: var(--bad); }
.notes .warn .lv { color: var(--warn); }
.snip .term-bar { gap: 8px; padding-right: 10px; }
.snip .tabs { flex: 1; min-width: 0; }
.page-tool .tabs button[aria-selected="true"] { border-bottom-color: var(--term-ink); }
.snip pre { min-height: 132px; font-size: 12.5px; }
.snip pre.c { color: var(--term-mute); white-space: pre-wrap; }

/* ---------- how dialects differ ---------- */
.dt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.dt { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14.5px; }
.dt th, .dt td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dt thead th { font: 500 12.5px/1.4 var(--sans); color: var(--mute); }
.dt tbody th { font-weight: 600; white-space: nowrap; }
.dt td { color: var(--ink-2); }
.dt tbody tr:last-child > * { border-bottom: 0; }
.diffs { margin-top: 44px; display: grid; gap: 32px 56px; }
@media (min-width: 900px) { .diffs { grid-template-columns: 1fr 1fr; } }
.diffs h3 { font-size: 18px; margin-bottom: 8px; }
.diffs p { color: var(--ink-2); max-width: 62ch; }
.page-tool .checked { margin-top: 40px; max-width: 82ch; }
.tool-opts .field { align-content: start; }
.tool-opts select { height: 44px; }
@media (max-width: 720px) { .dt { min-width: 640px; font-size: 14px; } }
.fv.opt b, .fv.opt span { color: var(--mute); }