/* Experimental typography branch: modern sans-serif UI/content.
   The Perforated World masthead/brand title intentionally remains heritage serif. */
:root {
    --archive-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --archive-font-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Deliberately broad for this experiment: legacy component rules use explicit
   Georgia/Arial declarations and font shorthands, so inheritance alone is not enough. */
html body, html body *, html body *::before, html body *::after {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* The one typography exception requested for this branch: site/admin brand title. */
html body .perforated-brand-copy strong,
html body .classic-brand strong {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Admin Help Articles follows the same form language as the rest of Admin. */
.admin-page .help-admin-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 18px;
    margin: 14px 0 24px;
}
.admin-page .help-admin-form label { display:grid; gap:6px; margin:0; font-weight:600; }
.admin-page .help-admin-form .help-admin-wide { grid-column:1 / -1; }
.admin-page .help-admin-form textarea { min-height:150px; resize:vertical; }
.admin-page .help-admin-form .admin-inline-check { display:flex; align-items:center; gap:8px; align-self:end; }
.admin-page .help-admin-form-actions { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
.admin-page .help-admin-item { border-top:1px solid var(--heritage-line, #d8cbb3); padding:8px 0; }
.admin-page .help-admin-item summary { cursor:pointer; padding:11px 4px; color:var(--heritage-dark, #19392e); }
.admin-page .help-admin-item[open] summary { border-bottom:1px solid #e5dcc9; margin-bottom:14px; }
@media (max-width:700px) { .admin-page .help-admin-form { grid-template-columns:1fr; } .admin-page .help-admin-form .help-admin-wide, .admin-page .help-admin-form-actions { grid-column:1; } }

/* Refined branch overrides: legacy admin rules use high-specificity `font:` shorthands.
   Target the affected admin components explicitly so the Inter experiment is visible. */
html body.admin-page :is(#collection-table, #stamp-club-table),
html body.admin-page :is(#collection-table, #stamp-club-table) :is(th, td, button, input, select, textarea, label, span, small),
html body.admin-page #collection-type-table,
html body.admin-page #collection-type-table :is(th, td, button, input, select, textarea, label, span, small),
html body.admin-page #product-table,
html body.admin-page #product-table :is(th, td, button, input, select, textarea, label, span, small) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Collection Type and Product add/edit forms. */
html body.admin-page #add-collection-type,
html body.admin-page #add-collection-type :is(form, label, input, select, textarea, option, button, small, h3),
html body.admin-page .type-inline-editor,
html body.admin-page .type-inline-editor :is(form, label, input, select, textarea, option, button, small, h3),
html body.admin-page #add-product,
html body.admin-page #add-product :is(form, label, input, select, textarea, option, button, small, h3),
html body.admin-page #edit-product,
html body.admin-page #edit-product :is(form, label, input, select, textarea, option, button, small, h3),
html body.admin-page .product-inline-edit-row,
html body.admin-page .product-inline-edit-row :is(form, label, input, select, textarea, option, button, small, h3) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Explicitly override legacy font shorthands on compact form controls/buttons. */
html body.admin-page .admin-compact-form form :is(input:not([type="hidden"]), select, textarea, button),
html body.admin-page #product-table .product-inline-edit-row .classic-edit-panel form :is(input:not([type="hidden"]), select, textarea, button),
html body.admin-page :is(#collection-type-table, #product-table, :is(#collection-table, #stamp-club-table)) button {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Header navigation is UI typography; only the Perforated World title remains serif. */
html body .perforated-header :is(nav, a, button, span, small),
html body .site-header :is(nav, a, button, span, small),
html body .classic-nav :is(a, button, span) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html body .perforated-brand-copy strong,
html body .classic-brand strong {
    font-family: Georgia, "Times New Roman", serif !important;
}


/* Branch v4: direct admin typography fix. Legacy font shorthands were converted
   to the branch sans-serif stack; these selectors are a final safeguard. */
html body.admin-page :is(:is(#collection-table, #stamp-club-table), #collection-type-table, #product-table),
html body.admin-page :is(:is(#collection-table, #stamp-club-table), #collection-type-table, #product-table) *,
html body.admin-page :is(#add-collection, #add-collection-type, #add-product, #product-edit-panel),
html body.admin-page :is(#add-collection, #add-collection-type, #add-product, #product-edit-panel) *,
html body.admin-page :is(.collection-inline-edit-row, .type-inline-editor, .product-inline-edit-row),
html body.admin-page :is(.collection-inline-edit-row, .type-inline-editor, .product-inline-edit-row) * {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Preserve only the Perforated World masthead/brand title in serif. */
html body .perforated-brand-copy strong,
html body .classic-brand strong,
html body .account-masthead .perforated-brand-copy strong {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Experimental branch: uniform typography for the three primary Admin table headers.
   Keep every heading identical whether it is plain text or a sortable button/link. */
html body.admin-page :is(:is(#collection-table, #stamp-club-table), #product-table, #collection-type-table) thead th,
html body.admin-page :is(:is(#collection-table, #stamp-club-table), #product-table, #collection-type-table) thead th :is(button, a, span) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body.admin-page :is(:is(#collection-table, #stamp-club-table), #product-table, #collection-type-table) thead th :is(button, a) {
    color: inherit !important;
}

/* Help Articles: match the control sizing used by the other Admin forms. */
html body.admin-page .help-admin-form :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 8px 11px;
    font: 15px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    border: 1px solid var(--archive-line);
    border-radius: 6px;
    background: #fffdf7;
    box-shadow: none;
}
html body.admin-page .help-admin-form textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 9px 11px;
    resize: vertical;
    font: 15px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    border: 1px solid var(--archive-line);
    border-radius: 6px;
    background: #fffdf7;
    box-shadow: none;
}
html body.admin-page .help-admin-form label {
    gap: 4px;
    font-size: 14px;
    line-height: 1.35;
}

/* Official UI refinements: compact add actions and edit-form delete placement. */
html body.admin-page :is(#toggle-add-collection, #toggle-add-product) {
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 11px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: 5px !important;
}
html body.admin-page :is(.collection-edit-actions, .type-inline-editor .admin-compact-actions) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
html body.admin-page :is(.collection-edit-actions, .type-inline-editor .admin-compact-actions) .edit-form-delete {
    margin-left: auto !important;
}
html body.admin-page .help-admin-item {
    padding: 3px 0 !important;
}
html body.admin-page .help-admin-item summary {
    padding: 7px 4px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
html body.admin-page .help-admin-item summary strong {
    font-size: 13px !important;
    font-weight: 600 !important;
}
html body.admin-page .help-admin-item[open] summary {
    margin-bottom: 9px !important;
}
html body.admin-page .help-admin-item .help-admin-form {
    gap: 8px 12px !important;
}
html body.admin-page .help-admin-item .help-admin-form textarea {
    min-height: 105px !important;
}

/* Header account dropdown icons. */
.account-profile-menu :is(a, button) .account-menu-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.account-profile-menu :is(a, button) {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Keep product edit deletion consistent with My Collections: destructive action at far right. */
html body.admin-page .product-edit-actions .edit-form-delete {
    margin-left: auto !important;
}


/* Destructive edit actions: consistent red treatment for Collections and Products. */
html body.admin-page :is(.collection-edit-actions, .product-edit-actions) .edit-form-delete {
    background: #b83e42 !important;
    border-color: #b83e42 !important;
    color: #fff !important;
}
html body.admin-page :is(.collection-edit-actions, .product-edit-actions) .edit-form-delete:hover {
    background: #992f34 !important;
    border-color: #992f34 !important;
    color: #fff !important;
}
html body.admin-page :is(.collection-edit-actions, .product-edit-actions) .edit-form-delete:focus-visible {
    outline: 3px solid rgba(184, 62, 66, .25) !important;
    outline-offset: 2px !important;
}

/* Help Articles: match the compact controls and edit actions used by the main Admin forms. */
html body.admin-page .help-admin-add-button,
html body.admin-page .help-admin-edit-actions > .classic-primary {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 11px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: 5px !important;
}
html body.admin-page .help-admin-form .admin-inline-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-self: end !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 0 1px !important;
    gap: 8px !important;
}
html body.admin-page .help-admin-form .admin-inline-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
}
html body.admin-page .help-admin-form .admin-inline-check span {
    line-height: 1.2 !important;
}
html body.admin-page .help-admin-edit-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
}
html body.admin-page .help-admin-edit-actions > form {
    margin: 0 0 0 auto !important;
}
html body.admin-page .help-admin-edit-actions .edit-form-delete {
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 11px !important;
    border: 1px solid #b83e42 !important;
    border-radius: 5px !important;
    background: #b83e42 !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
html body.admin-page .help-admin-edit-actions .edit-form-delete:hover {
    border-color: #992f34 !important;
    background: #992f34 !important;
}

/* Help Articles: keep destructive action isolated at the far-right of the edit footer. */
html body.admin-page .help-admin-edit-actions {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
}
html body.admin-page .help-admin-edit-actions > form {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
}

/* Help Articles edit footer: Save + Cancel on the left, Delete isolated on the far right. */
html body.admin-page .help-admin-edit-actions {
    grid-template-columns: auto auto 1fr auto !important;
}
html body.admin-page .help-admin-edit-actions > .classic-primary {
    grid-column: 1 !important;
}
html body.admin-page .help-admin-edit-actions > .help-admin-cancel-edit {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: 5px !important;
}
html body.admin-page .help-admin-edit-actions > form {
    grid-column: 4 !important;
}

/* Help Articles: give action rows breathing room before the following article/title. */
html body.admin-page .help-admin-form-actions,
html body.admin-page .help-admin-edit-actions {
    margin-bottom: 16px !important;
}