/* The staff portal's shared look.

   Extracted because the same dark table, card and button rules had been written three times
   already, and a fourth copy is how pages start quietly drifting apart — which is exactly what
   happened to the pages this file was written to rescue.

   Only the customer-facing pages under /start, /approve and the buy page keep their own styles;
   they are a different audience and deliberately a different thing. */

:root {
    --ink:      var(--text);
    --ink-2:    var(--muted);
    --ink-3:    var(--muted);
    --ground:   var(--bg);
    --line-2:   var(--line-strong);

    /* Semantic, and deliberately outside the brand palette: these carry severity and have to
       mean something on their own. A lime "at risk" would look tidier and say less. */
    --good:     var(--progress);
    --warn:     var(--caution);
    --bad:      var(--error);
}

.staff {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 30px 90px;
    box-sizing: border-box;
    font: var(--fw-body) var(--fs-body)/1.6 var(--font);
    color: var(--ink);
}
.staff * { box-sizing: border-box; }

/* ---- headings ---------------------------------------------------------- */
.staff .top {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 20px; border-bottom: 1px solid var(--line-strong);
    padding-bottom: 18px; margin-bottom: 26px;
}
.staff h1 { margin: 0; font-size: var(--fs-display); font-weight: 800; letter-spacing: -.02em; }
.staff .sub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.staff .lead { font-size: var(--fs-body); color: var(--ink-2); max-width: 68ch; }
.staff .muted { color: var(--muted); }
.staff .hint { font-size: var(--fs-meta); color: var(--ink-3); }

/* ---- surfaces ---------------------------------------------------------- */
.staff .panel {
    border: 1px solid var(--line-strong); background: var(--fill-1);
    border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 18px;
}

/* ---- controls ---------------------------------------------------------- */
.staff .btn {
    background: var(--lime); color: var(--ground); border: 0; border-radius: var(--r-md);
    padding: 10px 18px; font: inherit; font-size: var(--fs-control); font-weight: 700; cursor: pointer;
    text-decoration: none; display: inline-block;
}
.staff .btn:disabled { opacity: .4; cursor: default; }
.staff .btn.small {
    background: var(--fill-2); color: var(--ink);
    border: 1px solid var(--line-2); padding: 6px 12px; font-size: var(--fs-meta);
}
.staff .btn.small:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }

.staff .link { color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.staff .link:hover { text-decoration: underline; }
.staff .linkbtn {
    background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm);
    font-weight: 600; color: var(--lime); cursor: pointer;
}
.staff .linkbtn:hover { text-decoration: underline; }

.staff input[type=text], .staff input:not([type]), .staff textarea, .staff select {
    background: var(--fill-1); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); padding: 10px 13px; color: var(--ink); font: inherit; font-size: var(--fs-control);
}
.staff input::placeholder, .staff textarea::placeholder { color: var(--muted); }
.staff input:focus, .staff textarea:focus, .staff select:focus {
    outline: 2px solid var(--line-brand); outline-offset: 1px;
}
.staff .form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.staff .form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }

/* ---- tables ------------------------------------------------------------ */
.staff table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden;
}
.staff th, .staff td {
    text-align: left; padding: 12px 16px;
    border-bottom: 1px solid var(--line); vertical-align: middle;
}
.staff th {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-3); background: var(--fill-1);
}
.staff tbody tr:last-child td { border-bottom: 0; }
.staff tbody tr:hover { background: var(--fill-1); }
.staff td.num, .staff th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Wide tables scroll inside their own box; the page itself must never move sideways. */
.staff .scroll { overflow-x: auto; }

.staff .status, .staff .pill, .staff .tag {
    display: inline-block; padding: 3px 9px; border-radius: var(--r-md); font-size: var(--fs-label);
    font-weight: 700; letter-spacing: .03em; border: 1px solid transparent;
}
.staff .status.ok,   .staff .pill.ok,   .staff .tag.live {
    background: var(--tint-progress); color: var(--progress); border-color: var(--line-progress);
}
.staff .status.warn, .staff .pill.wait, .staff .tag.setup {
    background: var(--tint-caution); color: var(--warn); border-color: var(--line-caution);
}
.staff .pill.bad {
    background: var(--tint-error); color: var(--bad); border-color: var(--line-error);
}
.staff .pill.off, .staff .tag.sample {
    background: var(--fill-2); color: var(--muted);
}
.staff .pill.run {
    background: var(--tint-workflow); color: var(--workflow); border-color: var(--line-workflow);
}
@keyframes staff-spin { to { transform: rotate(360deg); } }

