/* 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:      #e7eaef;
    --ink-2:    rgba(255, 255, 255, .5);
    --ink-3:    rgba(255, 255, 255, .35);
    --ground:   #0d1017;
    --raised:   rgba(255, 255, 255, .03);
    --line:     rgba(255, 255, 255, .09);
    --line-2:   rgba(255, 255, 255, .16);
    --lime:     #A8E22B;

    /* 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:     #7ed492;
    --warn:     #e0a53d;
    --bad:      #ff9090;
}

.staff {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 30px 90px;
    box-sizing: border-box;
    font: 15px/1.6 Manrope, "Segoe UI", system-ui, sans-serif;
    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);
    padding-bottom: 18px; margin-bottom: 26px;
}
.staff h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.staff .sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.staff .eyebrow { margin: 0 0 6px; font-size: 12px; }
.staff .eyebrow a { color: var(--ink-3); text-decoration: none; }
.staff .eyebrow a:hover { color: var(--lime); }
.staff .lead { font-size: 15px; color: var(--ink-2); max-width: 68ch; }
.staff .muted { color: rgba(255, 255, 255, .42); }
.staff .hint { font-size: 12.5px; color: var(--ink-3); }

/* ---- surfaces ---------------------------------------------------------- */
.staff .panel {
    border: 1px solid var(--line); background: var(--raised);
    border-radius: 14px; padding: 22px 26px; margin-bottom: 18px;
}
.staff .panelhead {
    font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 16px;
}

.staff .banner {
    border: 1px solid rgba(224, 165, 61, .4); background: rgba(224, 165, 61, .08);
    color: var(--warn); border-radius: 10px; padding: 12px 16px;
    margin: 0 0 20px; font-size: 13.5px; line-height: 1.55;
}
.staff .banner .link { color: var(--warn); }
.staff .banner.err {
    border-color: rgba(255, 144, 144, .45); background: rgba(255, 144, 144, .08); color: var(--bad);
}

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

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

.staff input[type=text], .staff input:not([type]), .staff textarea, .staff select {
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px; padding: 10px 13px; color: var(--ink); font: inherit; font-size: 14px;
}
.staff input::placeholder, .staff textarea::placeholder { color: rgba(255, 255, 255, .3); }
.staff input:focus, .staff textarea:focus, .staff select:focus {
    outline: 2px solid rgba(168, 226, 43, .45); 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: 13.5px; font-weight: 600; }
.staff .formactions { display: flex; gap: 12px; align-items: center; }

/* ---- tables ------------------------------------------------------------ */
.staff table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.staff th, .staff td {
    text-align: left; padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle;
}
.staff th {
    font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-3); background: var(--raised);
}
.staff tbody tr:last-child td { border-bottom: 0; }
.staff tbody tr:hover { background: rgba(255, 255, 255, .02); }
.staff td.num, .staff th.num { text-align: right; font-variant-numeric: tabular-nums; }
.staff .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

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

/* ---- status ------------------------------------------------------------ */
.staff .score { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.staff .sc-good { color: var(--good); }
.staff .sc-ok   { color: var(--warn); }
.staff .sc-bad  { color: var(--bad); }
.staff .sc-none { color: rgba(255, 255, 255, .3); }
.staff .up { color: var(--good); }
.staff .down { color: var(--bad); }

.staff .status, .staff .pill, .staff .tag {
    display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px;
    font-weight: 700; letter-spacing: .03em; border: 1px solid transparent;
}
.staff .status.ok,   .staff .pill.ok,   .staff .tag.live {
    background: rgba(168, 226, 43, .14); color: var(--lime); border-color: rgba(168, 226, 43, .35);
}
.staff .status.warn, .staff .pill.wait, .staff .tag.setup {
    background: rgba(224, 165, 61, .12); color: var(--warn); border-color: rgba(224, 165, 61, .35);
}
.staff .pill.bad {
    background: rgba(255, 144, 144, .12); color: var(--bad); border-color: rgba(255, 144, 144, .35);
}
.staff .pill.off, .staff .tag.sample {
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .45);
}
.staff .pill.run {
    background: rgba(110, 160, 255, .12); color: #8fb4ff; border-color: rgba(110, 160, 255, .3);
}

.staff .spin {
    width: 12px; height: 12px; border: 2px solid rgba(168, 226, 43, .25);
    border-top-color: var(--lime); border-radius: 50%;
    display: inline-block; animation: staff-spin .7s linear infinite;
}
@keyframes staff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .staff .spin { animation-duration: 2.4s; } }

