/* clientroom.topropebelts.com: the customer belt-status page.
 *
 * One stylesheet, no framework. The colours and type are the Workroom's
 * tokens (public/css/workroom.css) under --cr- names; each carries the
 * source token in a comment and tests/ClientRoomCssTest.php keeps the shared
 * values identical. Phone first; the wide layout starts at 560px. The one
 * bold element is the progress track: belt plates on a strap.
 */
:root {
    --cr-ink: #1b1b1e;                                 /* --wr-ink */
    --cr-ground: #f3f2ef;                              /* --wr-ground */
    --cr-surface: #ffffff;                             /* --wr-card */
    --cr-line: #e4e1db;                                /* --wr-line */
    --cr-text: #1b1b1e;                                /* --wr-text */
    --cr-muted: #6a6870;                               /* --wr-ash */
    --cr-red: #d61f26;                                 /* --wr-red */
    --cr-red-2: #b3161c;                               /* --wr-red-2 */
    --cr-brass: #c9a24a;                               /* --wr-brass */
    --cr-brass-2: #8a6a22;                             /* --wr-brass-2 */
    --cr-brass-soft: #f4ead0;                          /* --wr-brass-soft */
    --cr-focus: 0 0 0 3px rgba(28, 95, 184, .35);      /* --wr-focus */
    --cr-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cr-plate-w: 30px;
    --cr-plate-h: 22px;
}

/* ---------- Base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cr-ground);
    color: var(--cr-text);
    font: 400 17px/1.5 var(--cr-font);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--cr-focus); border-radius: 6px; }

/* ---------- Masthead -------------------------------------------------- */

.cr-masthead {
    background: var(--cr-ink);
    border-bottom: 3px solid var(--cr-brass);
    padding: 14px 16px;
    text-align: center;
}
.cr-masthead__brand { display: inline-block; line-height: 0; }
.cr-masthead__brand img { width: 300px; max-width: 100%; height: auto; }

/* ---------- Column ---------------------------------------------------- */

.cr-main {
    flex: 1;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    padding: 28px 16px 40px;
}

.cr-title { margin: 0 0 6px; font-size: 26px; line-height: 1.2; font-weight: 600; }
.cr-lead { margin: 0 0 20px; color: var(--cr-muted); }

/* ---------- Form ------------------------------------------------------ */

.cr-form__fields { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.cr-field { flex: 1 1 100%; min-width: 0; }
.cr-label { display: block; margin-bottom: 6px; font-weight: 500; }
.cr-input {
    display: block;
    width: 100%;
    font: inherit;
    padding: 12px 14px;
    color: var(--cr-text);
    background: var(--cr-surface);
    border: 1px solid var(--cr-line);
    border-radius: 6px;
}
#client-id { font-size: 19px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cr-input:focus { border-color: var(--cr-ink); }
.cr-button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 12px 20px;
    color: #fff;
    background: var(--cr-red);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.cr-button:hover { background: var(--cr-red-2); }

/* ---------- Messages -------------------------------------------------- */

.cr-alert {
    margin: 20px 0 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--cr-red-2);
    color: var(--cr-red-2);
}
.cr-note { margin: 18px 0 0; color: var(--cr-muted); }
.cr-callout {
    margin: 18px 0 0;
    padding: 12px 14px;
    background: var(--cr-brass-soft);
    border-left: 3px solid var(--cr-brass-2);
    border-radius: 0 6px 6px 0;
}

/* ---------- Result ---------------------------------------------------- */

.cr-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cr-line); }
.cr-result__list { margin: 0; }
.cr-result__row { margin: 0 0 8px; }
.cr-result__row dt { color: var(--cr-muted); font-size: 15px; }
.cr-result__row dd { margin: 0; }
.cr-result__id { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cr-result__status { font-size: 17px; }

/* ---------- Track: plates on a strap ---------------------------------- */

.cr-track { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; }
.cr-track__step {
    --rail: var(--cr-ink);
    --rail-style: solid;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
}
/* The strap runs from this plate to the next one; it is drawn by the step before. */
.cr-track__step::before {
    content: "";
    position: absolute;
    left: calc(var(--cr-plate-w) / 2 - 2px);
    top: 50%;
    bottom: -50%;
    border-left: 4px var(--rail-style) var(--rail);
}
.cr-track__step:last-child::before { display: none; }
.cr-track__step--current, .cr-track__step--paused,
.cr-track__step--current ~ .cr-track__step, .cr-track__step--paused ~ .cr-track__step {
    --rail: var(--cr-line);
    --rail-style: dashed;
}
.cr-track__plate {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--cr-plate-w);
    height: var(--cr-plate-h);
    border-radius: 5px;
    background: var(--cr-surface);
    border: 2px solid var(--cr-line);
}
.cr-track__step--done .cr-track__plate { background: var(--cr-brass); border-color: var(--cr-brass-2); }
.cr-track__step--current .cr-track__plate {
    background: var(--cr-brass);
    border-color: var(--cr-brass-2);
    box-shadow: 0 0 0 3px var(--cr-ink);
    animation: cr-ring 200ms ease-out;
}
.cr-track__step--paused .cr-track__plate { background: var(--cr-brass-soft); border-color: var(--cr-brass-2); border-style: dashed; }
.cr-track__step--current .cr-track__label, .cr-track__step--paused .cr-track__label { font-weight: 600; }
.cr-track__step--todo .cr-track__label { color: var(--cr-muted); }

@keyframes cr-ring {
    from { box-shadow: 0 0 0 0 var(--cr-ink); }
    to   { box-shadow: 0 0 0 3px var(--cr-ink); }
}
@media (prefers-reduced-motion: reduce) {
    .cr-track__step--current .cr-track__plate { animation: none; }
}

/* ---------- Verified details ------------------------------------------ */

.cr-verified { margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--cr-line); color: var(--cr-brass-2); font-weight: 500; }
.cr-details { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.cr-details__row { display: contents; }
.cr-details dt { color: var(--cr-muted); }
.cr-details dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Footer ---------------------------------------------------- */

.cr-footer { padding: 16px; text-align: center; color: var(--cr-muted); font-size: 14px; }
.cr-footer a { text-decoration: none; }
.cr-footer a:hover { text-decoration: underline; }

/* ---------- Wide ------------------------------------------------------ */

@media (min-width: 560px) {
    body { font-size: 18px; }
    .cr-masthead__brand img { width: 420px; }
    .cr-main { padding-top: 40px; }
    .cr-field { flex: 1 1 11rem; }
    .cr-field--email { flex: 2 1 14rem; }

    .cr-track { flex-direction: row; align-items: flex-start; margin-top: 26px; }
    .cr-track__step { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding-right: 8px; }
    .cr-track__step::before {
        left: var(--cr-plate-w);
        right: 0;
        top: calc(var(--cr-plate-h) / 2 - 2px);
        bottom: auto;
        border-left: 0;
        border-top: 4px var(--rail-style) var(--rail);
    }
    .cr-track__label { font-size: 14px; line-height: 1.3; }
}