/* PIF — Price Index Factor. One stylesheet for every page, loaded after Bootstrap 5.3 and
   site-chrome.css. Brand tokens are ClaudeLight's (sage/paper/gold, DM Sans, DM Serif
   Display); Bootstrap is themed through its own CSS variables so its components come out
   on-brand without !important overrides on every page. */

:root {
    --ink: #0f1a14; --ink-muted: #4a5a52;
    --ink-faint: #5f6e65;          /* was #8a9a90 (2.96:1); now >= 4.5:1 on white and paper */
    --paper: #f7f5f0; --white: #ffffff;
    --sage: #2d5a3d; --sage-dark: #22452f; --sage-light: #e8f0ea; --sage-mid: #4a7c5c;
    --gold: #c8a84b; --gold-light: #fbf4e0; --gold-ink: #6b4e00;
    --rule: #d8d4cc; --rule-soft: #ebe8e1;
    --danger: #b3261e; --danger-light: #fdecea;
    --brand-navy: #051638; --brand-gold: #a97526;
    --radius: 6px; --radius-lg: 12px;
    --shadow: 0 2px 12px rgba(15, 26, 20, 0.06);
    --focus: 0 0 0 3px rgba(45, 90, 61, 0.28);

    --bs-primary: #2d5a3d; --bs-primary-rgb: 45, 90, 61;
    --bs-success: #2d5a3d; --bs-success-rgb: 45, 90, 61;
    --bs-link-color: #2d5a3d; --bs-link-color-rgb: 45, 90, 61;
    --bs-link-hover-color: #0f1a14; --bs-link-hover-color-rgb: 15, 26, 20;
    --bs-body-font-family: 'DM Sans', system-ui, sans-serif;
    --bs-body-color: #0f1a14;
    --bs-border-color: #d8d4cc;
    --bs-secondary-color: #5f6e65;
    --bs-focus-ring-color: rgba(45, 90, 61, 0.28);
}

body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--paper); color: var(--ink); }
::selection { background: var(--sage); color: var(--white); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.text-muted { color: var(--ink-faint) !important; }
a { color: var(--sage); }
a:hover { color: var(--ink); }

/* ─── BOOTSTRAP, ON BRAND ─── */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--radius); --bs-btn-focus-box-shadow: var(--focus); }
.btn-primary, .btn-success {
    --bs-btn-bg: var(--sage); --bs-btn-border-color: var(--sage); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sage-dark); --bs-btn-hover-border-color: var(--sage-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-bg: var(--sage); --bs-btn-disabled-border-color: var(--sage);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--sage); --bs-btn-border-color: var(--sage);
    --bs-btn-hover-bg: var(--sage); --bs-btn-hover-border-color: var(--sage); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sage-dark); --bs-btn-active-border-color: var(--sage-dark);
    --bs-btn-disabled-color: var(--sage); --bs-btn-disabled-border-color: var(--sage);
}
.btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--ink-muted); --bs-btn-bg: var(--white); --bs-btn-border-color: var(--rule);
    --bs-btn-hover-bg: var(--paper); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #c4bfb4;
    --bs-btn-active-bg: var(--rule-soft); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: #c4bfb4;
}
.btn-outline-dark {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: #e3b4b0;
    --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
}
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: #8f1e18; --bs-btn-hover-border-color: #8f1e18; }
.btn-link { --bs-btn-color: var(--sage); --bs-btn-hover-color: var(--ink); text-decoration: none; }
.btn .pif-icon { vertical-align: -3px; }
.badge.bg-primary, .badge.bg-success { background: var(--sage) !important; }
.badge.bg-info { background: var(--sage-light) !important; color: var(--sage) !important; }
.badge.bg-warning { background: var(--gold-light) !important; color: var(--gold-ink) !important; }
.form-label { font-size: 0.82rem; font-weight: 500; color: var(--ink-muted); margin-bottom: 0.3rem; }
.form-text { color: var(--ink-faint); font-size: 0.78rem; }
.form-control, .form-select { border-color: var(--rule); border-radius: var(--radius); }
.form-control:focus, .form-select:focus { border-color: var(--sage); box-shadow: var(--focus); }
.form-check-input:checked { background-color: var(--sage); border-color: var(--sage); }
.form-check-input:focus { border-color: var(--sage); box-shadow: var(--focus); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234a7c5c'/%3e%3c/svg%3e"); }
.alert-warning { background: var(--gold-light); border-color: #e8d49a; color: var(--gold-ink); }
.alert-danger { background: var(--danger-light); border-color: #f5c2bf; color: #7a1f1a; }
.card { border: none !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--sage); --bs-nav-link-color: var(--ink-muted); --bs-nav-link-hover-color: var(--sage); }
.list-group-item.active { background: var(--sage); border-color: var(--sage); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-faint); font-size: 0.85rem; }
.table { --bs-table-color: var(--ink); }
.table-light { --bs-table-bg: #f3f1ec; --bs-table-color: var(--ink-muted); }
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: 0 20px 60px rgba(15, 26, 20, 0.15); }
.modal-header { background: var(--sage); color: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-title { color: var(--white); }
.btn-close-white { filter: invert(1); }

/* ─── LAYOUT ─── */
main.app-main { padding: 1.75rem clamp(1.25rem, 5vw, 3rem) 3rem; max-width: 1240px; margin: 0 auto; }
.pif-page-head { margin-bottom: 1.25rem; }
.pif-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; }
.pif-page-head-text { min-width: 0; flex: 1 1 20rem; }
.pif-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--ink); margin: 0; }
.pif-subtitle { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: 0.92rem; max-width: 46rem; }
.pif-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pif-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0; padding: 0; margin: 0 0 0.45rem; font-size: 0.82rem; color: var(--ink-faint); }
.pif-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.pif-crumbs li + li::before { content: '›'; margin: 0 0.45rem; color: var(--ink-faint); }
.pif-crumbs a { color: var(--ink-muted); text-decoration: none; }
.pif-crumbs a:hover { color: var(--sage); text-decoration: underline; }
.pif-crumbs li[aria-current] { color: var(--ink); }
.pif-section-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.2rem; color: var(--ink); margin: 0 0 0.75rem; }
.pif-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

