/* ═══════════════════════════════════════════════════════════════════════════
   Factory Data page (/products/{sku}/factory).

   Global rather than isolated: FactoryData.razor and FactoryDataQuoteCards.razor
   share the card, key/value and blank-state classes, and CSS isolation would mean
   maintaining two copies. Same reasoning as actions-panel.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* flex:1, not height:100%. .app-main is a flex column with .75rem of padding, and a
   height:100% child resolves to the full *content* box — so the child plus that padding
   was 24px taller than .app-main, which is what produced the outer scrollbar. Filling by
   flex instead means the page always fits its shell exactly and the only scrollbars are
   the deliberate inner ones: the pricing-sheet rail, the main column, and the change feed. */
.fd-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 16px 16px;

    /* ── Harbour ───────────────────────────────────────────────────────────
       The house blue, deepened so it holds against white, on cooler paper.
       Swapping this block is the whole of a palette change — every rule below
       reads from these. */
    --fd-ink: #0f1d33;
    --fd-ink-2: #44566f;
    --fd-ink-3: #78889f;
    --fd-line: #ccd8e6;
    --fd-line-2: #e6ecf4;
    /* A shade stronger than --fd-line, for the outlines that define a card when the
       page behind it is white and fill contrast can't do the job. */
    --fd-rule: #b3c6dd;
    --fd-surface: #fff;
    --fd-sunken: #f2f6fb;
    /* The rail is tinted a step darker than the cards so the page reads as two
       zones rather than one flat field. */
    --fd-rail-bg: #e9f0f8;
    --fd-head-bg: #f2f6fb;
    --fd-accent: #1264d6;
    --fd-accent-ink: #0a4699;
    --fd-accent-soft: #dfeafc;
    /* Every dollar figure. Deeper than body text so the numbers come forward. */
    --fd-money: #0a3161;
    /* The "Applied to <sheet>" card — the one thing on the page that is ours
       rather than the factory's. */
    --fd-hero-bg: #f6faff;
    --fd-hero-head: #dfeafc;
    --fd-hero-line: #a9c8ee;
    --fd-warn: #8a5a08;
    --fd-warn-soft: #fbf1dd;
    --fd-good: #0b6b4a;
    --fd-good-soft: #ddf0e8;
}

/* ── Page ground ───────────────────────────────────────────────────────────────
   Currently "White, ruled": a white page with cards defined by border weight rather
   than by fill. It has to sit on .app-main rather than .fd-page, or the shell's own
   padding shows the app gradient as a border around the page.

   To switch to "Deeper desk" — white cards on a tinted ground, which gives the most
   card-to-ground contrast — delete the two rules below this one and use:
       .app-main:has(.fd-page) { background: #dbe6f2; }
   Both are shown side by side in the colour-directions mockup. */
/* Two traps here, both already sprung once:

   1. The `main` type selector is load-bearing. MainLayout.razor.css is isolated, so its
      rule compiles to `.app-main[b-xxxxx]` — the same specificity as a bare
      `.app-main:has(.fd-page)` — and R2.Wasm.styles.css is linked after this file, so
      on a tie it wins and the gradient stays. Adding the element name breaks the tie.
   2. Literal colour, not var(): the palette tokens are declared on .fd-page, so they do
      not resolve on an ancestor — var(--fd-surface) here silently computes to
      transparent. */
main.app-main:has(.fd-page) {
    background: #fff;
}

/* With no fill contrast, the borders carry the whole structure, so they step up a
   shade from the in-card rules. */
.fd-page .fd-card,
.fd-page .fd-rail {
    border-color: var(--fd-rule);
}

.fd-page .fd-head {
    border-bottom-color: var(--fd-rule);
}

/* ContentLoadingOverlay wraps the page content in two plain block divs. They carry
   height:100% but aren't flex containers, so .fd-body's flex:1 had nothing to resolve
   against and the page grew past its container instead of scrolling inside it. Making
   both wrappers flex columns restores the chain from .fd-page down to .fd-main. */
.fd-page > .content-loading-overlay-shell,
.fd-page .content-loading-overlay-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.fd-muted {
    color: var(--fd-ink-3);
}

.fd-strong {
    font-weight: 600;
    color: var(--fd-money);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.fd-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--fd-line);
    flex-shrink: 0;
}

