/* HubSpot deal -> pending confirmation
   ------------------------------------------------------------------
   The dialog is a reconciliation, not a form: on one side a deal somebody typed
   into HubSpot, on the other what ARP already holds, and between them a reading
   the model made of the free text. Every fact on screen belongs to one of those
   three, and which one it belongs to is the whole question - so provenance is
   carried by the styling rather than left to be inferred.

     teal    the app's own colour - this exists in ARP
     orange  HubSpot's - this is what the deal claims, unreconciled
     amber   still waiting on a decision from the person reading

   Values are evidence, so they are set in IBM Plex Mono: scores, part numbers,
   order codes, money, addresses. Prose stays in the app's Roboto. Micro-labels,
   the accent rails and the tinted surfaces follow pending-item-review.css - the
   plates all hang off the same sales record. */

.hsc {
    --hsc-arp: #06a3a3;
    --hsc-src: #ff7a59;
    --hsc-open: var(--mud-palette-warning, #ff9800);

    --hsc-ink: var(--mud-palette-text-primary, #1a1a1d);
    --hsc-ink-soft: var(--mud-palette-text-secondary, #6b6b72);
    --hsc-line: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.14));
    --hsc-surface: var(--mud-palette-surface, #ffffff);
    --hsc-sunk: var(--mud-palette-background-gray, #f5f5f4);

    --hsc-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Roboto Mono", ui-monospace, monospace;

    color: var(--hsc-ink);
}

/* Data reads as data. Anything a person would compare, copy or quote back gets
   the mono face and lining figures; sentences do not. */
.hsc-data {
    font-family: var(--hsc-mono);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
}

.hsc-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hsc-ink-soft);
}

/* ---------- THE WAIT ----------
   The description goes through the model, which takes seconds. The dialog opens
   on this rather than on an empty frame. */
.hsc-wait {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 64px 16px;
    text-align: center;
}

.hsc-wait__stage {
    font-size: 0.875rem;
    font-weight: 500;
}

.hsc-wait__note {
    max-width: 36ch;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hsc-ink-soft);
}

.hsc-wait__elapsed {
    font-family: var(--hsc-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- WHAT THE READING COULD NOT SETTLE ----------
   Said once, at the top, before the steps. These are the reasons anybody is
   looking at this dialog instead of at a finished document. */
.hsc-warn {
    display: grid;
    gap: 3px;
    margin-bottom: 14px;
    padding: 9px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--hsc-open) 40%, transparent);
    border-left: 3px solid var(--hsc-open);
    border-radius: var(--mud-default-borderradius, 11px);
    background: color-mix(in srgb, var(--hsc-open) 8%, transparent);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.hsc-warn__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: color-mix(in srgb, var(--hsc-open) 55%, var(--hsc-ink));
}

/* Each step opens on its verdict: what the reading decided, with the evidence
   for it on the right. Tinted by state, so the answer lands before it is read. */
.hsc-verdict {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--hsc-line);
    border-left: 3px solid var(--hsc-ink-soft);
    border-radius: var(--mud-default-borderradius, 11px);
    background: var(--hsc-sunk);
    font-size: 0.875rem;
}

.hsc-verdict__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.hsc-verdict__evidence {
    flex: 0 0 auto;
    font-family: var(--hsc-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--hsc-ink-soft);
    white-space: nowrap;
}

.hsc-verdict.is-good {
    border-color: color-mix(in srgb, var(--hsc-arp) 26%, transparent);
    border-left-color: var(--hsc-arp);
    background: color-mix(in srgb, var(--hsc-arp) 7%, transparent);
}

.hsc-verdict.is-open {
    border-color: color-mix(in srgb, var(--hsc-open) 34%, transparent);
    border-left-color: var(--hsc-open);
    background: color-mix(in srgb, var(--hsc-open) 8%, transparent);
}

