/* THE COMPONENT KIT, plus the Due diligence screens that first needed it: the tab (#ddView), the company-page section (#foSecDD) and the launcher (#ddModal). Components (.ddBtn, .ddChip, .ddSelect, .ddInput, .ddSegTabs, .ddCard, .ddTile, .ddChip, .ddFilter, .ddSkel, .commit) are written ONCE here; 26.0 retired the parallel kits (.iHoverBtn, .fbChip, .badge with its seven .status-* hues, .filterBar, .foInline, .select.foMini, the per-view .commit and select skins) in favour of them. The tokens are declared on `body`, not per host. They used to sit on `.ddBody, #ddModal` here and be copied again in founders.css, which is why the kit could only be used on the two screens that declared them: a .ddBtn anywhere else drew with no surface, border or shadow. The palette this reads from (--surface, --grid, --ink …) is itself declared on `body` in styles.css, and the dark theme redefines it there, so a body-level var() re-resolves per theme exactly as before. */ body { --ddSurface: var(--surface, var(--card-bg)); --ddGrid: var(--grid, var(--card-border)); --ddInk: var(--ink, var(--text)); --ddDim: var(--ink-dim, var(--text-muted)); --ddFaint: var(--ink-faint, var(--text-muted)); --ddAction: var(--action, #E8843C); --ddWon: var(--won, #1E8C73); --ddWarn: var(--warn, #C0392B); --ddLive: var(--live, #0E8AA0); --ddHard: var(--hard, #6E4FE0); --ddAmber: #C58A00; --ddField: var(--field, var(--input-bg, #fff)); --ddShadow: 0 1px 2px rgba(22, 40, 74, .06); /* The amber TEXT tone. --ddAmber is the fill (the HOLD verdict's plate); this is the colour amber words are drawn in, and it is the one kit tone that needs a value per theme: the light #A06E00 measures 4.09:1 on a dark card, under the 4.5 floor its 10.5px chips and 14px tile values need. */ --ddAmberText: #A06E00; } [data-theme="dark"] body { --ddAmberText: #E4C677; } .ddBody, #ddModal { font-size: 13px; color: var(--ddInk); } .ddSpacer { flex: 1; } .ddMeta { color: var(--ddDim); font-size: 12px; } .ddEyebrow, .ddSubHd, .ddKv .k, .ddLabRow .l, .ddLedger th, .ddClaim .n { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); } /* ---- the control kit: 32px buttons, selects and inputs; a menu; segmented controls ---- */ .ddBtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--ddGrid); background: var(--ddSurface); color: var(--ddInk); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: 0; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--ddShadow); transition: background .12s, border-color .12s, color .12s; } .ddBtn:hover { border-color: var(--ddDim); color: var(--ddInk); background: var(--ddSurface); text-decoration: none; } .ddBtn:disabled { opacity: .45; cursor: not-allowed; } /* The in-pane primary: navy in light, the live teal in dark. It used to be painted on var(--ddInk), which IS the near-white text colour under the dark theme, so white-on-white ate the label — the company page carried its own #slideOverPanel override for exactly that. The kit is app-wide now, so the fix belongs here, once, and the colours are named rather than derived. */ /* Astra 4b: the pane primary is the ONE teal a screen spends (--teal, its own literal in each token block). It was navy — the same colour as the rail and the ink — so "the action" and "the chrome" read identically. The page head's orange commit is untouched: that is the other, louder primary. */ .ddBtn.primary { background: var(--teal); border-color: var(--teal); color: var(--onTeal); font-weight: 600; height: 32px; padding: 0 12px; border-radius: 8px; box-shadow: var(--ddShadow); transform: none; filter: none; } .ddBtn.primary::after { content: none; } .ddBtn.primary:hover, .ddBtn.primary:active { background: #1a8574; border-color: #1a8574; color: var(--onTeal); transform: none; box-shadow: var(--ddShadow); } [data-theme="dark"] .ddBtn.primary { background: var(--teal); border-color: var(--teal); color: var(--onTeal); } [data-theme="dark"] .ddBtn.primary:hover, [data-theme="dark"] .ddBtn.primary:active { background: #9edcc7; border-color: #9edcc7; color: var(--onTeal); } .ddBtn.primary:disabled { opacity: .45; filter: none; box-shadow: none; } .ddBtn.ghost { background: transparent; border-color: transparent; color: var(--ddDim); box-shadow: none; } .ddBtn.ghost:hover { background: var(--ddSurface); border-color: var(--ddGrid); color: var(--ddInk); } .ddBtn.ghost.warn:hover { color: var(--ddWarn); } .ddBtn.sm { height: 26px; padding: 0 8px; font-size: 11.5px; } .ddIco { display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px; } .ddIco svg { width: 14px; height: 14px; display: block; } .ddIco.chev { width: 12px; height: 12px; flex-basis: 12px; margin-left: 2px; opacity: .7; } .ddIco.chev svg { width: 12px; height: 12px; } .ddActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .ddSelect { font: inherit; font-size: 12.5px; height: 32px; box-sizing: border-box; padding: 4px 26px 4px 10px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516187' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") no-repeat right 8px center / 12px; color: var(--ddInk); appearance: none; cursor: pointer; box-shadow: var(--ddShadow); } .ddSelect.sm { height: 26px; font-size: 11.5px; padding: 2px 22px 2px 8px; } /* The chevron is a data URI, so its stroke cannot be a token. Dark repaints it by hand at --ink-faint; light keeps the kit's own slate. */ [data-theme="dark"] .ddSelect { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23abb8af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); } .ddInput { font: inherit; font-size: 12.5px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField); color: var(--ddInk); box-shadow: var(--ddShadow); width: 120px; } .ddInput.num { font-variant-numeric: tabular-nums; } .ddInput:focus { outline: none; border-color: var(--ddAction); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); } /* the Download menu */ .ddMenuWrap { position: relative; display: inline-block; } .ddMenu { position: absolute; top: 36px; right: 0; min-width: 200px; z-index: 30; background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(22, 40, 74, .3); padding: 6px; box-sizing: border-box; } .ddMenuItem { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ddInk); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; } .ddMenuItem:hover { background: var(--hover, rgba(22, 40, 74, .05)); color: var(--ddInk); text-decoration: none; } .ddMenuItem .ddIco { color: var(--ddDim); } /* segmented controls: the tabs (tinted track, raised thumb) and the small in-panel pickers */ .ddSegTabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin: 4px 0 12px; background: var(--hover, rgba(22, 40, 74, .06)); border: 1px solid var(--ddGrid); border-radius: 9px; box-shadow: none; } .ddSegTabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ddDim); cursor: pointer; transition: color .12s, background .12s; } .ddSegTabs button:hover { color: var(--ddInk); } .ddSegTabs button.on { background: var(--teal); color: var(--onTeal); font-weight: 600; border-color: var(--teal); box-shadow: none; } .ddSegTabs button:focus-visible { outline: 2px solid var(--ddLive); outline-offset: 2px; } .ddSeg2 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; background: var(--hover, rgba(22, 40, 74, .06)); border-radius: 8px; box-sizing: border-box; min-height: 32px; } .ddSeg2 button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 8px; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ddDim); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; } .ddSeg2 button:hover { color: var(--ddInk); } .ddSeg2 button.on { background: var(--ddSurface); color: var(--ddInk); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 40, 74, .08); } .ddSeg2 .x { display: inline-block; font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 4px; color: var(--ddFaint); } .ddSeg2 .x:hover { color: var(--ddWarn); background: color-mix(in srgb, var(--ddWarn) 12%, transparent); } /* ---- chips, cards, skeletons ------------------------------------------------- */ .ddChip { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 1px 7px; border-radius: 8px; border: 1px solid var(--ddGrid); color: var(--ddDim); white-space: nowrap; vertical-align: middle; line-height: 16px; } .ddChip.ok { color: var(--ddWon); border-color: color-mix(in srgb, var(--ddWon) 45%, transparent); background: color-mix(in srgb, var(--ddWon) 9%, transparent); } .ddChip.bad { color: var(--ddWarn); border-color: color-mix(in srgb, var(--ddWarn) 45%, transparent); background: color-mix(in srgb, var(--ddWarn) 9%, transparent); } .ddChip.mid { color: var(--ddAmberText); border-color: rgba(197, 138, 0, .45); background: rgba(197, 138, 0, .09); } .ddChip.info { color: var(--ddLive); border-color: color-mix(in srgb, var(--ddLive) 45%, transparent); background: color-mix(in srgb, var(--ddLive) 9%, transparent); } .ddChip.hard { color: var(--ddHard); border-color: color-mix(in srgb, var(--ddHard) 45%, transparent); background: color-mix(in srgb, var(--ddHard) 9%, transparent); } .ddChips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .ddVerdict { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 1px 8px; border-radius: 8px; margin-right: 6px; vertical-align: middle; color: var(--onChip); background: var(--ddDim); } .ddVerdict.INVEST { background: var(--ddWon); } .ddVerdict.PASS { background: var(--ddWarn); } .ddVerdict.HOLD { background: var(--ddAmber); } /* On a dark ground the won/warn plates lighten, so the chip ink flips with them. HOLD rides --onChip with the base rule: white on amber is 3.0:1 and light is not this release's to change, but dark's ink takes it to 5.5:1. */ [data-theme="dark"] .ddVerdict.INVEST, [data-theme="dark"] .ddVerdict.PASS { color: var(--onWon); } .ddCard { border: 1px solid var(--ddGrid); border-radius: 10px; padding: 12px 14px; background: var(--ddSurface); box-shadow: var(--ddShadow); margin: 8px 0; } .ddSkel { position: relative; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--ddInk) 8%, transparent); animation: ddSkelPulse 1.4s ease-in-out infinite; } .ddSkel.line { height: 12px; margin: 7px 0; } .ddSkel.btn { display: inline-block; width: 110px; height: 32px; border-radius: 8px; margin-right: 8px; } .ddSkel.tall { height: calc(100vh - 360px); min-height: 360px; border-radius: 10px; margin-top: 8px; } .ddRowSkel { pointer-events: none; } .ddRowSkel .ddSkel { margin: 4px 0; } .ddTabsSkel { gap: 14px; padding: 8px 10px; } .ddTabsSkel .ddSkel { margin: 0; } .ddDeal .ddTile .ddSkel { margin: 4px 0; } @keyframes ddSkelPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } @keyframes ddPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* ---- the tab layout ------------------------------------------------------------ */ .ddTab { padding: 0 0 24px; } .ddHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ddGrid); } .ddTitle { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .ddTitle h1 { margin: 0; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.02em; color: var(--ddInk); } .ddTitle .crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--ddFaint); cursor: pointer; align-self: center; } .ddTitle .crumb:hover { color: var(--ddInk); } .ddTitle .crumb .go-arrow { color: var(--ddAction); } .ddEyebrow { letter-spacing: .15em; } .ddSplit { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; } .ddListPane { position: sticky; top: 12px; } .ddListSearch { width: 100%; box-sizing: border-box; margin-bottom: 8px; } .ddFundLine { margin: 0 0 8px; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ddRow { padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .ddRow:hover { background: var(--hover, rgba(0, 0, 0, .04)); } .ddRow.on { background: var(--ddSurface); border-color: var(--ddGrid); box-shadow: var(--ddShadow); } .ddRowName { font-weight: 600; font-size: 13px; color: var(--ddInk); } .ddRowSub { font-size: 11.5px; color: var(--ddDim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ddRowSub.live { color: var(--ddAction); } .ddRowSub.queued { color: var(--ddLive); } .ddRowSub.warn { color: var(--ddWarn); } .ddListEmpty { padding: 10px; white-space: normal; } .ddPane { min-height: 60vh; min-width: 0; container-type: inline-size; } .ddPaneHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ddPaneMain { min-width: 0; flex: 1; } .ddPaneActs { display: flex; align-items: center; gap: 8px; flex: none; } .ddPaneName { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .ddPaneName a { color: inherit; text-decoration: none; cursor: pointer; } .ddPaneName a:hover { text-decoration: underline; } .ddPaneRec { display: block; margin: 6px 0; font-size: 13px; line-height: 1.5; } /* Claude's call as one sentence: whose call it is, the verdict chip, the sentence, Claude's confidence */ .ddRecLine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; font-size: 13px; line-height: 1.45; } .ddRecLine .ddVerdict { margin-right: 0; } .ddRecText { min-width: 0; } .ddCoHead .ddRecLine { margin: 4px 0 8px; } /* "Claude's call", in the tile label's type, so the verdict never reads as the GPs' decision */ .ddRecWho { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddDim); white-space: nowrap; } .ddPaneRec .ddRecWho { margin-right: 6px; } .ddRecWhy { display: block; font-size: 12px; color: var(--ddDim); margin: 2px 0; } /* what Claude's confidence means, as text (a tooltip never shows on touch) */ .ddRecDef { display: block; font-size: 11.5px; color: var(--ddFaint, var(--ddDim)); margin: 0 0 4px; font-style: italic; } /* the pane head's copy of it: only where nothing can hover (a phone, a tablet) or the window is phone-narrow; a mouse gets the chip's tip */ .ddRecDef.ddTouchDef { display: none; flex-basis: 100%; margin: 0; } @media (hover: none), (max-width: 640px) { .ddRecDef.ddTouchDef { display: block; } } /* the deal strip: six tiles, the same fields on every company */ .ddDeal { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; } .ddTile { flex: 1 1 128px; min-width: 128px; box-sizing: border-box; background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; padding: 10px 12px; box-shadow: var(--ddShadow); } .ddTile .k { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddDim); margin-bottom: 4px; white-space: nowrap; } .ddTile .v { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ddTile .s { font-size: 11px; color: var(--ddDim); margin-top: 2px; min-height: 14px; line-height: 1.3; } .ddTile .v.empty { color: var(--ddFaint); font-weight: 500; font-size: 14px; line-height: 22px; } .ddTile.ok { border-color: color-mix(in srgb, var(--ddWon) 50%, transparent); background: color-mix(in srgb, var(--ddWon) 6%, var(--ddSurface)); } .ddTile.ok .v { color: var(--ddWon); } .ddTile.mid { border-color: rgba(197, 138, 0, .5); background: rgba(197, 138, 0, .06); } .ddTile.mid .v { color: var(--ddAmberText); } .ddTile.bad { border-color: color-mix(in srgb, var(--ddWarn) 50%, transparent); background: color-mix(in srgb, var(--ddWarn) 6%, var(--ddSurface)); } .ddTile.bad .v { color: var(--ddWarn); } .ddTile.hl { border-color: color-mix(in srgb, var(--ddAction) 50%, transparent); background: color-mix(in srgb, var(--ddAction) 6%, var(--ddSurface)); } .ddPaneRec .ddRec { font-weight: 500; line-height: 1.4; } .ddRec { font-weight: 600; } .ddProv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ddDim); margin-top: 2px; min-height: 16px; } .ddPresence { font-size: 11.5px; color: var(--ddDim); font-weight: normal; } .ddPresence b { color: var(--ddHard); } .ddCoHead { margin: 4px 0 8px; } .ddOff { color: var(--ddDim); font-size: 12px; padding: 6px 0; } .ddEmpty { color: var(--ddDim); font-size: 13px; padding: 44px 0; text-align: center; } .ddEmptyT { font-size: 14px; color: var(--ddInk); margin-bottom: 14px; } .ddEmptyBtns { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } .ddEmptyBtns:empty { display: none; } .ddNote { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ddDim); margin: 0 0 8px; flex-wrap: wrap; } /* run strip */ .ddStrip { display: flex; align-items: center; gap: 12px; font-size: 12.5px; padding: 8px 12px; border: 1px solid var(--ddGrid); border-radius: 10px; background: var(--ddSurface); box-shadow: var(--ddShadow); margin: 6px 0 10px; } .ddStripPhase { font-weight: 600; } .ddStrip .ddBar { flex: 0 0 120px; } .ddStrip .ddStripLast { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddBar { height: 4px; background: var(--ddGrid); border-radius: 2px; overflow: hidden; } .ddBar > span { display: block; height: 100%; background: var(--ddAction); transition: width .6s; } .ddDot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--ddFaint); } .ddDot.matt { background: var(--ddLive); } .ddDot.shevy { background: var(--ddHard); } .ddDot.claude { background: var(--ddFaint); } .ddDot.live { background: var(--ddLive); } .ddDot.run { background: var(--ddAction); animation: ddPulse 1.2s infinite; } /* tab badges (the tabs themselves are .ddSegTabs above) */ .ddBadge { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 14px; padding: 0 6px; border-radius: 8px; background: var(--ddAction); color: #fff; } .ddCount { display: inline-block; font-size: 10.5px; line-height: 16px; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 8px; background: color-mix(in srgb, var(--ddInk) 8%, transparent); color: var(--ddDim); } .ddPdfTall { width: 100%; height: calc(100vh - 300px); min-height: 480px; border: 1px solid var(--ddGrid); border-radius: 10px; background: #fff; } .ddCoPdf { width: 100%; height: 560px; border: 1px solid var(--ddGrid); border-radius: 10px; background: #fff; margin-top: 6px; } /* ---- Sections: the outline on the left, cards with Ask Claude / Edit on the right ---- */ .ddSecSplit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; } .ddSecSplit > * { min-width: 0; } /* a narrow pane (the window shrunk, or the company page open over the tab): no outline, one column, the chart and its notes stacked */ .ddOutline { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ddDim); max-height: calc(100vh - 24px); overflow: auto; } .ddOutlineGroup { display: flex; gap: 6px; align-items: baseline; padding: 8px 10px 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); } .ddOutlineItem { display: flex; gap: 6px; align-items: baseline; text-align: left; background: none; border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; padding: 5px 10px; font: inherit; font-size: 12px; line-height: 1.35; color: var(--ddDim); cursor: pointer; } .ddOutlineItem.sub { padding-left: 22px; } .ddOutlineItem:hover { color: var(--ddInk); background: var(--hover, rgba(22, 40, 74, .04)); } .ddOutlineItem.on { color: var(--ddInk); font-weight: 600; border-left-color: var(--ddAction); } .ddOutline .n { font-variant-numeric: tabular-nums; min-width: 14px; color: var(--ddFaint); font-weight: 500; } .ddSec { scroll-margin-top: 12px; } .ddSec.ddCard { padding: 12px 14px 10px; } /* the return panel above the fund-fit prose */ .ddReturns { border: 1px solid var(--ddGrid); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; background: color-mix(in srgb, var(--ddInk) 2%, var(--ddSurface)); } .ddRetCtls { display: flex; gap: 18px 22px; align-items: flex-end; flex-wrap: wrap; } .ddCtl { display: flex; flex-direction: column; gap: 6px; } .ddCtlRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ddSaved { align-self: center; font-size: 11px; color: var(--ddWon); opacity: 0; } .ddSaved.show { animation: ddFadeOut 2.4s ease forwards; } @keyframes ddFadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } .ddRetTiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; } .ddRetHint { font-size: 12px; color: var(--ddDim); margin: 0 0 10px; } .ddRetSplit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; } .ddRetChart { min-width: 0; overflow-x: auto; } .ddRetChart svg { display: block; max-width: 100%; height: auto; } .ddRetSide { font-size: 12.5px; line-height: 1.5; } .ddRetSideHd { font-weight: 600; margin-bottom: 6px; } .ddRetSide .ddMini { font-size: 12px; } .ddRetSide .ddMini tr.tot td { font-weight: 600; } .ddRetNote { margin-top: 8px; line-height: 1.5; } .ddRetSide .dd-callout { margin-top: 10px; } .ddRetFoot { margin-top: 8px; } /* the custom dilution schedule and the custom exit ladder (Sep 2026) */ .ddRetCustom { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--ddGrid); border-radius: 10px; background: var(--hover, rgba(22, 40, 74, .03)); } .ddRetCustomRow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .ddRetNum { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ddDim); } .ddInput.xs { width: 82px; padding: 5px 8px; font-size: 12.5px; } .ddRetExit { display: inline-flex; align-items: center; gap: 2px; } .ddRetExit .x { border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; color: var(--ddFaint); cursor: pointer; } .ddRetExit .x:hover { color: var(--ddWarn); background: color-mix(in srgb, var(--ddWarn) 12%, transparent); } /* "Show the math" and the pro-rata model */ .ddRetMore { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ddGrid); } .ddRetMore .ddMeta { flex: 1 1 240px; } .ddRetMath, .ddRetPr { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--ddGrid); border-radius: 10px; background: var(--hover, rgba(22, 40, 74, .03)); } .ddRetMathHd { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ddDim); margin: 0 0 6px; } .ddRetMath .ddSteps + .ddRetMathHd, .ddRetPr .ddSteps + .ddRetMathHd { margin-top: 16px; } table.ddSteps { border-collapse: collapse; width: 100%; font-size: 12.5px; } table.ddSteps th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--ddFaint); padding: 0 10px 4px 0; border-bottom: 1px solid var(--ddGrid); white-space: nowrap; } table.ddSteps td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--ddGrid); vertical-align: top; } table.ddSteps tr:last-child td { border-bottom: none; } table.ddSteps td.l { color: var(--ddInk); } table.ddSteps td.f { color: var(--ddDim); font-variant-numeric: tabular-nums; } table.ddSteps td.a { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } table.ddSteps tr.off td { opacity: .5; } .ddRetCheck { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .ddRetCheck input { margin: 0; accent-color: var(--ddAction); } .ddRetPr .dd-callout { margin-top: 14px; } @media (max-width: 640px) { table.ddSteps { font-size: 11.5px; } table.ddSteps th, table.ddSteps td { padding-right: 6px; } } .ddSecHd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .ddSecHd h4 { margin: 0; font-size: 13.5px; font-weight: 600; } .ddSecNum { font-size: 11px; font-weight: 600; color: var(--ddFaint); font-variant-numeric: tabular-nums; min-width: 14px; } .ddSecMeta { font-size: 11.5px; color: var(--ddFaint); } .ddSecBody { font-size: 13px; line-height: 1.5; } .ddSecBody.ddSecMissing { color: var(--ddDim); font-style: italic; padding: 8px 10px; border: 1px dashed var(--ddGrid); border-radius: 8px; background: var(--hover, rgba(22, 40, 74, .03)); } .ddSecBody p { margin: 0 0 6px; } .ddSecBody ul, .ddSecBody ol { margin: 0 0 6px; padding-left: 18px; } .ddSecBody h4.dd-h { font-size: 12.5px; margin: 8px 0 2px; } .ddSecBody table.dd-table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 4px 0 8px; } .ddSecBody table.dd-table th { text-align: left; border-bottom: 1px solid var(--ddDim); padding: 3px 6px 3px 0; } .ddSecBody table.dd-table td { border-bottom: 1px solid var(--ddGrid); padding: 3px 6px 3px 0; vertical-align: top; } .dd-ok { color: var(--ddWon); font-weight: 700; } .dd-no { color: var(--ddWarn); font-weight: 700; } .dd-mid { color: var(--ddAmber); font-weight: 700; } .ddEdit textarea, .ddAsk textarea { width: 100%; box-sizing: border-box; min-height: 72px; font: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField); color: var(--ddInk); resize: vertical; } .ddEdit textarea { min-height: 160px; } .ddEdit textarea:focus, .ddAsk textarea:focus { outline: none; border-color: var(--ddAction); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); } .ddEditRow { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; } .ddAsk { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ddGrid); } .ddReq { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--ddAction); background: color-mix(in srgb, var(--ddAction) 7%, transparent); border-radius: 0 8px 8px 0; font-size: 12.5px; } .ddReq.sent { border-left-color: var(--ddLive); background: color-mix(in srgb, var(--ddLive) 7%, transparent); } .ddReqHd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; } .ddReqWho { font-size: 11.5px; color: var(--ddDim); } .ddReqText { white-space: pre-wrap; line-height: 1.45; } .ddSuggest { border-left: 3px solid var(--ddWon); background: color-mix(in srgb, var(--ddWon) 8%, transparent); padding: 6px 10px; margin: 8px 0 0; border-radius: 0 8px 8px 0; } .ddSuggest .ddMeta { display: block; margin-bottom: 4px; } .ddConflict { border-left: 3px solid var(--ddWarn); background: color-mix(in srgb, var(--ddWarn) 8%, transparent); padding: 6px 10px; margin: 6px 0; border-radius: 0 8px 8px 0; } .ddConflict .ddWho { font-size: 11px; color: var(--ddWarn); font-weight: 600; } /* the sticky send bar */ .ddSendBar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 14px; background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: 0 6px 20px rgba(22, 40, 74, .14); font-size: 13px; } .ddSendN { font-weight: 600; } /* ---- track changes ---------------------------------------------------------------- */ .ddIns { background: color-mix(in srgb, var(--ddWon) 22%, transparent); border-radius: 2px; text-decoration: none; } .ddDel { background: color-mix(in srgb, var(--ddWarn) 16%, transparent); text-decoration: line-through; color: var(--ddWarn); border-radius: 2px; } /* --who is the blob's plate (nothing else reads it). Light's live cyan is the one plate white could not carry at 10px — 4.07:1 — so the blob takes a half-step darker cyan there and the palette's own token in dark. */ .ddIns.matt, .ddBlob.matt { --who: #0d7f93; } .ddIns.shevy, .ddBlob.shevy { --who: var(--ddHard); } .ddIns.claude, .ddBlob.claude { --who: var(--ddDim); } [data-theme="dark"] .ddIns.matt, [data-theme="dark"] .ddBlob.matt { --who: var(--ddLive); } .ddBlob { display: inline-block; font-size: 10px; line-height: 14px; padding: 0 5px; border-radius: 8px; color: var(--onChip); background: var(--who, var(--ddDim)); margin: 0 3px; vertical-align: middle; white-space: nowrap; } .ddRevBody { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; } /* ---- Activity: the timeline ------------------------------------------------------ */ .ddTl { margin: 0 0 6px; } .ddTlItem { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ddGrid); } .ddTlItem .ddDot { margin-top: 5px; } .ddTlMain { flex: 1; min-width: 0; } .ddTlHd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; } .ddTlTitle { font-weight: 600; } .ddTlDetail { font-size: 12px; color: var(--ddDim); margin-top: 2px; line-height: 1.45; } .ddTlDiff { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddSurface); } .ddTlSec { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); margin-bottom: 4px; } .ddSub { margin: 14px 0 4px; } .ddSubHd { margin-bottom: 4px; } /* ---- Files ---------------------------------------------------------------------- */ .ddDrop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--ddGrid); border-radius: 10px; padding: 26px 14px; color: var(--ddDim); font-size: 12.5px; cursor: pointer; background: var(--ddSurface); text-align: center; } .ddDrop .ddIco { width: 22px; height: 22px; flex-basis: 22px; color: var(--ddFaint); } .ddDrop .ddIco svg { width: 22px; height: 22px; } .ddDrop .ddBtn .ddIco { width: 14px; height: 14px; flex-basis: 14px; color: inherit; } .ddDrop .ddBtn .ddIco svg { width: 14px; height: 14px; } .ddDropT { font-size: 13.5px; font-weight: 500; color: var(--ddInk); } .ddDrop.dragover { border-color: var(--ddAction); background: color-mix(in srgb, var(--ddAction) 6%, transparent); } .ddDrop.compact { flex-direction: row; padding: 10px 12px; gap: 10px; } .ddDrop input[type=file] { display: none; } .ddFiles { margin: 10px 0 0; padding: 0; list-style: none; } .ddFile { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ddGrid); font-size: 12.5px; } .ddFile .ddFileName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ddFile .ddMeta { white-space: nowrap; font-size: 11.5px; } .ddFilesEmpty { margin-top: 10px; } /* Paste a link: a data room, a Drive folder, a DocSend. One line under the drop zone. */ .ddLinkRow { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .ddLinkRow .ddInput { flex: 1; min-width: 0; width: auto; } .ddLinkRow .ddBtn { flex: none; } .ddFile .ddFileName.isLink { display: flex; align-items: center; gap: 6px; } .ddFile .ddFileName.isLink .ddIco { width: 14px; height: 14px; flex: none; color: var(--ddFaint); } .ddFile .ddFileName.isLink .ddIco svg { width: 14px; height: 14px; } .ddFile .ddFileName.isLink a { color: var(--ddLive); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddFile .ddFileName.isLink a:hover { text-decoration: underline; } .ddWarnLine { color: var(--ddWarn); font-size: 12px; margin-top: 6px; } /* ---- cards and chips inside the sections ------------------------------------------ */ .ddCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 4px 0 10px; } .ddKv { border: 1px solid var(--ddGrid); border-radius: 8px; padding: 8px 10px; background: var(--ddSurface); } .ddKv .k { margin-bottom: 3px; } .ddKv .v { font-size: 12.5px; line-height: 1.4; color: var(--ddInk); } .ddKv .v .ln { display: block; } .ddKv.wide { grid-column: span 2; } .ddMini { border-collapse: collapse; font-size: 12.5px; width: 100%; } .ddMini td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--ddGrid); } .ddMini tr:last-child td { border-bottom: none; } .ddMini td.pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ddClaim, .ddRead, .ddRisk { border: 1px solid var(--ddGrid); border-radius: 8px; padding: 10px 12px; background: var(--ddSurface); margin: 6px 0; font-size: 12.5px; line-height: 1.45; } .ddClaim .t, .ddRead .t, .ddRisk .t { font-weight: 600; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .ddClaim .n { color: var(--ddAction); } .ddLabRow { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin-top: 4px; } .ddLabRow .l { padding-top: 2px; } .ddRead .verdict { font-style: italic; margin: 2px 0 4px; } .ddRead ul { margin: 2px 0 4px; padding-left: 16px; } .ddRead .who { color: var(--ddDim); font-weight: 400; font-size: 11.5px; } .ddLedger { border-collapse: collapse; width: 100%; font-size: 12px; margin: 4px 0 8px; } .ddLedger th { text-align: left; border-bottom: 1px solid var(--ddDim); padding: 4px 8px 4px 0; } .ddLedger td { border-bottom: 1px solid var(--ddGrid); padding: 5px 8px 5px 0; vertical-align: top; } .ddLedger td.st { white-space: nowrap; } .ddLedgerBy { display: block; margin-top: 3px; font-size: 11px; color: var(--ddFaint); white-space: nowrap; } .ddLedgerNote { margin-top: 3px; font-size: 11.5px; color: var(--ddDim); font-style: italic; } .ddLedger tr.settled td.st .ddSelect { border-color: color-mix(in srgb, var(--ddWon) 45%, var(--ddGrid)); } .ddLedgerFoot { margin-top: 2px; } .ddQ { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--ddGrid); font-size: 12.5px; flex-wrap: wrap; } .ddQ .n { color: var(--ddDim); font-size: 11px; min-width: 18px; } .ddQ .txt { flex: 1; } .dd-callout { border-left: 3px solid var(--ddAction); background: color-mix(in srgb, var(--ddAction) 8%, transparent); padding: 6px 10px; margin: 6px 0; border-radius: 0 8px 8px 0; font-size: 12.5px; } .dd-callout .dd-tag { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ddDim); } /* ---- the launcher ------------------------------------------------------------------ */ .foH.ddH { display: flex; align-items: center; gap: 10px; } .ddSeg { display: inline-flex; border: 1px solid var(--ddGrid); border-radius: 8px; overflow: hidden; } .ddSeg button { background: none; border: none; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ddDim); } .ddSeg button.on { background: var(--ddInk); color: var(--ddSurface); } .ddModalBody { padding: 4px 18px 8px; font-size: 13px; } .ddModalBody .ddField { margin: 8px 0; } .ddModalBody label.ddLab { display: block; font-size: 10.5px; color: var(--ddFaint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; } .ddModalBody .input { width: 100%; box-sizing: border-box; } .ddOpts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } .ddOpts label { display: inline-flex; gap: 5px; align-items: center; } .ddModels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ddModel { border: 1px solid var(--ddGrid); border-radius: 8px; padding: 8px; cursor: pointer; font-size: 12px; } .ddModel.on { border-color: var(--ddAction); box-shadow: 0 0 0 1px var(--ddAction) inset; } .ddModel b { display: block; } .ddModel span { color: var(--ddDim); font-size: 11px; } .ddEstimate { color: var(--ddDim); font-size: 12px; margin-top: 6px; } .ddLpHit { border: 1px solid var(--ddWarn); color: var(--ddWarn); border-radius: 8px; padding: 6px 8px; font-size: 12px; margin: 6px 0; } .ddResults { border: 1px solid var(--ddGrid); border-radius: 8px; max-height: 160px; overflow: auto; margin-top: 4px; } .ddResults div { padding: 4px 8px; cursor: pointer; font-size: 12px; } .ddResults div:hover, .ddResults div.on { background: var(--hover, rgba(0, 0, 0, .05)); } @media (max-width: 900px) { .ddSplit { grid-template-columns: 1fr; } .ddListPane { position: static; } .ddPdfTall { height: 70vh; } .ddKv.wide { grid-column: span 1; } .ddLabRow { grid-template-columns: 1fr; } .ddSkel.tall { height: 50vh; min-height: 240px; } .ddSecSplit { grid-template-columns: 1fr; } .ddOutline { display: none; } .ddRetSplit { grid-template-columns: 1fr; } .ddPaneActs { width: 100%; flex-wrap: wrap; } } @media (max-width: 700px) { .ddModels { grid-template-columns: 1fr; } .ddCoPdf { height: 420px; } .ddSendBar { flex-wrap: wrap; } } /* the company page's Diligence section: one summary line, details behind a toggle */ .foDilSummary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-dim, #516187); margin: 2px 0 6px; } .foDilSummary b { color: var(--ink, #16284A); font-weight: 600; } .foDilSummary .foDilSep { color: var(--ink-faint, #8A93A6); } /* a narrow pane (the window shrunk, or the company page open over the tab): no outline, one column, the chart and its notes stacked. Last in the file so it wins the cascade. */ @container (max-width: 760px) { .ddSecSplit { grid-template-columns: minmax(0, 1fr); } .ddOutline { display: none; } .ddRetSplit { grid-template-columns: minmax(0, 1fr); } .ddPaneHead { flex-wrap: wrap; } } /* ════════════════════════════════════════════════════════════════════════════ 26.0 — the rest of the kit, so one set of controls covers the whole app. Everything below replaces a kit that was retired: see the file head. Radii stay on the BRIEF's three: 8 controls and chips, 10 cards and tiles, 9 the segmented track. ════════════════════════════════════════════════════════════════════════════ */ /* ---- the page-head commit button ---------------------------------------- The ONE orange on a screen, and the only place orange is an action (inside panes the primary is the navy .ddBtn.primary). styles.css declared it twelve times, once per view and panel, each with its own height (34 / 35 / 36px), radius (8 / 9 / 10) and shadow, across 43 selectors in all; this is the one rule. Flat #E8843C, 34px, radius 8, ink #241404. */ .commit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 15px; box-sizing: border-box; flex: none; border: 0; border-radius: 8px; background: #E8843C; color: #241404; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--ddShadow); transition: background .12s; } .commit:disabled { opacity: .5; cursor: default; box-shadow: none; } .commit .ddIco svg, .commit svg { width: 14px; height: 14px; } /* Two commits also carry the global .primary, whose ::after paints a gloss sheen over the top half. The per-view rules each turned that off by hand. */ .commit::after { content: none; } /* ---- chips: the dot variant --------------------------------------------- The retired .badge kit drew its live dot with a ::before, so every chip in the app carried one whether it meant anything or not. Here the dot is an the markup asks for, and it takes the chip's own colour unless the markup names one. */ .ddChip:has(i) { display: inline-flex; align-items: center; gap: 5px; } .ddChip i { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; } /* ---- filter pills: a label and a count, checked by a hidden radio -------- Replaces .filterBar, whose own mini bar chart (.filterBarTrack/-Fill) had been display:none for long enough that the counts were the whole control. */ .ddFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; } .ddFilter { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; box-sizing: border-box; flex: 0 0 auto; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddSurface); color: var(--ddDim); font-size: 11.5px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: var(--ddShadow); transition: background .12s, border-color .12s, color .12s; } .ddFilter:hover { border-color: var(--ddDim); color: var(--ddInk); } .ddFilter:has(input:checked) { border-color: var(--teal); color: var(--teal); font-weight: 600; } .ddFilter:has(input:focus-visible) { outline: 2px solid var(--ddLive); outline-offset: 2px; } .ddFilter:has(input:checked) .ddCount { color: var(--teal); } /* ---- segmented: a flush variant ---------------------------------------- .ddSegTabs carries the tab row's own 4/0/12 margin. The filter rows and the settings theme picker it now replaces sit in flex rows that space themselves, so they take the track with no margin of its own. */ .ddSegTabs.flush { margin: 0; } .ddSegTabs button:disabled { opacity: 1; cursor: default; } /* ---- tables: one row rule ---------------------------------------------- Header cells read as eyebrows, body rows are 1px grid rules and a tinted hover, numbers are tabular. Put .ddTable on the . */ .ddTable { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ddInk); } .ddTable thead th { padding: 0 10px 7px; text-align: left; white-space: nowrap; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); border-bottom: 1px solid var(--ddGrid); } .ddTable tbody td { padding: 9px 10px; border-bottom: 1px solid var(--ddGrid); vertical-align: middle; } .ddTable tbody tr:last-child td { border-bottom: 0; } .ddTable tbody tr:hover { background: var(--hover, rgba(22, 40, 74, .04)); } .ddTable td.num, .ddTable th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ── The return panel at phone width (26.0) ──────────────────────────────── Its chart is drawn at 760 and its math tables keep every number on one line, so at 390 the panel is wider than the page. Each wide part scrolls inside its own card; the PAGE must never scroll sideways. `min-width: 0` is the load-bearing half — a grid or flex child defaults to min-width:auto, so a wide table pushes the whole column out instead of scrolling in place. */ .ddReturns { max-width: 100%; } .ddRetSplit > * { min-width: 0; } .ddRetSide { min-width: 0; } .ddRetMath, .ddRetPr { min-width: 0; overflow-x: auto; } .ddRetChart { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ddRetChart svg { display: block; max-width: 100%; height: auto; } .ddRetSide .ddMini, table.ddSteps { min-width: 0; } .ddRetCtls, .ddRetTiles, .ddRetCustomRow, .ddRetMore { max-width: 100%; } /* ════════════════════════════════════════════════════════════════════════════ 26.16 — the Claude panel: one card, three phases, everywhere Claude is invoked. BEFORE (what it will read, what it will write, the model), DURING (the orb by phase, the log kept), AFTER (what it read, what changed, what it proposes). Radii stay on the kit's three; the teal is spent only on the pane primary and a chosen toggle (never on a bar, a tag, a log line or a rail: one green marks the one action); a hover only recolours. The orb canvases come from public/orbs.mjs and are display:block. ════════════════════════════════════════════════════════════════════════════ */ .cl { background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: var(--ddShadow); padding: 16px 18px; margin: 6px 0 12px; box-sizing: border-box; max-width: 100%; } .cl canvas, .ddOrbMark canvas, .ddIco.orb canvas { display: block; flex: none; } .clHead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .clHeadMain { flex: 1; min-width: 200px; } .clTitle { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ddInk); } .clSub { font-size: 12.5px; color: var(--ddDim); margin-top: 3px; line-height: 1.45; } .clActs { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; } /* the two columns: read pills on the left, the writes list on the right */ .clCols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 14px 0 4px; } .clCol { min-width: 0; } .clCol h4, .clRes h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); } .clPills { display: flex; flex-wrap: wrap; gap: 6px; } .clPill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddSurface); font-size: 12px; font-weight: 500; color: var(--ddDim); white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .clPill:hover { border-color: var(--ddDim); color: var(--ddInk); } .clPill:has(input:checked), .clPill.on { border-color: var(--teal); color: var(--teal); font-weight: 600; } .clPill:has(input:disabled) { cursor: default; opacity: .6; } .clPill input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .clPill:has(input:focus-visible) { outline: 2px solid var(--ddLive); outline-offset: 2px; } .clPill .n { color: var(--ddFaint); font-weight: 400; } /* a fact pill (no box inside) is a label, not a toggle: ink on the grid, no teal, no pointer, and it does not shift under the pointer like a toggle does */ span.clPill { cursor: default; } span.clPill:hover { border-color: var(--ddGrid); color: var(--ddDim); } span.clPill.on, span.clPill.on:hover { border-color: var(--ddGrid); color: var(--ddInk); } .clWrites { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.5; } .clWrites li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--ddGrid); } .clWrites li:last-child { border-bottom: 0; } .clTag { flex: none; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 15px; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--ddGrid); color: var(--ddInk); } .clTag.prop { color: var(--ddInk); border-color: var(--ddDim); } .clOpt { margin-top: 8px; } /* the ask box, the foot with the one model control */ .clAsk { margin-top: 12px; } .clAsk textarea { width: 100%; box-sizing: border-box; min-height: 56px; font: inherit; font-size: 13px; line-height: 1.5; padding: 9px 11px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField); color: var(--ddInk); resize: vertical; } .clAsk textarea:focus { outline: none; border-color: var(--ddAction); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); } .clFoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .clFoot .ddSeg2 { margin: 0; } .clBlurb { flex: 1 1 200px; min-width: 0; } .clRow { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .clRow .ddLab { margin: 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); } /* DURING: the bar (the kit's own fill), then the log kept: every line the route shipped in a box that scrolls, the newest marked in ink */ .cl .ddBar { margin-top: 12px; } .clLog { margin-top: 10px; max-height: 168px; overflow: auto; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--hover, rgba(22, 40, 74, .03)); padding: 8px 12px; font-size: 12px; color: var(--ddDim); line-height: 1.6; } .clLine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clLine .t { color: var(--ddFaint); font-variant-numeric: tabular-nums; margin-right: 8px; } .clLine.now { color: var(--ddInk); font-weight: 500; white-space: normal; } /* AFTER: what it read, what changed, then the proposals for the record */ .clRes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 14px; } .clRes > div { min-width: 0; } .clRes ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.55; } .clRes li { padding: 4px 0; border-bottom: 1px solid var(--ddGrid); overflow-wrap: anywhere; } .clRes li:last-child { border-bottom: 0; } .clLink { color: var(--ddLive); cursor: pointer; text-decoration: none; } .clLink:hover { text-decoration: underline; } /* "show changes" is a button (in the tab order, named as one) that reads as a link */ button.clLink { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: inherit; line-height: inherit; } .clWarn { color: var(--ddWarn); } .clProp { margin-top: 12px; border-left: 3px solid var(--ddGrid); background: var(--hover, rgba(22, 40, 74, .03)); border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 12.5px; } /* the proposals on their own card, once the memo card that carried them is gone */ .cl.clProps .clProp { margin-top: 0; } .clPropHd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } .clPropRow { display: flex; gap: 10px; align-items: center; padding: 5px 0; flex-wrap: wrap; } .clPropRow .k { flex: 0 0 120px; color: var(--ddDim); } .clPropRow .v { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; } .clPropRow .btns { display: flex; gap: 6px; flex: none; } /* the small inline variant: on a section card, and the one-pager form */ .cl.clSm { padding: 12px 14px; margin: 10px 0 0; } .cl.clSm .clTitle { font-size: 13.5px; } .cl.clSm .clHead { gap: 10px; } .cl.clSm .clCols { margin-top: 10px; } .clNote { margin-top: 8px; } .clBody { margin-top: 8px; font-size: 13px; line-height: 1.5; } .clBody p { margin: 0 0 6px; } /* the marks: the still 20px orb where a grey dot used to stand for Claude */ .ddOrbMark { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; } .ddTlItem .ddOrbMark { margin-top: 0; } .ddIco.orb { width: 20px; height: 20px; flex-basis: 20px; margin: -3px 0; } .ddPresence .ddOrbMark { margin-right: 4px; } /* the launcher, now a panel inside the dialog */ .ddModalCard { position: relative; } .ddModalX { position: absolute; top: 10px; right: 10px; z-index: 1; } .ddModalBody .cl { border: 0; box-shadow: none; padding: 0; margin: 0; } .ddModalBody .clHead { padding-right: 40px; } .ddModalBody .ddSeg { margin-top: 12px; } @media (max-width: 700px) { .clCols, .clRes { grid-template-columns: 1fr; } .clPropRow .k { flex-basis: 100%; } } @container (max-width: 640px) { .clCols, .clRes { grid-template-columns: minmax(0, 1fr); } } /* ===== Fund model (26.17): the .fm* kit ===== */ /* The scenario builder's own surfaces, ported from the approved design mock (NPU-Fund-Model/design-handoff/returned/design.css). The mock was a standalone page: it shipped its own rail, its own font face, its own reset, its own toast and tooltip and eight s. All of that is the app's already, so none of it is here — what is here is the page itself. Three rules held the port together. Every class is fm-prefixed, because the mock's names (.btn .label .eyebrow .toast .term .iconBtn .statusDot) are names this app has already spent elsewhere. Every colour, hairline and shadow reads a token, so dark mode follows with no second block. And the page keeps its OWN scale — 1180px, 14.5px base, a 40px fund number — rather than being squeezed into the 13px DD kit: this is the one screen whose job is a number you can read from across the desk. What it borrows instead of re-drawing: .ddBtn / .ddBtn.primary for every button, .ddSegTabs for the Add-a-company tabs, .ddChip for the source chips, .modalOverlay/.modalCard for the dialog shell, #tip for tooltips, #toast for toasts, .sens/.sensInput for every amount. */ /* ---- the page ---------------------------------------------------------- */ .fmPage { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 0 24px; font-size: 14.5px; line-height: 1.4; color: var(--ddInk); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .fmPage h1, .fmPage h2, .fmPage h3, .fmPage p, .fmDialog h2, .fmDialog p { margin: 0; } .fmPage strong, .fmDialog strong { font-weight: 600; } /* the app's focus ring, not the mock's teal one: the teal is the action */ .fmPage :focus-visible, .fmDialog :focus-visible { outline: 2px solid var(--ddLive); outline-offset: 2px; } /* the page's own inline SVGs (the tray arrow, the chevron, the pencil) */ .fmIcon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 17px; height: 17px; flex: none; } /* It wraps at every width (26.25 review), not only at ≤640: with the sidebar still showing, 641 to about 830 left ~500px of nowrap buttons beside the title in a ~530px column, and the page scrolled sideways. It never wraps where the row fits, so the desktop head is what it was. */ .fmHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 28px; } .fmHead h1 { font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1.25; margin-top: 3px; } .fmEyebrow { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ddDim); font-weight: 500; } .fmHeadActions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } .fmTiny { font-size: 11px; color: var(--ddDim); line-height: 1.45; } /* the scenario name, its saved state, the fund terms shortcut */ .fmScenarioLine { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .fmScenarioTitle { display: flex; align-items: center; gap: 12px; } .fmScenarioTitle h2 { font-size: 17px; letter-spacing: -.4px; font-weight: 600; } .fmTag { font-size: 9px; border: 1px solid var(--ddGrid); border-radius: 8px; color: var(--ddDim); padding: 2px 7px; } .fmTerms { display: flex; align-items: center; gap: 18px; font-size: 11px; color: var(--ddDim); } .fmTerms > span + span::before { content: '·'; margin-right: 18px; } /* a link that is really a button. --ink-dim resting, ink on hover: the teal belongs to the primary and to what you have chosen. */ .fmTextBtn { border: 0; border-radius: 8px; background: transparent; color: var(--ddDim); font: inherit; font-size: 11px; font-weight: 500; padding: 0; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; } .fmTextBtn:hover { color: var(--ddInk); } .fmRecovery { margin-top: 10px; } /* ---- the fund answer, pinned above the builder -------------------------- */ .fmResults { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr 1fr; gap: 24px; padding: 23px 25px; background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: var(--ddShadow); margin-bottom: 25px; position: sticky; top: var(--fmStickyTop, 0px); z-index: 10; } .fmMetric { min-width: 0; } .fmLabel { font-size: 12px; color: var(--ddDim); } .fmBig { font-size: 40px; font-weight: 500; letter-spacing: -1.7px; line-height: 1.15; margin: 8px 0 7px; color: var(--ddInk); } .fmBig > span:not(.sens) { font-size: 27px; letter-spacing: -.5px; } .fmBasis { color: var(--ddDim); font-size: 10px; line-height: 1.4; } .fmContext { padding-left: 24px; border-left: 1px solid var(--ddGrid); display: flex; flex-direction: column; justify-content: center; } .fmContext p { font-size: 12px; margin: 8px 0 5px; } .fmContext .fmTextBtn { margin-top: 12px; } .fmBuilder { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 25px; align-items: start; } /* ---- left: the companies in the scenario -------------------------------- */ .fmCompanyPanel { min-width: 0; } .fmPanelHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .fmPanelHead h2 { font-size: 16px; font-weight: 600; letter-spacing: -.4px; } .fmIconBtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ddGrid); border-radius: 8px; color: var(--ddDim); font: inherit; font-size: 19px; line-height: 1; padding: 0; flex: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .fmIconBtn:hover { border-color: var(--ddDim); background: var(--ddSurface); color: var(--ddInk); } .fmIconBtn:disabled { opacity: .45; cursor: not-allowed; } .fmIconBtn.sm { width: 24px; height: 24px; font-size: 16px; border: 0; } .fmLoadBtn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 12px; margin-bottom: 15px; border: 1px solid var(--ddGrid); border-radius: 8px; background: transparent; font: inherit; font-size: 11px; color: var(--ddInk); text-align: left; cursor: pointer; transition: background .12s, border-color .12s; } .fmLoadBtn small { font-size: 9px; color: var(--ddDim); margin-left: auto; white-space: nowrap; } .fmLoadBtn:hover { background: var(--ddSurface); border-color: var(--ddDim); } .fmLoadBtn:disabled { opacity: .45; cursor: not-allowed; } .fmCompanyList { display: grid; gap: 9px; } .fmCompanyCard { position: relative; border: 1px solid var(--ddGrid); border-radius: 10px; background: var(--ddSurface); box-shadow: var(--ddShadow); overflow: hidden; } .fmCompanyCard:hover { border-color: var(--ddDim); } /* the one you are editing. The 3px bar is an inset shadow, the same marker the rail draws on the nav item you are on — not a pseudo-element of its own. */ .fmCompanyCard.on { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 4%, var(--ddSurface)); box-shadow: inset 3px 0 0 var(--teal); } .fmCompanySelect { display: block; width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: var(--ddInk); padding: 14px 38px 14px 14px; cursor: pointer; } .fmCompanyName { font-weight: 600; font-size: 12px; display: block; overflow-wrap: anywhere; } .fmCompanyKind { font-size: 9px; display: block; color: var(--ddDim); margin-top: 4px; } .fmCompanyNumbers { display: flex; gap: 8px; font-size: 10px; color: var(--ddDim); margin-top: 12px; flex-wrap: wrap; } .fmRemove { position: absolute; right: 8px; top: 10px; border: 0; width: 23px; height: 23px; font-size: 16px; } /* the checks the fund has not named yet */ .fmPlanned { margin-top: 14px; padding: 15px; border: 1px dashed var(--tick); border-radius: 10px; } .fmPlannedHead { display: flex; gap: 10px; align-items: center; } .fmPlannedHead > div { flex: 1; } .fmPlannedHead strong { font-size: 12px; display: block; } .fmPlannedHead .fmTiny { font-size: 10px; display: block; margin-top: 3px; } .fmPlanSummary { margin-top: 15px; color: var(--ddDim); font-size: 10px; } /* 77 slots, one dot each: grey write-off, blue mid, ink high, violet unicorn, a violet ring for the one that is possible but not counted on */ .fmDots { display: grid; grid-template-columns: repeat(11, 9px); gap: 7px; margin-top: 15px; width: max-content; } .fmDots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ddGrid); } /* a slot the GP has NAMED: the app's live-data colour, not the teal. The teal is the action and the chosen state; a named slot is neither — it is the one tile in the grid that is a real company rather than a modelled outcome, and --ddLive is the token the rest of the app already spends on "this is real". Without this rule a named slot draws as an empty one and the card's own "4 named, 73 still to write" has nothing on screen to point at. */ .fmDots i.named { background: var(--ddLive); } .fmDots i.tierMid { background: var(--blue); } .fmDots i.tierHigh { background: var(--ddInk); } .fmDots i.unicorn { background: var(--ddHard); } .fmDots i.possible { border: 1.5px solid var(--ddHard); background: transparent; } .fmBookNote { display: flex; gap: 8px; align-items: flex-start; margin-top: 17px; font-size: 11px; line-height: 1.5; color: var(--ddDim); } .fmBookNote strong { color: var(--ddInk); font-weight: 500; } .fmDot { height: 5px; width: 5px; background: var(--ddWarn); border-radius: 50%; flex: none; margin-top: 6px; } /* ---- right: the company being modelled ---------------------------------- */ .fmDealPanel { background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: var(--ddShadow); padding: 24px; min-width: 0; } .fmDealHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; } .fmDealHead h2 { font-size: 24px; font-weight: 600; letter-spacing: -.75px; margin-top: 6px; overflow-wrap: anywhere; } .fmDealHead .fmIconBtn { border: 0; } .fmFields { display: grid; grid-template-columns: 1fr 1.35fr .6fr; gap: 15px; } .fmField { min-width: 0; } .fmField label { font-size: 11px; font-weight: 500; display: block; margin-bottom: 7px; } .fmField label .fmTiny { font-weight: 400; font-size: 9px; margin-left: 4px; } /* a money box: the $ and the USD are furniture, the input is the only thing you can type in, and it carries .sensInput so the eye can mask it */ .fmMoney { display: flex; align-items: center; gap: 7px; background: var(--ddField); border: 1px solid var(--ddGrid); border-radius: 8px; padding: 9px 10px; min-width: 0; height: 40px; } .fmMoney > span:first-child { font-size: 13px; color: var(--ddDim); } .fmMoney > span:last-child { font-size: 9px; color: var(--ddDim); } .fmMoney input { border: 0; outline: 0; width: 100%; min-width: 0; background: transparent; padding: 0; font: inherit; color: var(--ddInk); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; } .fmMoney:focus-within { border-color: var(--ddAction); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); } .fmMoney.lg { height: 49px; flex: 1; padding: 8px 12px; } .fmMoney.lg input { font-size: 27px; font-weight: 500; letter-spacing: -.7px; } .fmMoney.lg > span:first-child { font-size: 22px; } .fmNum { appearance: textfield; -moz-appearance: textfield; width: 100%; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField); font: inherit; color: var(--ddInk); padding: 9px 10px; height: 40px; font-size: 14px; } .fmNum::-webkit-inner-spin-button, .fmNum::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .fmNum:focus { outline: none; border-color: var(--ddAction); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); } .fmSource { font-size: 10px; margin-top: 9px; } /* the exit: presets, a big box, a slider, the year */ .fmExit { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ddGrid); } .fmExitHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; } .fmExitHead > label { font-size: 13px; font-weight: 500; } .fmExitPresets { display: flex; gap: 6px; } .fmExitPreset { font: inherit; font-size: 10px; color: var(--ddDim); background: transparent; border: 1px solid var(--ddGrid); border-radius: 8px; padding: 4px 8px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .fmExitPreset:hover { border-color: var(--ddDim); color: var(--ddInk); } .fmExitPreset.on { color: var(--teal); border-color: var(--teal); background: color-mix(in srgb, var(--teal) 5%, var(--ddSurface)); } .fmExitFields { display: flex; gap: 12px; align-items: center; max-width: 550px; } .fmInYear { font-size: 12px; color: var(--ddDim); } .fmExitFields .fmNum { width: 90px; height: 49px; font-size: 20px; } /* the slider stays live while amounts are hidden; only its value text is masked */ .fmRange { appearance: none; -webkit-appearance: none; display: block; height: 18px; width: 100%; margin: 17px 0 0; background: transparent; cursor: pointer; } .fmRange::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--teal) 0, var(--teal) var(--fill), var(--ddGrid) var(--fill), var(--ddGrid) 100%); } .fmRange::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 16px; width: 16px; margin-top: -6px; background: var(--ddSurface); border: 2px solid var(--teal); border-radius: 50%; } .fmRange::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--teal) 0, var(--teal) var(--fill), var(--ddGrid) var(--fill), var(--ddGrid) 100%); } .fmRange::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--teal); background: var(--ddSurface); } .fmRangeEnds { display: flex; justify-content: space-between; font-size: 9px; color: var(--ddDim); margin-top: 3px; } /* a company off the books is priced on the plan's odds until the GP sets a sale price, and this is the line under the box that says so */ .fmPage p.fmExitNote { font-size: 10px; margin-top: 8px; } /* pro rata, and the four follow-on rounds it opens */ .fmProRow { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 19px 0; } .fmProRow label { font-size: 12px; font-weight: 500; } .fmProRow .fmTiny { font-size: 10px; margin-top: 3px; display: block; } .fmToggleLabel { display: flex; gap: 10px; align-items: center; color: var(--ddDim); font-size: 11px; } .fmSwitch { width: 36px; height: 21px; border-radius: 8px; border: 1px solid var(--tick); background: var(--ddGrid); padding: 3px; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; transition: background .12s, border-color .12s; } /* 8px on a 13px knob resolves to a circle, and keeps the radius on the scale */ .fmSwitch i { display: block; width: 13px; height: 13px; background: var(--ddSurface); border-radius: 8px; } .fmSwitch[aria-checked="true"] { background: var(--teal); border-color: var(--teal); justify-content: flex-end; } .fmSwitch:hover { border-color: var(--ddDim); } .fmRounds { padding: 14px 15px; border: 1px solid var(--ddGrid); background: var(--ground); border-radius: 8px; margin-bottom: 18px; } .fmRoundsIntro { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 14px; } .fmRoundsIntro .fmTiny { font-size: 10px; } .fmRoundHead, .fmRoundRow { display: grid; grid-template-columns: .65fr 1.8fr .65fr .55fr; gap: 9px; align-items: center; } .fmRoundHead { font-size: 9px; color: var(--ddDim); margin-bottom: 6px; } .fmRoundRow { font-size: 11px; margin-top: 6px; } .fmRoundRow .fmMoney { height: 33px; padding: 6px 8px; } .fmRoundRow input { font-size: 11px; } .fmRoundRow .fmNum { font-size: 11px; height: 33px; padding: 5px 8px; } .fmRoundTotal { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--ddGrid); display: flex; justify-content: space-between; font-size: 11px; } .fmError { color: var(--ddWarn); font-size: 11px; margin-bottom: 12px; } /* ---- what this one company returns -------------------------------------- */ .fmDealResults { background: var(--ground); border: 1px solid var(--ddGrid); border-radius: 8px; padding: 17px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fmResultCol { min-width: 0; } .fmResultCol + .fmResultCol { border-left: 1px solid var(--ddGrid); padding-left: 18px; } .fmColTitle { display: block; font-size: 11px; font-weight: 600; color: var(--ddDim); margin-bottom: 8px; } .fmResultCol.on .fmColTitle { color: var(--teal); } .fmResultCol.hint p { margin-top: 6px; } .fmResultRow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ddGrid); font-size: 12px; } .fmResultRow:last-child { border-bottom: 0; } .fmResultRow strong { font-size: 17px; font-weight: 500; letter-spacing: -.4px; } .fmResultRow:first-of-type strong { font-size: 26px; letter-spacing: -.8px; } .fmReturnFund { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 10px; color: var(--ddDim); } .fmReturnFund strong { font-weight: 500; color: var(--ddInk); } .fmFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ddDim); font-size: 11px; margin-top: 21px; } .fmFoot .warn { color: var(--ddWarn); } /* ---- inside a dialog ---------------------------------------------------- The shell is the app's:
. These are only the parts the mock drew itself. Kit controls (.ddInput, .ddSelect) keep their own metrics. */ .fmDialog { font-size: 14.5px; color: var(--ddInk); } .fmDialogHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; } .fmDialog h2 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; } .fmDialogHead .fmIconBtn { border: 0; font-size: 23px; } .fmDialog label { display: block; font-size: 12px; margin: 14px 0 6px; } .fmDialog input:not(.ddInput), .fmDialog textarea, .fmDialog select:not(.ddSelect) { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--ddGrid); border-radius: 8px; color: var(--ddInk); background: var(--ddField); padding: 10px 11px; } .fmDialog textarea { resize: vertical; } .fmDialog p.fmTiny { margin: 12px 0 18px; } .fmDialogActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* one row shape for the three lists: pick a company, open a scenario, copy a template */ .fmRow { padding: 12px 0; border-bottom: 1px solid var(--ddGrid); display: flex; justify-content: space-between; gap: 10px; align-items: center; } .fmRow strong { display: block; font-size: 12px; } .fmRow .fmTiny { display: block; font-size: 10px; margin-top: 4px; } .fmRowActions { display: flex; gap: 6px; } .fmDivider { height: 1px; background: var(--ddGrid); margin: 20px 0; } .fmTermsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fmTerm { padding: 12px 0; border-bottom: 1px solid var(--ddGrid); } /* the mock's `.term .tiny` was the small dim LABEL over a big read-only value (the rule under this one), so it was a direct child. The page's terms grid puts a .fmTiny INSIDE the