/* ---- 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); background: rgba(0, 0, 0, .3);
    border-radius: 10px; padding: 14px 16px;
}
.staff .linkfield {
    font-family: ui-monospace, Consolas, monospace; font-size: 12px;
    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: 14px; 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: 13.5px; }
.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: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }

.staff .scroll,
.wrap .scroll {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
}

/* ── 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: 12.5px; }

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

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

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

    /* Row actions wrap instead of squeezing into an unreadable column. */
    .staff .tiles,
    .wrap .tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }

    .staff h1, .wrap h1 { font-size: 22px; }
}

/* Tools page: the mail test and the section headings that now split that page in two. */
.staff .sect{margin:34px 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.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:9px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#e7eaef;font:inherit;font-size:14px}
.staff .good{margin:12px 0 0;font-size:13.5px;color:#A8E22B;overflow-wrap:anywhere}
.staff .bad{margin:12px 0 0;font-size:13.5px;color:#ff8a8a;overflow-wrap:anywhere}
.staff .fine{margin:10px 0 0;font-size:12.5px;color:rgba(255,255,255,.4)}

/* The last line a customer's administrator reads, on the one public page in the staff area.
   It replaces a button that would have sent them to a Microsoft sign-in prompt. */
.staff .closeme{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}

/* ── 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: rgba(168, 226, 43, .18);
    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.xs { padding: 5px 9px; font-size: 12px; font-weight: 700; border-radius: 7px; line-height: 1.5; white-space: nowrap; }
.staff .btn.key {
    background: rgba(168, 226, 43, .12); color: var(--lime);
    border: 1px solid rgba(168, 226, 43, .4);
}
.staff .btn.key:hover:not(:disabled) { background: rgba(168, 226, 43, .2); }
.staff .btn.ghost {
    background: transparent; color: var(--ink-2); border: 1px solid transparent;
}
.staff .btn.ghost:hover:not(:disabled) {
    color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, .05);
}
.staff .btn.bad {
    background: rgba(255, 144, 144, .14); color: var(--bad); border: 1px solid rgba(255, 144, 144, .4);
}
.staff .btn.bad:hover:not(:disabled) { background: rgba(255, 144, 144, .22); }

/* Destructive, and rare: an outline of a button until you go near it. */
.staff .iconbtn {
    width: 27px; height: 27px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 7px;
    border: 1px solid transparent; background: transparent;
    color: rgba(255, 255, 255, .28); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.staff .iconbtn:hover {
    color: var(--bad); border-color: rgba(255, 144, 144, .35); background: rgba(255, 144, 144, .08);
}

.staff .vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ── Clients ──────────────────────────────────────────────────────────────── */
 /* Wider than the rest of Central, because this page is a table with five columns and one of
    them is a toolbar. At the shared 1180px the actions had 400px to hold four buttons and there
    was nothing left to give. */
.clients { max-width: 1460px; }

.clients .ctop {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.clients .tally { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.clients .tally strong { color: var(--ink); font-weight: 700; }
.clients .tally span + span::before { content: "·"; margin-right: 8px; color: var(--ink-3); }
.clients .tally .ok { color: var(--lime); }
.clients .tally .warn { color: var(--warn); }
.clients .tally .busy { color: #8fb4ff; }
.clients .ctools { display: flex; align-items: center; gap: 10px; }

.clients .addpanel { margin-bottom: 22px; }
.clients .addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; }
.clients .addgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.clients .addgrid input { width: 100%; }
.clients .addgrid .fine { font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin: 0; }
.clients .formactions { flex-wrap: wrap; }
.clients .formactions .fine { margin: 0; font-size: 12px; color: var(--ink-3); flex: 1 1 260px; }

.clients .empty {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 64px 24px; text-align: center;
    border: 1px solid var(--line); border-radius: 14px; background: var(--raised);
}
.clients .empty .lead { margin: 0; max-width: 42ch; }

/* Fixed proportions, so a long partner name widens its own column rather than
   wrapping onto two lines and squeezing everything to its right. */
 /* Fixed, and in pixels where the content is a fixed size. The score is always four
    characters and the date always eleven; giving them a percentage of the page meant they grew
    on a wide screen and squeezed the toolbar on a narrow one. */
 /* The table has a floor. Below it the columns do not squeeze — the panel scrolls — because a
    squeezed column wraps client names onto two lines and the row stops being a row. */
.clients .ctable { table-layout: fixed; min-width: 1146px; }
.clients .c-name { width: auto; min-width: 210px; }
.clients .c-own { width: 200px; }
.clients .c-score { width: 118px; }
.clients .c-when { width: 132px; }
.clients .c-act { width: 486px; }
.clients th, .clients td { padding: 15px 18px; vertical-align: top; }
/* A two-word column heading that wraps reads as two columns. */
.clients th { white-space: nowrap; }
.clients tbody tr.busy { background: rgba(110, 160, 255, .045); }
.clients td.name { font-weight: 600; }
.clients .cname { color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; }
.clients .cname:hover { color: var(--lime); }
.clients .link.own { font-size: 14px; }

/* "Has this one been sent?" answered by scanning the column rather than opening each row. */
.clients .sentmark { display: inline-block; margin-left: 7px; vertical-align: 1px; line-height: 0; }
.clients .sentmark svg { width: 14px; height: 11px; fill: none; stroke: var(--lime);
    stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }

/* The qualifier line: same column, half the weight, so the row reads top-down
   instead of sideways through three badges. */
.clients .qual { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .44); }
.clients .qual.q-live { color: var(--lime); }
.clients .qual.q-setup { color: var(--warn); }
.clients .qual.q-sample { color: rgba(255, 255, 255, .4); }
/* "not assessed" is two words in a column sized for four digits; let it keep one line. */
.clients .dim { color: rgba(255, 255, 255, .33); white-space: nowrap; }
.clients .score { font-size: 20px; line-height: 1; }
.clients .sc-ok { color: var(--lime); }
.clients .sc-warn { color: var(--warn); }

 /* One slot per action, the same five on every row, so the buttons form columns rather than a
    ragged edge that moves with whatever each client happens to have. An action that does not
    apply leaves its slot empty instead of closing the gap. */
.clients td.actions { text-align: right; }
.clients .rowact {
    display: grid;
    grid-template-columns: 118px 76px 60px 58px 62px 28px;
    gap: 6px; align-items: center; justify-content: end;
}
.clients .rowact > * { width: 100%; }
.clients .rowact .btn { text-align: center; padding-left: 4px; padding-right: 4px; }
.clients .rowact .iconbtn { justify-self: center; width: 28px; }
.clients .slot { display: block; }

 /* A scan in flight takes the whole toolbar rather than squeezing in beside it. */
.clients .runbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; max-width: 100%; }
.clients .runbar .pill { flex: 0 0 auto; white-space: nowrap; font-size: 10px; padding: 2px 7px; }
.clients .runtext {
    font-size: 12px; color: var(--ink-2); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Asking before something irreversible, in the space the buttons occupied, so
   the answer is where the question was. */
.clients .ask { text-align: right; }
.clients .ask p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--warn); }
.clients .ask.danger p { color: var(--bad); }
.clients .askbtns { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.clients .ask.send p { color: var(--ink-2); }
.clients .ask.send input { flex: 1 1 auto; min-width: 0; max-width: 260px; padding: 5px 10px; font-size: 12.5px; }
.clients .ask .was { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }
.clients .whichdoc { display: flex; align-items: flex-start; justify-content: flex-end; gap: 7px;
    margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); cursor: pointer; }
.clients .whichdoc input { margin: 1px 0 0; accent-color: var(--lime); flex: 0 0 auto; }

/* On a phone five columns cannot be five columns — they squeezed to two words a
   line with the actions pushed off the edge entirely. Each row becomes a card,
   keeping the same reading order, with the column heading carried down as a
   label on the cells that need one. Nothing hidden, nothing scrolling sideways. */
@media (max-width: 880px) {
    .clients .scroll { border: 1px solid var(--line); border-radius: 14px; overflow: visible; }
    .clients thead { display: none; }
    .clients table, .clients tbody { display: block; }
    .clients tbody tr { display: block; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
    .clients tbody tr:last-child { border-bottom: 0; }
    .clients td { display: block; width: auto; padding: 0; border-bottom: 0; }
    .clients td + td { margin-top: 13px; }
    .clients td[data-lbl]::before {
        content: attr(data-lbl); display: block; margin-bottom: 3px;
        font-size: 10px; font-weight: 700; letter-spacing: .13em;
        text-transform: uppercase; color: var(--ink-3);
    }
    .clients .cname { font-size: 16px; }
    .clients td.actions { text-align: left; margin-top: 16px; }
    /* On a card there is no column to line up with, so the slots go back to flowing. */
    .clients .rowact { display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .clients .rowact > * { width: auto; }
    .clients .slot { display: none; }
    .clients .runbar, .clients .askbtns { justify-content: flex-start; }
    .clients .ask { text-align: left; }
    .clients .runtext { max-width: 100%; }
}