/* PCN module styles — editorial-regulatory direction (plan §"UI Aesthetic Direction M11–M13").
   Budget ≤300 lines. Only PCN-only semantic tokens live here; everything else uses Mud tokens. */
@layer legacy {

:root {
    /* PCN status palette now rides the shared --cx status tokens so it themes (cool/warm/dark). */
    --pcn-warning-cream: var(--cx-warn-soft);
    --pcn-warning-cream-ink: var(--cx-warn-ink);
    --pcn-rejected-scarlet: var(--cx-bad);
    --pcn-rejected-scarlet-bg: var(--cx-bad-soft);
    --pcn-mono: var(--cx-mono);  /* JetBrains Mono was never loaded — follow the app mono (re-themes on warm/ember) */
}

/* ── Status badge — visual hierarchy primary ─────────────────────────────── */
.pcn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .005em;
    line-height: 1.5;
    transition: background 180ms cubic-bezier(.2,.7,.3,1), color 180ms;
}

.pcn-status-badge .pcn-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.pcn-status-badge .pcn-status-label { white-space: nowrap; }

.pcn-status-badge .pcn-status-callout {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 0.2rem;
    padding-left: 0.4rem;
    border-left: 1px solid currentColor;
}

.pcn-status-badge.pcn-status-rejected {
    background: var(--pcn-rejected-scarlet-bg);
    color: var(--pcn-rejected-scarlet);
    outline: 1px solid var(--cx-bad-border);
}

.pcn-status-badge.pcn-status-warnings {
    background: var(--pcn-warning-cream);
    color: var(--pcn-warning-cream-ink);
}

.pcn-status-badge.pcn-status-accepted {
    background: var(--cx-ok);
    color: #fff;
}

.pcn-status-badge.pcn-status-pending {
    background: var(--cx-warn-soft);
    color: var(--cx-warn);
    animation: pcnPulse 2400ms ease-in-out infinite;
}

.pcn-status-badge.pcn-status-draft,
.pcn-status-badge.pcn-status-mixed {
    background: transparent;
    color: var(--cx-ink-soft);
    border: 1px solid var(--cx-hairline);
}

@keyframes pcnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
}

/* State-change punch — motion only at decision moments (principle 3) */
.pcn-status-badge[data-just-changed="true"] {
    animation: pcnStatusPunch 180ms cubic-bezier(.2,.7,.3,1);
}

@keyframes pcnStatusPunch {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ── Country status chip ─────────────────────────────────────────────────── */
.pcn-country-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--cx-hairline);
}

.pcn-country-chip .pcn-country-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pcn-country-chip .pcn-country-status { color: inherit; opacity: 0.85; }
.pcn-country-chip .pcn-country-nnn { cursor: help; }

.pcn-country-chip.pcn-country-rejected {
    background: var(--pcn-rejected-scarlet-bg);
    color: var(--pcn-rejected-scarlet);
    border-color: var(--cx-bad-border);
}

.pcn-country-chip.pcn-country-warnings {
    background: var(--pcn-warning-cream);
    color: var(--pcn-warning-cream-ink);
    border-color: var(--cx-warn-border);
}

.pcn-country-chip.pcn-country-accepted {
    color: var(--cx-ok);
    border-color: var(--cx-ok-border);
}

.pcn-country-chip.pcn-country-pending,
.pcn-country-chip.pcn-country-neutral {
    color: var(--cx-ink-soft);
}

/* ── UUID / regulatory identifiers — never proportional type (principle 5) ─ */
.pcn-uuid {
    font-family: var(--pcn-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
    background: var(--cx-bg-deep);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    cursor: help;
}

/* ── Copy-to-clipboard button (UuidDisplay Copyable) ─────────────────────── */
.pcn-uuid-wrap { display: inline-flex; align-items: center; gap: 0.25rem; }

.pcn-copy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; padding: 0; flex: none;
    border: none; border-radius: 4px; cursor: pointer;
    background: transparent; color: var(--cx-ink-soft);
    opacity: 0.55; transition: opacity .12s, background .12s, color .12s;
}

.pcn-copy-btn:hover { opacity: 1; background: var(--cx-accent-soft); color: var(--cx-accent); }
.pcn-copy-btn.copied { opacity: 1; color: var(--cx-ok); }

/* ── Empty state + prerequisite checklist (principle 4) ──────────────────── */
.pcn-empty-state {
    max-width: 36rem;
    margin: 3rem auto;
    padding: 1rem;
    text-align: left;
}

.pcn-empty-state .pcn-empty-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.pcn-empty-state .pcn-empty-subtitle {
    color: var(--cx-ink-soft);
    margin-bottom: 2rem;
}

.pcn-prereq-list { list-style: none; padding: 0; margin: 0; }

.pcn-prereq {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cx-hairline);
    font-size: 1.025rem;
}

.pcn-prereq .pcn-prereq-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex: none;
}

.pcn-prereq.passed .pcn-prereq-icon { color: var(--cx-ok); }
.pcn-prereq.blocked .pcn-prereq-icon { color: var(--cx-ink-faint); }
.pcn-prereq.blocked { color: var(--cx-ink-soft); }
.pcn-prereq .pcn-prereq-fix { margin-left: auto; text-decoration: underline; font-size: 0.9rem; }

.pcn-empty-actions { display: flex; gap: 1rem; margin-top: 2rem; }

