/* 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; }
.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); }

/* 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; }
.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; }
}

.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.3rem 1rem; margin-top: 0.5rem; }
.pif-chart-legend .lg { display: inline-block; width: 16px; height: 3px; margin-right: 0.35rem; vertical-align: middle; border-radius: 2px; }
.pif-chart-legend .lg-actual { background: #2d5a3d; }
.pif-chart-legend .lg-est { background: repeating-linear-gradient(90deg, #b7791f 0 5px, transparent 5px 8px); }
.pif-chart-legend .lg-base, .pif-chart-legend .lg-assess { width: 10px; height: 10px; border-radius: 50%; }
.pif-chart-legend .lg-base { background: #1f6f8b; }
.pif-chart-legend .lg-assess { background: #0f1a14; }

.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; }
}

/* Series links (advanced). */
.pif-links > summary { padding: 0.1rem 0; }
.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; }
@media (max-width: 640px) {
    .link-row-tools .btn { min-height: 38px; }
    .lp-search { font-size: 16px; }
}

/* 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; }
.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; }
@media (max-width: 640px) { .pif-row-actions { justify-content: flex-start; } .pif-row-actions .btn { min-height: 38px; } }
.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; }
.pif-set-list { display: grid; gap: 0.4rem; }
.pif-set-option { 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; }
@media (max-width: 640px) { .pif-browse-table td.pif-browse-name { font-size: 1rem; padding-bottom: 0.5rem !important; } }
@media (min-width: 641px) { .pif-row-actions { flex-wrap: nowrap; 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; } }
/* 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; }