/* ---------- WHAT HUBSPOT SAYS ----------
   The orange rail is the only place the source colour appears. It marks facts
   that have not been reconciled against anything - they are the deal's word. */
.hsc-source {
    margin: 12px 0;
    padding: 9px 13px 10px;
    border: 1px solid var(--hsc-line);
    border-left: 2px solid var(--hsc-src);
    border-radius: var(--mud-default-borderradius, 11px);
    background: var(--hsc-surface);
}

.hsc-source__eyebrow {
    margin-bottom: 7px;
    color: color-mix(in srgb, var(--hsc-src) 62%, var(--hsc-ink-soft));
}

.hsc-source__facts {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 5px 14px;
    margin: 0;
    font-size: 0.8125rem;
}

.hsc-source__facts dt {
    color: var(--hsc-ink-soft);
}

.hsc-source__facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Free text off the deal - a description, a company block. Kept as written, because
   the reason to read it here is to compare it against what the document says. */
.hsc-longtext {
    max-height: 22rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.hsc-link {
    color: var(--hsc-arp);
    text-decoration: none;
}

.hsc-link:hover {
    text-decoration: underline;
}

.hsc-source__empty {
    font-size: 0.8125rem;
    color: var(--hsc-ink-soft);
}

/* Near misses, offered as one-click corrections: a wrong match is fixed here,
   not by abandoning the draft. */
.hsc-alts {
    margin-top: 14px;
}

.hsc-alts__head {
    margin-bottom: 6px;
}

.hsc-note {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hsc-ink-soft);
}

.hsc-provenance {
    margin-top: 14px;
    padding-top: 9px;
    border-top: 1px solid var(--hsc-line);
    font-size: 0.72rem;
    color: var(--hsc-ink-soft);
}

/* ---------- POSITIONS ----------
   A position is a specification, not a value: a dozen lines of tolerances and
   interfaces with three commercial facts attached. A table cell cannot hold that
   - it scrolls inside itself - so each one is a card that gives the text the
   width it needs and keeps the money and the item verdict in a fixed rail. */
.hsc-stephead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hsc-line);
}

.hsc-stephead__lede {
    margin-top: 3px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--hsc-ink-soft);
}

.hsc-stephead__stats {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--hsc-ink-soft);
    white-space: nowrap;
}

.hsc-stephead__total {
    font-family: var(--hsc-mono);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--hsc-ink);
}

/* The deal records a discount and the document has nowhere to put one, so it is
   stated beside the money it concerns. Marked as HubSpot's, because that is whose
   number it is - nothing here has applied it. */
.hsc-discount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px 2px;
    border: 1px solid color-mix(in srgb, var(--hsc-src) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--hsc-src) 9%, transparent);
    color: color-mix(in srgb, var(--hsc-src) 70%, var(--hsc-ink));
    white-space: nowrap;
}

/* An internal note. Marked as the deal's - it came off the deal and nothing here has
   acted on it - but set apart from the customer-facing positions it sits above, because
   the whole point of it is that it must not reach the document. */
.hsc-internal {
    display: grid;
    gap: 5px;
    margin-bottom: 11px;
    padding: 9px 13px 10px;
    border: 1px dashed color-mix(in srgb, var(--hsc-src) 45%, transparent);
    border-radius: var(--mud-default-borderradius, 11px);
    background: color-mix(in srgb, var(--hsc-src) 6%, transparent);
}

.hsc-internal__head {
    display: flex;
    align-items: center;
    gap: 5px;
    color: color-mix(in srgb, var(--hsc-src) 62%, var(--hsc-ink));
}

.hsc-internal__text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.hsc-pos-list {
    display: grid;
    gap: 8px;
}

.hsc-pos {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 13rem;
    gap: 0 18px;
    padding: 11px 14px 11px 11px;
    border: 1px solid var(--hsc-line);
    border-left: 3px solid var(--hsc-line);
    border-radius: var(--mud-default-borderradius, 11px);
    background: var(--hsc-surface);
}

