:root { --bg: #faf9f5; --surface: #ffffff; --ink: #1f1e1c; --ink-soft: #6b6862; --ink-faint: #9a968d; --line: #e8e4d9; --line-strong: #ddd8ca; --clay: #c96442; --clay-hover: #b5573a; --clay-soft: #f3e4dd; --buy: #3d7a5a; --sell: #b5573a; --radius: 12px; --serif: "Tiempos Text", Georgia, "Times New Roman", serif; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* Login gate (Step 11). The dashboard chrome stays hidden until Clerk confirms a signed-in user (app.js adds .signed-in to ), so nothing flashes before auth resolves. The gate overlays everything until then. */ body:not(.signed-in) .topbar, body:not(.signed-in) .tabs, body:not(.signed-in) main { display: none; } body.signed-in .auth-gate { display: none; } .auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--bg); } .auth-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 420px; } .auth-card .mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--clay), #e08a6a); } .auth-card h2 { margin: 6px 0 0; font-size: 26px; } .auth-msg { color: var(--ink-soft); margin: 0 0 8px; } #signInMount { min-height: 1px; } .whoami { color: var(--ink-soft); font-size: 13px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; } /* Top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; } .brand h1 { font-size: 20px; margin: 0; } .mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--clay), #e08a6a); display: inline-block; } .account-switch { display: flex; align-items: center; gap: 10px; } .account-switch label { color: var(--ink-soft); font-size: 13px; } select, input[type="date"], input[type="text"] { font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; outline: none; } select:focus, input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); } /* Buttons */ .btn { font-family: var(--sans); font-size: 14px; font-weight: 500; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; } .btn.primary { background: var(--clay); color: #fff; } .btn.primary:hover { background: var(--clay-hover); } .btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn.ghost:hover { background: #f0ede4; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.primary:disabled:hover { background: var(--clay); } .demo-toggle { display: inline-flex; align-items: center; gap: 6px; } .demo-toggle svg { color: var(--ink-faint); } .demo-toggle[aria-pressed="true"] { background: var(--clay-soft); border-color: var(--clay); color: var(--clay-hover); } .demo-toggle[aria-pressed="true"]:hover { background: var(--clay-soft); } .demo-toggle[aria-pressed="true"] svg { color: var(--clay-hover); } /* Tabs */ .tabs { display: flex; gap: 4px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--bg); } .tab { border: none; background: none; font-family: var(--sans); font-size: 15px; color: var(--ink-soft); padding: 14px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--ink); } .tab.active { color: var(--ink); border-bottom-color: var(--clay); font-weight: 500; } main { max-width: 1040px; margin: 0 auto; padding: 28px 32px 64px; } .screen { display: none; } .screen.active { display: block; } /* Summary card */ .summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.02); } .summary-label { color: var(--ink-soft); font-size: 14px; display: flex; align-items: center; gap: 10px; } .summary-value { font-family: var(--serif); font-size: 38px; margin-top: 6px; font-variant-numeric: tabular-nums; } .summary-sub { color: var(--ink-faint); font-size: 13px; margin-top: 6px; } .scope-pill { background: var(--clay-soft); color: var(--clay-hover); font-size: 12px; padding: 2px 9px; border-radius: 20px; font-weight: 500; } /* Holdings toolbar: Viewing picker (left) + Filter button & chips (right) */ .holdings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .txn-toolbar { margin-bottom: 18px; } .who { display: flex; align-items: center; gap: 10px; } .who-label { font-size: 13px; color: var(--ink-soft); } /* Custom "Viewing" dropdown (the prominent primary control) */ .scope-dd { position: relative; } .scope-trigger { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--clay); background: var(--clay-soft); color: var(--clay-hover); border-radius: 10px; padding: 9px 13px; line-height: 1; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; } .scope-trigger:hover { background: #efd7cd; } .scope-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--clay-soft); } .scope-ic { display: inline-flex; } .scope-ic svg { display: block; } .scope-caret { opacity: .75; } .scope-text { white-space: nowrap; } .scope-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; min-width: 250px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; max-height: 64vh; overflow-y: auto; } .scope-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 9px 10px 4px; } .scope-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px 10px; font-family: var(--sans); font-size: 14px; color: var(--ink); cursor: pointer; } .scope-opt:hover { background: var(--bg); } .scope-opt.sel { background: var(--clay-soft); color: var(--clay-hover); font-weight: 500; } .scope-opt.indent { padding-left: 32px; } .scope-opt .scope-ic { color: var(--ink-faint); } .scope-opt.sel .scope-ic { color: var(--clay-hover); } .scope-ctx { color: var(--ink-faint); margin-left: 7px; } .filter-zone { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-btn { display: inline-flex; align-items: center; gap: 7px; } .filter-btn svg { color: var(--clay); } .filter-count { background: var(--clay); color: #fff; font-size: 11px; font-weight: 600; min-width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 20px; padding: 0 5px; } .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 8px 11px; line-height: 1; } .chip:hover { border-color: var(--clay); color: var(--clay-hover); } .chip .x { font-size: 15px; line-height: 1; color: var(--ink-faint); } .chip:hover .x { color: var(--clay); } .filter-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 16px; width: 240px; display: flex; flex-direction: column; gap: 12px; } .filter-pop .field { display: flex; flex-direction: column; gap: 5px; } .filter-pop .field label { font-size: 12px; color: var(--ink-soft); } .filter-pop select { width: 100%; } .btn.block { width: 100%; justify-content: center; } /* Context ladder under the hero */ .ladder { margin-top: 20px; } .ladder-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; } .ladder-line { flex: 1; height: 1px; background: var(--line); } .ladder-hint { display: inline-flex; align-items: center; gap: 4px; } .ladder-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--clay); border-radius: 8px; padding: 10px 13px; margin-top: 8px; cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--ink); text-align: left; transition: background .12s, border-color .12s; } .ladder-row:hover { background: var(--clay-soft); border-left-color: var(--clay-hover); } .ladder-name { color: var(--ink-soft); } .ladder-amt { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; font-weight: 500; } .ladder-amt .zoom { color: var(--clay); font-size: 13px; } /* Sort control in the panel head */ .sort-control { margin-left: auto; display: flex; align-items: center; gap: 8px; } .sort-control label { font-size: 12px; color: var(--ink-soft); } /* Families dialog */ .family-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .family-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .family-row b { font-weight: 500; } .family-create { border-top: 1px solid var(--line); padding-top: 16px; } .check-list { display: flex; flex-wrap: wrap; gap: 8px 16px; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .check input { accent-color: var(--clay); } .btn.small { padding: 5px 10px; font-size: 13px; } /* Panels */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.02); } .panel-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .panel-head h2 { font-size: 17px; margin: 0; } .panel-head-left { display: flex; align-items: baseline; gap: 12px; } .count { color: var(--ink-faint); font-size: 13px; } /* Tables */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { text-align: left; color: var(--ink-soft); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 11px 22px; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 12px 22px; border-bottom: 1px solid #f3f0e8; white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: #faf8f2; } .num { text-align: right; font-variant-numeric: tabular-nums; } td.num { font-variant-numeric: tabular-nums; } .instrument-name { font-weight: 500; } .muted { color: var(--ink-faint); } .cat { font-size: 12px; color: var(--ink-soft); background: #f1efe7; padding: 2px 8px; border-radius: 6px; } .badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px; } .badge.buy { color: var(--buy); background: #e7f1ea; } .badge.sell { color: var(--sell); background: #f6e6e0; } /* Manual / edited provenance tag on a transaction row */ .src-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--clay); background: var(--clay-soft); padding: 1px 6px; border-radius: 5px; margin-left: 8px; vertical-align: middle; } /* Per-row edit / delete actions */ .actions-col { text-align: right; width: 1%; white-space: nowrap; } .row-btn { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; margin-left: 6px; } .row-btn:hover { background: #f0ede4; color: var(--ink); } .row-btn.danger:hover { color: var(--sell); border-color: var(--sell); background: #f6e6e0; } /* Side-by-side fields in a dialog (type / qty / price) */ .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .empty { padding: 28px 22px; color: var(--ink-faint); text-align: center; } /* Upload */ .upload { padding: 30px 22px; text-align: center; } .upload.drag { background: var(--clay-soft); } .upload-target { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; } .upload-target b { color: var(--ink); } .upload-hint { font-size: 13px; color: var(--ink-faint); margin: 12px 0 0; } .import-result { margin: 0 22px 22px; padding: 14px 16px; border-radius: 10px; background: #f3f7f3; border: 1px solid #d9e7dd; font-size: 14px; } .import-result.warn { background: #fdf6ec; border-color: #f0e2c4; } .import-result h4 { margin: 0 0 6px; font-family: var(--sans); font-size: 14px; } .import-result ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); } /* Filters */ .filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px 22px; border-bottom: 1px solid var(--line); } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 12px; color: var(--ink-soft); } /* Modal */ [hidden] { display: none !important; } .modal-backdrop { position: fixed; inset: 0; background: rgba(31,30,28,.34); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal { background: var(--surface); border-radius: var(--radius); padding: 26px; width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 12px 40px rgba(0,0,0,.18); } .modal h3 { margin: 0 0 18px; font-size: 19px; } .modal .field { margin-bottom: 14px; } .modal .field input { width: 100%; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .modal.wide { width: 540px; } .modal .muted { margin: 0 0 16px; font-size: 13px; line-height: 1.5; } /* Column-mapping grid */ .map-grid { display: grid; gap: 10px 14px; max-height: 50vh; overflow-y: auto; padding-right: 4px; margin-bottom: 18px; } .map-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; } .map-row label { font-size: 13px; color: var(--ink-soft); } .map-row select { width: 100%; } .map-row .req, .map-row .rec { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; } .map-row .req { background: #f6e2db; color: var(--accent); } .map-row .rec { background: #eef0e8; color: #6b7257; } /* Warning bullets inside the import-result banner */ .import-result .warn-list { margin: 8px 0 0; padding-left: 18px; } .import-result .warn-list li { margin: 3px 0; } /* Toast */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.22); }