:root {
    --teal: #00AABC; --cyan: #00D1EC; --teal-access: #007A86;
    --ink: #292929; --mist: #F4F3F3; --navy: #1F3664;
    --paper: #FBFBFC; --rule: #DEDFE3; --rule-soft: #EAEBEE; --ink-soft: #5A5D66;
    --up: #1E7A5F; --down: #9E3B33;
    --u: 8px;
    --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font); font-size: 16px; line-height: 1.55;
  }

  .wrap { max-width: 820px; margin: 0 auto; padding: calc(var(--u) * 7) calc(var(--u) * 3) calc(var(--u) * 12); }

  .brand {
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--teal-access); margin-bottom: calc(var(--u) * 1.5);
  }

  h1 {
    margin: 0 0 var(--u); font-size: clamp(32px, 4.4vw, 44px);
    line-height: 1.08; font-weight: 600; letter-spacing: -0.02em;
  }

  .sub { margin: 0 0 calc(var(--u) * 5); color: var(--ink-soft); max-width: 58ch; }

  /* ---------- the chooser ---------- */

  .picker { margin-bottom: calc(var(--u) * 4); }

  label.top { display: block; font-weight: 600; font-size: 15px; margin-bottom: var(--u); }


  select#job {
    /* min-width:0 or the select refuses to shrink below its longest option
       and shoves the (i) button off a narrow screen */
    flex: 1; min-width: 0;
    padding: calc(var(--u) * 1.75) calc(var(--u) * 5) calc(var(--u) * 1.75) calc(var(--u) * 2);
    font: inherit; font-size: 16px; font-weight: 600; color: inherit; background: #fff;
    border: 1px solid var(--teal-access); border-radius: 2px; appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23007A86' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
  }

  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

  /* The status line sits above the picker, so it needs to end well clear of
     the Job label rather than butting straight up against it. */
  #status:not(:empty) {
    margin-bottom: calc(var(--u) * 2.5);
  }

  .jobdesc {
    margin: calc(var(--u) * 1.5) 0 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 62ch;
  }

  /* ---------- the sentence ---------- */

  .sentence {
    font-size: 21px; line-height: 2.2; max-width: 62ch; margin: 0 0 calc(var(--u) * 2);
  }

  .sentence input[type=text],
  .sentence select,
  .sentence .chip {
    display: inline-block; width: auto; max-width: 100%;
    font-family: var(--font); font-size: 20px; font-weight: 600;
    color: var(--teal-access); background: transparent;
    border: 0; border-bottom: 2px solid var(--teal); border-radius: 0;
    padding: 0 6px 1px; text-align: center; vertical-align: baseline;
  }
  .sentence input[type=text]::placeholder { color: #A9ACB4; font-weight: 400; font-style: italic; }
  .sentence select { cursor: pointer; appearance: none; padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2300AABC' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; }
  .sentence .chip { cursor: pointer; line-height: inherit; }
  .sentence .chip.empty { color: #A9ACB4; font-weight: 400; font-style: italic; border-bottom-color: var(--rule); }
  .sentence .chip:hover { background: var(--mist); }
  .sentence .bad { border-bottom-color: var(--down) !important; color: var(--down) !important; }

  /* A locked chip is a blank the chain already filled in (carried forward or
     an inherited file). It reads like the rest of the sentence but cannot be
     clicked, so the dashed underline and muted color mark it as fixed. */
  .sentence .chip.locked {
    cursor: default; color: var(--ink-soft); font-weight: 600;
    border-bottom-style: dashed; border-bottom-color: var(--rule);
  }
  .sentence .chip.locked:hover { background: transparent; }

  /* expanders that hang off a blank */
  .expander {
    margin: calc(var(--u) * 1) 0 calc(var(--u) * 3);
    border: 1px solid var(--rule); border-left: 3px solid var(--teal);
    border-radius: 2px; background: #fff; padding: calc(var(--u) * 2.5);
  }
  .expander h3 {
    margin: 0 0 var(--u); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-access);
  }
  .expander textarea {
    width: 100%; min-height: 120px; resize: vertical; font: inherit; font-size: 15px;
    padding: calc(var(--u) * 1.5); border: 1px solid var(--rule); border-radius: 2px; background: #fff;
  }
  .expander .hint { color: var(--ink-soft); font-size: 13px; margin-top: var(--u); }

  .expander .bulk { display: flex; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 1.5); }
  .expander .link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--teal-access); font: inherit; font-size: 13px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .checks { display: grid; gap: calc(var(--u) * 0.75); }
  .checks label {
    display: flex; align-items: flex-start; gap: calc(var(--u) * 1.25);
    font-size: 15px; font-weight: 400; margin: 0; cursor: pointer;
  }
  .checks input { margin-top: 4px; flex: 0 0 auto; }

  .dropzone {
    border: 1px dashed var(--rule); border-radius: 2px; background: var(--paper);
    padding: calc(var(--u) * 3); text-align: center; cursor: pointer;
  }
  .dropzone:hover, .dropzone.over { border-color: var(--teal); background: #fff; }
  .dropzone .big { font-weight: 600; font-size: 15px; }
  .dropzone .small { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

  .filelist { list-style: none; margin: calc(var(--u) * 1.5) 0 0; padding: 0; }
  .filelist li {
    display: flex; align-items: center; gap: calc(var(--u) * 1.5);
    padding: calc(var(--u) * 1) 0; border-top: 1px solid var(--rule-soft); font-size: 14px;
  }
  .filelist li:first-child { border-top: 0; }
  .filelist .nm { flex: 1; }
  .filelist .sz { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
  .filelist .rm {
    background: transparent; color: var(--down); border: 0; padding: 2px 6px;
    font-size: 18px; line-height: 1; cursor: pointer; border-radius: 2px;
  }
  .filelist .rm:hover { background: #F7EDEC; }

  .sentence-errs { margin-bottom: calc(var(--u) * 3); }
  .sentence-errs div { color: var(--down); font-size: 14px; }

  /* ---------- contract + action ---------- */

  .contract {
    margin: calc(var(--u) * 4) 0; padding: calc(var(--u) * 3);
    background: var(--mist); border-radius: 2px;
  }
  .contract h2 {
    margin: 0 0 calc(var(--u) * 2); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-access);
  }
  .contract dl {
    display: grid; grid-template-columns: max-content 1fr;
    gap: calc(var(--u) * 1.5) calc(var(--u) * 3); margin: 0; font-size: 15px;
  }
  .contract dt { color: var(--ink-soft); }
  .contract dd { margin: 0; font-weight: 500; }

  button.primary {
    padding: calc(var(--u) * 2) calc(var(--u) * 4); font: inherit; font-size: 16px;
    font-weight: 600; color: #fff; background: var(--teal-access);
    border: 0; border-radius: 2px; cursor: pointer;
  }
  button.primary:hover { background: #00646E; }
  button.ghost {
    background: transparent; color: var(--teal-access); border: 1px solid var(--rule);
    font: inherit; font-weight: 500; padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
    font-size: 15px; border-radius: 2px; cursor: pointer;
  }
  button.ghost:hover { background: #fff; border-color: var(--teal-access); }

  /* ---------- panels ---------- */

  .panel { border: 1px solid var(--rule); border-radius: 2px; background: #fff; margin-bottom: calc(var(--u) * 3); }
  .panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    border-bottom: 1px solid var(--rule-soft); background: var(--mist);
  }
  .panel-head h2 {
    margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--teal-access);
  }
  .pill {
    font-family: var(--mono); font-size: 11.5px; padding: 3px 10px; border-radius: 2px;
    background: #fff; border: 1px solid var(--rule); color: var(--ink-soft); white-space: nowrap;
  }
  .pill.live { border-color: var(--teal); color: var(--teal-access); }
  .pill.done { background: var(--teal-access); border-color: var(--teal-access); color: #fff; }

  .meter { height: 3px; background: var(--rule-soft); overflow: hidden; }
  .meter i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .45s linear; }

  .log { padding: calc(var(--u) * 2) calc(var(--u) * 3); }
  .log-line {
    display: grid; grid-template-columns: 62px 1fr; gap: calc(var(--u) * 2);
    font-size: 14.5px; padding: calc(var(--u) * 0.75) 0; color: var(--ink-soft);
  }
  .log-line time { font-family: var(--mono); font-size: 12.5px; color: #8A8D96; }
  .log-line.now { color: var(--ink); font-weight: 500; }
  .log-line .tool { font-family: var(--mono); font-size: 13px; color: var(--navy); }

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

  .files { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); }
  .out {
    display: flex; align-items: center; gap: calc(var(--u) * 1.5);
    padding: calc(var(--u) * 2) calc(var(--u) * 2.5); border: 1px solid var(--rule);
    border-radius: 2px; text-decoration: none; color: inherit; background: #fff;
  }
  .out:hover { border-color: var(--teal); }
  .out .ext {
    font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 4px 7px;
    border-radius: 2px; background: var(--navy); color: #fff;
  }
  .out .n { font-weight: 500; font-size: 15px; }
  .out .s { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 400; }

  .tablewrap { overflow-x: auto; border-top: 1px solid var(--rule-soft); }
  table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
  th {
    text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--teal-access); padding: calc(var(--u) * 1.5); border-bottom: 1px solid var(--rule); white-space: nowrap;
  }
  td { padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
  td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
  .tag { font-size: 11.5px; padding: 2px 8px; border-radius: 2px; background: var(--mist); color: var(--ink-soft); white-space: nowrap; }
  .peek { padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: 13.5px; color: var(--ink-soft); }

  .tiles {
    display: grid; gap: 1px; background: var(--rule-soft);
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    border-top: 1px solid var(--rule-soft);
  }
  .tile { background: #fff; padding: calc(var(--u) * 2.5); }
  .tile .k { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
  .tile .v { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 4px; }
  .tile .c { font-size: 13px; font-variant-numeric: tabular-nums; }
  .tile .c.up { color: var(--up); }
  .tile .c.down { color: var(--down); }

  .statement {
    padding: calc(var(--u) * 4) calc(var(--u) * 3);
    border-top: 1px solid var(--rule-soft);
  }
  .statement p {
    margin: 0 0 calc(var(--u) * 2);
    font-size: 20px;
    line-height: 1.62;
    max-width: 54ch;
    text-wrap: pretty;
  }
  .statement p:last-child { margin-bottom: 0; }
  .statement p + p { font-size: 16px; color: var(--ink-soft); }
  .statement strong { font-weight: 600; color: var(--navy); }

  .outline { padding: calc(var(--u) * 2) calc(var(--u) * 3); border-top: 1px solid var(--rule-soft); }
  .outline .row {
    display: grid; grid-template-columns: 28px 1fr auto; gap: calc(var(--u) * 1.5);
    align-items: baseline; padding: calc(var(--u) * 1) 0; border-bottom: 1px solid var(--rule-soft);
  }
  .outline .row:last-child { border-bottom: 0; }
  .outline .i { font-family: var(--mono); font-size: 12px; color: #A9ACB4; }
  .outline .t { font-size: 14.5px; }
  .outline .m { font-size: 12.5px; color: var(--ink-soft); font-family: var(--mono); }

  /* ---------- workflow continue step ---------- */

  .stepbody { padding: calc(var(--u) * 3) calc(var(--u) * 3) 0; }
  .stepbody .sentence { margin-bottom: calc(var(--u) * 1); }
  .stepbody-actions { padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 3); }

  .hidden { display: none; }

  @media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }

  @media (max-width: 640px) {
    .wrap { padding: calc(var(--u) * 4) calc(var(--u) * 2.5) calc(var(--u) * 8); }
    .contract dl { grid-template-columns: 1fr; gap: var(--u); }
    .sentence { font-size: 18px; line-height: 2.3; }
    .sentence input[type=text], .sentence select, .sentence .chip { font-size: 17px; }

    /* A step's meta text ("you fill in 1 field") is long enough that sharing
       a row with the title wraps both into a cramped tangle. Below it, full
       width, reads clean instead. */
    .outline .row { grid-template-columns: 20px 1fr; row-gap: 2px; }
    .outline .m { grid-column: 2 / -1; }
  }