/* App-wide font: Arial */
html, body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Ensure common Dash components inherit the app font */
label,
.dash-dropdown,
.dash-table-container,
.dash-table,
.Select,
.Select-control,
.Select-value,
.Select-option,
.Select-menu-outer {
  font-family: inherit;
}

/* Apply Arial to Plotly figure text */
.js-plotly-plot,
.js-plotly-plot .plotly,
.js-plotly-plot .main-svg text {
  font-family: Arial, Helvetica, sans-serif;
}

.graph-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto; /* rows size to their charts, any number of rows */
    gap: 0px;
}

.graph-cell {
    width: 100%;
    height: 620px; /* match the 600px figures; responsive graphs fill the cell */
}

/* a compact 1x3 row (e.g. the metals trio); stacks on narrow screens */
.graph-container-thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 0px;
}

.graph-cell-sm {
    width: 100%;
    height: 440px; /* match the 420px figures */
}

@media (max-width: 900px) {
    .graph-container-thirds {
        grid-template-columns: 1fr;
    }
}

/* section headers on multi-context pages — the why, then the charts */
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 26px 0 4px;
}

.section-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Top navigation — monochrome; color is reserved for the charts */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding: 14px 2px 12px;
    margin: 0 0 18px;
}

.nav-brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #111;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 4px;
}

.nav-links a {
    color: #6b7280;
    padding: 4px 2px 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    color: #111;
}

.nav-links a.active {
    color: #111;
    border-bottom-color: #111;
}

.nav-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mission-line {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}



/* Typography scale */
h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 6px 0 4px;
}

.page-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.data-source {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 10px;
}

/* Contact footer pinned to the bottom of the viewport */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    color: #888;
    font-size: 13px;
    padding: 8px 16px;
    z-index: 100;
}

/* Keep the last content visible above the fixed footer */
body {
    padding-bottom: 44px;
}

/* Page sections — monochrome divider + small caps heading */
.section-head {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #111;
    margin: 28px 0 4px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.section-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 14px;
}

/* Per-dataset freshness line — series update on different schedules */
.data-updates {
    font-size: 12px;
    color: #9ca3af;
    margin: -12px 0 18px;
}

/* Portfolio.
   One control size (40px: 9px padding, 14px text, 1px #ccc border, 4px radius) for inputs, textareas,
   dropdowns and buttons. Two text sizes: 14px for data and body, 13px for secondary notes.
   One rhythm: 16px between blocks, 8px inside them. Black (#111) is the only accent. */