/* contain, not cover: product shots aren't square, and cropping one to a 56px square
   cuts the product in half. The white fill gives the letterboxing somewhere to go. */
.fd-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 1px solid var(--fd-line);
    object-fit: contain;
    padding: 3px;
    background: var(--fd-surface);
    flex-shrink: 0;
}

.fd-thumb-empty {
    background: repeating-linear-gradient(45deg,
        var(--fd-sunken), var(--fd-sunken) 6px,
        var(--fd-line-2) 6px, var(--fd-line-2) 12px);
}

.fd-head-id {
    flex: 1;
    min-width: 0;
}

.fd-head-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

/* The SKU is the page heading, so it is an h1; the reset strips the UA margin. */
.fd-head-title h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fd-ink);
    font-variant-numeric: tabular-nums;
}

.fd-head-title span {
    font-size: 14.5px;
    color: var(--fd-ink-2);
}

.fd-head-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.fd-pill {
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid var(--fd-line);
    background: var(--fd-sunken);
    color: var(--fd-ink-2);
    white-space: nowrap;
}

.fd-pill-warn {
    background: var(--fd-warn-soft);
    border-color: transparent;
    color: var(--fd-warn);
    font-weight: 600;
}

.fd-head-actions {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.fd-btn {
    font: inherit;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--fd-line);
    background: var(--fd-surface);
    color: var(--fd-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fd-btn:hover {
    background: var(--fd-sunken);
    color: var(--fd-ink);
}

.fd-btn.is-on {
    background: var(--fd-accent-soft);
    border-color: var(--fd-accent);
    color: var(--fd-accent-ink);
    font-weight: 600;
}

.fd-btn-primary {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: #fff;
    font-weight: 600;
}

.fd-btn-primary:hover {
    background: var(--fd-accent-ink);
    color: #fff;
}

.fd-btn-quiet {
    margin-top: 10px;
}

.fd-btn:focus-visible,
.fd-sheet:focus-visible,
.fd-fac:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 2px;
}

/* ── Body split ───────────────────────────────────────────────────────────── */

.fd-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 16px;
    padding-top: 14px;
}

/* ── Rail: one entry per pricing sheet ────────────────────────────────────── */

.fd-rail {
    width: 232px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--fd-line);
    border-radius: 8px;
    background: var(--fd-rail-bg);
    overflow: hidden;
}

.fd-rail-head {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
    padding: 11px 13px 8px;
    flex-shrink: 0;
}

.fd-rail-list {
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

.fd-sheet {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--fd-ink);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--fd-line);
    padding: 10px 13px;
    position: relative;
    transition: background .12s ease;
}

.fd-sheet:hover {
    background: var(--fd-surface);
}

.fd-sheet.is-on {
    background: var(--fd-surface);
}

.fd-sheet.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--fd-accent);
}

.fd-sheet-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fd-ink);
}

.fd-sheet-cost {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 5px;
}

.fd-sheet-cost b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fd-money);
}

.fd-sheet-cost em {
    font-style: normal;
    font-size: 11px;
    color: var(--fd-ink-3);
}

.fd-sheet-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11px;
    color: var(--fd-ink-3);
}

.fd-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--fd-accent-soft);
    color: var(--fd-accent-ink);
    white-space: nowrap;
    vertical-align: 1px;
}

.fd-tag-quiet {
    background: var(--fd-line-2);
    color: var(--fd-ink-3);
    font-weight: 500;
}

/* Razor collapses the whitespace between adjacent elements, so the gap has to come from
   CSS — otherwise the pills butt straight up against the quantity. */
.fd-ladder td .fd-tag {
    margin-left: 6px;
}

/* ── Season trend ─────────────────────────────────────────────────────────── */

.fd-trend {
    flex-shrink: 0;
    border-top: 1px solid var(--fd-line);
    padding: 11px 13px 12px;
    background: var(--fd-surface);
}

.fd-trend-head {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
    margin-bottom: 8px;
}

.fd-trend-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fd-trend-label {
    font-size: 11.5px;
    color: var(--fd-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-trend-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--fd-line-2);
    overflow: hidden;
}

.fd-trend-bar i {
    display: block;
    height: 100%;
    background: var(--fd-accent);
    border-radius: 3px;
}

.fd-trend-value {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--fd-money);
    font-weight: 600;
}

.fd-trend-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--fd-line-2);
    font-size: 11.5px;
    line-height: 1.45;
}