/* ─── CARDS ─── */
.s-card, .pif-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; }
.pif-card + .pif-card { margin-top: 1rem; }
.pif-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.pif-card-head .pif-section-title { margin: 0; }

/* ─── FLASH ─── */
.pif-flash { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; padding: 0.7rem 0.8rem 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1.1rem; line-height: 1.5; border: 1px solid; }
.pif-flash:focus { outline: none; box-shadow: var(--focus); }
.pif-flash-icon { margin-top: 1px; }
.pif-flash-msg { flex: 1 1 auto; min-width: 0; }
.pif-flash-close { border: 0; background: none; color: inherit; opacity: 0.7; padding: 0.15rem; line-height: 1; border-radius: 4px; }
.pif-flash-close:hover { opacity: 1; }
.pif-flash-success { background: var(--sage-light); color: #1e4029; border-color: #b6d4be; }
.pif-flash-danger  { background: var(--danger-light); color: #7a1f1a; border-color: #f5c2bf; }
.pif-flash-warning { background: var(--gold-light); color: var(--gold-ink); border-color: #e8d49a; }
.pif-flash-info    { background: #eef3f7; color: #1f3b52; border-color: #c9d8e4; }
/* Legacy class names still used by a few messages. */
.s-alert { font-size: 0.875rem; padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; line-height: 1.5; }
.s-alert-success { background: var(--sage-light); color: #1e4029; border: 1px solid #b6d4be; }
.s-alert-danger  { background: var(--danger-light); color: #7a1f1a; border: 1px solid #f5c2bf; }

/* ─── EMPTY STATE ─── */
.pif-empty { text-align: center; padding: 2.5rem 1.25rem; color: var(--ink-muted); }
.pif-empty-icon { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--sage-light); color: var(--sage); display: grid; place-items: center; }
.pif-empty-icon .pif-icon { width: 22px; height: 22px; }
.pif-empty-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--ink); margin: 0 0 0.35rem; }
.pif-empty-text { max-width: 30rem; margin: 0 auto; font-size: 0.9rem; }
.pif-empty-action { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ─── INLINE HELP ─── */
.pif-help { display: inline; }
.pif-help-btn { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: 0.3rem; padding: 0; border-radius: 50%;
    border: 1px solid var(--rule); background: var(--white); color: var(--ink-muted); font-size: 0.68rem; font-weight: 600; line-height: 1; vertical-align: 1px; cursor: pointer; }
.pif-help-btn:hover, .pif-help-btn[aria-expanded="true"] { background: var(--sage); border-color: var(--sage); color: #fff; }
.pif-help-pop { display: block; margin: 0.35rem 0 0.2rem; padding: 0.5rem 0.65rem; background: var(--paper); border-left: 3px solid var(--sage-mid);
    border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.8rem; font-weight: 400; color: var(--ink-muted); line-height: 1.5; text-transform: none; letter-spacing: 0; }
.pif-help-pop[hidden] { display: none; }

/* ─── TABLES ─── */
.s-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.s-table th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); text-align: left; }
.s-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule-soft); color: var(--ink-muted); vertical-align: middle; }
.s-table tbody tr:last-child td { border-bottom: none; }
.s-table tbody tr:hover td { background: #fbfaf7; }
.s-table .text-end { text-align: right; }

/* ─── BADGES ─── */
.s-badge, .pif-badge { display: inline-block; font-size: 0.72rem; font-weight: 500; padding: 0.18em 0.6em; border-radius: 20px; letter-spacing: 0.01em; white-space: nowrap; }
.s-badge-success, .pif-badge-success { background: var(--sage-light); color: var(--sage); }
.s-badge-danger,  .pif-badge-danger  { background: var(--danger-light); color: #8f1e18; }
.s-badge-warning, .pif-badge-warning { background: var(--gold-light); color: var(--gold-ink); }
.s-badge-secondary, .pif-badge-muted { background: #eceae4; color: var(--ink-muted); }
/* Row types, always with words: colour is only a second cue. */
.pif-type { display: inline-block; font-size: 0.68rem; font-weight: 500; padding: 0.05em 0.5em; border-radius: 20px; white-space: nowrap; }
.pif-type-actual { background: transparent; color: var(--ink-faint); padding-left: 0; padding-right: 0; }
.pif-type-provisional { background: #fff1c9; color: var(--gold-ink); }
.pif-type-extrapolated { background: #fde7cf; color: #7a3e00; }
.pif-type-interpolated { background: #dfeef3; color: #1f4e5f; }

/* ─── BUTTONS (legacy .s-*) ─── */
.s-btn { font-family: inherit; font-size: 0.875rem; font-weight: 500; padding: 0.45rem 1rem; border-radius: var(--radius); border: none; cursor: pointer; transition: background 0.2s; }
.s-btn-ghost { background: var(--white); color: var(--ink-muted); border: 1px solid var(--rule); }
.s-btn-ghost:hover { background: var(--paper); color: var(--ink); }
.s-btn-danger { background: var(--danger); color: var(--white); }
.s-btn-danger:hover { background: #8f1e18; }
.s-btn-primary { background: var(--sage); color: var(--white); }
.s-btn-primary:hover { background: var(--sage-dark); }
.s-btn-delete, .pif-icon-btn { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
    cursor: pointer; padding: 0.2rem 0.45rem; color: var(--ink-muted); transition: all 0.15s; }
.s-btn-delete:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.pif-icon-btn:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-light); }

/* ─── BUSY STATE ─── */
.is-busy { position: relative; pointer-events: none; opacity: 0.85; }
.pif-spinner { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.45em; vertical-align: -0.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pif-spin 0.7s linear infinite; }
@keyframes pif-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pif-spinner { animation-duration: 2s; } }

/* ─── DIALOG ─── */
.s-modal-overlay, .pif-dialog-overlay { display: none; position: fixed; inset: 0; z-index: 1080; background: rgba(15, 26, 20, 0.5); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 1.5rem; }
.s-modal-overlay.open, .pif-dialog-overlay.open { display: flex; }
.s-modal, .pif-dialog { background: var(--white); border-radius: var(--radius-lg); max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(15, 26, 20, 0.2); }
.s-modal-header, .pif-dialog-head { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.s-modal-header h6, .pif-dialog-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.15rem; color: var(--ink); margin: 0; }
.s-modal-close, .pif-dialog-close { background: none; border: none; cursor: pointer; color: var(--ink-faint); line-height: 1; padding: 0.35rem; margin: -0.35rem; border-radius: 4px; }
.s-modal-close:hover, .pif-dialog-close:hover { color: var(--ink); }
.s-modal-body, .pif-dialog-body { padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--ink-muted); line-height: 1.6; }
.pif-dialog-body p:last-child { margin-bottom: 0; }
.s-modal-footer, .pif-dialog-foot { padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--rule-soft); display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
body.pif-dialog-open { overflow: hidden; }

/* ─── COMMODITY PICKER (combobox) ─── */
.pif-picker { position: relative; }
.pif-picker-input { padding-left: 2.1rem; }
.pif-picker-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.form-control-sm.pif-picker-input { padding-left: 1.9rem; }
.form-control-sm ~ .pif-picker-icon, .pif-picker-sm .pif-picker-icon { left: 0.55rem; }
.pif-picker-list { position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px); max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(15, 26, 20, 0.14); padding: 0.25rem 0; }
.pif-picker-list[hidden] { display: none; }
.pif-picker-option { display: block; padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.86rem; line-height: 1.35; color: var(--ink); }
.pif-picker-option + .pif-picker-option { border-top: 1px solid var(--rule-soft); }
.pif-picker-option.is-active { background: var(--sage-light); }
.pif-picker-option[aria-disabled="true"] { cursor: default; color: var(--ink-faint); }
.pif-picker-option .po-name { font-weight: 500; }
.pif-picker-option .po-meta { display: block; font-size: 0.74rem; color: var(--ink-faint); margin-top: 1px; }
.pif-picker-option .po-meta code { font-size: 0.72rem; }
.pif-picker-option .po-added { float: right; margin-left: 0.5rem; font-size: 0.7rem; color: var(--sage); }
.pif-picker-status { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--ink-faint); }
.pif-picker-status.is-error { color: var(--danger); }
.pif-picker-foot { padding: 0.4rem 0.75rem; font-size: 0.74rem; color: var(--ink-faint); border-top: 1px solid var(--rule-soft); background: #fbfaf7; }

/* ─── CHIPS ─── */
.pif-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pif-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; font-size: 0.8rem; background: var(--sage-light); color: var(--ink);
    border: 1px solid #cfe0d4; border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.65rem; line-height: 1.3; }
.pif-chip-text { min-width: 0; overflow-wrap: anywhere; }
.pif-chip code { background: transparent; padding: 0; color: var(--sage); font-size: 0.72rem; }
.pif-chip-remove { flex: 0 0 auto; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); padding: 0; }
.pif-chip-remove:hover, .pif-chip-remove:focus-visible { background: #fff; color: var(--danger); }
.pif-chip-remove .pif-icon { width: 13px; height: 13px; }

/* ─── MISC ─── */
.path-crumb { font-size: 0.82rem; color: var(--ink-faint); }
code { background: var(--sage-light); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; color: var(--sage); }
code.code-chip { background: var(--sage-light); padding: 1px 6px; border-radius: 4px; font-size: 0.8em; color: var(--sage); white-space: nowrap; }
.pif-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.82rem; color: var(--ink-faint); }
.pif-meta > * { white-space: nowrap; }
.pif-kbd-hint { font-size: 0.74rem; color: var(--ink-faint); }
.pif-dash-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1.25rem; align-items: start; }
.pif-narrow-only { display: none; }

/* ─── PHONES ─── */
@media (max-width: 991px) { .pif-wide-only { display: none; } .pif-narrow-only { display: inline; } }
@media (max-width: 900px) { .pif-dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    main.app-main { padding: 1.1rem 0.9rem 2.5rem; }
    .s-card, .pif-card { padding: 1rem; }
    .s-btn-delete, .pif-icon-btn { min-width: 40px; min-height: 40px; }
    .pif-page-actions { width: 100%; }
    .pif-page-actions > .btn { flex: 1 1 auto; }
    .pif-head-actions { flex-wrap: wrap; }
    table.cl-stack .badge { white-space: normal; text-align: left; }
    .card-body.p-0 > .table-responsive > table.cl-stack { padding: 0.75rem; }
    .pif-picker-input { font-size: 16px; }
    .pif-dialog-overlay, .s-modal-overlay { align-items: flex-end; padding: 0; }
    .pif-dialog, .s-modal { max-width: 100%; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .pif-dialog-foot .btn, .s-modal-footer .s-btn { flex: 1 1 auto; min-height: 44px; }
    .pif-chip-remove { width: 1.9rem; height: 1.9rem; }
}

/* ─── DISCLOSURES ─── */
details.pif-options > summary, details.pif-links > summary, details.pif-how > summary, details.pif-disclosure > summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.6rem; cursor: pointer; list-style: none; }
details.pif-options > summary::-webkit-details-marker, details.pif-links > summary::-webkit-details-marker,
details.pif-how > summary::-webkit-details-marker, details.pif-disclosure > summary::-webkit-details-marker { display: none; }
details.pif-options > summary::after, details.pif-links > summary::after, details.pif-how > summary::after, details.pif-disclosure > summary::after {
    content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; flex: 0 0 auto; }
details[open].pif-options > summary::after, details[open].pif-links > summary::after, details[open].pif-how > summary::after, details[open].pif-disclosure > summary::after {
    transform: rotate(-135deg) translateY(-2px); }

/* ─── CALCULATOR: SET-UP ─── */
.pif-setup { padding: 1.25rem 1.25rem 1rem; }
.pif-step { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.pif-step + .pif-step { border-top: 1px solid var(--rule-soft); padding-top: 1.05rem; }
.pif-step-head { display: flex; align-items: center; gap: 0.55rem; width: 100%; float: none; margin: 0 0 0.65rem; padding: 0;
    font-family: 'DM Serif Display', serif; font-size: 1.12rem; line-height: 1.2; color: var(--ink); }
details.pif-step:not([open]) > .pif-step-head { margin-bottom: 0; }
.pif-step-num { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sage); color: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 0.76rem; font-weight: 600; display: grid; place-items: center; }
.pif-step-hint { font-size: 0.82rem; color: var(--ink-faint); margin: -0.35rem 0 0.75rem; }
.pif-options-summary { font-family: 'DM Sans', sans-serif; font-size: 0.74rem; color: var(--sage); margin-left: auto; }
.pif-options-summary:empty { display: none; }
.pif-option { margin: 0.7rem 0; }
.pif-option.is-disabled .form-check-label { color: var(--ink-faint); }
.pif-option-note { font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.1rem; }
.pif-suboptions { margin: -0.3rem 0 0.8rem 2.5em; padding: 0.6rem 0.75rem; background: var(--paper); border-radius: var(--radius); }
.pif-suboptions[hidden] { display: none; }
.pif-assess-note { margin-top: 0.65rem; font-size: 0.8rem; line-height: 1.45; padding: 0.45rem 0.65rem; border-radius: var(--radius); background: var(--sage-light); color: #1e4029; }
.pif-assess-note.is-warning { background: var(--gold-light); color: var(--gold-ink); }
.pif-assess-note[hidden] { display: none; }
.pif-selection { margin-top: 0.6rem; }
.pif-selection-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.pif-chips:empty { display: none; }
/* Many selected commodities scroll inside their own box instead of stretching the form. */
#selectedComms { max-height: 11.5rem; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start;
    padding: 0.35rem; margin: 0 -0.35rem; border-radius: var(--radius); scrollbar-width: thin; }
#selectedComms:has(.pif-chip:nth-child(5)) { background: #fbfaf7; box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pif-myindex { display: flex; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; }
.pif-myindex select { flex: 1 1 11rem; min-width: 0; }
@media (max-width: 640px) { .pif-myindex .btn, .pif-myindex select { min-height: 40px; } .pif-myindex .btn { flex: 1 1 auto; } }
.pif-calc-submit { margin-top: 0.35rem; }
.pif-calc-submit .btn-lg { font-size: 1rem; padding: 0.65rem 1rem; }
@media (max-width: 991px) {
    .pif-calc-submit { position: sticky; bottom: 0; z-index: 5; background: var(--white); margin: 0 -1rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 12px -8px rgba(15, 26, 20, 0.18); }
}

/* ─── CALCULATOR: RESULTS ─── */
.pif-results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
#results { scroll-margin-top: 80px; }
.pif-pane > .pif-card + .pif-card, .pif-pane > .pif-flash + .pif-card, .pif-pane > .pif-card + details.pif-card { margin-top: 1rem; }
.pif-how { margin-top: 1rem; }
.pif-how > summary { font-weight: 600; font-size: 0.92rem; }
.pif-how .pif-icon { color: var(--sage); }

/* Result panels (answer, chart, Series links, the glossary): <details> cards whose whole summary
   row is the tap target, folding to about 56px. Scoped to details.pif-result, so view.php's
   section.pif-chart-card is untouched. The table is never one of them. */
details.pif-result { padding: 0; }
details.pif-result > summary { padding: 0.7rem 1.5rem; min-height: 3.5rem; border-radius: var(--radius-lg); }
details.pif-result > summary:focus-visible { outline-offset: -2px; }
details.pif-result > .pif-result-body { padding: 0 1.5rem 1.25rem; }
/* Title, one-line summary, chevron. On phones the summary wraps under the title. */
details.pif-result > summary.pif-sum-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.75rem; }
.pif-sum-row > :first-child { grid-column: 1; grid-row: 1; }
.pif-sum-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
.pif-sum-row::after { grid-column: 3; grid-row: 1; }
.pif-sum { font-size: 0.84rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
/* The answer's summary is the result for anyone who leaves it folded: the period stays muted,
   the figures are ink and semibold. Each piece is unbreakable, so lines break before a "·". */
.pif-sum-u { white-space: nowrap; }
.pif-answer .pif-sum > .pif-sum-u { color: var(--ink); }
.pif-sum strong { font-weight: 600; color: var(--ink); }
details[open].pif-answer > summary .pif-sum { display: none; }   /* the open card says it in full */
@media (max-width: 640px) {
    details.pif-result > summary { padding: 0.65rem 1rem; min-height: 2.75rem; }
    details.pif-result > .pif-result-body { padding: 0 1rem 1rem; }
    details.pif-result > summary.pif-sum-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pif-sum-row > :nth-child(2) { grid-column: 1; grid-row: 2; }
    .pif-sum-row::after { grid-column: 2; grid-row: 1 / span 2; }
    /* Finger-sized controls in the results: 40px and up. */
    #results .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
    .pif-answer .form-control, .pif-answer .form-select { min-height: 44px; }
    .pif-pane-head .pif-meta a, .pif-how .pif-result-body > a { display: inline-block; padding: 0.65rem 0; margin: -0.65rem 0; }
}
/* The "?" buttons keep their size but get a finger-sized hit area (about 42 × 40). */
#results .pif-help-btn { position: relative; }
#results .pif-help-btn::after { content: ""; position: absolute; inset: -12px -12px -10px; }

/* Per-commodity tabs. flex-wrap:nowrap is load-bearing: Bootstrap's .nav wraps by default and
   overflow-x does nothing while items wrap. */
.comm-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.comm-tabs .nav-item { flex: 0 0 auto; }
.comm-tabs .nav-link { display: block; max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.84rem; padding: 0.45rem 0.8rem;
    color: var(--ink-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
.comm-tabs .nav-link:hover { color: var(--sage); background: var(--sage-light); }
.comm-tabs .nav-link.active { color: var(--sage); font-weight: 500; background: var(--white); border-color: var(--rule) var(--rule) var(--white); }
.comm-tabs .tab-code { color: var(--ink-faint); font-size: 0.7rem; margin-left: 0.4rem; }

.pif-pane-head { margin: 0.9rem 0 0.8rem; }
/* An organisation's alias line ("official: <long name> (code)") wraps: .pif-meta keeps its
   items on one line, which made a member's results page 430px wide on a 360px phone. */
.pif-pane-head .pif-meta > span:first-child { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.pif-pane-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; line-height: 1.2; margin: 0 0 0.25rem; color: var(--ink); overflow-wrap: anywhere; }
.pif-card-title { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--ink); }

.pif-answer { border-top: 4px solid var(--sage); }
.pif-answer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.pif-answer-period { font-family: 'DM Serif Display', serif; font-size: 1.65rem; line-height: 1.1; color: var(--ink); }
.pif-answer-idx { font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.25rem; }
.pif-answer-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }
.pif-kpi { background: var(--paper); border-radius: var(--radius); padding: 0.65rem 0.9rem; min-width: 0; }
.pif-kpi[hidden] { display: none; }
.pif-kpi-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.pif-kpi-value { font-family: 'DM Serif Display', serif; font-size: 1.8rem; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pif-kpi-amount { background: var(--sage-light); }
.pif-answer-sentence { margin: 0.85rem 0 0.6rem; color: var(--ink-muted); font-size: 0.92rem; }
.pif-answer-actions { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; }
@media (max-width: 767px) {
    .pif-answer-grid { grid-template-columns: 1fr; }
    .pif-kpi-value { font-size: 1.5rem; }
    .pif-answer .form-control, .pif-answer .form-select { font-size: 16px; }
}

/* The calculator's chart. One colour source: the canvas reads these tokens and the legend
   swatches paint with them, so the two cannot drift apart. "From" stays the blue of the
   table's tr.is-base. view.php's chart keeps its own colours and has no legend. */
:root { --chart-line: #2d5a3d; --chart-est: #b7791f; --chart-from: #1f6f8b; --chart-to: #0f1a14; }
.pif-chart-card[hidden] { display: none; }
.pif-chart-box { position: relative; height: 250px; }
@media (max-width: 640px) { .pif-chart-box { height: 200px; } }
.pif-chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-muted); }
.pif-chart-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pif-chart-legend strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pif-lg { flex: 0 0 auto; width: 28px; height: 22px; overflow: visible; }
.pif-lg-line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linecap: round; }
.pif-lg-est { stroke: var(--chart-est); stroke-dasharray: 6 4; stroke-linecap: butt; }
.pif-lg-prov { fill: #fff; stroke: var(--chart-line); stroke-width: 1.5; }
.pif-lg-rule-from { fill: none; stroke: var(--chart-from); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pif-chart-legend > span[hidden] { display: none; }
.pif-lg-from { fill: var(--chart-from); stroke: #fff; stroke-width: 2.5; }
.pif-lg-to { fill: var(--chart-to); stroke: #fff; stroke-width: 2.5; }

.table-compact { font-size: 0.8rem; }
.table-compact th, .table-compact td { padding: 0.32rem 0.55rem !important; line-height: 1.3; }
.pif-results-table thead th { font-weight: 600; font-size: 0.74rem; white-space: nowrap; }
.pif-results-table tbody tr { cursor: pointer; }
.pif-results-table tbody tr > * { background: #fff; font-variant-numeric: tabular-nums; }
.pif-results-table tbody tr:hover > * { background: #f6f5f0; }
.pif-results-table tr.row-provisional > * { background: #fffaf0; }
.pif-results-table tr.row-extrapolated > *, .pif-results-table tr.row-interpolated > * { background: #fbf8f2; font-style: italic; }
.pif-results-table tr.is-assess > * { background: var(--sage-light); font-weight: 600; }
.pif-results-table tr.is-base > * { background: #e2eef4; }
.pif-results-table tr.is-base > :first-child { box-shadow: inset 3px 0 0 #1f6f8b; }
.pif-results-table tr.is-assess > :first-child { box-shadow: inset 3px 0 0 var(--sage); }
.pif-results-table .col-comp { font-weight: 500; }
.calc-results-scroll { max-height: 70vh; overflow-y: auto; border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.calc-results-scroll .table { margin: 0; }
.calc-results-scroll.is-collapsed tr.is-extra { display: none; }
.pif-table-notes { margin-top: 0.75rem; }
.pif-table-notes p { margin: 0 0 0.35rem; }
.pif-scroll-hint { display: none; margin-top: 0.4rem; }
@media (max-width: 640px) {
    /* The table scrolls in its own box on phones (both ways), with the header and Period column pinned. */
    .calc-results-scroll { max-height: 62vh; max-height: 62dvh; overflow: auto; -webkit-overflow-scrolling: touch;
        box-shadow: inset 0 -12px 10px -12px rgba(15, 26, 20, 0.25); }
    .pif-scroll-hint { display: block; }
    .calc-results-scroll thead th { position: sticky; top: 0; z-index: 2; background: #f3f1ec; }
    .calc-results-scroll thead th.cl-pin { z-index: 3; }
    .comm-tabs .nav-link { max-width: 12rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* Series links (advanced). Its summary padding comes from details.pif-result. */
.pif-links-title { font-weight: 600; font-size: 0.92rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.35rem; }
.pif-links-title .pif-icon { color: var(--sage); }
.pif-links-status { font-size: 0.82rem; color: var(--ink-faint); }
.link-row { padding: 0.65rem 0; border-top: 1px solid var(--rule-soft); }
.link-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: 0.86rem; }
.link-base { font-weight: 600; min-width: 4.5rem; color: var(--ink-muted); }
.lp-current { color: var(--ink); overflow-wrap: anywhere; }
.lp-none-txt { color: var(--ink-faint); font-style: italic; }
.link-row-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
.lp-search-wrap { flex: 1 1 14rem; min-width: 0; }
.lp-suggest { flex: 1 1 100%; }
.link-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding-top: 0.7rem; border-top: 1px solid var(--rule-soft); }
.lp-dirty { color: var(--gold-ink); }
.lp-dirty[hidden] { display: none; }
/* A member's panel has no buttons, so one muted line under the rows says who sets the links. */
.lp-locked-note { margin: 0; font-size: 0.8rem; color: var(--ink-faint); }
@media (max-width: 640px) {
    .link-row-tools .btn { min-height: 40px; }
    .lp-search { font-size: 16px; min-height: 40px; }
}
/* Compact while open (.lp-compact, added by the page script; without it everything shows): one
   line per base year, "2011-12 · name (code)" then Change / Unlink / Automatic, and below it
   only what is in use, a pending suggestion's list or a search opened by Change. The tools box
   is display:contents, so its buttons and fields line up in the row itself. The intro becomes
   a .pif-help-pop, and its "?" (.lp-help-slot, in the body) is placed after the title by the
   script: it stays out of <summary> deliberately. */
details.pif-links.lp-compact { position: relative; }
/* Room for the "?", and never stretched across the grid column, so the "?" follows its text. */
details[open].lp-compact .pif-links-title { margin-right: 1.95rem; justify-self: start; }
.lp-help-slot { position: absolute; transform: translateY(-50%); line-height: 1; }
.lp-help-slot[hidden], .lp-search-wrap[hidden] { display: none; }
/* 0.8rem off the title, so the 12px the "?"'s hit area reaches to its left (#results
   .pif-help-btn::after) ends before the last letter: a tap on the end of "Series links" folds
   the panel instead of opening the help. The title's margin-right above is this plus the "?". */
.lp-help-slot .pif-help-btn { vertical-align: middle; margin-left: 0.8rem; }
.lp-compact .lp-intro { margin: 0 0 0.5rem; }
.lp-compact .link-row { padding: 0.4rem 0; font-size: 0.86rem; }
.lp-compact .link-row.lp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.4rem; }
.lp-compact .link-row-main { display: block; flex: 1 1 16rem; min-width: 0; margin-right: 0.35rem; }
.lp-compact .link-row-main > * + * { margin-left: 0.45rem; }
.lp-compact .link-row-tools { display: contents; }
.lp-compact .lp-suggest, .lp-compact .lp-search-wrap { order: 1; flex: 1 1 100%; }
.lp-compact .link-base::after { content: " ·"; content: " ·" / ""; font-weight: 400; }
.lp-compact .link-actions { padding-top: 0.55rem; }

/* Intro (before the first calculation) and the guide. */
.pif-intro-steps { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: 0.9rem; }
.pif-intro-steps li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink-muted); }
.pif-intro-num { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sage-light); color: var(--sage); font-weight: 600; display: grid; place-items: center; }
.pif-formula { background: var(--paper); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; display: grid; gap: 0.35rem; }
.pif-formula .pif-eyebrow { margin-right: 0.3rem; color: var(--sage); }
.pif-glossary { margin: 0; }
.pif-glossary dt { font-weight: 600; color: var(--ink); margin-top: 0.85rem; }
.pif-glossary dt:first-child { margin-top: 0; }
.pif-glossary dd { margin: 0.15rem 0 0; color: var(--ink-muted); font-size: 0.9rem; max-width: 48rem; }
.pif-guide-section { margin-bottom: 1rem; }
.pif-steps-list { padding-left: 1.2rem; }
.pif-steps-list li { margin-bottom: 0.5rem; }

/* Amount spans the row so a crore-sized figure never breaks mid-number; periods stay on one line. */
.pif-kpi-amount { grid-column: 1 / -1; }
.pif-kpi-amount .pif-kpi-value { overflow-wrap: normal; white-space: nowrap; }
.pif-results-table tbody th { white-space: nowrap; }

/* ─── MY INDEXES ─── */
.pif-mi-list { display: grid; gap: 0.9rem; }
.pif-mi-list .pif-card + .pif-card { margin-top: 0; }
.pif-mi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; flex-wrap: wrap; }
.pif-mi-name { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 1.2rem; margin: 0 0 0.15rem; color: var(--ink); overflow-wrap: anywhere; }
.pif-mi-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pif-chip-static { padding-right: 0.65rem; background: #f3f6f3; }
/* Series links under a My Indexes set (my_indexes.php): History's facts and fold, then a table
   whose link cells are edited in place -- "Change" swaps the text for a search box and buttons. */
.pif-mil-details { margin-top: 0.45rem; }
.pif-mil-note { margin: 0.25rem 0 0.45rem; font-size: 0.8rem; color: var(--ink-muted); }
.pif-mil { font-size: 0.82rem; }
.pif-mil th { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.pif-mil td { vertical-align: top; }
.pif-mil-comm { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pif-mil td > code, .pif-mil-official code { background: transparent; padding: 0; font-size: 0.7rem; color: var(--sage); }
.pif-mil-official { color: var(--ink-faint); font-size: 0.74rem; }
.pif-mil-cell { min-width: 14rem; }
/* The scroll wrapper clips the search list; while a cell is being edited it lets it through. */
.pif-mil-wrap.is-editing { overflow: visible; }
.pif-mil-view { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.4rem; }
.pif-mil-view .pif-badge { margin-left: 0; }
.pif-mil-change { font-size: 0.78rem; white-space: nowrap; }
.pif-mil-edit { display: grid; gap: 0.35rem; margin-top: 0.1rem; padding: 0.5rem 0.6rem; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--white); text-align: left; }
.pif-mil-pick { font-weight: 500; overflow-wrap: anywhere; }
.pif-mil-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.pif-mil-from { white-space: nowrap; color: var(--ink-faint); }
@media (max-width: 640px) {
    .pif-mil-change { min-height: 44px; display: inline-flex; align-items: center; }
    /* The stacked card puts the label on the left; an open editor needs the full width under it. */
    table.cl-stack.pif-mil td.pif-mil-cell { text-align: left !important; }
    table.cl-stack.pif-mil td.pif-mil-cell.is-editing { padding-left: 0 !important; padding-top: 1.7rem !important; }
}
.min-w-0 { min-width: 0; }
.pif-dialog-wide { max-width: 560px; }
/* The picker list must not be clipped, so the chips scroll rather than the dialog body. */
#miChips { max-height: 32vh; overflow-y: auto; }
.pif-dialog-wide .pif-picker-list { max-height: 220px; }

/* ─── HISTORY ─── */
.pif-hist-toolbar { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pif-hist-toolbar .pif-picker { flex: 1 1 20rem; max-width: 34rem; }
.pif-hist-list { display: grid; gap: 0.75rem; }
.pif-hist-list .pif-card + .pif-card { margin-top: 0; }
.pif-hist { display: flex; gap: 0.75rem 1.25rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 1rem 1.25rem; }
.pif-hist[hidden] { display: none; }
.pif-hist-main { flex: 1 1 24rem; min-width: 0; }
.pif-hist-title-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.pif-hist-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.pif-hist-title-row .pif-icon-btn { min-width: 28px; min-height: 28px; border-color: transparent; }
.pif-hist-rename { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.pif-hist-rename[hidden] { display: none; }
.pif-hist-rename input { flex: 1 1 14rem; min-width: 0; }
.pif-hist-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pif-hist-actions form { margin: 0; }
@media (max-width: 640px) { .pif-hist-actions { width: 100%; } .pif-hist-actions > form:first-child { flex: 1 1 auto; } .pif-hist-actions > form:first-child .btn { width: 100%; } .pif-hist-rename input { font-size: 16px; } }

/* ─── BROWSE & COMMODITY PAGE ─── */
.pif-browse-search { margin-bottom: 1rem; }
.pif-browse-table td { vertical-align: top; }
.pif-browse-table thead th { font-size: 0.74rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.pif-browse-link { font-weight: 500; text-decoration: none; }
.pif-browse-link:hover { text-decoration: underline; }
.pif-row-actions { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
/* In a phone's stacked card the group spans the card and keeps to its right edge, like the
   card's other values, whether its buttons fit on one line (390px) or wrap (360px). As an
   inline-flex it shrank to one line and sat right, but went full width and left once it wrapped. */
@media (max-width: 640px) {
    .pif-row-actions { display: flex; justify-content: flex-end; }
    .pif-row-actions .btn, .pif-page-actions > .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
    /* Browse's Search button and the results' "Clear search" link, finger-sized too. */
    .pif-browse-search .btn, .pif-card-head > .btn-link { min-height: 40px; display: inline-flex; align-items: center; }
}
/* "+ My Indexes" briefly reads "Added to “Set name”": cap it so a long name can't widen the row. */
[data-pif-add-my], #myIndexAdd { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pif-row-actions [data-pif-add-my] { max-width: 15rem; }
/* One-line "Sign in to …" hints: a finger-sized link on phones. */
@media (max-width: 640px) { .pif-signin-hint a { display: inline-block; padding: 0.7rem 0; margin: -0.7rem 0; } }
.pif-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.pif-kpi-strip .pif-kpi { background: var(--white); box-shadow: var(--shadow); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
.pif-kpi-value-sm { font-size: 1.25rem; padding: 0.3rem 0; }
.pif-pivot td, .pif-pivot th { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.pif-pivot td.is-prov { background: #fffaf0; }
.pif-prov-mark { font-size: 0.62rem; font-weight: 700; color: var(--gold-ink); margin-left: 0.2rem; text-decoration: none; cursor: help; vertical-align: super; }
/* The commodity page's Calendar / Financial year toggle (the owner's PIF review of 27 Sep 2026,
   point 7): the months are spelled out, a note and an "Apr–Mar" sub-label say it again in FY
   view, and a rule marks where the Jan–Mar columns of the next calendar year begin. The
   sub-label must be a block: the pivot's cells are nowrap. On phones the two buttons share the
   width, two lines each. */
.pif-year-toggle-months { font-weight: 400; }
.pif-fy-note { font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 0.6rem; }
.pif-th-sub { display: block; font-size: 0.7rem; font-weight: 400; color: var(--ink-faint); }
.pif-pivot .pif-fy-break { border-left: 2px solid var(--rule); }
#monthly { scroll-margin-top: 80px; }
@media (max-width: 640px) {
    .pif-year-toggle { width: 100%; }
    .pif-year-toggle > .btn { flex: 1 1 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
    .pif-year-toggle-months { font-size: 0.75rem; }
}
/* PIF.choose (the "Add to My Indexes" chooser): the lists scroll inside the dialog, which is a
   bottom sheet on phones, instead of running off the screen. 2px of padding keeps focus rings. */
.pif-set-list { display: grid; gap: 0.4rem; max-height: min(50vh, 24rem); overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.pif-set-option { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; text-align: left; padding: 0.6rem 0.8rem;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 0.9rem; }
.pif-set-option:hover:not([disabled]) { border-color: var(--sage); background: var(--sage-light); }
.pif-set-option[disabled] { color: var(--ink-faint); background: var(--paper); }
.pif-set-new { color: var(--sage); font-weight: 500; }
.pif-set-label { min-width: 0; overflow-wrap: anywhere; }
.pif-set-note { flex: 0 0 auto; font-size: 0.76rem; color: var(--sage); }
.pif-set-option[disabled] .pif-set-note { color: var(--ink-faint); }
.pif-dialog-choose { max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow-y: auto; }
.pif-check-list { border: 0; padding: 0; margin: 0 0 0.9rem; min-width: 0; }
.pif-check-legend { float: none; width: auto; margin: 0 0 0.35rem; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.pif-check-items { display: grid; gap: 0.1rem; max-height: min(26vh, 12rem); overflow-y: auto; overscroll-behavior: contain;
    padding: 0.25rem 0.5rem; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: #fbfaf7; }
.pif-check { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; padding: 0.3rem 0; cursor: pointer; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.pif-check .form-check-input { flex: 0 0 auto; margin: 0.12rem 0 0; }
.pif-check-list ~ .pif-set-list { max-height: min(34vh, 18rem); }
@media (max-width: 640px) {
    .pif-dialog-choose { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
    .pif-set-option { min-height: 44px; align-items: center; }
    .pif-check { min-height: 44px; align-items: center; }
    .pif-check .form-check-input { margin-top: 0; width: 1.2em; height: 1.2em; }
}
@media (max-width: 640px) { .pif-browse-table td.pif-browse-name { font-size: 1rem; padding-bottom: 0.5rem !important; } }
/* Three row buttons (View, Calculate, + My Indexes) stay on one line only where the table has
   room; on tablets they wrap, so the commodity name keeps its width. */
@media (min-width: 992px) { .pif-row-actions { flex-wrap: nowrap; white-space: nowrap; } }
@media (min-width: 641px) and (max-width: 991px) { .pif-row-actions .btn { white-space: nowrap; } }
/* Tables sitting flush in a card (card-body p-0) still need side padding. */
.card-body.p-0 .table > :not(caption) > * > :first-child { padding-left: 1rem; }
.card-body.p-0 .table > :not(caption) > * > :last-child { padding-right: 1rem; }

/* ─── CALCULATOR: COLLAPSIBLE STEPS (phones and small tablets) ─── */
.pif-step-toggle { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0; margin: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: default; }
.pif-step-label { flex: 0 0 auto; }
.pif-step-summary { display: none; }
@media (max-width: 991px) {
    .pif-collapsible .pif-step-toggle { cursor: pointer; min-height: 2.5rem; display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.55rem; align-items: center; }
    .pif-collapsible .pif-step-toggle::after { grid-column: 3; grid-row: 1; }
    .pif-collapsible .pif-step-toggle::after { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; margin-left: auto;
        border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(-135deg) translateY(-2px); transition: transform 0.15s; }
    .pif-collapsible.is-collapsed .pif-step-toggle::after { transform: rotate(45deg) translateY(-2px); }
    .pif-collapsible.is-collapsed .pif-step-body { display: none; }
    .pif-collapsible.is-collapsed > .pif-step-head { margin-bottom: 0; }
    .pif-collapsible.is-collapsed .pif-step-summary { display: block; flex: 1 1 auto; min-width: 0; font-family: 'DM Sans', sans-serif;
        font-size: 0.8rem; color: var(--sage); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        grid-column: 2 / 4; grid-row: 2; margin-top: 0.1rem; }
    .pif-collapsible.is-collapsed + .pif-step { padding-top: 0.6rem; }
    .pif-step.pif-collapsible.is-collapsed { margin-bottom: 0.6rem; }
    /* Once results are showing, the intro text and guide button give way to them. */
    .pif-calc-head.has-results .pif-subtitle, .pif-calc-head.has-results .pif-page-actions { display: none; }
    .pif-calc-head.has-results .pif-page-head { margin-bottom: 0.75rem; }
}
/* History: the commodities of a calculation as a tidy grid, one line each. */
.pif-hist-comms { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem 0.5rem; }
.pif-hist-comm { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; padding: 0.3rem 0.6rem; font-size: 0.8rem; line-height: 1.35;
    background: #f3f6f3; border: 1px solid #dfe8e1; border-radius: var(--radius); color: var(--ink); }
.pif-hist-comm-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pif-hist-comm code { flex: 0 0 auto; background: transparent; padding: 0; font-size: 0.7rem; color: var(--sage); }
.pif-hist-comms:not(.is-open) .is-more { display: none; }
.pif-hist-more { margin-top: 0.35rem; font-size: 0.8rem; }
@media (max-width: 640px) { .pif-hist-comms { grid-template-columns: 1fr; } }
/* What a saved calculation reached back to: Years and Series always shown, each commodity's
   series links folded under them (lib/HistoryLinks.php). */
.pif-hist-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.75rem; margin: 0.45rem 0 0; font-size: 0.82rem; line-height: 1.45; }
.pif-hist-facts > div { display: contents; }
.pif-hist-facts dt { font-weight: 600; color: var(--ink-muted); }
.pif-hist-facts dd { margin: 0; min-width: 0; color: var(--ink); }
details.pif-hist-links { margin-top: 0.4rem; font-size: 0.8rem; }
details.pif-hist-links > summary { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; cursor: pointer; list-style: none; color: var(--sage); font-weight: 500; }
details.pif-hist-links > summary::-webkit-details-marker { display: none; }
details.pif-hist-links > summary::before { content: ""; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform 0.15s; flex: 0 0 auto; }
details[open].pif-hist-links > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.pif-hist-links-note { color: var(--ink-faint); font-weight: 400; }
/* Any number of commodities: the list scrolls in its own box, about three and a half rows tall, so
   the cut-off row shows there is more. The 2px padding keeps focus rings inside the box. */
.pif-hist-chain { list-style: none; padding: 2px; margin: 0.15rem -2px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.4rem 0.5rem;
    align-content: start; max-height: min(50vh, 16rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pif-hist-chain:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; border-radius: var(--radius); }
.pif-hist-chain > li { min-width: 0; padding: 0.4rem 0.6rem; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--white); line-height: 1.45; }
.pif-hist-chain-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin-bottom: 0.15rem; }
.pif-hist-chain-name { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pif-hist-chain-head code { background: transparent; padding: 0; font-size: 0.7rem; color: var(--sage); }
.pif-hist-chain-from { margin-left: auto; color: var(--ink-faint); }
.pif-hist-chain-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 0.5rem; align-items: baseline; }
.pif-hist-chain-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pif-hist-chain-base { font-weight: 600; color: var(--ink-muted); }
.pif-hist-chain .pif-badge { margin-left: 0.3rem; }
@media (max-width: 640px) { details.pif-hist-links > summary { min-height: 44px; } .pif-hist-chain { grid-template-columns: 1fr; max-height: min(55vh, 20rem); max-height: min(55dvh, 20rem); } }
/* Editing a saved (possibly shared) calculation. */
.pif-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem;
    padding: 0.75rem 1rem; border-radius: var(--radius); background: #eef3f7; border: 1px solid #c9d8e4; color: #1f3b52; }
.pif-edit-bar-text { display: flex; gap: 0.6rem; align-items: flex-start; min-width: 0; flex: 1 1 22rem; }
.pif-edit-bar-text .pif-icon { margin-top: 3px; flex: 0 0 auto; }
.pif-edit-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 640px) { .pif-edit-bar-actions { width: 100%; } .pif-edit-bar-actions > * { flex: 1 1 auto; } .pif-edit-bar-actions .btn { width: 100%; } }
/* History tabs and the share dialog. */
.pif-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; overflow-x: auto; }
.pif-tabs a { padding: 0.55rem 0.9rem; color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.pif-tabs a:hover { color: var(--sage); }
.pif-tabs a.active { color: var(--sage); border-bottom-color: var(--sage); }
.pif-tab-count { display: inline-block; min-width: 1.4rem; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: #eceae4; color: var(--ink-muted); font-size: 0.72rem; text-align: center; }
.pif-tabs a.active .pif-tab-count { background: var(--sage-light); color: var(--sage); }
.pif-share-all { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem 0.55rem 2.2rem; margin: 0.5rem 0 0.35rem; border-radius: var(--radius); background: var(--paper); font-weight: 500; }
.pif-share-list { display: grid; gap: 0.25rem; max-height: 40vh; overflow-y: auto; }
.pif-share-person { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem 0.45rem 2.2rem; margin: 0; border: 1px solid var(--rule-soft); border-radius: var(--radius); cursor: pointer; }
.pif-share-person[hidden] { display: none; }
.pif-share-person:hover { background: #fbfaf7; }
.pif-share-person .form-check-label { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.pif-share-person .form-check-input, .pif-share-all .form-check-input { margin-left: -1.45rem; }