/* The example app's own styling. Deliberately small: the interesting
   stylesheet in this directory is root/queue.css, which overrides the
   admin UI's bundle. */

:root {
  --ink: #10131a;
  --paper: #f6f7fb;
  --line: #d9dde8;
  --accent: #6f4bd8;
  --warn: #8a5a00;
  --error: #a11;
}

* { box-sizing: border-box }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 700; text-decoration: none; color: var(--ink) }
.brand span { color: var(--accent) }
.bar nav { display: flex; gap: 1rem }
.bar a { color: #445; text-decoration: none }
.bar a:hover { color: var(--accent) }
.foot { border-top: 1px solid var(--line); border-bottom: 0; color: #667; font-size: 0.85rem }

main { max-width: 44rem; margin: 2rem auto; padding: 0 1.5rem }

h1 { margin: 0 0 0.5rem; font-size: 1.8rem }
h2 { margin: 2rem 0 0.5rem; font-size: 1.1rem; text-transform: uppercase;
     letter-spacing: 0.06em; color: #667 }

.lede { color: #556; margin-top: 0 }

.card {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
  margin: 1rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.card.thin { padding: 1rem 1.25rem }

label { font-size: 0.85rem; color: #667 }
input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
}
button {
  justify-self: start;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
button:hover { filter: brightness(1.1) }

dl.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem 1rem;
           padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line);
           border-radius: 10px }
dl.stats.wide { grid-template-columns: repeat(3, auto 1fr) }
dl.stats dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
              color: #889 }
dl.stats dd { margin: 0 0 0.5rem; font-variant-numeric: tabular-nums; font-weight: 600 }

.state { text-transform: uppercase; font-size: 0.8rem }
.state-finished { color: #197a3d }
.state-failed { color: var(--error) }
.state-active { color: var(--accent) }

ul.jobs { list-style: none; padding: 0 }
ul.jobs li { padding: 0.4rem 0; border-bottom: 1px solid var(--line) }

pre.result { padding: 1rem; background: #fff; border: 1px solid var(--line);
             border-radius: 10px; overflow-x: auto }

.warn { padding: 0.9rem 1.1rem; background: #fff8e6; border: 1px solid #f0dca8;
        border-radius: 10px; color: var(--warn) }
.error { color: var(--error) }
code { background: #eceffa; padding: 0.1rem 0.35rem; border-radius: 5px;
       font-size: 0.9em }