.fd-trend-foot.is-up {
    color: var(--fd-warn);
}

.fd-trend-foot.is-down {
    color: var(--fd-good);
}

/* ── Main column ──────────────────────────────────────────────────────────── */

.fd-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 2px;
}

/* Cards keep their natural height and the column scrolls. Without this the default
   flex-shrink crushes each card down to its borders once the content overflows. */
.fd-main > * {
    flex-shrink: 0;
}

/* Cards stretch to the tallest in their row (the grid default), so a row reads as one
   band rather than a ragged edge. Each card is a column so its body fills the extra height. */
.fd-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
}

.fd-cards > .fd-card {
    display: flex;
    flex-direction: column;
}

.fd-cards > .fd-card > .fd-card-body {
    flex: 1;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.fd-card {
    border: 1px solid var(--fd-line);
    border-radius: 8px;
    background: var(--fd-surface);
    overflow: hidden;
}

.fd-card-applied {
    border-color: var(--fd-hero-line);
    background: var(--fd-hero-bg);
}

.fd-card-applied .fd-card-head {
    background: var(--fd-hero-head);
    border-bottom-color: var(--fd-hero-line);
}

.fd-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--fd-line-2);
    background: var(--fd-head-bg);
}

.fd-card-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fd-ink);
}

.fd-card-note {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--fd-ink-3);
    text-align: right;
}

.fd-card-body {
    padding: 13px 14px;
}

.fd-card-raw .fd-card-body {
    background: var(--fd-sunken);
}

/* ── Applied summary ──────────────────────────────────────────────────────── */

.fd-applied-grid {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Cost and Landed are the answer; everything to their right is the arithmetic behind
   it. The rule keeps Duty from crowding the headline figures. */
.fd-applied-figures {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    padding-right: 24px;
    border-right: 1px solid var(--fd-hero-line);
    align-self: stretch;
    align-items: flex-start;
}

/* Claim the space beside the headline figures, otherwise the auto-fit grid sizes to
   min-content as a flex item and stacks into a single column. */
.fd-applied-grid > .fd-kv {
    flex: 1 1 320px;
    min-width: 0;
}

.fd-figure {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fd-figure-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
}

.fd-figure-value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--fd-money);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.fd-figure-hero .fd-figure-value {
    color: var(--fd-accent-ink);
}

.fd-applied-foot {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--fd-hero-line);
    font-size: 12px;
    color: var(--fd-ink-3);
}

.fd-applied-foot b {
    color: var(--fd-ink-2);
    font-weight: 600;
}

.fd-alert {
    margin-top: 11px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--fd-warn-soft);
    border-left: 3px solid var(--fd-warn);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fd-ink-2);
}

.fd-alert b {
    color: var(--fd-warn);
    font-weight: 600;
}

/* ── Factory switcher ─────────────────────────────────────────────────────── */

.fd-fac-switch {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.fd-fac {
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--fd-line);
    background: var(--fd-surface);
    color: var(--fd-ink-2);
    border-radius: 7px;
    padding: 6px 12px;
    line-height: 1.35;
    transition: background .12s ease, border-color .12s ease;
}

.fd-fac:hover {
    background: var(--fd-sunken);
}

.fd-fac.is-on {
    border-color: var(--fd-accent);
    background: var(--fd-accent-soft);
}

.fd-fac.is-empty {
    opacity: 0.62;
}

.fd-fac-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fd-ink);
}

.fd-fac.is-on .fd-fac-name {
    color: var(--fd-accent-ink);
}

.fd-fac-sub {
    display: block;
    font-size: 11px;
    color: var(--fd-ink-3);
    font-variant-numeric: tabular-nums;
}

.fd-fac-single {
    font-size: 12.5px;
    color: var(--fd-ink-3);
}

.fd-fac-single b {
    color: var(--fd-ink-2);
    font-weight: 600;
}

/* ── Price ladder ─────────────────────────────────────────────────────────── */

.fd-ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fd-ladder th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
    padding: 0 8px 6px;
    text-align: left;
    border-bottom: 1px solid var(--fd-line-2);
}

.fd-ladder td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--fd-line-2);
    color: var(--fd-ink-2);
}

.fd-ladder tbody tr:last-child td {
    border-bottom: 0;
}