/* ---- onboarding -------------------------------------------------------- */
.staff .genbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.staff .genbar input { flex: 1; min-width: 300px; }

.staff .linkbox {
    margin-top: 18px; border: 1px solid var(--line-strong); background: var(--inset);
    border-radius: var(--r-md); padding: 14px 16px;
}
.staff .linkfield {
    font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-meta);
    color: var(--ink-2); word-break: break-all; line-height: 1.6;
}

.staff .steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.staff .steps li { font-size: var(--fs-control); color: var(--ink-2); }
.staff .steps li::marker { color: var(--ink-3); }

.staff .setup { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: var(--fs-sm); }
.staff .setup dt { color: var(--ink-3); white-space: nowrap; }
.staff .setup dd { margin: 0; }

/* Section headings inside panels read as headings, not as page titles. */
.staff .panel h2 { font-size: var(--fs-heading); font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }

.staff .scroll,
.wrap .scroll {
    overflow-x: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
}

/* ── Small screens ────────────────────────────────────────────────────────────
   The admin had no media queries at all: five pages, none of them responsive.
   On a phone the tables ran off the side and the input rows stacked into a
   column of full-width boxes with no gaps.

   Written against .staff and .wrap together because the pages use one or the
   other and there is no reason for them to behave differently. */

@media (max-width: 860px) {
    .staff,
    .wrap { padding: 20px 18px 60px; }
}

@media (max-width: 620px) {
    .staff,
    .wrap { padding: 16px 14px 56px; }

    /* Tables are the real problem on a phone. Let them scroll inside their own
       container rather than pushing the page sideways — a horizontally scrolling
       body makes every other element feel broken. */
    .staff .scroll,
    .wrap .scroll { -webkit-overflow-scrolling: touch; }

    .staff table,
    .wrap table { font-size: var(--fs-meta); }

    .staff th, .staff td,
    .wrap th, .wrap td { padding: 9px 11px; }

    /* Input rows: one field per line, with room between them. */
        .staff .genbar,
    .wrap .genbar  { flex-direction: column; align-items: stretch; gap: 9px; }

        .staff .genbar input, .staff .genbar button,
    .wrap .genbar input, .wrap .genbar button  { width: 100%; }

    .staff h1, .wrap h1 { font-size: var(--fs-title); line-height: var(--lh-title); }
}

/* Tools page: the mail test and the section headings that now split that page in two. */
.staff .sect{margin:34px 0 10px;font-size:var(--fs-meta);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.staff .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.staff .row input{flex:1 1 240px;min-width:0;padding:10px 13px;border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--fill-1);
  color:var(--text);font:inherit;font-size:var(--fs-control)}
.staff .good{margin:12px 0 0;font-size:var(--fs-sm);color:var(--progress);overflow-wrap:anywhere}
.staff .bad{margin:12px 0 0;font-size:var(--fs-sm);color:var(--error);overflow-wrap:anywhere}
.staff .fine{margin:10px 0 0;font-size:var(--fs-meta);color:var(--muted)}

/* ── The Vitals pulse ─────────────────────────────────────────────────────────
   Shown wherever the application is working. A spinner is the same spinner every
   product has ever used and says only "wait"; a trace with a beat running along
   it says what this one is doing. The faint copy underneath keeps the shape
   readable so the moving segment reads as a pulse, not a stray dash. */
.staff .pulse { display: block; width: 85px; height: 17px; flex: 0 0 auto; }
.staff .pulse .trace {
    fill: none; stroke: var(--tint-brand);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.staff .pulse .beat {
    fill: none; stroke: var(--lime);
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 24 300; animation: staff-pulse 1.5s linear infinite;
}
.staff .pulse.big { width: 150px; height: 30px; }
@keyframes staff-pulse { from { stroke-dashoffset: 324; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .staff .pulse .beat { animation-duration: 4.5s; } }

/* ── Buttons, smaller and quieter ─────────────────────────────────────────────
   A row needs one action that is the point and several that are not, and the
   shared .btn/.link pair could only say "primary" or "text link". */
.staff .btn.key {
    background: var(--tint-brand); color: var(--lime);
    border: 1px solid var(--line-brand);
}
.staff .btn.key:hover:not(:disabled) { background: var(--tint-brand); }
.staff .btn.bad {
    background: var(--tint-error); color: var(--bad); border: 1px solid var(--line-error);
}
.staff .btn.bad:hover:not(:disabled) { background: var(--tint-error); }