/*
 * Authoring canvas — reusable content-width patterns for assessment authoring screens.
 *
 * The HPC-AC shell gives every page a wide container (up to 1680/1840px). That width is
 * right for operational matrices and wrong for authoring: a definition, a level and its
 * indicators become unreadable when a line of prose is stretched edge to edge.
 *
 * These classes constrain the *inner* canvas without touching the shell. Width is carried
 * on a custom property so a screen picks an intent (--form, --workspace, --wide, --matrix)
 * rather than hardcoding a max-width in Blade, and so a module can retune one value in one
 * place. The canvas keeps its own vertical rhythm because .hpc-page-container's grid gap
 * no longer applies once its children are wrapped.
 */

.ui-authoring-canvas {
    --authoring-canvas: var(--layout-measure-workspace, 1280px);
    --authoring-gap: 1.15rem;

    width: min(100%, var(--authoring-canvas));
    margin-inline: auto;
    display: grid;
    gap: var(--authoring-gap);
    align-content: start;
}

/*
 * Listings are not reading surfaces. A record row carries a title, a short summary and a
 * band of relationship counts side by side, so it uses horizontal space productively where
 * a definition or an indicator list would not. Index screens therefore run wider than the
 * authoring canvas they lead into, while still keeping a visible gutter rather than running
 * edge to edge.
 */
.ui-authoring-canvas--listing { --authoring-canvas: var(--layout-measure-listing, 1520px); }

/* Single-column entry: create/edit forms, short master records. */
.ui-authoring-canvas--form { --authoring-canvas: var(--layout-measure-form, 960px); }

/* Default authoring workspace: Kamus detail, Jabatan/Profile requirements. */
.ui-authoring-canvas--workspace { --authoring-canvas: var(--layout-measure-workspace, 1280px); }

/* Simpler master data that should not sprawl: Level Jabatan. */
.ui-authoring-canvas--compact { --authoring-canvas: 1080px; }

/* Bundle authoring that carries more parallel structure: Paket Soal. */
.ui-authoring-canvas--wide { --authoring-canvas: var(--layout-measure-wide, 1680px); }

/* Genuinely wide data only: participant x method matrices, scoring matrices. */
.ui-authoring-canvas--matrix { --authoring-canvas: var(--layout-measure-full, 100%); }

@media (max-width: 1100px) {
    .ui-authoring-canvas { --authoring-gap: .9rem; }
}

/* ---------------------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------------------ */

.ui-authoring-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ui-authoring-head__text { min-width: 0; flex: 1 1 24rem; }

