/* experts.css — Expert Ideas surface. Self-contained (no dependency on terminal.css) so the two surfaces evolve independently. Served no-cache: stale css against new DOM has burned us. Palette follows StockGro: violet as the primary action colour, the logo's coral as the accent. Both themes are defined here; `data-theme` on picks one, and the choice is remembered in localStorage. Green/red stay green/red — an Indian trading audience reads them instantly, and P&L always carries a sign as well as a colour. */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: #0C0B14; --panel: #14131F; --panel-2: #1B1929; --line: #262437; --line-soft: #1E1C2C; --ink: #ECEAF6; --mute: #8F8BA8; --brand: #7C5CFF; --brand-dim: rgba(124, 92, 255, .16); --brand-ink: #FFFFFF; --accent: #FF6A45; --accent-dim:rgba(255, 106, 69, .15); --up: #2ED3A0; --up-dim: rgba(46, 211, 160, .12); --down: #FF5470; --down-dim: rgba(255, 84, 112, .12); --warn: #FFC048; --shadow: 0 8px 28px rgba(0, 0, 0, .45); } :root[data-theme='light'] { color-scheme: light; --bg: #F6F5FB; --panel: #FFFFFF; --panel-2: #F1EFF9; --line: #E4E1F0; --line-soft: #EEECF7; --ink: #1A1830; --mute: #6E6A85; --brand: #6440E8; --brand-dim: rgba(100, 64, 232, .10); --brand-ink: #FFFFFF; --accent: #F2542D; --accent-dim:rgba(242, 84, 45, .10); --up: #0F9D74; --up-dim: rgba(15, 157, 116, .10); --down: #D92F4C; --down-dim: rgba(217, 47, 76, .09); --warn: #B87400; --shadow: 0 8px 24px rgba(26, 24, 48, .10); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 13.5px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .ex-num, .ex-ltp, .ex-kpi__v, .ex-cal__pnl { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .ex-muted { color: var(--mute); } .ex-pad { padding: 14px 16px; } .is-up, .tt-up { color: var(--up); } .is-down, .tt-down { color: var(--down); } .tt-flat { color: var(--mute); } /* ── header ───────────────────────────────────────────────────────────── */ .ex-top { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); } .ex-top__brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -.01em; } .ex-top__mark { width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--accent), var(--brand)); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; } .ex-top__brand small { color: var(--mute); font-weight: 500; margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line); } /* ── viewport frame ───────────────────────────────────────────────────────── The shell used to be `height: calc(100vh - 108px)`, a guess at the chrome above it. With the admin preview bar present the real chrome is 163px, so the shell ran 55px too tall, the page scrolled, and the chart's TIME AXIS sat below the fold — you had to scroll to see what time a candle was. Height now flows from a flex column rooted at the viewport, so it is correct whatever is stacked on top. Every link in that chain needs `min-height: 0`, or a flex item refuses to shrink below its content and the overflow simply moves one level up. */ html { height: 100%; } body { height: 100%; display: flex; flex-direction: column; overflow: hidden; } #app { flex: 1; display: flex; flex-direction: column; min-height: 0; } #exBody { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ── layout ───────────────────────────────────────────────────────────── */ .ex-shell { display: grid; grid-template-columns: 344px 1fr; flex: 1; min-height: 0; } .ex-side { border-right: 1px solid var(--line); overflow: auto; background: var(--panel); } .ex-side__hd { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--mute); text-transform: uppercase; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; } .ex-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } /* ── nav ──────────────────────────────────────────────────────────────── */ .ex-nav { display: flex; gap: 2px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); } .ex-navbtn { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--mute); padding: 11px 16px; font: inherit; font-weight: 500; cursor: pointer; transition: color .15s; } .ex-navbtn:hover { color: var(--ink); } .ex-navbtn.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .ex-admin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 20px; background: linear-gradient(90deg, var(--brand-dim), transparent 70%); border-bottom: 1px solid var(--line); } .ex-admin__tag { font-size: 10px; letter-spacing: .12em; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: var(--brand); color: var(--brand-ink); } .ex-admin .ex-input { min-width: 380px; } /* ── ideas board ──────────────────────────────────────────────────────── */ .ex-ideas { display: flex; flex-direction: column; } .ex-idea { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 5px; } .ex-idea:hover { background: var(--panel-2); } .ex-idea.is-compact { padding: 9px 16px; } .ex-idea__hd { display: flex; align-items: center; gap: 8px; } .ex-idea__sym { font-weight: 650; letter-spacing: -.01em; } .ex-idea__dir { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding: 2px 6px; border-radius: 4px; } .ex-idea__dir.is-up { background: var(--up-dim); } .ex-idea__dir.is-down { background: var(--down-dim); } .ex-idea__sub { color: var(--mute); font-size: 11.5px; } .ex-idea__row { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--mute); flex-wrap: wrap; } .ex-tagwrap { display: inline-flex; gap: 5px; flex-wrap: wrap; } .ex-tag { background: var(--brand-dim); color: var(--brand); border-radius: 5px; padding: 2px 7px; font-size: 10.5px; font-weight: 500; } .ex-src { font-size: 10px; letter-spacing: .05em; font-weight: 600; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; background: var(--panel-2); color: var(--mute); border: 1px solid var(--line); } .ex-src--sg { background: var(--accent-dim); color: var(--accent); border-color: transparent; } .ex-src--local { background: var(--brand-dim); color: var(--brand); border-color: transparent; } /* ── chart area ───────────────────────────────────────────────────────── */ .ex-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel); } .ex-chart { flex: 1 1 0; min-height: 0; position: relative; } .ex-ltp { color: var(--mute); font-size: 12.5px; } .ex-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); font-weight: 500; } .ex-chip.is-open { color: var(--up); border-color: var(--up); background: var(--up-dim); } /* ── inputs & buttons ─────────────────────────────────────────────────── */ .ex-input { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 11px; font: inherit; min-width: 200px; transition: border-color .15s, box-shadow .15s; } .ex-input--wide { width: 100%; } .ex-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); } .ex-btn { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; } .ex-btn:hover { border-color: var(--brand); } .ex-btn:active { transform: translateY(1px); } .ex-btn:disabled { opacity: .45; cursor: not-allowed; } .ex-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .ex-btn--primary:hover { filter: brightness(1.08); } .ex-btn--ghost { background: transparent; color: var(--mute); border-color: transparent; } .ex-btn--ghost:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); } .ex-btn--buy { background: var(--up-dim); border-color: var(--up); color: var(--up); } .ex-btn--sell { background: var(--down-dim); border-color: var(--down); color: var(--down); } .ex-btn--icon { padding: 7px 10px; } .ex-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px; } .ex-seg__opt { background: transparent; border: 0; color: var(--mute); padding: 6px 14px; font: inherit; font-weight: 500; cursor: pointer; border-radius: 8px; } .ex-seg__opt.is-active { background: var(--brand); color: var(--brand-ink); font-weight: 600; } /* ── ticket ───────────────────────────────────────────────────────────── */ .ex-ticket { display: none; } .ex-ticket.is-on { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel); } .ex-ticket__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ex-ticket__side { font-weight: 700; letter-spacing: .04em; } .ex-ticket__sym { font-weight: 650; } .ex-ticket__row { display: flex; align-items: center; gap: 10px; } .ex-err { color: var(--warn); font-size: 12px; } /* ── performance ──────────────────────────────────────────────────────── */ .ex-perf { padding: 0 0 28px; } .ex-monthlbl { font-weight: 650; min-width: 150px; text-align: center; font-size: 14.5px; } .ex-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .ex-kpis--sm { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; border-top: 1px solid var(--line); } .ex-kpi { background: var(--panel); padding: 12px 16px; } .ex-kpi__l { color: var(--mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } .ex-kpi__v { font-size: 19px; font-weight: 650; margin-top: 2px; letter-spacing: -.02em; } .ex-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; padding: 18px 20px; } .ex-cal__dow { color: var(--mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 0 4px 2px; } .ex-cal__cell { min-height: 96px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--panel); transition: transform .1s, box-shadow .15s, border-color .15s; } .ex-cal__cell.is-blank { border-color: transparent; background: transparent; } .ex-cal__cell.is-live { cursor: pointer; } .ex-cal__cell.is-live:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); } .ex-cal__cell.is-up { background: var(--up-dim); border-color: color-mix(in srgb, var(--up) 35%, transparent); } .ex-cal__cell.is-down { background: var(--down-dim); border-color: color-mix(in srgb, var(--down) 35%, transparent); } .ex-cal__d { color: var(--mute); font-size: 12px; font-weight: 600; } .ex-cal__pnl { font-size: 16px; font-weight: 650; letter-spacing: -.02em; } .ex-cal__meta { color: var(--mute); font-size: 10.5px; } .ex-note { color: var(--mute); font-size: 11.5px; padding: 4px 20px 0; max-width: 940px; line-height: 1.6; } /* ── details ──────────────────────────────────────────────────────────── */ .ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; padding: 20px; } .ex-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .ex-card__hd { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-weight: 650; display: flex; align-items: center; gap: 9px; } .ex-card__body { padding: 6px 16px 14px; } .ex-row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .ex-row:last-child { border-bottom: 0; } .ex-row__k { color: var(--mute); font-size: 12.5px; } .ex-row__v { text-align: right; font-size: 12.5px; word-break: break-word; } .ex-lock { font-size: 11px; color: var(--mute); padding: 10px 16px 14px; border-top: 1px dashed var(--line); line-height: 1.6; } /* ── confirm sheet (ui/sheet.js markup) ───────────────────────────────── */ .ex-modal { position: fixed; inset: 0; background: rgba(8, 6, 18, .62); display: grid; place-items: center; z-index: 80; backdrop-filter: blur(3px); } .tt-confirm { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; min-width: 340px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow); } .tt-confirm__mode { align-self: flex-start; font-size: 10px; letter-spacing: .1em; font-weight: 700; border-radius: 5px; padding: 3px 8px; background: var(--brand-dim); color: var(--brand); } .tt-confirm__hd { font-size: 16px; font-weight: 650; margin-bottom: 4px; } .tt-confirm__row { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; } .tt-confirm__row .tt-label { color: var(--mute); } .tt-confirm__row .tt-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } .tt-confirm__actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 12px; } .tt-btn { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 500; cursor: pointer; } .tt-btn--ghost { background: transparent; color: var(--mute); border-color: transparent; } .tt-btn--buy { background: var(--up); border-color: var(--up); color: #04140F; font-weight: 600; } .tt-btn--sell { background: var(--down); border-color: var(--down); color: #1A0308; font-weight: 600; } /* ── day sheet ────────────────────────────────────────────────────────── */ .ex-sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; width: min(940px, 94vw); max-height: 84vh; overflow: auto; box-shadow: var(--shadow); } .ex-sheet__hd { display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 15px; margin-bottom: 12px; } .ex-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ex-table th { text-align: left; color: var(--mute); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; } .ex-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); } .ex-table tr:hover td { background: var(--panel-2); } .ex-table tr.is-muted td { opacity: .55; } .ex-status { color: var(--mute); text-transform: capitalize; } /* ── gate / toast ─────────────────────────────────────────────────────── */ .ex-gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center; background: radial-gradient(1100px 560px at 50% -10%, var(--brand-dim), var(--bg) 62%); } .ex-gate__box { display: flex; flex-direction: column; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 34px 40px; box-shadow: var(--shadow); min-width: 340px; } .ex-gate__t { font-size: 19px; font-weight: 650; letter-spacing: -.02em; } .ex-gate__step { display: flex; gap: 9px; align-items: center; } .ex-gate__step .ex-input { min-width: 230px; text-align: center; letter-spacing: .05em; } .ex-gatebox { padding: 44px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .ex-gatebox__t { font-size: 16px; font-weight: 650; } .ex-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 11px 18px; border-radius: 11px; z-index: 95; opacity: 0; transition: opacity .25s; pointer-events: none; box-shadow: var(--shadow); } .ex-toast.is-on { opacity: 1; } @media (max-width: 900px) { /* stacked layout: let the page scroll normally again */ body { overflow: auto; height: auto; } #app, #exBody { min-height: 0; } .ex-shell { grid-template-columns: 1fr; height: auto; flex: none; } .ex-main { overflow: visible; } .ex-side { border-right: 0; border-bottom: 1px solid var(--line); } .ex-chart { min-height: 380px; flex: none; } .ex-cal { gap: 5px; padding: 12px; } .ex-cal__cell { min-height: 72px; padding: 7px 8px; } .ex-admin .ex-input { min-width: 200px; } } /* ── chart readout ────────────────────────────────────────────────────── */ .ex-ohlc { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11.5px; } .ex-ohlc__t { color: var(--mute); font-family: "JetBrains Mono", ui-monospace, monospace; } .ex-ohlc__p { display: inline-flex; gap: 4px; align-items: baseline; } .ex-ohlc__p i { color: var(--mute); font-style: normal; font-size: 10.5px; } .ex-ohlc__p b { font-weight: 600; font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } .ex-idea.is-clickable { cursor: pointer; } .ex-idea.is-clickable:hover { border-left: 2px solid var(--brand); padding-left: 14px; } /* ── indicators + alerts ──────────────────────────────────────────────── */ .ex-indbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); background: var(--panel); } .ex-indbtn { background: transparent; border: 1px solid var(--line); color: var(--mute); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 11.5px; cursor: pointer; font-variant-numeric: tabular-nums; } .ex-indbtn:hover { color: var(--ink); } .ex-indbtn.is-on { color: var(--ink); border-width: 1.5px; font-weight: 500; } .ex-btn.is-hot { color: var(--warn); border-color: var(--warn); } /* ── focused trade banner ─────────────────────────────────────────────── */ .ex-focus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; background: var(--brand-dim); border-bottom: 1px solid var(--line); font-size: 12.5px; } .ex-focus__t { font-weight: 650; } /* ── option leg strip ─────────────────────────────────────────────────── */ .ex-optbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); background: var(--panel); font-size: 12.5px; } /* ── chart legend ─────────────────────────────────────────────────────────── Price and OHLC live INSIDE the chart, top-left, the way a trading terminal puts them. pointer-events:none so it never eats a crosshair or a drag on the entry/SL/target lines underneath. */ .ex-legend { position: absolute; top: 8px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-shadow: 0 1px 2px var(--bg); } .ex-legend .ex-ltp { font-size: 13px; font-weight: 600; color: var(--ink); } .ex-legend .ex-ohlc { gap: 10px; } /* ── timeframe switch ─────────────────────────────────────────────────────── */ .ex-tf { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); } .ex-tf__opt { border: 0; background: transparent; color: var(--mute); font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; } .ex-tf__opt:hover { color: var(--ink); } .ex-tf__opt.is-active { background: var(--brand); color: #fff; } /* ── per-symbol track record, on the chart ─────────────────────────────────── */ .ex-stats { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; font-size: 11px; } .ex-stats__row { display: flex; gap: 12px; align-items: baseline; } .ex-stats__b { display: inline-flex; gap: 4px; align-items: baseline; } .ex-stats__b b { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; color: var(--ink); } .ex-stats__b i { color: var(--mute); font-style: normal; font-size: 10px; } .ex-stats__last { display: flex; gap: 7px; align-items: baseline; color: var(--mute); font-size: 10.5px; } .ex-stats__last b { font-family: "JetBrains Mono", ui-monospace, monospace; } .ex-stats__last i { font-style: normal; opacity: .75; } /* session expiry — one clear message, not a per-panel mystery */ .ex-stale { padding: 7px 14px; font-size: 12px; font-weight: 500; color: #fff; background: var(--down); text-align: center; } /* ── Expert Portfolios ────────────────────────────────────────────────────── Appended to static/css/experts.css. Reuses the existing custom properties (--panel, --line, --ink, --mute, --up, --down, --warn) so the new tab inherits both themes without a single hard-coded colour. .ex-card, .ex-cards, .ex-chip, .ex-btn, .ex-input already exist and are reused as-is. Everything below is additive — no existing selector is redefined. */ .ex-pf { display: flex; flex-direction: column; gap: 14px; padding: 14px 0; } .ex-pf .ex-empty { padding: 22px; border: 1px dashed var(--line); border-radius: 12px; color: var(--mute); max-width: 60ch; line-height: 1.5; } .ex-banner { padding: 10px 12px; border-radius: 10px; background: var(--warn); color: var(--brand-ink); font-size: 13px; line-height: 1.45; } /* ── form ─────────────────────────────────────────────────────────────── */ .ex-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .ex-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .ex-field .ex-input { width: 100%; } textarea.ex-input { resize: vertical; font: inherit; line-height: 1.45; } /* ── universe search results ──────────────────────────────────────────── */ .ex-results { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 10px; } .ex-results:empty { display: none; } .ex-result { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); } .ex-result:last-child { border-bottom: 0; } .ex-result:hover { background: var(--ghost); } /* ── holdings ─────────────────────────────────────────────────────────── */ .ex-holdings { display: flex; flex-direction: column; gap: 6px; } .ex-holding { display: grid; grid-template-columns: 92px 74px auto 96px 68px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; } .ex-input--qty { width: 70px; text-align: right; } @media (max-width: 780px) { .ex-holding { grid-template-columns: 1fr 1fr; row-gap: 6px; } .ex-result { grid-template-columns: 1fr auto; } } /* ── live readout ─────────────────────────────────────────────────────── */ .ex-readout { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } /* ── problems ───────────────────────────────────────────────────────────── Every failing rule is listed at once, never one at a time: fixing a basket one error per save is how a builder becomes unusable at 20 constituents. */ .ex-problems { border: 1px solid var(--down); border-radius: 10px; background: var(--down-dim); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .ex-problems__hd { font-weight: 600; font-size: 13px; } .ex-problem { font-size: 13px; line-height: 1.45; } .ex-actions { display: flex; gap: 10px; } /* ── status chips ───────────────────────────────────────────────────────── Status carries a WORD, never colour alone — same accessibility rule the P&L formatting follows. */ .ex-chip--draft { background: var(--ghost); color: var(--mute); } .ex-chip--pending_review { background: var(--warn); color: var(--brand-ink); } .ex-chip--live { background: var(--up-dim); color: var(--up); } .ex-chip--nav_held { background: var(--warn); color: var(--brand-ink); } .ex-chip--archived { background: var(--ghost); color: var(--mute); } .ex-chip--stopped { background: var(--down-dim); color: var(--down); } .ex-card__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-size: 13px; margin-top: 4px; } /* PF-BLOCK-START v2 */ /* ── Expert Portfolios ────────────────────────────────────────────────────── Appended to static/css/experts.css. Uses the existing tokens only — --panel, --panel-2, --line, --line-soft, --ink, --mute, --brand, --accent, --up, --down, --warn — so both themes work with no overrides. Design language, per the execution plan: * 15px base. The terminal runs 13.5px for monitoring; this is considered work and gets more air. * The expert's own words in a serif. Everything we compute stays in Inter or JetBrains Mono. You can tell at a glance which is which. * Figures in tabular mono so digits stop jittering as prices tick. * Violet means "this is you". Coral means "this needs attention". Two colours, each with exactly one job. */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap'); .ex-pf { /* display:block is load-bearing. The surrounding shell puts this element in a flex column, so without it .ex-pf inherits display:flex and its children become flex items -- which the browser then SHRINKS to fit the viewport. The identity card was squashed from 510px to 42px and .ex-card's overflow:hidden clipped the rest, so every form field vanished the moment the page got taller than the window. Measured in the browser, not guessed. */ display: block; font-size: 15px; line-height: 1.6; padding: 22px 24px 40px; overflow: auto; } .pf-serif { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.65; } /* ── headings and text ──────────────────────────────────────────────────── */ .pf-h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; } .pf-h2 { font-size: 18px; font-weight: 500; margin-bottom: 6px; } .pf-sub { color: var(--mute); font-size: 13px; } .pf-lede { color: var(--mute); max-width: 62ch; margin: 0 0 20px; } .pf-label{ font-size: 13px; color: var(--mute); } .pf-hint { font-size: 12.5px; color: var(--mute); } .pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .pf-banner { background: var(--warn); color: #1A1830; border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 18px; } .pf-note { background: var(--panel-2); color: var(--mute); border-radius: 10px; padding: 10px 12px; font-size: 13px; } /* ── teaching state ─────────────────────────────────────────────────────── */ .pf-teach { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; max-width: 720px; } .pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; } /* ── tiles ──────────────────────────────────────────────────────────────── */ .pf-tile { background: var(--panel-2); border-radius: 10px; padding: 14px 16px; } .pf-tile--wide { margin-bottom: 12px; } .pf-tile__k { font-size: 13px; color: var(--mute); } .pf-tile__v { font-size: 26px; font-weight: 500; line-height: 1.25; margin: 2px 0 4px; } .pf-tile__s { font-size: 12.5px; color: var(--mute); } /* ── cards ──────────────────────────────────────────────────────────────── */ .pf-cards { padding: 0; gap: 14px; } .pf-pad { padding: 20px 22px; margin-bottom: 18px; } .pf-card { padding: 18px 20px; cursor: pointer; transition: border-color .15s; } .pf-card:hover { border-color: var(--brand); } .pf-card__hd { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pf-card__t { font-size: 16px; font-weight: 500; } .pf-card__meta, .pf-card__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-top: 10px; font-size: 13.5px; } .pf-card__foot { border-top: 1px solid var(--line-soft); padding-top: 10px; } /* ── chips ──────────────────────────────────────────────────────────────── */ .pf-chip { background: var(--panel-2); color: var(--mute); border-radius: 999px; padding: 3px 10px; font-size: 12px; white-space: nowrap; } .pf-chip--size { background: var(--brand-dim); color: var(--brand); } .pf-chip--live { background: var(--up-dim); color: var(--up); } .pf-chip--draft { background: var(--panel-2); color: var(--mute); } .pf-chip--pending_review { background: var(--warn); color: #1A1830; } .pf-chip--nav_held { background: var(--warn); color: #1A1830; } .pf-chip--archived { background: var(--panel-2); color: var(--mute); } .pf-chip--stopped { background: var(--down-dim); color: var(--down); } /* ── form ───────────────────────────────────────────────────────────────── */ .pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; } .pf-field { display: flex; flex-direction: column; gap: 5px; } .pf-field .ex-input { width: 100%; } .pf-thesis { border-top: 1px solid var(--line-soft); padding-top: 18px; } .pf-prompt { margin-top: 12px; } .pf-prompt__q { font-size: 14px; margin-bottom: 5px; } .pf-prompt textarea { width: 100%; resize: vertical; } /* ── layout: holdings left, summary pinned right ────────────────────────── */ .pf-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } .pf-col { min-width: 0; } .pf-summary { position: sticky; top: 12px; } @media (max-width: 1080px) { .pf-split { grid-template-columns: minmax(0, 1fr); } .pf-summary { position: static; } } /* ── search, floating over content ──────────────────────────────────────── */ .pf-searchwrap { position: relative; margin-bottom: 14px; } .pf-search { width: 100%; font-size: 15px; } .pf-results { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: auto; max-height: 336px; } .pf-result { display: grid; grid-template-columns: minmax(0,1fr) 96px auto 78px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .pf-result:last-child { border-bottom: 0; } .pf-result:hover, .pf-result.is-hi { background: var(--panel-2); } .pf-result--note { display: block; color: var(--mute); font-size: 13px; cursor: default; } .pf-result__id { min-width: 0; display: flex; flex-direction: column; } .pf-result__id b { font-weight: 500; } .pf-result__id .pf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-result__px { text-align: right; font-size: 14px; } .pf-result__tags { display: flex; gap: 6px; } .pf-result__add { text-align: right; font-size: 13px; color: var(--brand); } /* ── holdings ───────────────────────────────────────────────────────────── */ .pf-holdings { display: flex; flex-direction: column; gap: 10px; } .pf-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 26px; color: var(--mute); max-width: 60ch; } .pf-hold { padding: 14px 16px; } .pf-hold.is-fresh { animation: pfIn .2s ease-out; } @keyframes pfIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } } .pf-hold__top { display: grid; grid-template-columns: minmax(0,1.4fr) 96px auto 108px 88px auto; align-items: center; gap: 12px; } .pf-hold__id { min-width: 0; display: flex; flex-direction: column; } .pf-hold__id b{ font-weight: 500; } .pf-hold__id .pf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-hold__px { text-align: right; font-size: 14px; } .pf-hold__val { text-align: right; font-size: 14px; font-weight: 500; } .pf-hold__w { min-width: 0; } .pf-hold__wv { font-size: 14px; font-weight: 500; } .pf-hold__wv.is-bad { color: var(--accent); } .pf-stepper { display: flex; align-items: center; gap: 5px; } .pf-step { padding: 6px 9px; line-height: 1; } .pf-qty { width: 62px; text-align: center; padding: 7px 6px; } .pf-rm { padding: 6px 10px; font-size: 13px; } .pf-why { width: 100%; margin-top: 10px; } .pf-rowerr { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--accent); color: var(--accent); font-size: 13px; border-radius: 0; } /* ── bars ───────────────────────────────────────────────────────────────── */ .pf-bar { height: 5px; background: var(--panel-2); border-radius: 3px; margin-top: 5px; overflow: hidden; } .pf-bar__f { height: 5px; background: var(--brand); border-radius: 3px; transition: width .15s ease-out; } .pf-bar__f.is-ok { background: var(--up); } .pf-bar__f.is-bad { background: var(--accent); } /* ── sector chart: Option A, sorted bars with a cap line ────────────────── */ .pf-chart { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .pf-chart__hd { font-size: 14px; font-weight: 500; margin-bottom: 10px; } .pf-chart__body { position: relative; } .pf-chart__legend { font-size: 12px; color: var(--mute); margin-top: 9px; } .pf-cap { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed var(--accent); opacity: .55; pointer-events: none; } .pf-srow { display: grid; grid-template-columns: 78px minmax(0,1fr) 46px; align-items: center; gap: 8px; margin-bottom: 6px; } .pf-srow:last-child { margin-bottom: 0; } .pf-srow__k { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-srow__t { height: 14px; background: var(--panel-2); border-radius: 3px; overflow: hidden; } .pf-srow__f { height: 14px; background: var(--brand); border-radius: 3px; transition: width .15s ease-out; } .pf-srow__f.is-near { background: var(--warn); } .pf-srow__f.is-over { background: var(--accent); } .pf-srow__v { font-size: 12.5px; text-align: right; } /* ── size bar ───────────────────────────────────────────────────────────── */ .pf-sizebar { display: flex; height: 20px; border-radius: 4px; overflow: hidden; } .pf-sizeseg { transition: width .15s ease-out; } .pf-sizeseg.is-large { background: var(--brand); } .pf-sizeseg.is-mid { background: var(--up); } .pf-sizeseg.is-small { background: var(--accent); } .pf-sizeseg.is-unclassified { background: var(--panel-2); } /* ── problems ───────────────────────────────────────────────────────────── */ .pf-problems { border: 1px solid var(--accent); background: var(--accent-dim); border-radius: 12px; padding: 12px 14px; margin-top: 12px; } .pf-problems__hd { font-weight: 500; font-size: 13.5px; margin-bottom: 5px; } .pf-problem { font-size: 13px; color: var(--ink); margin-top: 3px; } .pf-actions { margin-top: 20px; display: flex; gap: 12px; } /* ── primary button: one per screen ─────────────────────────────────────── */ .ex-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .ex-btn--primary:hover:not(:disabled) { filter: brightness(1.08); } .ex-btn--primary:disabled { opacity: .45; cursor: not-allowed; } /* ── phases 3, 4 and 6 ──────────────────────────────────────────────────── */ .pf-back { margin-bottom: 14px; padding: 5px 12px; font-size: 13px; } /* stepper */ .pf-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .pf-step { background: var(--panel-2); color: var(--mute); border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: default; } .pf-step.is-done { color: var(--ink); cursor: pointer; } .pf-step.is-on { background: var(--brand-dim); color: var(--brand); border-color: var(--brand); } .pf-step-btn { padding: 6px 9px; line-height: 1; } /* resume banner */ .pf-resume { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--brand-dim); border: 1px solid var(--brand); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } .pf-resume__acts { display: flex; gap: 8px; flex-shrink: 0; } /* compact table, used once an expert has several portfolios */ .pf-table { padding: 0; overflow: hidden; } .pf-trow { display: grid; grid-template-columns: minmax(0,2fr) 110px 90px 70px 100px; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .pf-trow--5 { grid-template-columns: minmax(0,2fr) 80px 100px 110px 90px; cursor: default; } .pf-trow:last-child { border-bottom: 0; } .pf-trow:hover:not(.pf-trow--hd) { background: var(--panel-2); } .pf-trow--hd { font-size: 12px; color: var(--mute); cursor: default; background: var(--panel-2); border-bottom: 1px solid var(--line); } .pf-trow--hd:hover { background: var(--panel-2); } .pf-num { text-align: right; } .pf-trow b { font-weight: 500; margin-right: 8px; } .is-up { color: var(--up); } .is-down { color: var(--down); } /* overlap */ .pf-overlap { padding: 16px 18px; margin-top: 14px; } .pf-overlap__bar { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; } .pf-overlap__bar .pf-bar { flex: 1; height: 8px; margin-top: 0; } .pf-overlap__bar .pf-bar__f { height: 8px; } /* detail */ .pf-detail__acts { display: flex; align-items: center; gap: 10px; } .pf-tabs { display: flex; gap: 4px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); } .pf-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mute); font: inherit; font-size: 14px; padding: 9px 14px; cursor: pointer; } .pf-tab:hover { color: var(--ink); } .pf-tab.is-on { color: var(--brand); border-bottom-color: var(--brand); } .pf-why-read { font-size: 14px; color: var(--mute); margin-top: 3px; } .pf-reason { margin-top: 8px; } .pf-updates { display: flex; flex-direction: column; gap: 12px; } /* NAV chart — SVG, no library, stays in theme */ .pf-nav { width: 100%; height: 180px; display: block; margin: 6px 0 4px; } .pf-nav__line { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; } .pf-nav__bm { fill: none; stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; } /* review step */ .pf-next { background: var(--panel-2); border-radius: 12px; padding: 14px 16px; margin-top: 16px; } /* An ETF must be visually distinct from a stock at every place it appears: search, the holding row, review, the detail page and the summary. An expert reading their own portfolio back months later should not have to remember. */ .pf-chip--etf { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); font-weight: 600; letter-spacing: .03em; margin-left: 6px; } .pf-sumrow__sym .pf-chip--etf { font-size: 9px; padding: 0 4px; } /* ── Beta marker ──────────────────────────────────────────────────────────── */ .ex-beta { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; /* --brand-ink is #FFFFFF, for text ON solid brand. On a 10% tint it is white-on-white: the chip rendered as an empty pill. The brand colour itself is the readable one here. */ color: var(--brand); background: var(--brand-dim); border: 1px solid var(--brand); border-radius: 999px; vertical-align: middle; font-family: system-ui, sans-serif; } /* App-level: the whole expert experience is in beta, not one tab of it. */ .ex-betabar { margin: 0 0 16px; padding: 9px 12px; font-size: 13px; color: var(--mute); background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--brand); border-radius: 6px; } /* ── Rebalance blocked: read-only, no builder ─────────────────────────────── */ .pf-blocked { border-left: 3px solid var(--warn); } .pf-blocked__hd { font-weight: 600; margin-bottom: 6px; } .pf-blocked__row { font-size: 14px; color: var(--ink); margin: 3px 0; } .pf-blocked__foot { margin-top: 8px; } .pf-holdings--read .pf-hold--read { opacity: .72; } .pf-holdings--read .pf-hold__id .pf-sub { display: block; margin-top: 2px; } /* ── See-all summary ──────────────────────────────────────────────────────── */ .pf-seeall { margin-right: auto; } .pf-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; padding: 24px; } .pf-modal__panel { width: min(860px, 100%); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 18px 20px; } .pf-modal__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pf-modal__t { font-size: 19px; font-weight: 600; } .pf-sumhead { display: grid; grid-template-columns: 1fr 62px 62px 84px; gap: 8px; margin-top: 14px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); } .pf-sumhead .pf-num { text-align: right; } .pf-sumgrid { display: grid; grid-template-columns: 1fr; } .pf-sumgrid.is-two { grid-template-columns: 1fr 1fr; column-gap: 26px; } .pf-sumrow { display: grid; grid-template-columns: 1fr 62px 62px 84px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .pf-sumrow__sym { font-weight: 600; } .pf-sumrow__qty, .pf-sumrow__w { text-align: right; color: var(--mute); } .pf-sumrow.is-bad .pf-sumrow__w { color: var(--down); font-weight: 600; } .pf-sumbar { height: 5px; background: var(--line-soft); border-radius: 3px; overflow: hidden; } .pf-sumbar__f { height: 100%; background: var(--brand); } .pf-sumrow.is-bad .pf-sumbar__f { background: var(--down); } .pf-modal__ft { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; } .pf-modal__warn { color: var(--down); font-weight: 600; } .pf-modal__ok { color: var(--up); font-weight: 600; } @media (max-width: 720px) { .pf-sumgrid.is-two { grid-template-columns: 1fr; } } /* ── Admin review queue ───────────────────────────────────────────────────── */ .pf-review__wrap { margin-bottom: 22px; } .pf-review__hdr { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); font-weight: 600; margin-bottom: 8px; } .pf-review { border-left: 3px solid var(--warn); margin-bottom: 12px; padding: 14px 16px; } .pf-review__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .pf-review__t { font-size: 17px; font-weight: 600; } .pf-review__acts { display: flex; gap: 8px; flex: 0 0 auto; } .pf-review__why { margin: 10px 0 4px; padding: 9px 11px; font-size: 14px; line-height: 1.5; background: var(--panel-2); border-radius: 6px; color: var(--ink); white-space: pre-wrap; } .pf-review__rows { margin-top: 8px; border-top: 1px solid var(--line-soft); } .pf-review__row { display: grid; grid-template-columns: 110px 54px minmax(120px, 190px) 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .pf-review__row .pf-num { text-align: right; color: var(--mute); } @media (max-width: 900px) { .pf-review__row { grid-template-columns: 1fr auto; } .pf-review__hd { flex-direction: column; } } /* A name whose single share cannot fit the basket yet */ .pf-result.is-blocked { opacity: .55; } .pf-result.is-blocked .pf-result__add { color: var(--mute); } .pf-need { font-size: 11px; color: var(--warn); white-space: nowrap; } /* ── Admin: every portfolio at a glance ───────────────────────────────────── */ /* ── expert performance view ───────────────────────────────────────────── */ .pf-wins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .pf-win__k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .pf-win__v { font-size: 20px; font-weight: 500; line-height: 1.3; } .pf-rng { margin: 4px 0 12px; } .pf-perf { width: 100%; height: 210px; display: block; } .pf-base { stroke: var(--line); stroke-dasharray: 3 3; } .pf-tk { font-size: 9.5px; fill: var(--mute); font-family: 'JetBrains Mono', monospace; } .pf-ln { fill: none; stroke-width: 1.5; } .pf-ln--me { stroke: var(--brand); stroke-width: 2.4; } .pf-ln--n50 { stroke: var(--mute); stroke-dasharray: 2 3; } .pf-ln--mid { stroke: var(--up); stroke-dasharray: 5 4; } .pf-ln--sml { stroke: var(--warn); stroke-dasharray: 5 4; } .pf-hrow { display: grid; gap: 10px; padding: 9px 0; align-items: baseline; grid-template-columns: minmax(0,1.5fr) 84px 70px 78px 78px 96px 76px 96px; border-bottom: 1px solid var(--line-soft); } .pf-hrow:last-of-type { border-bottom: 0; } .pf-hrow--head { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); } .pf-hrow > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pf-hrow .pf-num { text-align: right; } @media (max-width: 900px) { .pf-wins { grid-template-columns: repeat(2, 1fr); } .pf-hrow { grid-template-columns: minmax(0,1fr) 78px 88px; } .pf-hrow > :nth-child(n+4) { display: none; } } /* ── admin console ─────────────────────────────────────────────────────── */ .pf-ahdr { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 14px; } .pf-ahdr__t { font-size: 20px; font-weight: 680; letter-spacing: -0.01em; } .pf-atiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; } .pf-atile { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color .12s, background .12s; } .pf-atile:hover { border-color: var(--brand); } .pf-atile.is-on { border-color: var(--brand); background: var(--panel-2); } .pf-atile__n { font-size: 26px; font-weight: 700; line-height: 1.1; } .pf-atile__l { font-size: 12px; color: var(--mute); margin-top: 2px; } .pf-atile--warn .pf-atile__n { color: var(--warn); } .pf-atile--good .pf-atile__n { color: var(--up); } .pf-afilter { margin: -12px 0 16px; } .pf-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand); text-decoration: underline; font: inherit; } .pf-asec { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 22px 0 8px; } .pf-arow { border-bottom: 1px solid var(--line); } .pf-arow:last-child { border-bottom: 0; } .pf-arow__hd { width: 100%; display: grid; align-items: center; gap: 12px; grid-template-columns: 14px minmax(0, 2fr) minmax(0, 1.6fr) auto auto 88px auto; padding: 11px 4px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; } .pf-arow__hd:hover { background: var(--panel-2); } .pf-arow__hd > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pf-arow__caret { color: var(--mute); } .pf-arow__t { font-weight: 620; } .pf-arow.is-open .pf-arow__hd { background: var(--panel-2); } .pf-arow__body { padding: 6px 4px 18px 26px; } .pf-adetail__meta { margin: 6px 0 12px; } .pf-ctable { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .pf-crow { display: grid; gap: 12px; padding: 9px 12px; grid-template-columns: 110px 64px 72px 150px minmax(0, 1fr); border-bottom: 1px solid var(--line); align-items: baseline; } .pf-crow:last-child { border-bottom: 0; } .pf-crow--head { background: var(--panel-2); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); } .pf-crow .pf-num { text-align: right; } .pf-aempty { padding: 40px 4px; } .pf-aempty__t { font-size: 16px; font-weight: 650; margin-bottom: 4px; } @media (max-width: 900px) { .pf-atiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-arow__hd { grid-template-columns: 14px minmax(0, 1fr) auto; } .pf-arow__hd > :nth-child(n+4) { display: none; } .pf-crow { grid-template-columns: 90px 52px 62px; } .pf-crow > :nth-child(n+4) { display: none; } } .pf-allhdr { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; } .pf-alltable { padding: 4px 14px 10px; margin-bottom: 22px; } .pf-allrow { display: grid; grid-template-columns: minmax(120px,1.2fr) minmax(140px,1.6fr) 92px 92px 56px 84px 92px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .pf-allrow--head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); } .pf-allrow .pf-num { text-align: right; } /* an expert can type a 160-char title; it must not blow the grid open */ .pf-allrow > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pf-allrow.is-pending { background: var(--warn-dim, var(--panel-2)); } @media (max-width: 900px) { .pf-allrow { grid-template-columns: 1fr auto; } .pf-allrow--head { display: none; } } /* PF-BLOCK-END */