/* 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: 34px 28px 90px;
    min-height: calc(100vh - 104px);
    box-sizing: border-box;
    font: 15px/1.6 Manrope, "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--ground);
}
.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; }