/* ============================================================================
   Cron Expression Generator — tool layer.

   base.css is loaded immediately before this file and owns everything
   structural: reset, body, links, focus rings, headings, forms and selects,
   .panel, .btn, .chip, tables, details, header, footer, .wrap, .readout.

   This file sets the tool's accent and styles only what is genuinely
   specific to the cron builder.
   ========================================================================= */

:root {
  --accent:     #a5b4fc;
  --accent-dim: rgba(165, 180, 252, 0.14);
}

@media (prefers-color-scheme: light) {
  :root {
    --accent:     #5b4bd6;
    --accent-dim: rgba(91, 75, 214, 0.10);
  }
}

/* --------------------------------------------------------------- utility -- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* base.css only styles lists inside .prose; these pages use bare <ul>/<ol> */
main ul, main ol { padding-left: 1.25em; margin: 0 0 1.1em; }
main li { margin-bottom: 0.4em; }

/* -------------------------------------------------------- the instrument -- */
/* .tool carries .panel */

.tool { margin-bottom: 2.5rem; }
.tool > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- builder ---- */
/* five fields across on wide screens, one per row on a phone; each column is
   wide enough for the longest option label plus the select's own chevron */

.builder .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* a hair smaller than the base input size, so that the longest default label
   ("Weekdays (Mon–Fri)") sits comfortably clear of the chevron five-across */
.builder select { font-size: 0.875rem; }

.hint { margin: 0.9rem 0 0; font-size: 0.9375rem; color: var(--text-dim); }

/* -------------------------------------------------------------- readout --- */
/* the generated expression is the answer — .expr carries .readout, and
   .expr-bar carries .panel-sunk */

.expr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1.5rem;
}
.tool > .expr-bar:first-child { margin-top: 0; }

.expr-bar::before { content: "cron expression"; flex: 1 0 100%; }

/* small mono labels for the instrument's own sections */
.expr-bar::before,
.result-block > h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.result-block > h2 { margin: 0 0 0.8rem; }

/* strip the inline-code chrome base.css gives every <code> */
.expr {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
  overflow-x: auto;
}

/* #exprInput is the merged Build/Parse field, an <input> where the long-tail
   pages still have a read-only <code>. A plain input[type="text"] carries
   base.css's generic form chrome (width:100%, background, border, padding,
   font-size) at a higher specificity than the .expr/.readout classes above,
   since a type+attribute selector beats a bare class. Reset those properties
   here, scoped to the id so the long-tail pages' <code class="expr readout">
   is untouched. */
#exprInput {
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}
#exprInput:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.copy-status {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ------------------------------------------------------------- results ---- */

.result-block {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.explain {
  max-width: 62ch;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
}

.error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--err);
  border-radius: var(--radius-sm);
  background: var(--err-bg);
  color: var(--err);
  font-size: 0.9375rem;
}

.runs td:first-child {
  width: 2.5em;
  font-family: var(--mono);
  color: var(--text-dim);
}
.rel { color: var(--text-dim); font-size: 0.875em; white-space: nowrap; }

.tz-note { margin: 0.8rem 0 0; font-size: 0.8125rem; color: var(--text-dim); }

/* ------------------------------------------------------------- presets ---- */
/* .preset is authored by app.js; styled to be the shared .chip */

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.presets li { margin: 0; }

.preset {
  font-family: var(--mono);
  font-size: 0.78125rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.preset:hover { border-color: var(--accent); }
.preset-expr { color: var(--text-dim); margin-left: 0.5rem; }
.preset:hover .preset-expr { color: var(--accent); }

/* -------------------------------------------------------- content layer --- */

/* keep running prose on a readable measure while tables and code stay wide */
.content p, .content ul, .content ol { max-width: 68ch; }
.content .card-links, .content .presets { max-width: none; }
.content h2:first-child { margin-top: 0; }

/* .example carries .panel-sunk */
.example { margin-bottom: 1rem; }
.example h3 { margin-top: 0; }
.example > p:last-child { margin-bottom: 0; }

.expr-inline {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.45em;
}

.callout {
  margin: 1.4em 0;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-dim);
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout > p:last-child { margin-bottom: 0; }

details .answer > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ card links -- */

.card-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.card-links li { margin: 0; }

.card-links a {
  display: block;
  height: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.card-links a:hover { border-color: var(--accent); background: var(--surface-2); }
.card-links strong { display: block; font-size: 0.9375rem; }
.card-links span {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.card-links a:hover span { color: var(--accent); }