.fd-ladder tr.is-effective td {
    background: var(--fd-accent-soft);
}

.fd-ladder tr.is-effective td:first-child {
    border-radius: 5px 0 0 5px;
}

.fd-ladder tr.is-effective td:last-child {
    border-radius: 0 5px 5px 0;
}

.fd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Landed build-up ──────────────────────────────────────────────────────── */

.fd-buildup {
    margin: 0;
}

.fd-buildup-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    font-size: 13px;
}

.fd-buildup-row dt {
    color: var(--fd-ink-2);
    font-weight: 400;
}

.fd-buildup-row dt span {
    color: var(--fd-ink-3);
    font-size: 11px;
    margin-left: 5px;
}

.fd-buildup-row dd {
    margin: 0;
    color: var(--fd-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-buildup-row.is-total {
    border-top: 1px solid var(--fd-line);
    margin-top: 5px;
    padding-top: 9px;
}

.fd-buildup-row.is-total dt {
    font-weight: 600;
    color: var(--fd-ink);
}

.fd-buildup-row.is-total dd {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fd-money);
}

/* ── Key / value grids ────────────────────────────────────────────────────── */

.fd-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 11px 16px;
    margin: 0;
}

.fd-kv-wide {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.fd-kv-row dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
    margin-bottom: 2px;
}

.fd-kv-row dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--fd-ink);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.fd-kv-raw .fd-kv-row dd {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

/* ── Prose blocks ─────────────────────────────────────────────────────────── */

.fd-prose + .fd-prose {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fd-line-2);
}

.fd-prose-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
    margin-bottom: 3px;
}

/* Lines are split server-side rather than relying on pre-wrap: factories use long runs
   of spaces as separators, which pre-wrap would reproduce verbatim. */
.fd-prose p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fd-ink-2);
}

.fd-prose p + p {
    margin-top: 2px;
}

/* ── Blank / hint / warn states ───────────────────────────────────────────── */

.fd-blank {
    padding: 22px 14px;
    text-align: center;
    color: var(--fd-ink-3);
    font-size: 12.5px;
    line-height: 1.6;
}

.fd-blank b {
    display: block;
    color: var(--fd-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.fd-blank-standalone {
    border: 1px dashed var(--fd-line);
    border-radius: 8px;
    background: var(--fd-sunken);
}

.fd-hint {
    margin: 11px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--fd-line-2);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fd-ink-3);
}

.fd-warn {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--fd-warn-soft);
    border-left: 3px solid var(--fd-warn);
    font-size: 12px;
    line-height: 1.5;
    color: var(--fd-ink-2);
}

.fd-warn b {
    color: var(--fd-warn);
    font-weight: 600;
}

/* Sits between the freight checkbox and the save row, so it needs its own breathing room. */
.fd-edit-warn {
    margin: 13px 0 0;
}

/* ── Change feed ──────────────────────────────────────────────────────────── */

.fd-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Date on the left, the change and its attribution stacked beside it. The card is one
   grid cell wide now, so there is no room for attribution in a third column. */
.fd-feed-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--fd-line-2);
    font-size: 12.5px;
}

.fd-feed-row:last-child {
    border-bottom: 0;
}