.ui-authoring-head__eyebrow {
    margin: 0 0 .35rem;
    color: var(--hpc-blue, #1c8fbd);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.ui-authoring-head h1 {
    margin: 0;
    color: var(--workspace-ink, #122033);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.25;
}

.ui-authoring-head__lead {
    margin: .5rem 0 0;
    max-width: 62ch;
    color: #5c7189;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.55;
}

.ui-authoring-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ---------------------------------------------------------------------------
 * Filter bar
 * ------------------------------------------------------------------------ */

.ui-authoring-filter {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(9rem, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 22px;
    background: var(--workspace-card, #fff);
    padding: 1rem 1.1rem;
}

.ui-authoring-filter__reset {
    align-self: end;
    color: #5c7189;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: .7rem;
}

.ui-authoring-filter__reset:hover { color: #1c8fbd; }

@media (max-width: 1000px) {
    .ui-authoring-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ui-authoring-filter { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Record cards (index)
 * ------------------------------------------------------------------------ */

.ui-authoring-list { display: grid; gap: .85rem; }

.ui-authoring-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.4rem;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 24px;
    background: var(--workspace-card, #fff);
    padding: 1.15rem 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ui-authoring-record:hover,
.ui-authoring-record:focus-within {
    border-color: #a9d6e9;
    box-shadow: 0 14px 34px rgba(28, 143, 189, .10);
}

.ui-authoring-record__main { min-width: 0; }

.ui-authoring-record__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.ui-authoring-record__title a { color: var(--workspace-ink, #122033); text-decoration: none; }
.ui-authoring-record__title a:hover { color: #1676a0; text-decoration: underline; }

.ui-authoring-record__desc {
    margin: .45rem 0 0;
    max-width: 74ch;
    color: #5c7189;
    font-size: .8rem;
    font-weight: 620;
    line-height: 1.55;
}

.ui-authoring-record__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
}

@media (max-width: 860px) {
    .ui-authoring-record { grid-template-columns: 1fr; }
    .ui-authoring-record__side { align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
 * Relationship summary — the counts that make a record legible at a glance
 * ------------------------------------------------------------------------ */

.ui-relation-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin: .8rem 0 0;
    padding: 0;
    list-style: none;
}

.ui-relation-summary li {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    border: 1px solid #e3edf4;
    border-radius: 999px;
    background: #f7fbfd;
    padding: .3rem .65rem;
    color: #5c7189;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.ui-relation-summary li b {
    color: var(--workspace-ink, #122033);
    font-size: .82rem;
    font-weight: 700;
}

.ui-relation-summary li[data-empty="1"] { opacity: .62; }

/* ---------------------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------------------ */

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #dbe7f0;
    border-radius: 999px;
    background: #f4f8fb;
    padding: .24rem .6rem;
    color: #45596e;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ui-badge--published { border-color: #bfe7cd; background: #eefaf1; color: #1c7a43; }
.ui-badge--draft { border-color: #f3ddb5; background: #fdf6e8; color: #96650d; }
.ui-badge--archived { border-color: #dcd9e6; background: #f4f3f8; color: #5c5670; }
.ui-badge--reference { border-color: #cbe3f5; background: #eef7fd; color: #1676a0; }
.ui-badge--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
 * Contextual actions — a primary action plus an overflow menu, never a row of
 * identical View/Edit/Delete buttons repeated on every record.
 * ------------------------------------------------------------------------ */

.ui-record-actions { display: flex; align-items: center; gap: .45rem; }

/* The overflow menu itself now comes from <x-ui.row-actions>, the shared component the rest
   of the product's tables use; this file's own .ui-menu implementation was retired once the
   last screen moved off it. Keyboard focus on a record's links is still defined here. */
.ui-authoring-record a:focus-visible {
    outline: 2px solid var(--hpc-blue, #1c8fbd);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------------ */

.ui-empty-state {
    display: grid;
    justify-items: center;
    gap: .6rem;
    border: 1px dashed #c8dced;
    border-radius: 24px;
    background: #fbfdfe;
    padding: 3rem 1.5rem;
    text-align: center;
}

.ui-empty-state h2 {
    margin: 0;
    color: var(--workspace-ink, #122033);
    font-size: 1rem;
    font-weight: 700;
}

.ui-empty-state p {
    margin: 0;
    max-width: 52ch;
    color: #5c7189;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.6;
}

.ui-empty-state__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .4rem; }

/* ---------------------------------------------------------------------------
 * Result count / pagination footer
 * ------------------------------------------------------------------------ */

.ui-authoring-resultbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #5c7189;
    font-size: .78rem;
    font-weight: 700;
}

.ui-authoring-resultbar nav { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .ui-authoring-record { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Section tabs — one workspace, several faces of the same record.
 * The count sits in the tab so an author can see where the content is before
 * paying a page load to find out.
 * ------------------------------------------------------------------------ */

.ui-authoring-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--workspace-line, #dbe7f0);
    margin-bottom: .35rem;
}

.ui-authoring-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    padding: .7rem .9rem;
    color: #5c7189;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.ui-authoring-tabs__link:hover { color: #1676a0; background: #f5fafd; }

.ui-authoring-tabs__link[aria-current="page"],
.ui-authoring-tabs__link.is-active {
    color: #4338ca;
    border-bottom-color: #4338ca;
}

.ui-authoring-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    border-radius: 999px;
    background: #eef2ff;
    padding: .1rem .4rem;
    color: #4338ca;
    font-size: .7rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Numbered record index — gives a long authored list a stable spine and makes
 * "row 07" a usable reference in review conversations.
 * ------------------------------------------------------------------------ */

.ui-record-index {
    display: grid;
    place-items: center;
    align-self: start;
    min-width: 2.1rem;
    height: 2.1rem;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    font-weight: 700;
}

.ui-authoring-record--numbered {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

@media (max-width: 860px) {
    .ui-authoring-record--numbered { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * Metric pills — completeness read at a glance. Green when the authoring is
 * complete, neutral while it is still missing content.
 * ------------------------------------------------------------------------ */

.ui-metric-pill {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    border: 1px solid #dbeadf;
    border-radius: 10px;
    background: #f1faf3;
    padding: .3rem .55rem;
    color: #1c7a43;
    font-size: .73rem;
    font-weight: 700;
    white-space: nowrap;
}

.ui-metric-pill--muted { border-color: #e3e9ef; background: #f6f8fa; color: #778ca0; }
.ui-metric-pill--warn { border-color: #f3ddb5; background: #fdf6e8; color: #96650d; }

.ui-metric-row { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------------------------------------------------------------------------
 * Choice cards — a decision with consequences, shown with the rule it applies
 * rather than a bare radio label.
 * ------------------------------------------------------------------------ */

.ui-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem; }

.ui-choice-card {
    display: block;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 18px;
    background: #fff;
    padding: 1rem 1.05rem;
    cursor: pointer;
}

.ui-choice-card:hover { border-color: #a9d6e9; }

.ui-choice-card.is-selected,
.ui-choice-card:has(input:checked) {
    border-color: #4338ca;
    border-width: 2px;
    background: #fbfaff;
    padding: calc(1rem - 1px) calc(1.05rem - 1px);
}

.ui-choice-card:has(input:focus-visible) { outline: 2px solid #4338ca; outline-offset: 2px; }

.ui-choice-card__title { margin: 0; font-size: .88rem; font-weight: 700; color: var(--workspace-ink, #122033); }
.ui-choice-card__desc { margin: .35rem 0 0; color: #5c7189; font-size: .78rem; font-weight: 620; line-height: 1.55; }

.ui-formula {
    display: inline-block;
    margin-top: .6rem;
    border-radius: 8px;
    background: #f1f5f9;
    padding: .3rem .55rem;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
}

.ui-choice-card.is-selected .ui-formula,
.ui-choice-card:has(input:checked) .ui-formula { background: #eef2ff; color: #4338ca; }

/* ---------------------------------------------------------------------------
 * Sticky action bar — a long authoring form must never make the author scroll
 * to the bottom to find out whether their work is saved.
 * ------------------------------------------------------------------------ */

.ui-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .07);
    padding: .8rem 1rem;
}

.ui-sticky-actions__status { color: #64748b; font-size: .76rem; font-weight: 700; }
.ui-sticky-actions__buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/*
 * On a listing-width canvas the record gets a genuine third column: identity and summary
 * on the left, relationship counts in the middle, state and actions on the right. Below
 * that width it folds back to the stacked two-column form.
 */
@media (min-width: 1200px) {
    .ui-authoring-canvas--listing .ui-authoring-record--numbered {
        grid-template-columns: auto minmax(22rem, 1fr) minmax(16rem, auto) auto;
        align-items: center;
        column-gap: 1.6rem;
    }

    .ui-authoring-canvas--listing .ui-authoring-record .ui-relation-summary {
        margin: 0;
        align-content: center;
    }

    .ui-authoring-canvas--listing .ui-authoring-record__side {
        align-items: flex-end;
        justify-content: center;
        gap: .6rem;
    }
}

/* ---------------------------------------------------------------------------
 * Paket soal — family panel
 *
 * States plainly what kind of package the author is looking at, because the
 * settings that follow only make sense once that is known: an ability test is
 * scored against a key and a norm table, an inventory has neither.
 * ------------------------------------------------------------------------ */

.ps-family { display: grid; gap: .9rem; }

.ps-family__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.ps-family__eyebrow {
    margin: 0 0 .2rem;
    color: var(--hpc-blue, #1c8fbd);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.ps-family__title {
    margin: 0;
    color: var(--workspace-ink, #122033);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
}

.ps-family__badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.ps-family__summary {
    margin: 0;
    max-width: 82ch;
    color: #45596e;
    font-size: .84rem;
    font-weight: 620;
    line-height: 1.6;
}

.ps-family__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .2rem;
    border-top: 1px dashed var(--workspace-line, #dbe7f0);
    margin-top: .2rem;
}

.ps-family__tab {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbe7f0;
    border-radius: 10px;
    background: #f7fbfd;
    padding: .3rem .6rem;
    color: #45596e;
    font-size: .75rem;
    font-weight: 700;
}

.ps-family__note { margin: 0; color: #7c8ea1; font-size: .74rem; font-weight: 650; }

/* ---------------------------------------------------------------------------
 * Behavioural rubric
 *
 * Laid out the way an assessor reads it: scale point on the left as a fixed
 * anchor, the behavioural statement beside it, and the evidence threshold on
 * the right. Scanning down the column answers "which level is this?", which is
 * the decision being made.
 * ------------------------------------------------------------------------ */

.rubric-criterion { display: grid; gap: .7rem; }

.rubric-criterion__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--workspace-line, #dbe7f0);
}

.rubric-criterion__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--workspace-ink, #122033); }

.rubric-criterion__definition {
    margin: .3rem 0 0;
    max-width: 74ch;
    color: #5c7189;
    font-size: .8rem;
    font-weight: 620;
    line-height: 1.55;
}

.rubric-criterion__meta { display: flex; flex-wrap: wrap; gap: .35rem; }

.rubric-criterion__empty {
    margin: 0;
    border: 1px dashed #f0cfa0;
    border-radius: 14px;
    background: #fdf6e8;
    padding: .8rem 1rem;
    color: #96650d;
    font-size: .8rem;
    font-weight: 700;
}

.rubric-anchor {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: start;
    gap: .9rem;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 16px;
    background: #fff;
    padding: .85rem .95rem;
}

.rubric-anchor + .rubric-anchor { margin-top: -.1rem; }

.rubric-anchor__scale {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: #eef7fd;
    color: #1676a0;
    font-size: 1rem;
    font-weight: 700;
}

.rubric-anchor__label { margin: 0; font-size: .86rem; font-weight: 700; color: var(--workspace-ink, #122033); }

.rubric-anchor__statement {
    margin: .3rem 0 0;
    max-width: 84ch;
    color: #45596e;
    font-size: .82rem;
    font-weight: 620;
    line-height: 1.6;
}

.rubric-anchor__indicators-title {
    margin: .6rem 0 .25rem;
    color: #7c8ea1;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.rubric-anchor__indicators {
    margin: 0;
    padding-left: 1.05rem;
    display: grid;
    gap: .28rem;
    color: #45596e;
    font-size: .8rem;
    font-weight: 620;
    line-height: 1.5;
}

.rubric-anchor__evidence {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 4.6rem;
    border: 1px solid #dbeadf;
    border-radius: 12px;
    background: #f1faf3;
    padding: .45rem .5rem;
    color: #1c7a43;
    text-align: center;
}

.rubric-anchor__evidence b { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.rubric-anchor__evidence span { font-size: .66rem; font-weight: 700; letter-spacing: .04em; }

@media (max-width: 720px) {
    .rubric-anchor { grid-template-columns: 2.6rem minmax(0, 1fr); }
    .rubric-anchor__evidence { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------------
 * Inventory dimension composition
 *
 * An inventory's score comes from how its items divide across dimensions, so the
 * division is the primary object on the screen — item counts and achievable
 * ranges side by side, where an imbalance is visible rather than inferred.
 * ------------------------------------------------------------------------ */

.ps-dimensions { display: grid; gap: .9rem; }

.ps-dimensions__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.ps-dimensions__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--workspace-ink, #122033); }

.ps-dimensions__lead {
    margin: .3rem 0 0;
    max-width: 76ch;
    color: #5c7189;
    font-size: .81rem;
    font-weight: 620;
    line-height: 1.55;
}

.ps-dimensions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .6rem;
}

.ps-dimension {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    border: 1px solid var(--workspace-line, #dbe7f0);
    border-radius: 14px;
    background: #fff;
    padding: .7rem .8rem;
}

.ps-dimension__code {
    display: grid;
    place-items: center;
    min-width: 3.4rem;
    border-radius: 10px;
    background: #eef7fd;
    padding: .3rem .45rem;
    color: #1676a0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    font-weight: 700;
}

.ps-dimension__name { margin: 0; font-size: .85rem; font-weight: 700; color: var(--workspace-ink, #122033); }
.ps-dimension__meta { margin: .18rem 0 0; color: #5c7189; font-size: .74rem; font-weight: 700; }

.ps-dimensions__conversion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: .6rem;
    margin: 0;
    padding-top: .7rem;
    border-top: 1px solid var(--workspace-line, #dbe7f0);
}

.ps-dimensions__conversion dt {
    margin: 0 0 .2rem;
    color: #7c8ea1;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.ps-dimensions__conversion dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    color: var(--workspace-ink, #122033);
    font-size: .82rem;
    font-weight: 700;
}

.ps-dimensions__empty,
.ps-dimensions__issue {
    margin: 0;
    border: 1px solid #f0cfa0;
    border-radius: 12px;
    background: #fdf6e8;
    padding: .6rem .8rem;
    color: #96650d;
    font-size: .79rem;
    font-weight: 700;
    line-height: 1.5;
}


/* Package governance panels: subtest composition, sibling forms, publication readiness.
   These sit alongside the dimension panel and share its card rhythm. */
.ps-policy__head,
.ps-applicability__head,
.ps-validation__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.ps-policy__title,
.ps-applicability__title,
.ps-validation__title { font-size: .95rem; font-weight: 600; margin: 0; }
.ps-policy__lead,
.ps-applicability__lead,
.ps-validation__lead { font-size: .8rem; color: var(--ui-muted, #64748b); margin: .25rem 0 0; max-width: 62ch; }
.ps-policy__table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ps-policy__table th { text-align: left; font-weight: 600; color: var(--ui-muted, #64748b); padding: .4rem .5rem; border-bottom: 1px solid var(--ui-border, #e2e8f0); }
.ps-policy__table td { padding: .45rem .5rem; border-bottom: 1px solid var(--ui-border-soft, #f1f5f9); vertical-align: top; }
.ps-policy__note { font-size: .8rem; color: var(--ui-muted, #64748b); margin: .75rem 0 0; }
.ps-applicability__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ps-applicability__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border: 1px solid var(--ui-border, #e2e8f0); border-radius: .5rem; font-size: .82rem; }
.ps-applicability__list li.is-current { border-color: var(--ui-accent, #2563eb); background: var(--ui-accent-soft, #eff6ff); }
.ps-validation__issue { font-size: .82rem; margin: .35rem 0 0; padding-left: .75rem; border-left: 3px solid var(--ui-border, #e2e8f0); color: var(--ui-muted, #64748b); }
.ps-validation__issue.is-blocking { border-left-color: #dc2626; color: inherit; }

/* The domain rule on the master-data overview: definition list, one term per row. */
.ui-domain-rule h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .6rem; }
.ui-domain-rule__list { margin: 0; display: grid; gap: .35rem; }
.ui-domain-rule__list > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .75rem; font-size: .82rem; }
.ui-domain-rule__list dt { font-weight: 600; }
.ui-domain-rule__list dd { margin: 0; color: var(--ui-muted, #64748b); }
@media (max-width: 640px) { .ui-domain-rule__list > div { grid-template-columns: 1fr; gap: .1rem; } }

/* A family chip that reaches its authoring tab reads as navigation; one that has no
   destination stays plainly inert rather than inviting a click that does nothing. */
.ps-family__tab.is-linked {
    color: var(--ui-accent, #2563eb);
    border-color: var(--ui-accent, #2563eb);
    text-decoration: none;
    cursor: pointer;
}
.ps-family__tab.is-linked:hover,
.ps-family__tab.is-linked:focus-visible {
    background: var(--ui-accent-soft, #eff6ff);
}
.ps-family__tab:not(.is-linked) {
    cursor: default;
    opacity: .72;
}