/* The state of the line is carried by its edge, so a stack of positions can be
   read down the margin: teal is tied to an item, amber is still open. */
.hsc-pos.is-matched {
    border-left-color: var(--hsc-arp);
}

.hsc-pos.is-open {
    border-left-color: var(--hsc-open);
}

.hsc-pos__no {
    font-family: var(--hsc-mono);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.15;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--hsc-ink-soft);
}

.hsc-pos__text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Long specifications are folded rather than scrolled: a scrollbar inside a row
   hides how much is left, a fold says it and opens in one click. */
.hsc-pos__text.is-folded {
    max-height: 9rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.hsc-pos__fold {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--hsc-arp);
    cursor: pointer;
}

.hsc-pos__fold:hover {
    text-decoration: underline;
}

.hsc-pos__rail {
    display: grid;
    gap: 5px;
    justify-items: end;
    align-content: start;
    text-align: right;
}

/* ---------- THE POSITION'S ARITHMETIC ----------
   Set out the way the quotation itself states it: the money runs down one right-aligned
   column so the figures stack on their decimal points, and each operation - the quantity
   it is multiplied by, the discount taken off it - sits to the left of the figure it acts
   on. Which number is the quantity, which the unit price and which the discount is carried
   by where they sit; a label row per position would out-weigh the figures on a deal with
   six of them. */
.hsc-sum {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    justify-items: end;
    align-items: baseline;
    gap: 1px 10px;
    font-variant-numeric: tabular-nums lining-nums;
}

/* What is being done to the figure beside it. Set in the body face, so the eye separates the
   operation from the amount without either being louder than the other. */
.hsc-sum__op {
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--hsc-ink-soft);
}

/* The quantity is a figure like the others and reads as one. */
.hsc-sum__op b {
    font-family: var(--hsc-mono);
    font-weight: 600;
    color: var(--hsc-ink);
}

.hsc-sum__fig {
    font-family: var(--hsc-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--hsc-ink-soft);
}

/* Teal is this dialog's colour for something settled in ARP, and a discount is a decision
   somebody made rather than a problem to be fixed - so it is found easily and alarms nobody. */
.hsc-sum__fig.is-off {
    color: color-mix(in srgb, var(--hsc-arp) 80%, var(--hsc-ink));
}

/* The tote rule off a paper quotation. It spans the money column alone, because that is the
   column being added up. */
.hsc-sum__fig.is-total {
    grid-column: 1 / -1;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid color-mix(in srgb, var(--hsc-ink) 55%, transparent);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hsc-ink);
}

.hsc-pos__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.hsc-pos__status.is-matched {
    color: color-mix(in srgb, var(--hsc-arp) 78%, var(--hsc-ink));
}

.hsc-pos__status.is-open {
    color: color-mix(in srgb, var(--hsc-open) 62%, var(--hsc-ink));
}

.hsc-pos__status.is-service {
    color: var(--hsc-ink-soft);
}

.hsc-pos__pn {
    font-family: var(--hsc-mono);
    letter-spacing: -0.01em;
}

.hsc-pos__note {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--hsc-ink-soft);
}

/* ---------- THE ORDER CODE ----------
   The artifact this trade runs on: a configuration written out one field at a
   time. Squeezed into the rail it broke mid-field and stranded a digit on its
   own line, which makes it unreadable and untypeable - so it runs across the
   foot of the position instead, at full width, and wraps only at its own field
   separators. The gaps are wider than a space because the gaps are the format. */
.hsc-pos__code {
    grid-column: 2 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 11px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--hsc-line);
}

.hsc-pos__code > .hsc-label {
    flex: 0 0 auto;
    line-height: 1.7;
}

/* What the line's text says, read against what its order code specifies. Laid out like the
   code above it - a label at the left, the findings running across - so the two read as one
   statement about the same position. */