/* Sub-menu: vertical column on the left, page content fills the rest */
.page-row { display: flex; align-items: flex-start; gap: 3%; }
.macro-subnav { flex: 0 0 12%; flex-direction: column; justify-content: flex-start; gap: 2px; position: sticky; top: 16px; margin: 4px 0 24px; }
.macro-subnav a { padding: 6px 12px; border-bottom: none; border-left: 2px solid transparent; }
.macro-subnav a.active { border-left-color: #111; }
/* Portfolio menu: rebuilt links on top, the one admin password field at the foot of the column. The column runs
   from under the header to just above the fixed footer, so the field is in view before any scrolling. */
#portfolio-subnav { height: calc(100vh - 160px); }
.portfolio-menu { display: flex; flex-direction: inherit; gap: inherit; flex-wrap: wrap; }
/* from the active link's marker bar to the links' right edge (their 12px padding) */
.pf-admin { margin-top: auto; padding: 24px 12px 0 0; }
.pf-admin label { display: block; font-size: 13px; color: #666; margin-bottom: 4px; white-space: nowrap; }
.pf-admin input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
.pf-admin input:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.page-main { flex: 1 1 0; min-width: 0; }

.portfolio-page { max-width: 1400px; margin: 0 auto; padding-bottom: 30px; }
.pf-block { padding: 8px 0 24px; border-bottom: 1px solid #ddd; }
.pf-block h3 { font-size: 16px; margin: 24px 0 4px; }
.pf-thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-chart-controls { display: flex; align-items: center; gap: 16px; }
.pf-entry-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-link-button { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: #6b7280; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-link-button:hover { color: #111; }

/* secondary text: notes, sources, meta */
.pf-help, .pf-source, .pf-description p, .pf-entry-footer, .pf-radio label, .pf-table small { font-size: 13px; color: #666; line-height: 1.5; }
.pf-help, .pf-source { margin: 8px 0; }
.pf-description p { margin: 0 0 8px; }
.pf-description strong { color: #222; }
.pf-description { margin-bottom: 16px; }
/* premises behind the thesis: folded, in the description's size and grey; their section headings never outrank the summary */
.pf-premise { margin: 0 0 8px; font-size: 13px; color: #666; line-height: 1.5; }
.pf-premise summary { cursor: pointer; color: #222; font-weight: 600; }
.pf-premise-body h2 { font-size: 13px; font-weight: 600; color: #222; margin: 12px 0 4px; }
.pf-premise-body ul { margin: 0 0 4px; padding-left: 18px; }
.pf-premise-body p { margin: 4px 0; }
.pf-thesis p:not(.pf-help) { font-size: 14px; line-height: 1.65; margin: 8px 0; }
.pf-ref { color: #6b7280; text-decoration: underline; text-underline-offset: 3px; }
.pf-ref:hover { color: #111; }
.pf-radio label { margin: 0 0 0 4px; color: #222; }
.pf-radio input { width: auto; margin: 0 0 0 12px; accent-color: #111; vertical-align: middle; }

/* controls */
.portfolio-page label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.portfolio-page input, .portfolio-page textarea, .pf-button {
    box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #222;
    padding: 9px 12px; font: inherit; font-size: 14px; line-height: 20px;
}
.portfolio-page input, .portfolio-page textarea { width: 100%; }
.portfolio-page textarea { resize: vertical; line-height: 1.6; }
.portfolio-page .Select-control { min-height: 40px; border-color: #ccc; }
/* Dash 3 dropdowns render as a button; match the 14px of every other control */
.portfolio-page .dash-dropdown, .portfolio-page .dash-dropdown * { font-size: 14px; }
.portfolio-page .dash-dropdown { min-height: 40px; }
/* two- or three-way choices sit at control height, so the form rows stay aligned */
.pf-choice { display: flex; align-items: center; min-height: 40px; }
.pf-choice label { font-weight: 400; font-size: 14px; color: #222; margin: 0 16px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.pf-choice input { width: auto; margin: 0; accent-color: #111; }
.portfolio-page .Select-input > input { border: 0; padding: 0; width: auto; line-height: 38px; }
.portfolio-page .Select-placeholder, .portfolio-page .Select-value { line-height: 38px; font-size: 14px; }
.pf-button { display: inline-block; text-decoration: none; cursor: pointer; }
.pf-button:hover { background: #f3f4f6; }
.pf-primary { background: #111; color: #fff; border-color: #111; }
.pf-primary:hover { background: #333; }
.pf-button:disabled { opacity: .5; cursor: not-allowed; }
.portfolio-page a:focus-visible, .pf-button:focus-visible, .portfolio-page input:focus-visible, .portfolio-page textarea:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.pf-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.pf-field { min-width: 0; }
.pf-wide { grid-column: 1 / -1; }
.pf-editor { padding: 8px 0 24px; }
.pf-notice { font-size: 14px; font-weight: 600; line-height: 1.5; margin-top: 8px; }

/* data */
.pf-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.pf-stat { border-left: 2px solid #111; padding: 4px 16px; line-height: 1.8; font-size: 14px; }
.pf-stat small { display: block; font-size: 13px; color: #666; line-height: 1.4; }
/* a constituent's move since its previous close: context to the price, in the tiles' context grey */
.pf-change { color: #666; }
.pf-ticker { margin-left: 2px; color: #666; font-size: 13px; white-space: nowrap; }
.pf-close { white-space: nowrap; }  /* the price and its move read as one figure */
.pf-table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid #e5e5e5; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.pf-table th { background: #f8f8f8; color: #444; white-space: nowrap; }
.pf-table td, .pf-table th { padding: 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.pf-table td { min-width: 70px; max-width: 300px; overflow-wrap: anywhere; }
/* business line: wraps inside the fixed column, up to three lines, then an ellipsis; the full text is the hover title */
.pf-table small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 4px; max-width: 380px; }
.pf-table a, .pf-entry a { color: #222; text-underline-offset: 3px; }
.pf-spark { display: block; margin-top: 4px; }
.pf-indicator { max-width: 380px; margin: 8px 0 0; font-size: 14px; }
/* the chosen text centred in the box (its line box filled the 34px default inside a 38px box) and starting where the options do */
.pf-indicator .Select-value, .pf-indicator .Select-placeholder { line-height: 38px !important; padding-left: 12px !important; }
.pf-indicator .VirtualizedSelectOption { padding-left: 12px; }
.pf-show-valuation .pf-col:not(.pf-col-valuation), .pf-show-earnings .pf-col:not(.pf-col-earnings),
.pf-show-balance .pf-col:not(.pf-col-balance) { display: none; }
.pf-empty { padding: 24px 16px; background: #fafafa; border: 1px dashed #ccc; color: #555; margin: 16px 0; font-size: 14px; }

/* trades */
/* entry rows read at body-text size, below their 16px section heading, with no bold */
.pf-trade-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.pf-entry { border-bottom: 1px solid #ddd; padding: 16px 0; }
.pf-entry h3 { font-size: 16px; margin: 4px 0 8px; }
.pf-entry-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.pf-entry-footer { justify-content: space-between; margin-top: 8px; }

@media (max-width: 900px) {
    .page-row { display: block; }
    .pf-thirds { grid-template-columns: 1fr; }
    .macro-subnav { position: static; flex-direction: row; gap: 24px; margin: -4px 0 24px; }
    .macro-subnav a { padding: 4px 2px 6px; border-left: none; border-bottom: 2px solid transparent; }
    .macro-subnav a.active { border-bottom-color: #111; }
    #portfolio-subnav { height: auto; }
    .pf-admin { flex-basis: 100%; margin-top: 4px; padding: 0 0 0 2px; }  /* 2px = the row links' side padding */
    .pf-admin input { max-width: 240px; }  /* a row menu spans the page; keep the field password-sized */
}

@media (max-width: 700px) {
    .nav-bar { align-items: flex-start; gap: 16px; }
    .nav-bar .mission-line { max-width: 300px; }
    .nav-bar .nav-links { gap: 12px; flex-shrink: 0; }
    .pf-form-grid { grid-template-columns: 1fr; }
}