/* ============================================================================
   CROLLE'S TEAM PORTAL — THE SURFACE ITS PAGES SHARE, APPLIED BY THE NUMBER.

   Every value here is a design's own: the portal mockup's (docs/Audite/prompts/portal-mockup/*.dc.html)
   for the register and the frame, and the vendor portal's `Vendor Words.dc.html` for the words page.
   The 52px bar, the 27px serif title, the 38px table head, the 40px foot, the 452px panel, the exact
   colours and the exact type sizes. The design is Claude Design's; this stylesheet applies it. Where a
   number departs from a design, the reason is written beside it.

   WHY IT IS ONE GLOBAL FILE AND NOT TWO SCOPED ONES. Blazor scopes a component's stylesheet to that
   component, so a second portal page could not read a single rule the first one wrote. Two copies of one
   palette is how two pages come to disagree about what "the portal" looks like — the same reasoning, and
   the same shape, as css/decision-surface.css and css/auth-surface.css beside this file. A page's OWN
   scoped stylesheet still wins over anything here, which is what lets each page keep its own component
   (the register's chips are 21px because its mockup draws them so; the words page's tab pills are 30px
   because ITS design does).

   WHAT IS NOT HERE, deliberately: every number that belongs to ONE page — a table's column widths, a
   chip that only one design draws, the register's folded rows. Those stay in that page's scoped file.
   ============================================================================ */

.tp-root {
    --ground: #faf9f5;
    --ink: #141413;
    --paper: #fff;
    --muted: #63615b;
    --faint: #8a8780;
    --line: #e3dfd4;
    --line-soft: #f0ede4;
    --line-panel: #eeebe2;
    --sunken: #fbfaf7;
    --accent: #d97757;
    --link: #2f5d50;
    --link-hover: #1f4136;
    --danger: #a8352a;
    --danger-soft: #fbf3f1;
    --danger-line: #efd9d4;
    --danger-ink: #8c2e24;
    --danger-copy: #6e4a44;
    --btn-border: #d5d0c3;
    --btn-danger-border: #dfbbb5;
    --btn-off-border: #e0dcd1;
    --btn-off-ink: #9b9891;
    --live-bg: #e4efe7;   --live-ink: #215b41;
    --warned-bg: #f6ebd8; --warned-ink: #7a5510;
    --stopped-bg: #f7e7e4; --stopped-ink: #8c2e24;
    --closed-bg: #eeece6; --closed-ink: #605d57;
    --ours-bg: #e5ebf1;   --ours-ink: #2f4f68;
    --serif: ui-serif, Georgia, 'Times New Roman', serif;
    --sans: 'IBM Plex Sans', 'Plex', Arial, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    min-height: 100dvh;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

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

.tp-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tp-skip {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 40;
    transform: translateY(-200%);
    padding: 10px 16px;
    background: var(--ink);
    color: var(--ground);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
}

.tp-skip:focus { transform: none; }

/* ── The bar: 52px, ink ground, paper text (Main.dc.html) ───────────────────── */

.tp-bar {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-inline: 32px;
    background: var(--ink);
    color: var(--ground);
}

.tp-wordmark {
    font-family: var(--serif);
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ground);
    text-decoration: none;
}

.tp-wordmark span { color: var(--accent); }

.tp-operator {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #a6a29a;
}

.tp-bar-links { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.tp-bar-links a {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #a6a29a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 160ms var(--ease), border-bottom-color 160ms var(--ease);
}

.tp-bar-links a:hover { color: var(--ground); border-bottom-color: var(--accent); }

/* THE PAGE THE OPERATOR IS ALREADY ON, drawn in the bar rather than linked to itself. */
.tp-bar-here {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ground);
    border-bottom: 1px solid var(--accent);
}

/* ── The page: 28px 32px of gutter, 18px between blocks (Main.dc.html) ──────── */

.tp-main { padding: 28px 32px 40px; }

.tp-shell { max-width: 1440px; margin-inline: auto; }
.tp-narrow { max-width: 760px; }

