/* Shared page-level layout used by every CPStudioBasePage child.

   The width is the skeleton's (docs/ux-shape.md entry 18): CPStudioBasePage's Layout picks the
   modifier, the tokens live in app.css, and the column is centred. The padding and header gap come
   from the density tokens (app.css's Density block). Below the 641px size class a phone keeps the
   compact gutter whatever the density preference says.

   No overflow clipping here (entry 9): a page wider than its column scrolls in its own table or
   chart container, never silently clipped at page level. */

.page-container {
    max-width: var(--cpd-content-max);
    margin-inline: auto;
    padding: var(--cpd-page-pad);
    min-width: 0;
}

.page-container--feed {
    max-width: var(--cpd-content-max-feed);
}

@media (max-width: 640.98px) {
    .page-container {
        padding: var(--cpd-space-lg);
    }
}

.page-header {
    margin-bottom: var(--cpd-page-header-mb);
    text-align: center;
}

.page-title {
    color: var(--cpd-text);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--cpd-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cpd-space-sm);
}

.page-title i {
    color: var(--cpd-gold);
}

.page-subtitle {
    color: var(--cpd-text-muted);
    font-size: 1.1rem;
    opacity: 0.8;
}

.summary-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--cpd-space-lg);
    max-width: 100%;
    margin: 0;
}

.summary-card {
    background: var(--cpd-surface-1);
    border: 1px solid var(--cpd-border);
    border-radius: var(--cpd-radius-lg);
    padding: var(--cpd-space-lg);
    margin-bottom: 0;
    height: fit-content;
}

.summary-title {
    color: var(--cpd-gold);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--cpd-space-lg);
    display: flex;
    align-items: center;
    gap: var(--cpd-space-sm);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--cpd-space-sm) 0;
    border-bottom: 1px solid var(--cpd-border-subtle);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    color: var(--cpd-text-muted);
}

.summary-value {
    color: var(--cpd-text);
    font-weight: 500;
}

.form-actions {
    text-align: right;
}

/* Primary action button — aligned with the brand gold (matches .btn-gold). */
.btn-primary {
    background-color: var(--cpd-gold);
    color: var(--cpd-dark);
    border: 1px solid var(--cpd-gold);
    padding: 0.5rem 1.2rem;
    border-radius: var(--cpd-radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--cpd-transition-fast), color var(--cpd-transition-fast);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--cpd-dark);
    color: var(--cpd-gold);
}

.btn-secondary {
    background-color: var(--cpd-surface-3);
    color: var(--cpd-text);
    border: 1px solid var(--cpd-border-strong);
    padding: 0.5rem 1.2rem;
    border-radius: var(--cpd-radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--cpd-transition-fast);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--cpd-surface-hover);
}

/* Disabled with its reason in the tooltip (docs/ux-shape.md §8); without this a disabled primary
   looked exactly like an enabled one. */
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: var(--cpd-disabled-opacity);
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--cpd-radius-md);
}

/* The conventions page (Conventions.razor). The rule column carries short annotations beside a
   rule's id — what it does for the named instrument, an alternatives count, a conflict — each an
   aside, quieter than the id. Both tables are the app's one DataTable, so nothing here styles a grid. */
.conventions-row-status,
.conventions-alternatives,
.conventions-row-ambiguous {
    margin-left: var(--cpd-space-sm);
    color: var(--cpd-text-muted);
    white-space: nowrap;
}

.conventions-row-ambiguous {
    color: var(--cpd-warning);
}

/* A rule that does not apply to the named instrument. Named through MudBlazor's own classes: a
   weaker selector loses to `.mud-table-root .mud-table-body .mud-table-cell` and the row silently
   keeps full colour. */
.mud-table-root .mud-table-body tr.conventions-row-inapplicable .mud-table-cell {
    color: var(--cpd-text-muted);
}

/* A cell whose constraint was abbreviated to fit: the whole matcher is on its title, so say that
   it is hoverable rather than leaving the reader to discover it. */
.conventions-cell-abbreviated {
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* The instrument the page resolves, its view switcher, and the page's one primary action on the
   right — one row, wrapping the button under the instrument only when the instrument is shown in
   full. */
.conventions-instrument {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--cpd-space-md);
    margin-bottom: var(--cpd-space-lg);
}

.conventions-instrument-input {
    flex: 1 1 auto;
    min-width: 0;
}

.conventions-new-rule {
    margin-left: auto;
}

/* A resolved field's value, in CPDelta's own spelling and the trade form's repr colours; long
   date rules wrap rather than widen the table. */
.conventions-value {
    font-family: var(--cpd-font-mono);
    white-space: normal;
}

/* An optional field nothing set, and its "no rule": said in words, quieter than a value. */
.conventions-unset {
    color: var(--cpd-text-muted);
}

/* A Set By rule: a link, and it has to look like one — the app's reset makes every `a` inherit
   its text colour. The same treatment as the start page's task links. */
.conventions-rule-link {
    color: var(--cpd-gold);
    font-weight: 500;
}

.conventions-rule-link:hover,
.conventions-rule-link:focus-visible {
    text-decoration: underline;
}

.conventions-section {
    margin-bottom: var(--cpd-space-lg);
}

/* The rule editor's chip rows: a read-only matcher, and the layers under the open rule. */
.convention-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpd-space-xs) var(--cpd-space-sm);
}