.hsc-pos__check {
    grid-column: 2 / -1;
    display: flex;
    align-items: baseline;
    gap: 5px 11px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--hsc-line);
}

.hsc-pos__check > .hsc-label {
    flex: 0 0 auto;
    line-height: 1.7;
}

.hsc-pos__check.is-wrong > .hsc-label {
    color: var(--hsc-open);
}

.hsc-check {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hsc-check__say {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hsc-ink-soft);
}

/* One finding per row: the spec, then the two claims about it. The text's version comes
   first because it is the one on the page, and the code's version second because it is the
   one that is right. */
.hsc-check__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 0.78rem;
    line-height: 1.5;
}

.hsc-check__spec {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-weight: 600;
}

.hsc-check__said,
.hsc-check__means {
    font-family: var(--hsc-mono);
    font-size: 0.72rem;
    padding: 0 5px 1px;
    border-radius: 4px;
}

.hsc-check__said {
    text-decoration: line-through;
    color: color-mix(in srgb, var(--hsc-open) 78%, var(--hsc-ink));
    background: color-mix(in srgb, var(--hsc-open) 11%, transparent);
}

.hsc-check__means {
    color: color-mix(in srgb, var(--hsc-arp) 78%, var(--hsc-ink));
    background: color-mix(in srgb, var(--hsc-arp) 11%, transparent);
}

/* A spec the text leaves out. Kept quiet: on a sales description that is the expected
   difference, not a mistake. */
.hsc-check__absent {
    color: var(--hsc-ink-soft);
}

/* Bootstrap paints a bare <code> element #d63384 app-wide, so the colour, the
   padding and the border are all set here rather than inherited. */
.hsc-code {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1px 10px;
    padding: 3px 8px;
    border: 1px solid var(--hsc-line);
    border-radius: 4px;
    background: var(--hsc-sunk);
    color: var(--hsc-ink);
    font-family: var(--hsc-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

/* A field is atomic. Nothing breaks inside one. */
.hsc-code__field {
    white-space: nowrap;
}

/* ---------- THE LAST STEP ----------
   The commitment. Everything above resolves into one document, so it is stated
   as one: the figure carries the weight, the docket under it carries the rest. */
.hsc-docket {
    border: 1px solid var(--hsc-line);
    border-radius: var(--mud-default-borderradius, 11px);
    overflow: hidden;
}

.hsc-docket__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--hsc-line);
    background: color-mix(in srgb, var(--hsc-arp) 6%, transparent);
}

.hsc-docket__figure {
    font-family: var(--hsc-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
}

.hsc-docket__facts {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 7px 14px;
    margin: 0;
    padding: 13px 16px;
    font-size: 0.8125rem;
}

.hsc-docket__facts dt {
    color: var(--hsc-ink-soft);
}

.hsc-docket__facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- ACTIONS ----------
   The Create button is held until every step has been opened, so the reason it
   is held sits beside it rather than leaving a dead grey button unexplained. */
.hsc-blocked {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--hsc-ink-soft);
}

@media (max-width: 900px) {
    .hsc-pos {
        grid-template-columns: 2.25rem minmax(0, 1fr);
    }

    .hsc-pos__rail {
        grid-column: 2;
        justify-items: start;
        text-align: left;
        margin-top: 7px;
    }

    .hsc-pos__code {
        grid-column: 2;
    }

    .hsc-stephead {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .hsc-source__facts,
    .hsc-docket__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px 0;
    }

    .hsc-source__facts dt,
    .hsc-docket__facts dt {
        margin-top: 7px;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .hsc-docket__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---------- TITLE ----------
   The source marker is introduced here, on the deal name, before the reader
   meets it again on the facts the deal supplied. */
.hsc-deal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 3px;
    min-width: 0;
}

.hsc-deal__src {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--hsc-src) 45%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--hsc-src) 10%, transparent);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hsc-src) 68%, var(--hsc-ink));
}

.hsc-deal__name {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--hsc-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}