/* Board tracker. Generic: colours come from --cms2-accent so a site's palette
   drives it, and the layout is a narrow column because both states -- a single
   input, and a short list of stages -- read badly across a wide page. */
.cms2-bt { padding-block: clamp(32px, 5vw, 64px); }
.cms2-bt-in { max-width: 640px; margin-inline: auto; padding-inline: 20px; }
.cms2-bt-title { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.cms2-bt-intro, .cms2-bt-note { color: #555; line-height: 1.6; }
.cms2-bt-note { margin-top: 18px; font-size: 14px; }

.cms2-bt-form { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.cms2-bt-input {
    flex: 1 1 220px;              /* wraps to its own row before it gets unusable */
    min-width: 0;                 /* a flex item will not shrink below its content */
    padding: 14px 18px;
    border: 1px solid #d8d8d8;
    border-radius: 100px;
    font: inherit;
}
.cms2-bt-input:focus { outline: 2px solid var(--cms2-accent, #be202e); outline-offset: 1px; }
.cms2-bt-submit {
    flex: 0 0 auto;
    padding: 14px 28px;
    border: 0; border-radius: 100px;
    background: var(--cms2-accent, #be202e); color: #fff;
    font: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
}

.cms2-bt-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 22px 0 0; }
.cms2-bt-facts dt { color: #8a8a8a; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.cms2-bt-facts dd { margin: 0; font-weight: 600; }
.cms2-bt-status { margin: 22px 0 0; font-size: 17px; font-weight: 600; }
.cms2-bt-status-complete { color: #1a7f3c; }
.cms2-bt-notfound { margin: 18px 0 0; font-size: 17px; }

/* The timeline. A left rule with a dot per stage rather than a progress bar:
   the API sends however many stages a factory runs, so nothing here assumes a
   fixed count that a workflow change could invalidate. */
.cms2-bt-steps { list-style: none; margin: 26px 0 0; padding: 0 0 0 26px; border-left: 2px solid #e6e6e6; }
.cms2-bt-step { position: relative; padding: 0 0 18px; }
.cms2-bt-step:last-child { padding-bottom: 0; }
.cms2-bt-step::before {
    content: ""; position: absolute; left: -33px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid #d8d8d8;
}
.cms2-bt-step.is-done::before    { background: var(--cms2-accent, #be202e); border-color: var(--cms2-accent, #be202e); }
.cms2-bt-step.is-current::before { border-color: var(--cms2-accent, #be202e); box-shadow: 0 0 0 4px rgba(190,32,46,.15); }
.cms2-bt-step-name { font-weight: 600; }
.cms2-bt-step.is-todo .cms2-bt-step-name { color: #9a9a9a; font-weight: 400; }
.cms2-bt-step-date { display: block; font-size: 13px; color: #8a8a8a; }
.cms2-bt-back { color: var(--cms2-accent, #be202e); font-weight: 600; }