.fd-feed-when {
    font-size: 11px;
    color: var(--fd-ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

.fd-feed-what {
    color: var(--fd-ink-2);
    line-height: 1.5;
}

.fd-feed-what b {
    color: var(--fd-ink);
    font-weight: 600;
    margin-right: 5px;
}

.fd-feed-old {
    text-decoration: line-through;
    color: var(--fd-ink-3);
    font-variant-numeric: tabular-nums;
}

.fd-feed-arrow {
    color: var(--fd-ink-3);
    margin: 0 3px;
}

.fd-feed-new {
    color: var(--fd-money);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fd-feed-summary {
    display: block;
    font-size: 11.5px;
    color: var(--fd-ink-2);
    line-height: 1.45;
}

.fd-feed-who {
    grid-column: 2;
    font-size: 11px;
    color: var(--fd-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feed-who b {
    color: var(--fd-ink-2);
    font-weight: 600;
}

/* ── The change feed as a grid card ────────────────────────────────────────
   The feed is the one card with unbounded content — a SKU can carry a hundred-odd
   changes. It fills whatever height the grid row gives it and scrolls inside,
   rather than dragging the row taller than everything beside it. */
.fd-card-changes {
    min-height: 320px;
}

.fd-card-changes > .fd-card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* max-height is what actually makes it scroll. Grid rows size to their content, so
   flex:1 alone lets a long feed grow the row — and every card beside it, since the row
   stretches them to match. The cap bounds the feed and hands it a scrollbar; flex:1
   still lets it fill the row when a taller neighbour sets the height. */
.fd-card-changes .fd-feed {
    flex: 1;
    min-height: 0;
    max-height: 300px;
    overflow-y: auto;
    /* Room for the scrollbar so rows don't sit under it. */
    padding-right: 4px;
}

/* ── Empty page states ────────────────────────────────────────────────────── */

.fd-empty {
    padding: 40px;
    text-align: center;
    color: var(--fd-ink-3);
    font-size: 13.5px;
}

.fd-notfound {
    padding: 60px 20px;
    text-align: center;
}

.fd-notfound h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--fd-ink);
    margin: 0 0 8px;
}

.fd-notfound p {
    font-size: 14px;
    color: var(--fd-ink-2);
    max-width: 46ch;
    margin: 0 auto 18px;
    line-height: 1.6;
}

.fd-notfound-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ── Narrow viewports ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fd-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .fd-rail {
        width: 100%;
        flex-shrink: 0;
    }

    /* The rail keeps its rounded clip, so the list has to stay scrollable here — with
       'visible' a SKU on many sheets would have the overflowing ones clipped away. */
    .fd-rail-list {
        max-height: 320px;
    }

    .fd-main {
        overflow-y: visible;
    }

    .fd-head-actions {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-btn,
    .fd-sheet,
    .fd-fac {
        transition: none;
    }
}

/* ── Editing the applied values ────────────────────────────────────────────
   The Applied card is the one place on this page that writes anything. Everything
   else is the factory's assertion and stays read-only. */

.fd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 8px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fd-ink-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fd-icon-btn:hover {
    background: var(--fd-surface);
    border-color: var(--fd-hero-line);
    color: var(--fd-accent-ink);
}

.fd-icon-btn:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 1px;
}

/* Sits where the read-only key/value grid does, so the card doesn't jump on edit. */
.fd-edit-grid {
    flex: 1 1 320px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 11px 16px;
}

.fd-edit-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fd-edit-field > span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-ink-3);
}

.fd-edit-field input {
    font: inherit;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--fd-line);
    border-radius: 5px;
    background: var(--fd-surface);
    color: var(--fd-ink);
}

.fd-edit-field input:focus {
    outline: 2px solid var(--fd-accent);
    outline-offset: -1px;
    border-color: var(--fd-accent);
}

/* Only rendered once the freight value actually moves. */
.fd-edit-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--fd-accent-soft);
    border: 1px solid var(--fd-hero-line);
    font-size: 12.5px;
    color: var(--fd-ink-2);
    cursor: pointer;
}

.fd-edit-check input {
    margin: 2px 0 0;
    flex-shrink: 0;
}

.fd-edit-check b {
    color: var(--fd-ink);
    font-weight: 600;
}

.fd-edit-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--fd-hero-line);
}

.fd-edit-note {
    font-size: 11.5px;
    color: var(--fd-ink-3);
}

@media (prefers-reduced-motion: reduce) {
    .fd-icon-btn {
        transition: none;
    }
}

/* ── Copying pricing to the item's other sheets ────────────────────────────
   Factories price on whichever sheet the item was on at the time; sheets added
   afterwards never get back-filled. This is the deliberate fix for that, and it
   writes in two places, so the panel says so plainly. */

.fd-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    flex-shrink: 0;
}

.fd-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid var(--fd-line);
    background: var(--fd-surface);
    color: var(--fd-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fd-text-btn:hover {
    border-color: var(--fd-accent);
    color: var(--fd-accent-ink);
}

.fd-text-btn.is-on {
    border-color: var(--fd-accent);
    background: var(--fd-accent-soft);
    color: var(--fd-accent-ink);
}

.fd-text-btn:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 1px;
}

.fd-copy-panel {
    margin-top: 13px;
    border: 1px solid var(--fd-hero-line);
    border-radius: 7px;
    background: var(--fd-surface);
    overflow: hidden;
}

.fd-copy-head {
    padding: 10px 13px;
    border-bottom: 1px solid var(--fd-line-2);
    background: var(--fd-accent-soft);
}