/* ── List: market flag-chips (collapsed row + expanded detail) ─────────────── */
.pcn-row-markets { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.pcn-flag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px 2px 5px; border-radius: 999px;
    border: 1px solid var(--cx-hairline); background: var(--cx-surface);
    font-size: 11.5px; line-height: 1.4; white-space: nowrap;
}
.pcn-flag-chip .cx-flag-xs { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(var(--cx-ink-rgb),.08); }
.pcn-flag-chip .pcn-flag-code { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cx-ink); }
.pcn-flag-chip .pcn-flag-lang { color: var(--cx-ink-faint); text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }

/* ECHA-status tint (only when country feedback exists) */
.pcn-flag-chip.pcn-flag-bad  { border-color: var(--cx-bad-border);  background: var(--cx-bad-soft); }
.pcn-flag-chip.pcn-flag-bad  .pcn-flag-code { color: var(--cx-bad); }
.pcn-flag-chip.pcn-flag-warn { border-color: var(--cx-warn-border);  background: var(--cx-warn-soft); }
.pcn-flag-chip.pcn-flag-warn .pcn-flag-code { color: var(--cx-warn); }
.pcn-flag-chip.pcn-flag-ok   { border-color: var(--cx-ok-border);  background: var(--cx-ok-soft); }
.pcn-flag-chip.pcn-flag-ok   .pcn-flag-code { color: var(--cx-ok); }

/* ── Detail page: market list (flag + full country name + language, roomy layout) ─────────── */
.cx-flag-sm { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(var(--cx-ink-rgb),.08); }
.pcn-market-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
@media (max-width: 1100px) { .pcn-market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcn-market-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; min-width: 0;
}
.pcn-market-row .pcn-market-name, .pcn-market-row .pcn-market-lang { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcn-market-row:hover { background: var(--cx-bg-deep); }
.pcn-market-row .pcn-market-name { font-size: 13px; color: var(--cx-ink); font-weight: 500; }
.pcn-market-row .pcn-market-sep { color: var(--cx-ink-faint); }
.pcn-market-row .pcn-market-lang { font-size: 13px; color: var(--cx-ink-soft); }
/* ECHA-status tint for a market row */
.pcn-market-row.pcn-flag-bad  { background: var(--cx-bad-soft); }
.pcn-market-row.pcn-flag-bad  .pcn-market-name { color: var(--cx-bad); }
.pcn-market-row.pcn-flag-warn { background: var(--cx-warn-soft); }
.pcn-market-row.pcn-flag-ok   { background: var(--cx-ok-soft); }

/* PCN list action column: align the download + open icon buttons on one centred baseline */
.cx-table-pcn .cx-row-actions { white-space: nowrap; }
.cx-table-pcn .cx-row-actions .cx-icon-btn { vertical-align: middle; }

/* PCN list: whole row is clickable (→ detail); version shown as a badge after the product name */
.pcn-click-row { cursor: pointer; }
.cx-table-pcn .cx-cell-name { display: flex; align-items: center; gap: 8px; }
/* The flex above is what puts the version badge on the name's line, but it also overrides the
   display:-webkit-box that .cx-cell-name (app.css) needs for its 2-line clamp — so a long trade
   name wrapped without limit. Clamp the name text itself instead, leaving the cell a flex row. */
.pcn-name-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
/* On the product PCN side-panel (narrow middle column of the 3-col grid) the table has no room for
   all 7 columns, so the product name was breaking character-by-character. The .cx-tcard wrapper
   already scrolls (overflow-x:auto); a min-width lets the table scroll instead of getting crushed.
   Scoped to .cx-entity-view so the full-width /pcn dashboard (.cx-list-page) stays untouched. */
.cx-entity-view .cx-table-pcn { min-width: 640px; }
.pcn-ver-badge {
    font-family: var(--cx-mono); font-size: 10px; font-weight: 600; letter-spacing: -.01em;
    color: var(--cx-ink-faint); background: var(--cx-bg-deep);
    border-radius: 5px; padding: 1px 6px; flex: none;
}

/* keep flag code + language baseline-centred in the chip (language was sitting high) */
.pcn-flag-chip .pcn-flag-code, .pcn-flag-chip .pcn-flag-lang { line-height: 1; display: inline-flex; align-items: center; }

/* "Validate now" → green-tinted ghost so it reads as the check/validate action (Build stays the
   primary teal). */
.pcn-btn-validate.cx-btn-ghost { border-color: var(--cx-ok-border); color: var(--cx-ok); }
.pcn-btn-validate.cx-btn-ghost:not(:disabled):hover { background: var(--cx-ok-soft); border-color: var(--cx-ok); color: var(--cx-ok); }

/* readiness "how is this computed?" info dot */
.pcn-ready-info { display: inline-flex; align-items: center; color: var(--cx-ink-faint); cursor: help; margin-left: 4px; vertical-align: middle; }

/* PCN-only sticky fix (the global .cx-ee-* stays at 78px for the other domains). The slim entity bar
   is ~117px tall when sticky, so park the Pages sidebar just below it. The RIGHT rail is left static
   (flows with the page) so a long Actions stack — Delete at the bottom — is never clipped and stays
   reachable by normal page scroll.
   max-height is sized for the sidebar's RESTING top (page unscrolled), which sits below the stuck bar
   stack PLUS the .cx-ent-bar 18px bottom margin, not the smaller stuck top (124) — otherwise while
   unscrolled the sidebar overflows the viewport and can't be scrolled to its end (mirror of #2401). */
.cx-ent-bar.pcn-ent + .cx-ee .cx-ee-anchors { top: calc(124px / var(--cx-zoom, 1)); max-height: calc((100vh - 151px) / var(--cx-zoom, 1)); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.cx-ent-bar.pcn-ent + .cx-ee .cx-ee-rail { position: static; max-height: none; overflow: visible; }

} /* end @layer legacy */