/* Shared record layouts must not depend on another page's isolated CSS. */
body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
:is(.record-summary-grid, .detail-grid, .details-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .9rem 1.5rem;
    margin-block: 1rem;
}
:is(.record-summary-grid, .detail-grid, .details-grid) > div {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: .4rem;
    padding-block: .65rem;
    border-block-end: 1px solid var(--line);
}
:is(.record-summary-grid, .detail-grid, .details-grid) > div > span {
    color: var(--muted);
    font-size:calc(.9rem * var(--content-body-scale, 1));
    line-height: 1.7;
}
:is(.record-summary-grid, .detail-grid, .details-grid) > div > :is(strong, small) {
    display: block;
    color: var(--text);
    line-height: 1.65;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}
.details-grid > .details-span { grid-column: 1 / -1; }
.detail-note { display: grid; gap: .4rem; margin-block: 1rem; min-width: 0; line-height: 1.7; }
.detail-note > span { color: var(--muted); font-size:calc(.85rem * var(--content-body-scale, 1)); }
.detail-note > strong { display: block; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.inventory-summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1rem 1.5rem;
    padding-block: 1rem;
    margin-block: .5rem;
    border-block: 1px solid var(--line);
}
.inventory-summary-strip > span { display: grid; align-content: start; gap: .4rem; min-width: 0; color: var(--muted); font-size:calc(.85rem * var(--content-body-scale, 1)); line-height: 1.7; }
.inventory-summary-strip > span > strong { display: block; color: var(--text); font-size:calc(1rem * var(--content-body-scale, 1)); line-height: 1.6; overflow-wrap: anywhere; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; padding-block: .6rem; border-block-end: 1px solid var(--line); }
.section-heading > div { min-width: 0; }
.section-heading h3 { margin: .25rem 0 0; font-size:calc(1.1rem * var(--content-heading-scale, 1)); line-height: 1.5; }
.pricing-tier-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.modal-panel.wide-modal { width: min(100%, 58rem); }
.modal-panel { line-height: 1.65; color: var(--text); }
.modal-panel > .panel-header { align-items: flex-start; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
.modal-panel .panel-header > div { min-width: 0; }
.modal-panel .panel-header h2 { margin: .35rem 0 0; font-size:calc(1.25rem * var(--content-heading-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.modal-panel .panel-header .eyebrow { display: block; line-height: 1.7; overflow-wrap: anywhere; }
.modal-panel .panel-header > .icon-button { flex: 0 0 auto; }
.modal-form .field-grid { align-items: start; gap: 1rem 1.2rem; }
.modal-form label { min-width: 0; line-height: 1.65; }
.modal-form label > span { line-height: 1.65; overflow-wrap: anywhere; }
.purchase-receipt-form > .purchase-spending-field { grid-column: 1 / -1; }
.purchase-receipt-form > .purchase-spending-field textarea { min-height: 7.5rem; }
.purchase-receipt-form :is(.receipt-attachment-field, .proc-receipt-attachment) input[type="file"] { width: 100%; padding: .35rem; border: 1px dashed var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%); }
.purchase-receipt-form :is(.receipt-attachment-field, .proc-receipt-attachment) input[type="file"]::file-selector-button { margin-inline-end: .7rem; padding: .4rem .7rem; border: 1px solid var(--primary); border-radius: 4px; background: var(--surface); color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.purchase-receipt-form :is(.receipt-notes-field, .proc-receipt-notes) textarea { min-height: 3.5rem; resize: vertical; }
.field-grid > div:has(> span + strong) { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.field-grid > div:has(> span + strong) > span { color: var(--muted); font-size:calc(.85rem * var(--content-body-scale, 1)); line-height: 1.7; }
.field-grid > div:has(> span + strong) > strong { display: block; color: var(--text); line-height: 1.65; overflow-wrap: anywhere; unicode-bidi: plaintext; }
:is(.modal-form, .inline-form) :is(.field-hint, label > small) { font-size:calc(.8rem * var(--content-body-scale, 1)); font-weight: 400; line-height: 1.8; overflow-wrap: anywhere; }
.modal-form :is(input, select, textarea) { max-width: 100%; min-width: 0; font-size:calc(.95rem * var(--content-body-scale, 1)); line-height: 1.6; }
.modal-panel .modal-actions { flex-wrap: wrap; gap: .75rem; padding-block-start: 1rem; }
.modal-panel .modal-actions button { min-height: 2.75rem; height: auto; white-space: normal; line-height: 1.6; }
:is(.form-message, .field-hint) { line-height: 1.75; overflow-wrap: anywhere; }
.data-table :is(td, th) { line-height: 1.65; }
.data-table td > :is(strong, small) { display: block; }
.data-table td > small { margin-block-start: .3rem; line-height: 1.7; }
@media (max-width: 600px) {
    :is(.record-summary-grid, .detail-grid, .details-grid) { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .inventory-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-form .field-grid { grid-template-columns: minmax(0, 1fr); }
    .modal-panel .modal-actions > button { flex: 1 1 12rem; }
}
@media (max-width: 360px) { .inventory-summary-strip { grid-template-columns: minmax(0, 1fr); } }
@media (min-width:981px) and (max-width:1700px) {
    .app-header { flex-wrap:wrap; }
}