.tp-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.tp-copy { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.tp-refusal { color: var(--danger); }

.tp-alert {
    margin: 0 0 18px;
    padding: 13px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-line;
}

.tp-alert-problem { border-left-color: var(--danger); color: var(--danger); }

.tp-button {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: var(--ground);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.tp-button:hover { background: #2b2b28; }

/* THE REGISTER DIMS WHEN A PANEL IS OPEN and stops taking clicks: what is behind a decision is not being decided
   about at the same time (CreateCustomer.dc.html dims it the same way). */
.tp-behind { opacity: 0.45; filter: saturate(0.6); pointer-events: none; }

/* ── The title row and the filters ─────────────────────────────────────────── */

.tp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.tp-head-text { display: flex; flex-direction: column; gap: 5px; }

.tp-counts { margin: 0; font-size: 13px; color: var(--muted); }

.tp-primary {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: var(--ground);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.tp-primary:hover { background: #2b2b28; }

.tp-filters-gap { flex-grow: 1; }

/* THE FIND BOX, which both portal pages draw the same way and with the same numbers (30px, 190px, 7px radius). */
.tp-find { display: flex; align-items: center; gap: 8px; }
.tp-find label { font-size: 12px; color: var(--muted); }

.tp-find input {
    height: 30px;
    width: 190px;
    padding: 0 10px;
    border: 1px solid var(--btn-border);
    border-radius: 7px;
    background: var(--paper);
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
}

/* ── The register: a card with a 38px head, 54px rows and a 40px foot ──────── */

.tp-grid {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.tp-table {
    width: 100%;
    /* FIXED, so the columns keep the design's widths whatever a value is, and the Actions column is never pushed
       past the right edge. With `auto` a long "what Crolle last did" widened its column and pushed the buttons off
       the window — exactly what the owner saw on 24 September. */
    table-layout: fixed;
    border-collapse: collapse;
}

.tp-table thead th {
    height: 38px;
    padding: 0;
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #78756e;
    text-align: left;
    white-space: nowrap;
}

/* THE DESIGN'S OWN PADDING: the row carries 18px at each end and each column keeps its own inner gap — NOT 18px per
   cell, which would take 36px out of a narrow column and ellipsise the day. */
.tp-table thead th:first-child,
.tp-table tbody th:first-child,
.tp-table tbody td:first-child { padding-left: 18px; }

.tp-table thead th:last-child,
.tp-table tbody td:last-child { padding-right: 18px; }

.tp-table thead th:last-child { text-align: right; }

.tp-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.tp-table tbody tr:last-child { border-bottom: 0; }

/* ONE LINE PER ROW. `table-cell` and not `flex`: a flexed cell stops being a cell, and that is what stacked the
   chip under the company name and doubled every row's height. */
.tp-table tbody th,
.tp-table tbody td {
    height: 54px;
    padding: 0;
    vertical-align: middle;
    font-weight: 400;
    text-align: left;
}

.tp-table tbody tr:hover { background: #fcfbf7; }

.tp-when {
    display: block;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A REFUSAL, INSIDE THE PANEL IT BELONGS TO: the console behind a panel is dimmed, so a sentence printed there is a
   sentence the operator cannot read. */
.tp-panel-alert {
    margin: 0;
    padding: 12px 14px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    border-radius: 10px;
    color: var(--danger);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-line;
}

/* An act that does not reach this row, said as the register says it. */
.tp-points-as-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: #3f3d38; }

/* ── The acts on a row: 28px buttons, side by side, on the right ───────────── */

/* THE CELL IS A CELL; the buttons have their own row inside it. */
.tp-cell-actions { text-align: right; }

.tp-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }

.tp-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 62px;
    padding: 0 11px;
    border: 1px solid var(--btn-border);
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.tp-act:hover { border-color: var(--ink); }

.tp-act-stop { border-color: var(--btn-danger-border); color: var(--danger); }
.tp-act-stop:hover { border-color: var(--danger); background: var(--danger-soft); }

/* A BUTTON THAT CANNOT BE USED IS SHOWN, GREYED, AND CARRIES ITS REASON AS ITS TITLE. */
.tp-act-off {
    border: 1px dashed var(--btn-off-border);
    background: transparent;
    color: var(--btn-off-ink);
    cursor: not-allowed;
}

.tp-act-off:hover { border-color: var(--btn-off-border); background: transparent; }

.tp-act-amber { border-color: #e7d2ac; background: #fff; color: #8a5a12; }
.tp-act-amber:hover { border-color: #8a5a12; background: #f6ebd8; }

.tp-empty td { height: 72px; font-size: 13px; color: var(--muted); }

.tp-grid-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 40px;
    padding: 0 18px;
    border-top: 1px solid var(--line);
    background: var(--sunken);
    font-size: 12px;
    color: var(--muted);
}

/* ── The panel: 452px, from the right, over the dimmed page ────────────────── */

.tp-panel {
    position: fixed;
    top: 52px;
    right: 0;
    z-index: 20;
    width: 452px;
    max-width: 100vw;
    height: calc(100dvh - 52px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 44px rgba(20, 20, 19, 0.10);
}

/* THE ONE RED EDGE ON A PAGE, and it belongs to an act with no way back. */
.tp-panel-edge { height: 4px; flex-shrink: 0; background: var(--danger); }

/* The same edge, in the colour a reversible act wears: retiring a word, and publishing a version over the one
   before it. (The vendor portal's own bar colours.) */
.tp-panel-edge-amber { height: 4px; flex-shrink: 0; background: #c28a2c; }

.tp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--line-panel);
}

.tp-panel-heading { display: flex; flex-direction: column; gap: 5px; }

.tp-panel-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--danger);
}

.tp-panel-kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.tp-panel-kicker-amber { color: #8a5a12; }

.tp-panel-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
}

.tp-panel-sub { margin: 0; font-size: 12px; color: var(--muted); }

.tp-panel-close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.tp-panel-close:hover { border-color: var(--ink); color: var(--ink); }

.tp-panel-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tp-panel-label { font-size: 12px; font-weight: 600; color: #3f3d38; }

.tp-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }

.tp-points li {
    position: relative;
    padding-left: 15px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #3f3d38;
}

.tp-points li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 5px;
    border-radius: 3px;
    background: var(--btn-off-ink);
}

.tp-points .tp-point-loud::before { background: var(--danger); }

.tp-callout {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    border-radius: 10px;
}

.tp-callout-title { font-size: 12px; font-weight: 600; color: var(--danger-ink); }
.tp-callout-copy { font-size: 12px; line-height: 1.5; color: var(--danger-copy); }
.tp-callout-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.tp-callout-list li { font-size: 12.5px; font-weight: 500; color: var(--danger-copy); }

.tp-note {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px;
    background: #f7f5ef;
    border: 1px solid #eae6db;
    border-radius: 10px;
}

.tp-note-title { font-size: 12px; font-weight: 600; color: #3f3d38; }
.tp-note-copy { font-size: 12px; line-height: 1.55; color: #4d4b46; }

.tp-panel-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

.tp-field { display: flex; flex-direction: column; gap: 6px; }

.tp-field label { font-size: 12px; font-weight: 600; color: #3f3d38; }

.tp-typed {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    background: #f3f0e8;
    padding: 1px 5px;
    border-radius: 4px;
}

.tp-field input,
.tp-field textarea {
    padding: 9px 12px;
    border: 1px solid var(--btn-border);
    border-radius: 8px;
    background: var(--paper);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    min-height: 38px;
}

.tp-field textarea { min-height: 62px; resize: vertical; line-height: 1.5; }

.tp-field input:focus-visible,
.tp-field textarea:focus-visible,
.tp-primary:focus-visible,
.tp-act:focus-visible,
.tp-panel-close:focus-visible,
.tp-panel-act:focus-visible,
.tp-panel-cancel:focus-visible,
.tp-link-button:focus-visible,
.tp-bar-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tp-field input[aria-invalid='true'] { border-color: var(--danger); }

.tp-field-error { font-size: 12px; color: var(--danger); }
.tp-field-note { font-size: 11px; line-height: 1.5; color: var(--faint); }

.tp-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line-panel);
}

.tp-panel-foot-note { font-size: 11.5px; color: var(--faint); max-width: 150px; line-height: 1.4; }
.tp-panel-buttons { display: flex; gap: 10px; margin-left: auto; }

/* AND AN ACT'S LABEL NEVER WRAPS, which the designs say and this file did not: the buttons carry `white-space:
   nowrap` in both boards, so the FOOT NOTE takes the squeeze and the two labels stay on one line each. Without it the
   words page's retire panel drew "Keep offering it" and "Retire Concrete" over two lines apiece — seen in the
   screenshot, caught by nobody's case. */
.tp-panel-cancel {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--btn-border);
    border-radius: 8px;
    background: var(--paper);
    color: #3f3d38;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.tp-panel-cancel:hover { border-color: var(--ink); color: var(--ink); }

.tp-panel-act {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: var(--ground);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.tp-panel-act-danger { background: var(--danger); color: var(--paper); }
.tp-panel-act-danger:hover { background: #8c2e24; }

/* THE COLOUR A REVERSIBLE-AND-CHECKED ACT WEARS — retiring a word, and publishing a terms version over the one
   before it. (The vendor portal's own amber, pb.amber / PB.amber.) */
.tp-panel-act-amber { background: #8a5a12; color: var(--paper); }
.tp-panel-act-amber:hover { background: #734a0e; }

/* THE CLOSURE'S BUTTON IS DEAD UNTIL THE TYPED NAME MATCHES, which the browser decides from the box's own pattern:
   the form is invalid, so it cannot be submitted, and the button is drawn as what it is. Where a browser does not
   understand the selector, the button looks live and the box still refuses to submit — and the act checks the name
   either way, which is the enforcement that counts. */
.tp-panel-form:has(#confirm-name:invalid) .tp-panel-act-danger {
    background: #e2d6d3;
    color: #9b7b75;
    pointer-events: none;
}

/* ── Tables a design does not draw (a list inside a panel) ─────────────────── */

.tp-table-inline { table-layout: auto; }
.tp-table-inline thead th { padding-inline: 0; }
.tp-table-inline tbody th,
.tp-table-inline tbody td { height: auto; padding: 10px 0; }
.tp-row-action { text-align: right; }

.tp-link-button {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--link);
    cursor: pointer;
}

.tp-link-button:hover { color: var(--link-hover); }

.tp-inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tp-inline-form label { font-size: 12px; font-weight: 600; color: #3f3d38; }

.tp-inline-form input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--btn-border);
    border-radius: 8px;
    background: var(--paper);
    font-family: inherit;
    font-size: 13px;
    flex: 1 1 180px;
    min-width: 0;
}

/* ── Narrower than a design's canvas ───────────────────────────────────────── */

@media (max-width: 900px) {
    .tp-main { padding: 20px 18px 32px; }
    .tp-bar { padding-inline: 18px; gap: 12px; }
    .tp-operator { display: none; }
    .tp-bar-links { gap: 12px; }
    .tp-head { flex-direction: column; align-items: flex-start; }
    .tp-panel { width: 100vw; }
}