.fd-copy-head b {
    display: block;
    font-size: 12.5px;
    color: var(--fd-ink);
}

.fd-copy-head span {
    display: block;
    font-size: 11.5px;
    color: var(--fd-ink-2);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* The attribution change is the surprising part, so it gets the warning treatment
   rather than being buried in small print. */
.fd-copy-warn {
    padding: 10px 13px;
    border-bottom: 1px solid var(--fd-line-2);
    background: var(--fd-warn-soft);
    border-left: 3px solid var(--fd-warn);
    font-size: 12px;
    line-height: 1.5;
    color: var(--fd-ink-2);
}

.fd-copy-warn b {
    color: var(--fd-warn);
    font-weight: 600;
}

.fd-copy-warn em {
    font-style: italic;
}

.fd-copy-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-copy-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--fd-line-2);
    flex-wrap: wrap;
}

.fd-copy-row:last-child {
    border-bottom: 0;
}

.fd-copy-row.is-checked {
    background: var(--fd-hero-bg);
}

.fd-copy-row > label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    min-width: 210px;
}

.fd-copy-row input {
    margin: 0;
    flex-shrink: 0;
}

.fd-copy-sheet b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fd-ink);
    line-height: 1.3;
}

.fd-copy-sheet em {
    font-style: normal;
    font-size: 11px;
    color: var(--fd-ink-3);
}

.fd-copy-state {
    font-size: 11.5px;
    color: var(--fd-ink-3);
    font-variant-numeric: tabular-nums;
}

.fd-copy-state.is-warn {
    color: var(--fd-warn);
    font-weight: 600;
}

.fd-copy-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px 13px;
    border-top: 1px solid var(--fd-line-2);
    background: var(--fd-sunken);
}

@media (prefers-reduced-motion: reduce) {
    .fd-text-btn {
        transition: none;
    }
}

/* ── Submission bar: which factory you're looking at, and applying it ──────
   "Apply to sheet" runs the same push as the Pricing page, which is
   Administrator-only, so the button isn't rendered for anyone else. */

.fd-fac-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.fd-text-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.fd-text-btn[disabled]:hover {
    border-color: var(--fd-line);
    color: var(--fd-ink-2);
}

/* ── Expired pricing ───────────────────────────────────────────────────────
   The Products grid says "Pricing Expired" in its status column, but the page
   itself said nothing — you could sit on stale pricing and not know. The Applied
   card takes the whole treatment: red border, red header, badge in the title.
   The red is derived from the Harbour palette rather than a raw #f00. */

.fd-page {
    --fd-bad: #a3231b;
    --fd-bad-soft: #fbe9e7;
    --fd-bad-line: #e7a9a3;
}

.fd-card-applied.is-expired {
    border-color: var(--fd-bad-line);
}

.fd-card-applied.is-expired .fd-card-head {
    background: var(--fd-bad-soft);
    border-bottom-color: var(--fd-bad-line);
}

.fd-card-applied.is-expired .fd-card-head h3 {
    color: var(--fd-bad);
}

.fd-card-applied.is-expired .fd-card-note {
    color: var(--fd-bad);
    font-weight: 600;
}

/* The figures keep their own colour — the cost isn't wrong, it's just old. */
.fd-card-applied.is-expired .fd-applied-foot {
    border-top-color: var(--fd-bad-line);
}

.fd-expired-badge {
    display: inline-block;
    margin-left: 9px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--fd-bad);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

/* Apply sits with the title, so it gets the accent treatment that separates it from the
   quieter Edit / Copy actions on the right of the same header. */
.fd-apply-btn {
    border-color: var(--fd-accent);
    background: var(--fd-accent-soft);
    color: var(--fd-accent-ink);
}

.fd-apply-btn:hover:not([disabled]) {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: #fff;
}

/* On an expired card the whole header is red; the accent button would fight it. */
.fd-card-applied.is-expired .fd-apply-btn {
    border-color: var(--fd-bad);
    background: var(--fd-bad);
    color: #fff;
}

.fd-card-applied.is-expired .fd-apply-btn:hover:not([disabled]) {
    background: #8c1e17;
    border-color: #8c1e17;
    color: #fff;
}

/* Back to Products carries a left arrow, so it needs the icon/label alignment the
   plain .fd-btn doesn't have. */
.fd-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}