/* ===================================================================================================================== desk.css · the desk, as calm as the phone (16-10, DESIGN.md §18, DECISIONS 155) Gabriel, 16-10: "I see the phone app looks quite beautiful ... lets have the web app look as good and as good of a ux and ui." The phone (DESIGN §17.5, §17.7) reads well for six reasons, and the desk takes each of them at its own scale: words at reading size, one 8px rhythm with air around every press, the usual state not drawn, one press in sight per row with the rest folded, a big plain title over each screen, and cards and rows that keep a thing's facts together instead of spreading them across the width of the window. base.html loads this sheet after app.css with media="(min-width: 861px)": nothing here can reach a phone, which keeps its look exactly. Every rule here is the desk's. Each part of the screen has its own section below; a section is written by whoever owns those screens, and only there, so the parts merge without stepping on each other. ===================================================================================================================== */ /* ==== 0 · tokens and type (foundation) ==== */ :root { --gutter: 32px; --press: 32px; --press-sm: 28px; --r2: 8px; --r3: 10px; --r4: 14px; --side-w: 244px; --sh1: 0 1px 2px rgba(11,27,53,.06); --sh-press: 0 1px 2px rgba(11,27,53,.06), 0 0 0 .5px rgba(11,27,53,.02); --sh-card: 0 1px 2px rgba(11,27,53,.04); --sh2: 0 8px 24px rgba(11,27,53,.12), 0 0 0 1px rgba(11,27,53,.05); --hair-soft: color-mix(in srgb, var(--hair) 60%, var(--surface)); } @media (max-width: 1199px) { :root { --gutter: 24px; --side-w: 224px; } } body { font-size: 14px; line-height: 1.5; } p { margin: 0 0 12px; } h1 { font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -0.018em; } h2 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.008em; margin: 32px 0 12px; gap: 10px; } h3 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 20px 0 8px; } .sub { font-size: 14px; line-height: 20px; } .small { font-size: 13px; } .mono, .n { font-size: 13px; } svg.ic { width: 16px; height: 16px; } .section-title { font-size: 12.5px; margin: 24px 0 8px; } .narrow { max-width: 860px; } /* ==== 1 · the shell: the side, the head, the page (foundation) ==== */ .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } .content { padding: 28px var(--gutter) 96px; } /* the side: the menu of a Mac app. 32px lines, 14px words, the page you are on a white card on the grey */ .side { padding: 16px 12px 12px; gap: 2px; } .ws { height: 24px; padding: 2px 8px 16px; gap: 10px; font: 650 14px/1 var(--sans); letter-spacing: -0.01em; } .mono-sq { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; } .find { margin: 0 0 12px; } .find input { height: 34px; padding: 0 40px 0 34px; border-radius: var(--r2); font-size: 14px; border-color: var(--hair); } .find > svg.ic { left: 11px; top: 9px; width: 16px; height: 16px; } .find .kbd { right: 10px; top: 10px; font-size: 11px; } .hits { width: 420px; padding: 6px; border-radius: 12px; } .hits a { height: 34px; line-height: 34px; padding: 0 10px; font-size: 14px; } .side nav { gap: 2px; } .side nav a { height: 32px; gap: 10px; padding: 0 10px; border-radius: var(--r2); font: 500 14px/1 var(--sans); } .side nav a svg.ic { width: 16px; height: 16px; opacity: .78; } .side nav a:hover { background: var(--side-hover); } .side nav a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,53,.08), 0 0 0 1px rgba(11,27,53,.05); } .side nav a .n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-grid; place-items: center; font: 600 11.5px/1 var(--num); color: var(--ink-2); background: var(--fill-2); } .side nav a.active .n { background: var(--surface-2); } .side nav a.sub { padding-left: 36px; } .side .grp { font: 500 12px/16px var(--sans); margin: 20px 0 6px; padding: 0 10px; } .side .who { padding: 10px 0 0; } .side .who > summary { height: 44px; padding: 0 8px; gap: 10px; } .side .who > summary .avatar { width: 28px; height: 28px; font-size: 11px; } .side .who .nm { font-size: 14px; } .side .who .nm small { font-size: 12.5px; } /* a laptop of 800 to 880px tall keeps the whole menu in sight: the lines and the gaps between the groups tighten before the menu has to scroll inside itself (it still does, below that) */ @media (max-height: 880px) { .side nav a { height: 30px; } .side .grp { margin: 14px 0 4px; } .ws { padding-bottom: 12px; } .find { margin-bottom: 8px; } } @media (max-height: 810px) { .side nav a { height: 28px; font-size: 13.5px; } .side nav { gap: 1px; } .side .grp { margin: 10px 0 2px; } } /* the head: the screen's name big and plain, its presses at the right */ /* 64px; --head-h stays what base.html measures of the head as drawn (the sticky toolbars read it), never set here */ .page-head { height: 64px; gap: 12px; padding: 0 var(--gutter); } .page-head .obj { display: none; } .page-head h1 { font: 650 20px/28px var(--sans); letter-spacing: -0.018em; } .page-head h1 .n { font: 500 15px var(--num); margin-left: 8px; color: var(--muted); } .page-head .sub { font-size: 13.5px; line-height: 18px; margin-top: 1px; } .page-head > .right { gap: 8px; } .page-head.has-back { min-height: 64px; padding-top: 12px; padding-bottom: 14px; row-gap: 8px; } .page-head > .back .bk { height: 26px; font-size: 13.5px; } .page-head.record { height: auto; min-height: 84px; padding-top: 16px; padding-bottom: 16px; } .page-head.record.has-back { min-height: 96px; padding-top: 12px; padding-bottom: 18px; } .page-head.record h1 { font: 650 26px/34px var(--sans); letter-spacing: -0.022em; } .page-head.record .sub { font-size: 14px; line-height: 20px; margin-top: 2px; } .page-head.record .avatar.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; } .page-head.record .avatar.lg:not(.sq) { border-radius: 50%; } .page-head .hd-ico { width: 34px; height: 34px; } /* a record's name is read whole: on a narrower window it takes a second line rather than losing its end beside the presses (at 1,024 "Grupo Urceman-San Sebasti…"); a list's name keeps one line, its count beside it */ .page-head.record .ttl { flex: 1 1 0; } .page-head.record h1 { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: balance; } .page-head.record > .right { align-self: center; } .find input { text-overflow: ellipsis; } /* ==== 2 · the parts every screen draws from (foundation) ==== */ /* presses: 32px, 8px corners, 14px words; the small one 28px */ .btn { height: var(--press); padding: 0 14px; gap: 7px; border-radius: var(--r2); font: 500 13.5px/1 var(--sans); box-shadow: var(--sh-press); } .btn svg.ic { width: 15px; height: 15px; } .btn.small { height: var(--press-sm); padding: 0 11px; font-size: 13px; gap: 6px; } .btn.small svg.ic { width: 14px; height: 14px; } .btn.tiny { height: 24px; padding: 0 9px; font-size: 12.5px; } .btn.primary { box-shadow: 0 1px 2px rgba(27,107,224,.28), inset 0 1px 0 rgba(255,255,255,.12); } .btn.ghost { box-shadow: none; } .actions { gap: 8px; margin: 16px 0 8px; } .flex { gap: 8px; } /* fields: a press tall, 14px words */ .form input, .form select, .inline-form input, .inline-form select, .inline-input, .toolbar input, .toolbar select, .filters input, .filters select, .quick input, .card-form .q input, .card-form .q select, .menu-panel input, .menu-panel select, .gen-days input, .gen-scale input, .gen-excl input { height: 34px; padding: 0 10px; border-radius: var(--r2); font-size: 14px; } select:not([multiple]) { padding-right: 30px; background-position: right 10px center; } .form textarea, .inline-form textarea, textarea { padding: 8px 10px; font-size: 14px; line-height: 1.5; border-radius: var(--r2); } input[type=checkbox], input[type=radio] { width: 15px; height: 15px; } .checkbox { font-size: 14px; gap: 8px; } input[type=file]::file-selector-button { height: 32px; padding: 0 12px; border-radius: var(--r2); font-size: 13.5px; } /* a page's own toolbar (the Outbox, Activity, Jobs: no view switch) reads as a list's does: a press that opens a menu or narrows the page is words with their icon and no box until the pointer is on it, a narrowing in force a soft accent key with its x, the search a quiet grey field, and the count only while something narrows (the tab says it else) */ .toolbar:not(:has(> .view-menu)) :is(form, .flex) > a.btn.small:not(.on, .primary), .toolbar:not(:has(> .view-menu)) > details.menu > summary.btn, .toolbar:not(:has(> .view-menu)) form > details.menu > summary.btn { height: 32px; padding: 0 10px; gap: 7px; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; font-size: 13.5px; } .toolbar:not(:has(> .view-menu)) :is(form, .flex) > a.btn.small:not(.on, .primary):hover, .toolbar:not(:has(> .view-menu)) > details.menu > summary.btn:hover, .toolbar:not(:has(> .view-menu)) form > details.menu > summary.btn:hover { background: var(--surface-hover); color: var(--ink); } .toolbar:not(:has(> .view-menu)) details.menu[open] > summary.btn { background: var(--surface-2); color: var(--ink); } .toolbar:not(:has(> .view-menu)) details.menu > summary.btn svg.ic { width: 15px; height: 15px; color: var(--muted); } .toolbar:not(:has(> .view-menu)) :is(form, .flex) > a.btn.small.on { height: 32px; padding: 0 10px; border-color: transparent; background: var(--accent-soft); box-shadow: none; color: var(--ink); font-size: 13.5px; } .toolbar:not(:has(> .view-menu)) .chip.filter { height: 28px; padding: 0 10px; gap: 6px; font-size: 13px; background: var(--accent-soft); border-color: transparent; color: var(--ink); } .toolbar:not(:has(> .view-menu)) input[type=search] { width: 240px; flex: 0 1 240px; min-width: 120px; font-size: 13.5px; background-color: var(--surface-2); border-color: transparent; } .toolbar:not(:has(> .view-menu)) input[type=search]:hover { border-color: var(--hair); } .toolbar:not(:has(> .view-menu)) input[type=search]:focus { background-color: var(--surface); border-color: var(--accent); } .toolbar .tb-count { color: var(--muted); } .toolbar .tb-count.tb-whole { display: none; } /* chips: a word with its mark, 22px */ .chip { height: 22px; gap: 6px; padding: 0 9px 0 8px; font-size: 12.5px; } .toolbar .chip { height: 28px; } .avatar { width: 22px; height: 22px; font-size: 10px; } .avatar.md { width: 26px; height: 26px; font-size: 10.5px; } .who-mk { width: 22px; height: 22px; font-size: 9.5px; } .who-mk.lg { width: 26px; height: 26px; font-size: 11px; } /* menus: a card of 34px lines */ .menu-panel { padding: 6px; border-radius: 12px; min-width: 220px; } .menu-panel > a, .menu-panel > button { height: 34px; padding: 0 10px; gap: 10px; font-size: 14px; border-radius: 7px; } .menu-panel .lab { font-size: 12px; padding: 8px 10px 4px; } .menu-panel form, .menu-panel .fl { padding: 10px; gap: 10px; } /* the switch of two or three: a press tall */ .seg { height: var(--press); border-radius: var(--r2); } .seg a, .seg button { padding: 0 13px; font-size: 13.5px; } /* a record's tabs: 46px, 14px words */ .tabs { height: 46px; margin: 16px 0 24px; } .tabs a { padding: 0 14px; font: 500 14px/44px var(--sans); } .tabs a .n { font-size: 12px; margin-left: 6px; } /* cards and panels: 12px corners and room inside, like a card on the phone */ .card { padding: 20px 24px; border-radius: var(--r4); box-shadow: var(--sh-card); } .cards { gap: 16px; } .panel { padding: 20px 24px; border-radius: var(--r4); margin: 12px 0 16px; box-shadow: var(--sh-card); } .card > h2:first-child, .panel > h2:first-child, .card > h3:first-child, .panel > h3:first-child { margin-top: 0; } .notice { padding: 12px 16px; border-radius: var(--r3); font-size: 14px; line-height: 1.5; } .empty { font-size: 14px; padding: 12px 0; } /* lists of rows: 52px, the meta a line under the name */ .list { border-radius: var(--r4); } .list li { min-height: 52px; padding: 12px 18px; gap: 12px; font-size: 14px; } .list li .m { font-size: 13px; margin-top: 3px; line-height: 1.45; } .list li .m .val { font-size: 13px; } .list li.gh { min-height: 40px; padding: 8px 18px; } .list.compact li { min-height: 40px; padding: 8px 16px; } .files { border-radius: var(--r4); } .file { min-height: 44px; padding: 0 16px; gap: 12px; font-size: 14px; } .file span.ic { height: 20px; line-height: 20px; font-size: 10.5px; min-width: 40px; } /* app.css's rule for a paper's kind tag (.file .ic) also draws a row's icons (a More's three dots) as a grey tag: at a desk an icon in a row is an icon */ .file svg.ic { min-width: 0; padding: 0; background: none; border-radius: 0; } .file .nm .d { font-size: 13px; } /* property rows on a record's panel */ .props { grid-template-columns: 136px minmax(0, 1fr); gap: 0 14px; font-size: 14px; } .props dt { font-size: 13px; min-height: 34px; } .props dd { min-height: 34px; } .props dd .val { min-height: 34px; padding: 6px 0; } .props-add { font-size: 13px; margin-top: 16px; padding-top: 12px; } /* the control room's parts at desk size */ .status-line { column-gap: 12px; margin: 0 0 20px; } .status-line > .mean { height: 28px; } .status-line .sl-text { font: 450 18px/28px var(--sans); letter-spacing: -0.01em; } .status-line .sl-src { font-size: 13px; line-height: 18px; margin-top: 6px; } /* the board card (m.bcard: a deal's board and the firm-wide board, one part): the move's word keeps the card's top right corner and a long financier's name flows under it, never cut. The room kept beside the first line is the word's own width (data-w, the same words in the same type, unseen), so "Ours, late" and "Nos toca, con retraso" both fit, and a word no longer drops under a two-line name leaving a hole at its left. The word lets a click through to the card. */ :is(.fboard, .fwboard) .bcard .bc-h[data-w] { display: block; } :is(.fboard, .fwboard) .bcard .bc-h[data-w]::before { content: attr(data-w); float: right; height: 20px; margin-left: 10px; padding-left: 12px; font: 500 12.5px/20px var(--sans); white-space: nowrap; visibility: hidden; } :is(.fboard, .fwboard) .bcard .bc-h[data-w]:has(> .bc-via)::before { padding: 0 10px 0 9px; } :is(.fboard, .fwboard) .bcard .bc-h[data-w] > .bc-n { display: inline; font-size: 14px; line-height: 20px; white-space: normal; overflow: visible; overflow-wrap: normal; -webkit-line-clamp: unset; } :is(.fboard, .fwboard) .bcard .bc-h[data-w] > :is(.mean, .bc-via) { position: absolute; top: 12px; right: 14px; margin: 0; font-size: 12.5px; line-height: 20px; white-space: nowrap; pointer-events: none; } /* a word the column already says is not drawn, and keeps no room (Declined in the Declined column) */ .bcol[data-col="declined"] .bcard.out .bc-h[data-w]:has(> .mean.bad)::before { content: none; } .rows > .row { min-height: 64px; padding: 12px 16px; column-gap: 16px; } .row-t { font: 500 15px/22px var(--sans); } .row-ctx { font-size: 13px; line-height: 18px; margin-top: 2px; } .row-who { font-size: 13.5px; } .row-when { font-size: 13px; line-height: 18px; } .mean { font-size: 13px; } /* ==== 3 · lists: the views, the toolbar, the table, the boards (owner: lists) ==== */ /* A list at a desk reads like a well-made Mac app's table (16-10, the desk round): the sets of the list as one row of quiet tabs, one calm row of controls under it (the ways to read the list at the left, the presses on it and the search at the right), rows of 46px with the name whole, each column as wide as what it holds, the usual state not drawn until the pointer is on its row, and the count said once. The phone never reads this sheet. The base of a table here (its type, its 46px rows, the gutter of its first column) is the foundation's and every table at a desk keeps it; what follows it is the lists' own: the grid every list draws (partials/db.html, .tablewrap.sortable, and .tw-head, the copy of its header row pinned under the toolbar), the lists' toolbar (the one with the phone's view menu in it), their boards, gallery and bulk bars, so no other screen's table or toolbar moves. */ /* -- the views bar: a list's sets, one row of quiet tabs under the head (every screen that has one) -- */ .views { height: 52px; gap: 2px; padding: 0 var(--gutter); margin: -28px calc(-1 * var(--gutter)) 0; } .views a, .views summary { height: 30px; padding: 0 11px; font-size: 13.5px; gap: 7px; } .views a { color: var(--ink-2); } .views a:hover { background: var(--surface-hover); } .views a.on { background: var(--surface-2); color: var(--ink); } .views a .n { font-size: 12px; color: var(--muted); } .views > details.menu > summary.btn.ghost { color: var(--muted); font-weight: 500; } .views > details.menu > summary.btn.ghost:hover { color: var(--ink); } .views > details.menu > summary.btn.ghost svg.ic { width: 14px; height: 14px; } /* -- the toolbar's base (every screen) -- */ .toolbar, .filters { height: 56px; gap: 8px; padding: 12px var(--gutter); margin: 0 calc(-1 * var(--gutter)); } .toolbar input[type=search] { width: 300px; flex: 0 1 300px; height: 32px; } .toolbar .tb-count { font-size: 13px; } /* -- the lists' toolbar: one calm row. At the left how the list is read (the view switch with its ⋯, a list's own switch, the filters in force); at the right the presses on it (Filter, Sort, Columns, Group) and the search, last, where a Mac app keeps it. The count stands only while a filter or a search narrows the list: the head says it otherwise. -- */ .toolbar:has(> .view-menu)::before { content: ""; order: 2; flex: 1 1 0; min-width: 4px; } .toolbar:has(> .view-menu) > .seg, .toolbar:has(> .view-menu) > .seg-more { order: 0; } .toolbar:has(> .view-menu) .chip.filter, .toolbar:has(> .view-menu) form > .btn.link { order: 1; } .toolbar:has(> .view-menu) form > details.menu { order: 3; } .toolbar:has(> .view-menu) > .tb-right { order: 4; margin-left: 0; gap: 8px; } .toolbar:has(> .view-menu) input.q-desk { order: 5; } /* the switch of the views: a quiet track, the view in use a white key on it (macOS's segmented control) */ .toolbar:has(> .view-menu) .seg { height: 32px; padding: 2px; gap: 2px; border: 0; border-radius: var(--r2); background: var(--surface-2); box-shadow: none; overflow: visible; } .toolbar:has(> .view-menu) .seg a { height: 28px; padding: 0 10px; gap: 6px; border: 0; border-radius: 6px; font-size: 13.5px; color: var(--ink-2); } .toolbar:has(> .view-menu) .seg a:hover { background: var(--fill-2); color: var(--ink); } .toolbar:has(> .view-menu) .seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,53,.10), 0 0 0 .5px rgba(11,27,53,.08); } :root[data-theme="dark"] .toolbar:has(> .view-menu) .seg a.on { background: var(--fill-2); box-shadow: none; } .toolbar:has(> .view-menu) .seg a svg.ic { width: 15px; height: 15px; color: currentColor; opacity: .8; } .toolbar:has(> .view-menu) .seg a .n { font-size: 12px; color: var(--muted); margin-left: 1px; } .toolbar:has(> .view-menu) > .seg + .seg-more { margin-left: -4px; } /* a list with one view of itself has no switch to draw (Clients) */ .toolbar:has(> .view-menu) > .seg:has(> a:only-child) { display: none; } .content > .toolbar:has(> .view-menu):first-child { margin-top: -16px; } /* the presses: words with their icon, no box until the pointer is on them; one in force keeps a quiet key */ .toolbar:has(> .view-menu) .seg-more > summary.btn, .toolbar:has(> .view-menu) form > details.menu > summary.btn { height: 32px; padding: 0 10px; gap: 7px; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; } .toolbar:has(> .view-menu) .seg-more > summary.btn:hover, .toolbar:has(> .view-menu) form > details.menu > summary.btn:hover { background: var(--surface-hover); color: var(--ink); } .toolbar:has(> .view-menu) .menu[open] > summary.btn { background: var(--surface-2); color: var(--ink); } .toolbar:has(> .view-menu) .seg-more > summary.btn.on { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-press); color: var(--ink); } .toolbar:has(> .view-menu) form > details.menu > summary.btn svg.ic { width: 15px; height: 15px; color: var(--muted); } .toolbar:has(> .view-menu) form > details.menu > summary.btn .n { font-size: 12px; color: var(--accent); } .toolbar:has(> .view-menu) .chip.filter { height: 28px; padding: 0 10px; gap: 6px; font-size: 13px; background: var(--accent-soft); border-color: transparent; color: var(--ink); } .toolbar:has(> .view-menu) .chip.filter:hover { background: var(--surface-2); } .toolbar:has(> .view-menu) input.q-desk[type=search] { width: 240px; flex: 0 1 240px; min-width: 120px; height: 32px; font-size: 13.5px; background-color: var(--surface-2); border-color: transparent; } .toolbar:has(> .view-menu) input.q-desk[type=search]:hover { border-color: var(--hair); } .toolbar:has(> .view-menu) input.q-desk[type=search]:focus { background-color: var(--surface); border-color: var(--accent); } .toolbar:has(> .view-menu) .tb-count { color: var(--muted); } .toolbar:has(> .view-menu) .tb-count[data-whole] { font-size: 0; } .toolbar:has(> .view-menu) .tb-count[data-whole]:not(:has(.sc)) { display: none; } .toolbar:has(> .view-menu) .tb-count[data-whole] .sc { font-size: 12.5px; margin-left: 0; } /* the calendar: the month's name between its arrows */ .toolbar:has(> .view-menu) .tb-right b { font-size: 14px; font-weight: 600; } .toolbar:has(> .view-menu) > .tb-right > .btn.small { height: 30px; } /* -- a table's base (every table at a desk, the foundation's) -- */ .tablewrap { margin: 0 calc(-1 * var(--gutter)); } table { font-size: 14px; } th { height: 38px; padding: 0 14px; font-size: 12.5px; } td { height: 46px; padding: 0 14px; } td.k { padding-top: 8px; padding-bottom: 8px; } td.k, td.k a { font-weight: 550; } td.num { font-size: 13.5px; } .tablewrap th { background: var(--surface-hover); border-bottom-color: var(--hair); } .tablewrap th + th, .tablewrap td + td { border-left-color: var(--hair-soft); } th:first-child, td:first-child { box-shadow: 1px 0 0 var(--hair-soft); } th:first-child, td:first-child { padding-left: var(--gutter); } /* the copy of a list's header row pinned under its toolbar (base.html) and the sideways bar at the window's foot keep to the page's edges, as the table does */ .tw-head, .tw-hbar { margin: 0 calc(-1 * var(--gutter)); } .tw-head-in { border-bottom-color: var(--hair); box-shadow: 0 6px 10px -8px rgba(11,27,53,.22); } /* -- the lists' grid: flush with the window's edges, its header row pinned, the rows 46px -- */ .tablewrap.sortable { border-top-color: var(--hair); border-bottom: 0; } :is(.tablewrap.sortable, .tw-head) th { height: 36px; font-weight: 500; color: var(--muted); background: var(--surface); } :is(.tablewrap.sortable, .tw-head) th a { color: var(--muted); gap: 5px; } :is(.tablewrap.sortable, .tw-head) th a:hover, :is(.tablewrap.sortable, .tw-head) th a.on { color: var(--ink); } :is(.tablewrap.sortable, .tw-head) th + th { border-left-color: var(--hair); } :is(.tablewrap.sortable, .tw-head) th:first-child { box-shadow: 1px 0 0 var(--hair); } :is(.tablewrap.sortable, .tw-head) th.c-money, :is(.tablewrap.sortable, .tw-head) th.c-num { text-align: right; } :is(.tablewrap.sortable, .tw-head) th.c-money a, :is(.tablewrap.sortable, .tw-head) th.c-num a { flex-direction: row-reverse; } /* the dividers between columns (Gabriel 24-09: "clear dividers"), kept and lighter: a hairline in the header, a whisper between the cells */ .tablewrap.sortable td { color: var(--ink-2); border-bottom-color: var(--hair-soft); } .tablewrap.sortable tbody tr:hover > td { background: var(--surface-hover); } .tablewrap.sortable td.num { font-size: 14px; font-weight: 500; color: var(--ink); } /* the name: whole, beside its mark, on two lines when the column is narrower than it (never under the mark, never cut while two lines hold it), 15px */ .tablewrap.sortable td.k { padding-top: 0; padding-bottom: 0; white-space: nowrap; text-overflow: clip; font-size: 15px; } .tablewrap.sortable td.k, .tablewrap.sortable td.k a { color: var(--ink); } .tablewrap.sortable td.k a:hover { color: var(--accent); } .tablewrap.sortable td.k > a { display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; vertical-align: middle; max-width: calc(100% - var(--k-lead, 0px) - var(--k-trail, 0px)); overflow: hidden; white-space: normal; overflow-wrap: break-word; word-break: normal; line-height: 19px; } .tablewrap.sortable td.k:has(> .avatar) { --k-lead: 34px; } .tablewrap.sortable td.k > .avatar { width: 22px; height: 22px; margin-right: 6px; font-size: 9.5px; } .tablewrap.sortable td.k > .avatar.sq { border-radius: 6px; } .tablewrap.sortable td.k > .prio-dot { margin: 0 6px 0 0; } .tablewrap.sortable td.k:has(> .prio-dot) { --k-lead: 47px; } .tablewrap.sortable td.k:has(> a ~ .chip.teal) { --k-trail: 56px; } .tablewrap.sortable td.k:has(> a ~ .chip.lock) { --k-trail: 34px; } .tablewrap.sortable td.k:has(> a ~ .attn-mark) { --k-trail: 24px; } .tablewrap.sortable td.k:has(> a ~ .chip.teal):has(> a ~ .attn-mark) { --k-trail: 80px; } .tablewrap.sortable td.k:has(> a ~ .chip.lock):has(> a ~ .attn-mark) { --k-trail: 58px; } .tablewrap.sortable td.k > .chip, .tablewrap.sortable td.k > .attn-mark { margin-left: 6px; vertical-align: middle; } /* a deal's short name the proposal had to cut gives way to its full name, cut only where the column ends */ .tablewrap.sortable td.k .nm-s { display: none; } /* a financier: its name on one line and what kind of house it is under it, in the row's 46px */ .tablewrap.sortable td.k:has(> a + .muted.small) > a { -webkit-line-clamp: 1; display: inline-block; white-space: nowrap; text-overflow: ellipsis; line-height: 19px; } .tablewrap.sortable td.k > a + .muted.small { display: block; margin: 0 0 0 var(--k-lead, 0px); font-size: 12.5px; line-height: 16px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tablewrap.sortable td.k:has(> a + .muted.small) > .avatar { vertical-align: -1px; } /* a financier's kind that the line under its name already says ("an intermediary") is said once: the cell's word waits for the pointer, as a lender's does */ .tablewrap.sortable td .chip.kind-said:not(.pop *, form *) { opacity: 0; color: var(--faint); transition: opacity .08s; } .tablewrap.sortable tr.row:hover td .chip.kind-said, .tablewrap.sortable td:focus-within .chip.kind-said { opacity: 1; } /* a paper's name beside its file mark, never under it */ .tablewrap.sortable td.k:has(> svg.ic) { --k-lead: 24px; } .tablewrap.sortable td.k > svg.ic { vertical-align: middle; margin-right: 4px; color: var(--muted); } .tablewrap.sortable td.k:has(> a ~ .chip.ai) { --k-trail: 96px; } /* a prospect: the name with their company under it */ .tablewrap.sortable td.k > a.pr-name { -webkit-line-clamp: 2; line-height: 18px; } .tablewrap.sortable td.k > a.pr-name b { font-weight: 550; font-size: 15px; } .tablewrap.sortable td.k > a.pr-name small { font-size: 12.5px; font-weight: 400; } /* the tick box of the bulk bar: in the gutter beside the name, drawn while the pointer is on the row, or once one is ticked (every box then shows, to tick more) */ .tablewrap.sortable td.k > input.sel, .tablewrap.sortable td.k .t-cell > input.sel { position: absolute; left: calc(var(--gutter) / 2 - 8px); top: 50%; margin: -8px 0 0; opacity: 0; transition: opacity .08s; } .tablewrap.sortable tr.row:hover td.k input.sel, .tablewrap.sortable td.k input.sel:focus-visible, .tablewrap.sortable td.k input.sel:checked, .tablewrap.sortable:has(input.sel:checked) td.k input.sel { opacity: 1; } .tablewrap.sortable tr.row:has(input.sel:checked) > td { background: var(--accent-soft); } /* a state is its mark and its word in the meaning's colour, no pill on every line; a kind is a plain word (§16 rule 5). What a cell opens (an editor's options, a card) keeps its pills */ .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *) { height: auto; padding: 0; gap: 6px; background: transparent; border-color: transparent; font-size: 13.5px; font-weight: 450; color: var(--ink-2); line-height: 20px; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *):not(.live):not(.wait):not(.bad):not(.theirs):not(.teal):not(.accent):not(.tag):not([class*="move-"])::before { display: none; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *):not(.live):not(.wait):not(.bad):not(.theirs):not(.teal):not(.accent):not(.tag):not(.lock):not([class*="move-"]) { color: var(--muted); } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).live { color: var(--ok); } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).wait { color: var(--ours); } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).bad { color: var(--bad); background: transparent; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).theirs, .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *)[class*="move-"]:not(.move-us) { color: var(--theirs); background: transparent; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).move-us { color: var(--ours); background: transparent; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).dim { color: var(--muted); } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).tag { padding: 0 8px 0 7px; height: 22px; background: var(--surface-2); font-size: 12.5px; } .tablewrap.sortable td .chip:not(.pop *, .peekcard *, form *).lock { padding: 0 6px; height: 20px; background: var(--lock-bg); color: var(--lock); } .tablewrap.sortable td .chip.mono:not(.pop *, form *) { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); } .tablewrap.sortable td .pill-row { gap: 6px; } /* the usual state of a column (Col.quiet: a deal that is Live, With us, silent for nought days; Col.usual: a contact that is Met) and an empty cell are not drawn until the pointer is on the row; then they come up as quiet words, still the press that opens the editor */ .tablewrap.sortable td.quiet > *, .tablewrap.sortable td.usual > * { opacity: 0; transition: opacity .08s; } .tablewrap.sortable tr.row:hover > td.quiet > *, .tablewrap.sortable tr.row:hover > td.usual > *, .tablewrap.sortable td.quiet:focus-within > *, .tablewrap.sortable td.usual:focus-within > * { opacity: 1; } .tablewrap.sortable td.quiet .chip:not(.pop *, form *), .tablewrap.sortable td.usual .chip:not(.pop *, form *) { color: var(--faint); } .tablewrap.sortable td.quiet .chip:not(.pop *, form *)::before, .tablewrap.sortable td.usual .chip:not(.pop *, form *)::before { display: none; } .tablewrap.sortable td .val.cell .empty.quiet { font-size: 13px; } .tablewrap.sortable td .faint.nxt-none { opacity: 0; transition: opacity .08s; font-size: 13px; } .tablewrap.sortable tr.row:hover td .faint.nxt-none, .tablewrap.sortable td:focus-within .faint.nxt-none { opacity: 1; } /* a column that takes the room the others leave (Col.flex): auto in the table's fixed layout, never under 230px (the e-mail 136px) */ .tablewrap.sortable th[data-flex] { width: auto !important; } .tablewrap.sortable th[data-flex]::before { content: ""; display: block; width: 202px; height: 0; } .tablewrap.sortable th[data-flex][data-k="email"]::before { width: 104px; } /* an editable cell fills its row; its Edit comes with the pointer */ .tablewrap.sortable td .val.cell { width: calc(100% + 16px); max-width: none; height: 34px; margin: 0 -8px; padding: 0 8px; border-radius: var(--r2); } .tablewrap.sortable td .val.cell .ed { height: 24px; } .tablewrap.sortable td.k .val.cell { height: auto; } .tablewrap.sortable td .val.cell:has(> .nxt-cell), .tablewrap.sortable td .val.cell:has(> .stg-cell), .tablewrap.sortable td .val.cell:has(> .clamp2) { height: auto; min-height: 34px; padding-top: 0; padding-bottom: 0; align-items: center; } /* two lines at most in a cell, at the row's 46px: a client's long name, a brief, a next step */ .tablewrap.sortable td .clamp2 { font-size: 13.5px; line-height: 18px; } /* the next step: its words on two lines and, at the right of the first, when it is due (red once late) */ .tablewrap.sortable td .nxt-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; } .tablewrap.sortable td .nxt-cell .clamp2 { color: var(--ink); } .tablewrap.sortable td .nxt-cell small { font-size: 12.5px; line-height: 18px; color: var(--muted); } .tablewrap.sortable td .nxt-cell small.bad { color: var(--bad); font-weight: 500; } /* the stage: its word, and under it the eight steps as a strip, the financiers' line beside the strip */ .tablewrap.sortable td .stg-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "w w" "b f"; column-gap: 8px; row-gap: 5px; align-items: center; } .tablewrap.sortable td .stg-cell .stg-top { display: contents; } .tablewrap.sortable td .stg-cell b { grid-area: w; font-size: 14px; font-weight: 500; color: var(--ink); } .tablewrap.sortable td .stg-cell .stagebar { grid-area: b; } .tablewrap.sortable td .stg-cell small { grid-area: f; font-size: 12.5px; line-height: 14px; } .tablewrap.sortable td .stg-cell:has(small) .stagebar { width: 38px; } .tablewrap.sortable td .stagebar { width: 54px; height: 4px; gap: 2px; margin: 0; background: transparent; border-radius: 0; overflow: visible; } .tablewrap.sortable td .stagebar i { border-radius: 2px; background: var(--fill-2); } .tablewrap.sortable td .stagebar i.on { background: var(--accent); } /* a stage beside a word, where a cell carries no stage cell of its own (Clients' furthest stage) */ .tablewrap.sortable td > .stagebar { width: 40px; margin-right: 6px; vertical-align: middle; } /* a person: the mark and the name; an owner beside a row's own facts is a mark alone, the name in its tooltip (Col.desk = 'mark': Contacts, Companies, Clients, Financiers) */ .tablewrap.sortable td .person { gap: 7px; font-size: 14px; } .tablewrap.sortable td .person .avatar { width: 22px; height: 22px; font-size: 9.5px; } .tablewrap.sortable td[data-desk="mark"] .person { gap: 0; } .tablewrap.sortable td[data-desk="mark"] .person .nm { display: none; } .tablewrap.sortable td[data-desk="mark"] .val.cell .ed { display: none; } /* the e-mail and the phone: the address whole while there is room, its Copy with the pointer */ .tablewrap.sortable td .val.cell > a.chan { color: var(--ink-2); text-decoration: none; border-bottom: 0; } .tablewrap.sortable td .val.cell > a.chan:hover { color: var(--accent); } /* a link to another record inside a row reads as the row's words; the pointer shows it is one */ .tablewrap.sortable td:not(.k) > a:not(.btn):not(.chip), .tablewrap.sortable td:not(.k) .val.cell > span > a:not(.btn):not(.chip) { color: var(--ink-2); } .tablewrap.sortable td:not(.k) > a:not(.btn):not(.chip):hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); } .tablewrap.sortable td .pr-added small { font-size: 12.5px; } /* -- Tasks: the task's words on two lines at most, at a row's size; the deal is its own column (the line under the words stays for a reader who hid that column) -- */ .tablewrap.sortable td.k .t-cell { align-items: center; gap: 0; } .tablewrap.sortable td.k .t-cell > .t-body { padding: 0; } .tablewrap.sortable td.k a.t-what, .tablewrap.sortable td.k .t-what { font-size: 14px; font-weight: 500; line-height: 19px; -webkit-line-clamp: 2; overflow-wrap: normal; word-break: normal; } .tablewrap.sortable:has(th[data-k="deal_name"]) td.k .t-deal-m { display: none; } .tablewrap.sortable td.k .t-sub { font-size: 12px; margin-top: 1px; } /* the deal: its name, and a status that is not Live after it in words */ .tablewrap.sortable td .t-deal { font-size: 13.5px; line-height: 18px; -webkit-line-clamp: 2; overflow-wrap: normal; color: var(--ink); } .tablewrap.sortable td .t-dstat { height: auto; margin-left: 0; padding: 0; font-size: 12.5px; } .tablewrap.sortable td .t-about { font-size: 13px; margin-left: 0; } .tablewrap.sortable td .t-about + .t-about { margin-left: 10px; } /* who: the holder's mark and name, the faces of the others beside it, from whom under it. On To do and Waiting the column takes 12px from the presses' (whose widest row, Done and I've asked, still has its room), so a holder's whole name stands beside a second person's face ("Sofia Federigi" was cut by three pixels) */ .tablewrap.sortable td .t-who { gap: 6px; } .tablewrap.sortable:has(th[data-k="kind_status"]) th[data-k="who_name"] { width: 182px !important; } .tablewrap.sortable:has(th[data-k="kind_status"]) th[data-k="actions"] { width: 214px !important; } .tablewrap.sortable td .val.cell.peek > .t-from { font-size: 12.5px; color: var(--muted); } /* when: the day over how far off it is; red once it is late, amber today and tomorrow */ .tablewrap.sortable td .due-sep { display: none; } .tablewrap.sortable td .due-d, .tablewrap.sortable td .due-r { display: block; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tablewrap.sortable td .due-r { font-size: 12.5px; opacity: .85; } .tablewrap.sortable td .val.cell:has(.due-r) { height: auto; min-height: 34px; } /* the kind and its status: words, the status in its meaning's colour */ .tablewrap.sortable td .ks-plain { font-size: 13px; } .tablewrap.sortable td:has(> .ks-k) { text-overflow: clip; } .tablewrap.sortable td:has(> .ks-k) > .val.cell, .tablewrap.sortable td:has(> .ks-k) > .chip { padding: 0 2px; margin-right: 6px; } /* a list read in sections (Waiting's to chase · later, Dates' next 30 days · later): the section's word on the gutter, as the names under it */ .tablewrap.sortable tr.sec td { height: 38px; padding: 14px 14px 6px var(--gutter); font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); } .tablewrap.sortable tr.sec .n { font-size: 12px; } /* the presses of a row: what it is usually there for, then the rest with the pointer */ .tablewrap.sortable td .acts { gap: 6px; } .tablewrap.sortable td .acts .btn.small { height: 28px; } /* the line to add one: a row of the list, not a box. The dashed ring at the gutter, the words at the row's size, its presses quiet until the pointer is on them */ .tk-add-top { margin: 0 0 6px; } .tk-add-top .tk-add-line { gap: 8px; min-height: 46px; padding: 6px 0 6px 0; border-color: transparent; background: transparent; border-radius: var(--r3); } .tk-add-top .tk-add-line:focus-within { box-shadow: none; border-color: transparent; } .tk-add-top .tk-add-line .tk-tick.ghost { width: 18px; height: 18px; margin: 0 4px 0 0; } .tk-add-top .tk-add-what { height: 32px; font-size: 14.5px; } .tk-add-top .tk-add-what::placeholder { color: var(--faint); } .tk-add-top .tk-pill { height: 30px; padding: 0 10px; font-size: 13px; border-color: transparent; background: transparent; color: var(--ink-2); } .tk-add-top .tk-pill:hover { background: var(--surface-hover); } .tk-add-top .tk-pill.on { background: var(--surface-2); color: var(--ink); } .tk-add-top .tk-pill .tk-faces .avatar { width: 18px; height: 18px; font-size: 8.5px; } .tk-add-top .tk-add-pills .btn.small { height: 30px; } .tk-add-top .tk-add-more { margin: 4px 0 12px; } /* the Done list's own switch sits in the toolbar's row at a desk (tasks.html), so the tabs keep one line */ .views > .views-sub.tk-vsub { display: none; } .views > a.chip.filter { height: 28px; padding: 0 11px; font-size: 13px; } /* -- Contacts' More columns is the last line of the Columns menu at a desk -- */ .cols-more-line { display: none; } .cols-menu .col-more { display: flex; gap: 8px; color: var(--accent); } .cols-menu .col-all + .col-more { border-top: 0; margin-top: 0; padding-top: 0; } /* -- Documents: its two lists as tabs under the head, then the list's own sets -- */ .content > .tabs.mb2:first-child:has(+ .views) { margin: -12px 0 0; } .content > .tabs.mb2:first-child + .views { margin-top: 0; } /* -- the lists' bulk bar: a quiet band over the list while rows are ticked -- */ :is(#deals-bulk, #bulk).bulk { gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r3); font-size: 13.5px; } :is(#deals-bulk, #bulk).bulk :is(select, input[type=date], input[type=text]) { height: 30px; padding: 0 10px; font: 400 13.5px var(--sans); color: var(--ink); background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); } :is(#deals-bulk, #bulk).bulk select { padding-right: 28px; } :is(#deals-bulk, #bulk).bulk .btn.small { height: 30px; } :is(#deals-bulk, #bulk).bulk .bulk-grp { gap: 6px; } /* -- the Deals table's own two lines over it (12-10, DECISIONS 112): the quick cuts as quiet tabs, each group apart, and the late work as words with their marks, no pill on either -- */ .quick:has(.qchip) { gap: 4px 0; margin: 0 0 6px; } .quick:has(.qchip) .quick-grp { gap: 2px; padding: 0 12px; border-left: 1px solid var(--hair); } .quick:has(.qchip) .quick-grp:first-child { padding-left: 0; border-left: 0; } .qchip { height: 28px; padding: 0 9px; gap: 6px; border-color: transparent; border-radius: var(--r2); background: transparent; font-size: 13px; color: var(--ink-2); } .qchip:hover { background: var(--surface-hover); } .qchip .n { font-size: 12px; } .qchip.on { background: var(--accent-soft); border-color: transparent; color: var(--ink); } .quick:has(.qchip) ~ .attention { gap: 2px 16px; margin: 0 0 14px; align-items: center; } .quick:has(.qchip) ~ .attention a { height: 24px; padding: 0; gap: 7px; border: 0; background: transparent; font-size: 13px; color: var(--ink-2); } .quick:has(.qchip) ~ .attention a:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); } .quick:has(.qchip) ~ .attention a b { font-size: 13px; font-weight: 600; } .quick:has(.qchip) ~ .attention a.bad b { color: var(--bad); } .quick:has(.qchip) ~ .attention a.warn b { color: var(--ours); } .quick:has(.qchip) ~ .attention > .muted.small { font-size: 12.5px; } /* -- the lists' boards: a column a quiet grey lane, its cards white; the usual state is not drawn on a card -- */ .board[data-db-results] { gap: 12px; padding: 4px 0 16px; } .board[data-db-results] > .col { border-radius: var(--r3); padding: 8px; } .board[data-db-results] > .col h4 { margin: 2px 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink); } .board[data-db-results] > .col h4 span { font-size: 12px; color: var(--muted); } .board[data-db-results] > .col .dc { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r2); font-size: 13.5px; } .board[data-db-results] > .col .dc small { font-size: 12.5px; margin-top: 3px; } /* By stage: the eight stages share the line at a desk, never past its right edge */ .board.stage-board { grid-auto-columns: minmax(118px, 1fr); gap: 8px; } .board.stage-board > .col { min-width: 0; } .board.stage-board .col .dc { padding: 9px 10px; } .board.stage-board .col .dc .dc-t { font-size: 13px; font-weight: 550; line-height: 1.3; } .board.stage-board .col .dc small { font-size: 12px; } .board.stage-board .col .dc .dc-meta { margin-top: 6px; gap: 4px 8px; } .board.stage-board .col .dc .dc-meta .mono { font-size: 12.5px; font-weight: 600; color: var(--ink); } .board.stage-board .col .dc .dc-meta .chip { height: auto; padding: 0; border: 0; background: transparent; font-size: 12px; line-height: 16px; } .board.stage-board .col .dc .dc-meta .chip.move-us { display: none; } .board.stage-board .col .dc .dc-meta .chip[class*="move-"]:not(.move-us) { color: var(--theirs); } .board.stage-board .col .dc .dc-fin { font-size: 12px; margin-top: 5px; } /* a stage nobody is at is quiet (§16 rule 3): its name and its 0 on the ground, no lane and no dashed box, in a narrow column, so the stages that hold deals get the room; a stage's name is read whole on one line with its count beside it, as the deal's own board does (under 1,440px a long name breaks at its hyphen, as before) */ .board.stage-board { display: flex; align-items: flex-start; } .board.stage-board > .col { flex: 1 1 0; min-width: 118px; } .board.stage-board > .col:has(> .col-empty) { flex: 0 0 88px; min-width: 0; min-height: 0; background: transparent; } .board.stage-board > .col:has(> .col-empty) h4 { color: var(--muted); font-weight: 500; } .board.stage-board .col-empty { display: none; } .board.stage-board > .col > h4 { justify-content: flex-start; flex-wrap: nowrap; gap: 0 6px; margin: 2px 2px 10px; } @media (min-width: 1440px) { .board.stage-board > .col > h4 { white-space: nowrap; } } @media (max-width: 1279px) { .board.stage-board > .col > h4 { font-size: 12.5px; gap: 0 4px; } } /* -- the gallery: the usual state of a card is not drawn (db.gallery wraps it in .g-quiet) -- */ .gallery[data-db-results] { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .gallery[data-db-results] a.card { padding: 16px 18px; } .gallery[data-db-results] a.card b { font-size: 15px; } /* the cards the same height: the line of states is kept on every card, drawn or not, and two states share it (a card with three goes to a second line, never cut) */ .gallery[data-db-results] a.card { padding: 16px; } .gallery[data-db-results] .pill-row { min-height: 22px; gap: 6px; } /* -- the firm-wide board of what is ours to move (financiers/board.html): its cards read as the deal's board's do (the deal builder's rules for .fboard, 16-10): a long financier's name wraps under the move's word, which stays at the top right, and is never cut, at 1,440 or on a 1,280 desk's narrower columns -- */ .fwboard .bcard { gap: 6px; padding: 12px 14px 14px; border-radius: 12px; } /* the name is words that wrap around the word of the move, which keeps the top right corner (the board card's own rule, in 2 · the parts, shared with the deal's board) */ .fwboard .bcard .bc-h > .bc-n { font-size: 14px; line-height: 20px; white-space: normal; overflow-wrap: normal; } .fwboard .bc-p, .fwboard .bc-l { font-size: 13px; line-height: 18px; } .fwboard .bc-p { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .fwboard .bc-l .bc-lm { white-space: normal; overflow-wrap: break-word; } .fwboard .bcard .fit:not(.tablewrap, .lb-opt) { font-size: 12.5px; line-height: 18px; gap: 2px 10px; } .fwboard .bc-a { margin-top: 4px; } /* -- the review of the eight stages (deals/stages.html): a card holding its table edge to edge, a deal's name first -- */ .stg-card { padding: 0; } table.stg-table th { height: 38px; padding: 0 16px; font-size: 12.5px; background: var(--surface); } table.stg-table td { height: 46px; padding: 0 16px; font-size: 14px; } table.stg-table th:first-child, table.stg-table td:first-child { padding-left: 20px; box-shadow: none; } table.stg-table td:first-child a { font-size: 15px; font-weight: 550; } table.stg-table select { height: 32px; } .content > form[action="/deals/stages"] > h2:first-child { margin-top: 4px; } /* -- a narrower desk (1,280 to 1,439): the Deals Simple table still reads to its edge, the name and the client giving the next step its room (a name takes two lines beside its mark), nothing scrolled sideways -- */ @media (max-width: 1439px) { .tablewrap.sortable:has(th[data-k="next_action"][data-flex]) th[data-k="name"] { width: 250px !important; } .tablewrap.sortable:has(th[data-k="next_action"][data-flex]) th[data-k="client"] { width: 150px !important; } .tablewrap.sortable:has(th[data-k="next_action"][data-flex]) th[data-k="ball"] { width: 136px !important; } .tablewrap.sortable th[data-flex]::before { width: 150px; } } /* -- Deals: whose move is a narrow column while every deal on the screen is with us (the usual, not drawn): a blank 150px column no longer stands between the stage and the next step, which takes the room. A deal with the client, a financier or a third party gives the column its width back -- */ .tablewrap.sortable:not(:has(td:not(.quiet) .chip[class*="move-"])) th[data-k="ball"] { width: 104px !important; } /* ==== end of 3 · lists ==== */ /* ==== 4 · Home, Inbox, Outbox, Approve & sign, Activity, Jobs, the bell (owner: home) ==== */ /* ---- Home (DESIGN §18.1): the phone's Home at desk scale. The day and its two switches over the list, the four things a day starts with as one quiet line, each group a clear section, each row two lines that keep a thing's facts together (what and its context, when and who beside them, the one press at the end), and, where the desk is wide enough, what happened since you last looked and the pipeline in a column at the side ---- */ .home { max-width: 860px; } .home:has(> .home-side) { max-width: 1160px; } .home-main { min-width: 0; max-width: 860px; } @media (min-width: 1400px) { .home:has(> .home-side) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; } .home-side { padding-top: 4px; } .home-side > .gh:first-child, .home-side > .since-none:first-child { margin-top: 0; } } /* the day, the switch of Mine and Everyone and the Whose menu: one line, the switches at the list's right edge */ .home-top { min-height: 32px; margin: 0 0 12px; gap: 8px 12px; } .home-top .sub.day { font: 500 15px/22px var(--sans); color: var(--ink-2); letter-spacing: -0.005em; } .home-top .seg { margin-left: auto; } .home-top .home-whose > summary.btn.small { height: var(--press); padding: 0 12px; font-size: 13.5px; } .home-whose summary .n { font-size: 12px; margin-left: 2px; } /* the four things a day starts with: ghost presses whose words line up with the day's edge */ .home-acts { gap: 4px; margin: 0 0 8px -10px; } .home-acts .btn.small.ghost { height: 30px; padding: 0 10px; gap: 7px; font-size: 13.5px; } .home .panel { margin: 8px 0 16px; padding: 16px 20px; } /* the three small forms they open: one height for the fields, the deal picker and the presses beside them */ .home .panel .inline-form { gap: 8px; } .home .panel .inline-form .rpick .pick-q, .home .panel .inline-form input[type=text] { height: 34px; padding: 0 10px; font-size: 14px; } .home .panel .inline-form .btn.small { height: 34px; padding: 0 14px; font-size: 13.5px; } .home .panel .inline-form input[type=file]::file-selector-button { height: 34px; } .home #p-task .tk-add { margin-bottom: 0; } /* a group: a section with its title at 16px, the count beside it and its one hint under it */ .home .gh { flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 32px 0 12px; font: 600 16px/24px var(--sans); letter-spacing: -0.008em; } .home .gh .n { font: 500 14px/24px var(--num); } .home .gh .hint { flex: 1 1 100%; font-size: 13px; line-height: 18px; white-space: normal; } .home-main > .gh:first-of-type { margin-top: 24px; } .home-quiet { margin: 32px 0 8px; font-size: 15px; } /* a row: two lines, 64px. The mark in its own 16px column; what over its context; when over who in one column that lines up down the whole page; the press at the end, in a column wide enough for a second press that comes with the pointer (Chase beside Done), so nothing moves when it shows */ .home ul.rows { display: block; } .home ul.rows > .row, .home ul.rows > .row.bare { grid-template-columns: 16px minmax(0, 1fr) 140px 132px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 64px; padding: 11px 12px 11px 14px; } :lang(es) .home ul.rows > .row, :lang(es) .home ul.rows > .row.bare { grid-template-columns: 16px minmax(0, 1fr) 140px 156px; } .home ul.rows > .row > .row-what { display: contents; } .home ul.rows > .row > .mean { grid-column: 1; grid-row: 1; align-self: center; margin: 0; height: 22px; } .home ul.rows > .row .row-t { grid-column: 2; grid-row: 1; } .home ul.rows > .row .row-ctx { grid-column: 2; grid-row: 2; margin: 0; } .home ul.rows > .row > .row-when { grid-column: 3; grid-row: 1; font-size: 13px; line-height: 22px; } .home ul.rows > .row > .row-who { grid-column: 3; grid-row: 2; font-size: 13px; line-height: 18px; color: var(--muted); } .home ul.rows > .row > .row-press { grid-column: 4; grid-row: 1 / span 2; } .home .row-who .who { gap: 6px; } .home .row-who .who-mk { width: 18px; height: 18px; font-size: 8.5px; } .home .row-who .who-mk[data-kind="grok"], .home .row-who .who-mk[data-kind="claude"], .home .row-who .who-mk[data-kind="agent"] { border-radius: 5px; font-size: 9.5px; } .home .row-ctx .src[data-src] { vertical-align: baseline; } /* a long group folds beyond its first rows: one line whose chevron sits in the marks' column and words in the titles' */ .home .rows-more > summary { display: flex; gap: 14px; min-height: 40px; margin: 0; padding: 0 14px; border-bottom: 1px solid var(--hair); font-size: 13.5px; font-weight: 500; color: var(--ink-2); } .home .rows-more > summary .chev { width: 16px; height: 12px; flex: none; } .home .rows-more > summary:hover { background: var(--surface-hover); color: var(--ink); } .home .rows-more[open] > summary { border-bottom: 0; } .home .rows-more > .rows { border-top: 0; } /* the brief: a card on the page with the five lines as the person will paste them */ .home-brief { margin: 8px 0 16px; padding: 16px 20px 20px; border-radius: var(--r4); } .hb-h { gap: 8px 10px; } .hb-h b { font-size: 15px; } .hb-h .hint { font-size: 13px; line-height: 18px; } .hb-t { margin-top: 14px; padding: 14px 16px; font-size: 14px; line-height: 22px; } /* since you last looked: a section like the groups, its window under its title; the timeline at reading size */ .home-side .gh .hint { font-size: 13px; } .home-side .tl { margin-top: 0; } .home-side .tl > li { column-gap: 12px; grid-template-columns: 22px minmax(0, 1fr); padding-bottom: 14px; } .home-side .tl > li::before { left: 10.5px; top: 28px; } .home-side .tl-b { font-size: 13.5px; line-height: 20px; } .home-side .tl-m { font-size: 12.5px; margin-top: 2px; } .since-more { margin-top: 10px; font-size: 13px; } .since-none { margin-top: 32px; font-size: 13px; } .home .pipe-line { margin-top: 24px; padding-top: 16px; font-size: 13px; line-height: 22px; } .home .pipe-line b, .home .pipe-line .num { font-weight: 600; } .home .pipe-line.top { margin-top: 0; padding-top: 0; font-size: 14px; } @media (min-width: 1400px) { .home-side .pipe-line { margin-top: 20px; } } /* ---- the Outbox: what is finished and has not gone. A measure, so a row's paper, its age, its facts and its press read together; each group a heading; the press a row is there for in sight (Mark sent, Sign, Chase) and the others with the pointer (Download, Email, Open, Draft, Not coming back), so nothing moves when they show ---- */ .ob-body { max-width: 980px; } .ob-body > .ob-old, .ob-body > .ob-went { max-width: none; } .ob-old { padding: 12px 16px; gap: 8px 12px; border-radius: var(--r3); font-size: 14px; } .ob-old { flex-wrap: nowrap; } .ob-old > svg.ic { flex: none; color: var(--muted); } .ob-old > span { flex: 1 1 0; min-width: 0; line-height: 20px; } .ob-old > .btn { flex: none; } /* a group: the deal (or the person, or the kind) at 15px with its client beside it, the count at the right */ .ob-body .list li.gh { min-height: 44px; padding: 10px 20px; } .ob-body .list li.gh .flex { gap: 8px; align-items: baseline; } .ob-body .list li.gh b { font: 600 15px/22px var(--sans); color: var(--ink); } .ob-body .list li.gh .muted.small { font-size: 13px; } .ob-body .list li.gh > .n { font: 500 13px var(--num); color: var(--muted); } /* a row: its paper on one line (the kind, the name, the version, the age), its facts on the line under it */ .ob-body .list li:not(.gh) { min-height: 64px; padding: 13px 16px 13px 20px; column-gap: 24px; } /* a paper's line flows like a sentence (its kind, its name, its deal when not grouped by deal, the version, the age), wrapping word by word when it is long, never leaving its kind alone on a line */ .ob-body .list li > div:first-child > .flex { display: block; min-width: 0; font-size: 15px; line-height: 22px; } .ob-body .list li > div:first-child > .flex > * { margin-right: 8px; vertical-align: baseline; } .ob-body .list li > div:first-child > .flex > *:last-child { margin-right: 0; } .ob-body .list li > div:first-child > .flex > .ext { position: relative; top: -1px; } .ob-body .list li > div:first-child > .flex > a.ellipsis { display: inline; overflow: visible; white-space: normal; } .ob-body .list li > div:first-child > .flex > .chip { display: inline-flex; vertical-align: baseline; } .ob-body .list li > div:first-child > .flex > a.ink b, .ob-body .list li > div:first-child > .flex > b { font-weight: 600; } .ob-body .list li > div:first-child > .flex > .mono.muted { font: 400 13px var(--num); } /* grouped by person or kind, the deal a row belongs to is its context in the title line, not a second title */ .ob-body .list li:not(.gh) > div:first-child > .flex > a.ellipsis { font-size: 14px; color: var(--ink-2); } .ob-body .list li:not(.gh) > div:first-child > .flex > a.ellipsis:hover { color: var(--accent); } .ob-body .list li > div:first-child > .m { margin-top: 3px; font-size: 13px; line-height: 19px; } /* the age is a word with its meaning's shape, never a pill: red past three weeks, amber past one, quiet before */ .ob-body .list li > div:first-child > .flex > .chip { height: auto; padding: 0; gap: 6px; border: 0; background: none; font: 500 13px var(--num); color: var(--muted); } .ob-body .list li > div:first-child > .flex > .chip:not(.bad):not(.wait)::before { display: none; } .ob-body .list li > div:first-child > .flex > .chip.wait { color: var(--ours); } .ob-body .list li > div:first-child > .flex > .chip.bad { color: var(--bad); } /* the presses: 28px, the More a ⋯ whose word is read out, not printed */ .ob-body .list li > .flex { gap: 8px; flex-wrap: nowrap; } .ob-body .row-more > summary.btn { width: 32px; padding: 0; justify-content: center; gap: 0; } .ob-body .row-more > summary.btn .rm-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* a paper waiting to come back: Chase last at the row's edge (or Upload the signed copy when there is nothing to chase), Draft and Upload before it with the pointer, and Not coming back under the ⋯ as on the phone */ .ob-body .list li > .flex.ob-w > .btn.ph-fold { order: 0; } .ob-body .list li > .flex.ob-w > a.btn { order: 1; } .ob-body .list li > .flex.ob-w > form { order: 2; } .ob-body .list li > .flex.ob-w > details.row-more { order: 3; display: inline-block; } .ob-body .list li > .flex.ob-w > button.ph-fold[aria-controls^="quiet-"] { display: none; } .ob-body .list li > .flex.ob-w .menu-panel > button.ph-in[aria-controls^="quiet-"] { display: flex; } .ob-body .list li > .flex > .btn { transition: opacity .12s; } @media (hover: hover) { .ob-body .list li:not(:hover):not(:focus-within) > .flex > a.btn[href$="/download"], .ob-body .list li:not(:hover):not(:focus-within) > .flex > a.btn[href^="mailto:"], .ob-body .list li:not(:hover):not(:focus-within) > .flex[id^="acts-m"] > a.btn, .ob-body .list li:not(:hover):not(:focus-within) > .flex > .btn.ph-fold, .ob-body .list li:not(:hover):not(:focus-within) > .flex.ob-w > form ~ a.btn { opacity: 0; } } /* Sent: a log of what went, each paper's facts beside its name while the line has room */ .ob-body > ul.list.mt2 li:not(.gh) { min-height: 48px; padding-top: 10px; padding-bottom: 10px; } .ob-body > ul.list.mt2 li > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; min-width: 0; } .ob-body > ul.list.mt2 li > div:first-child > .m { margin-top: 0; } .ob-body > .flex > .section-title { display: flex; align-items: baseline; gap: 8px; font: 600 16px/24px var(--sans); color: var(--ink); letter-spacing: -0.008em; } .ob-body > .flex > .section-title .n { font: 500 14px var(--num); color: var(--muted); } .ob-body > .flex + ul.list { margin-top: 12px; } /* a narrower desk (under 1,200px) folds Email, and a waiting row's Draft, under the row's ⋯ as the phone does, so the paper's words keep their room */ @media (max-width: 1199px) { .ob-body .list li > .flex > a.btn.ph-fold[href^="mailto:"], .ob-body .list li > .flex.ob-w > button.ph-fold[hx-post] { display: none; } .ob-body .list li > .flex .menu-panel > a.ph-in[href^="mailto:"], .ob-body .list li > .flex.ob-w .menu-panel > button.ph-in[hx-post] { display: flex; } } .ob-body > .section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 600 16px/24px var(--sans); color: var(--ink); letter-spacing: -0.008em; } .ob-body > .section-title .n { font: 500 14px var(--num); color: var(--muted); } .ob-body > .section-title .muted.small { font: 400 13px var(--sans); } .ob-body .ob-moved { font-size: 13px; margin-top: 20px; } .ob-body .ob-pending > summary { font-size: 13px; min-height: 32px; } /* ---- the Inbox: what came in and is still to file. A measure; the drop target one slim dashed line; each paper a card whose head keeps its name, who dropped it, how many files, the deal suggested and when on one line (the usual source, Dropped, not drawn), and whose form is one line of fields a press tall ---- */ #drop, .inbox-list, .inbox-filed, .content > details.mt4 { max-width: 980px; } .drop { padding: 0 20px; border-radius: var(--r4); } #drop-hint { flex-direction: row; gap: 10px; min-height: 56px; font-size: 14px; } #drop-hint svg.ic { width: 18px; height: 18px; } #drop-hint .muted.small { font-size: 13px; } #drop:not(.line) { padding: 20px 24px; text-align: left; } #drop:not(.line) .inline-form { justify-content: flex-start; } #drop:not(.line) input[type=file] { margin: 8px 0; } .inbox-list { border-radius: var(--r4); } #drop ~ .inbox-list, #drop ~ .inbox-filed, #drop ~ .empty { margin-top: 16px; } .inbox-row > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; } .inbox-row > summary > .chip[data-source="drop"] { display: none; } .inbox-row > summary > .ellipsis { flex: 0 1 auto; font-size: 13.5px; } .inbox-row > summary > .ellipsis b { font-size: 15px; font-weight: 600; } .inbox-row > summary > span:empty { display: none; } .inbox-row > summary > span > .chip.plain { height: auto; padding: 0; border: 0; background: none; font: 400 13px var(--num); color: var(--muted); } .inbox-row > summary > span > .chip.plain::before { display: none; } .inbox-row > summary > span:has(> .chip.plain[data-n="1"]) { display: none; } .inbox-row > summary > .sg { order: 5; flex: 0 1 auto; max-width: none; font-size: 13px; color: var(--ink-2); } .inbox-row > summary > .mono { order: 6; margin-left: auto; flex: none; font-size: 13px; color: var(--muted); } .inbox-row > summary:hover, .inbox-row[open] > summary { background: var(--surface-2); } .inbox-body { padding: 14px 20px 12px; gap: 12px; } .inbox-item .sug { font-size: 13.5px; } .inbox-notes, .inbox-preview { margin: 0; padding: 12px 14px; border-radius: var(--r3); } .inbox-notes-text, .inbox-preview { font-size: 14px; line-height: 1.55; } /* the form that files it: the deal, the section, what it is, File; New deal and the ⋯ beside it, one height */ .inbox-item form.inline-form[id^="file-"] { gap: 8px; align-items: center; } .inbox-item form.inline-form[id^="file-"] .pill-row { margin-bottom: 2px; } .inbox-item form.inline-form[id^="file-"] .rpick { flex: 0 1 240px; } .inbox-item form.inline-form[id^="file-"] .rpick .pick-q, .inbox-item form.inline-form[id^="file-"] > select, .inbox-item form.inline-form[id^="file-"] > input[type=text] { height: 34px; font-size: 14px; } .inbox-item form.inline-form[id^="file-"] > select { flex: 0 1 200px; } .inbox-item form.inline-form[id^="file-"] > input[type=text] { flex: 1 1 180px; min-width: 0; } .inbox-item form.inline-form[id^="file-"] > .btn.small, .inbox-item form.inline-form[id^="file-"] > .menu > summary.btn.small { height: 34px; } .inbox-item form.inline-form[id^="file-"] > .btn.small { padding: 0 14px; font-size: 13.5px; } .inbox-item form.inline-form[id^="file-"] > .menu > summary.btn.small { width: 34px; padding: 0; justify-content: center; gap: 0; font-size: 0; } .inbox-item form.inline-form[id^="file-"] > .menu > summary.btn.small svg.ic { width: 15px; height: 15px; } /* the rarer things to do with a paper: one quiet line whose words line up with the form's edge */ .inbox-actions { gap: 2px; margin: 0 0 0 -10px; } .inbox-actions .btn.small.ghost { height: 30px; padding: 0 10px; font-size: 13px; color: var(--ink-2); } .inbox-actions .btn.small.ghost:hover { color: var(--ink); } /* they come with the pointer (or the keyboard) on their paper, their room kept so nothing moves when they show */ .inbox-actions { transition: opacity .12s; } @media (hover: hover) { .inbox-row:not(:hover):not(:focus-within) .inbox-actions { opacity: 0; } } .inbox-item > form.inline-form.mt2 { margin-top: 0; } /* Filed: the paper, then where it went, who filed it and when, beside it while the line has room */ .list.inbox-filed li { display: block; min-height: 56px; padding: 10px 20px; } .list.inbox-filed li > .ellipsis { display: block; font-size: 14px; line-height: 20px; } .list.inbox-filed li > .ellipsis b { font-size: 15px; font-weight: 600; } .list.inbox-filed li > .m { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; } /* ---- Approve & sign: each paper a card in a measure. The kind is a quiet word over the paper's name (a kind is words in muted, §16 rule 5), the name 17px, the facts at reading size, and the decision at the card's foot on the right: the note uncut, Return and Approve, and under them the signing line when there is one ---- */ .appr-list { max-width: 980px; gap: 16px; margin-top: 20px; } .appr-card { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 20px 24px; border-radius: var(--r4); box-shadow: var(--sh-card); } .appr-card.decided { grid-template-columns: 72px minmax(0, 1fr); } .appr-thumb img, .appr-thumb.none { width: 112px; } .appr-card.decided .appr-thumb img, .appr-card.decided .appr-thumb.none { width: 72px; } .appr-thumb span { font-size: 12px; } .appr-card.decided .appr-thumb span { font-size: 11.5px; line-height: 15px; text-align: center; } .appr-top { gap: 4px 10px; font-size: 13px; line-height: 20px; } .appr-top > .chip:first-child { height: auto; padding: 0; gap: 0; border: 0; background: none; font: 500 13px/20px var(--sans); color: var(--muted); } .appr-top > .chip:first-child::before { display: none; } .appr-top > .chip:first-child::after { content: "·"; margin-left: 10px; color: var(--faint); } .appr-top .muted.small { font-size: 13px; } .appr-title { margin: 4px 0 6px; font: 600 17px/24px var(--sans); letter-spacing: -0.01em; } .appr-title .muted.small { font-size: 13px; font-weight: 400; } .appr-body > .small, .appr-body > div:not([class]) { font-size: 14px; line-height: 1.5; } .appr-why { gap: 8px; margin: 8px 0; } .appr-why .muted.small { font-size: 13px; } .appr-facts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 24px; margin: 14px 0 8px; } .appr-facts dt { font-size: 12.5px; } .appr-facts dd { font-size: 14px; line-height: 1.45; } .appr-all { font-size: 13px; } .appr-actions { gap: 8px; margin-top: 16px; padding-top: 16px; } .appr-actions > a.btn.small:first-child { border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); margin-left: -11px; } .appr-actions > a.btn.small:first-child:hover { background: var(--surface-hover); color: var(--ink); } .appr-actions .appr-note { width: 300px; height: var(--press-sm); font-size: 13.5px; } /* the foot reads: Open and (for whoever asked) Withdraw on the left; the note, Return and Approve on the right; the signing line under them */ .appr-actions > form[action$="/withdraw"] { order: 1; } .appr-actions > form.appr-decide { order: 2; flex: 1 1 360px; justify-content: flex-end; min-width: 0; } .appr-actions > form.appr-decide .appr-note { flex: 1 1 160px; width: auto; min-width: 150px; max-width: 300px; } .appr-actions > form.appr-sign, .appr-actions > form.appr-signnow, .appr-actions > .ml-auto:not(form) { order: 3; } .appr-actions > form[action$="/withdraw"] .btn.ghost { color: var(--ink-2); } .appr-actions .appr-decide { gap: 8px; } .appr-actions > form.appr-sign, .appr-actions > form.appr-signnow { margin-left: auto; gap: 8px; } .appr-actions select, .appr-actions input[type=date] { height: var(--press-sm); font-size: 13.5px; } .appr-actions > .muted.small { font-size: 13px; } .appr-card .chg-i p { font-size: 14px; } /* ---- Activity: a feed in a measure. Each day a heading; each entry one sentence at reading size (who in 600, what they did, to what, on which deal, at what time), what changed under it, quieter ---- */ .act-feed { max-width: 860px; margin-top: 8px; } .act-feed .log { padding-left: 24px; } .act-feed .log::before { left: 7px; } .act-feed .log > .section-title { margin: 28px 0 10px; font: 600 14px/20px var(--sans); color: var(--ink); } .act-feed .log > .section-title:first-child { margin-top: 16px; } .act-feed .log .e { padding: 6px 0 14px; } .act-feed .log .e::before { left: -21px; top: 12px; width: 8px; height: 8px; } .act-feed .log .e .h { gap: 6px; font-size: 14px; line-height: 22px; color: var(--ink-2); margin-bottom: 2px; } .act-feed .log .e .h b { font-weight: 600; color: var(--ink); } .act-feed .log .e .h .mono { margin-left: 4px; font: 400 13px var(--num); color: var(--muted); } .act-feed .log .e .b { font-size: 13px; line-height: 20px; color: var(--muted); } .act-feed > .section-title { margin: 20px 0 10px; font: 600 15px/22px var(--sans); color: var(--ink); } .act-feed > .list.compact li { min-height: 44px; padding: 10px 20px; column-gap: 24px; align-items: baseline; } .act-feed > .list.compact li > .ellipsis { white-space: normal; line-height: 21px; } .act-feed > .list.compact li > .m { font-size: 13px; } .act-feed > .actions { margin-top: 24px; } /* ---- Pages opened: the table as wide as what it holds, in its card ---- */ .pv-card { width: fit-content; max-width: 100%; padding: 0; overflow: hidden; } .pv-card > .tablewrap { margin: 0; } .pv-card table { width: auto; } .pv-card th, .pv-card td { padding: 0 16px; } .pv-card th:first-child, .pv-card td:first-child { min-width: 260px; padding-left: 24px; box-shadow: none; } .pv-card th:last-child, .pv-card td:last-child { padding-right: 24px; } .pv-card th.num, .pv-card td.num { min-width: 72px; } /* ---- Jobs: a measure; each job's name first, who and when under it; then its state as a word with its shape in a column of its own (Done, the usual end of a job, is not drawn, so a failed or stopped one stands out), the cost, and Stop while it runs ---- */ .jobs-body { max-width: 980px; } .jobs-body > .ai-switch { padding: 16px 20px; } .jobs-body > h2 { margin: 28px 0 12px; } .jobs-body > h2.mt0 { margin-top: 8px; } .jobs-list { border-radius: var(--r4); } .jobs-list li, .list.compact.jobs-list li { grid-template-columns: minmax(0, 1fr) 96px 80px; column-gap: 16px; min-height: 60px; padding: 10px 20px; } .jobs-list li > .m.nowrap:empty { display: none; } /* a running job has no cost yet: its Stop takes that column */ .jobs-list li > .grow { order: 1; } .jobs-list li > .chip { order: 2; justify-self: start; height: auto; padding: 0; gap: 6px; border: 0; background: none; font: 500 13px/20px var(--sans); color: var(--muted); } .jobs-list li > .m.nowrap { order: 3; justify-self: end; } .jobs-list li > form { order: 4; justify-self: end; } .jobs-list li > .chip.live { visibility: hidden; } .jobs-list li > .chip.bad { color: var(--bad); } .jobs-list li > .chip.theirs { color: var(--theirs); } .jobs-list li > .chip.dim::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); } .jobs-list li > .grow > div:first-child { font-size: 14.5px; line-height: 22px; } .jobs-list li > .grow > .m { margin-top: 1px; font-size: 13px; } .jobs-list li > .m.nowrap { font: 400 13px var(--num); color: var(--ink-2); } /* ---- one job read back: a measure; its state and whether it was kept as words with their shapes on the meta line; what it answered at reading size, each fact with its paper, page and quote under it ---- */ .aijob { max-width: 860px; } .aijob .meta.kvrow { gap: 8px 16px; margin-bottom: 8px; font-size: 13px; } .aijob .meta.kvrow > .chip { height: auto; padding: 0; gap: 6px; border: 0; background: none; font: 500 13px var(--sans); } .aijob .meta.kvrow > .chip.dim { color: var(--muted); } .aijob .meta.kvrow > .chip.dim::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); } .aijob .meta.kvrow > .muted.small { font-size: 13px; } .aijob-sec { margin-bottom: 32px; } .aijob-sec > h2 { margin: 24px 0 12px; } .aijob-block > .section-title { margin: 16px 0 8px; } .aijob-block > .doc { max-width: none; font-size: 14.5px; line-height: 1.6; } .aijob-block > .doc > :last-child { margin-bottom: 0; } .aijob .list.compact li.digest-fact { padding: 12px 20px; font-size: 14px; line-height: 1.45; } .aijob li.digest-fact b.ink { font-weight: 600; } .aijob li.digest-fact .muted.small { font-size: 13px; } .aijob li.digest-fact .quote { margin-top: 2px; font-size: 13px; } .aijob-text { font-size: 13px; line-height: 1.6; padding: 14px 16px; } /* ---- the side search's hits: the side clips what overflows it (its own scroll), so while it holds hits the panel is let out over the page, wide enough for a deal's or a paper's whole name ---- */ .side:has(.find .hits:not(:empty)) { overflow: visible; z-index: 30; } .hits { width: 520px; max-width: calc(100vw - 32px); padding: 6px; } .hits .k { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; font-size: 12.5px; } .hits a { height: 36px; line-height: 36px; font-size: 14px; } .hits .m { font-size: 13px; } .hits .empty { padding: 12px 10px; font-size: 14px; } /* ---- the bell's panel at a desk: 420px, each line at reading size with its mark, the unread first ---- */ .bell .menu-panel.bell-panel { width: 420px; max-height: min(72dvh, 600px); } .bell-top { padding: 12px 14px 10px; } .bell-top b { font-size: 15px; } .bell-new { font-size: 12px; padding: 1px 8px; } .bell-list { padding: 6px; } .bell-list li > a { grid-template-columns: 24px minmax(0, 1fr) 10px; gap: 10px; padding: 10px; font-size: 14px; line-height: 20px; } .bell-list .bi { width: 24px; height: 24px; } .bell-list .bt { -webkit-line-clamp: 4; } .bell-list .bt small { margin-top: 3px; font-size: 12.5px; } .bell-list .bell-sep { padding: 12px 10px 4px; font-size: 12.5px; } .bell-empty { padding: 20px 16px; font-size: 14px; } .bell-all { padding: 12px 14px; font-size: 14px; } /* ---- what is running (partials/live_jobs.html): the side's box and a deal's, its words at the desk's sizes ---- */ .live-jobs.on { padding: 10px 4px 8px; } .live-head { gap: 8px; font-size: 13px; } .live-head .n { font: 600 12px var(--num); } .live-stop-all .btn { height: 24px; padding: 0 8px; font-size: 12px; } .live-list a { gap: 2px 8px; padding: 6px; font-size: 12.5px; } .live-list .d, .live-list .w, .live-list .m { font-size: 12px; } .live-list .jtag { font-size: 10.5px; } /* 16-10 (integrator, seen live: twelve papers being read at once pushed the Workspace lines out of the menu): while work runs, the side's list of it keeps to about one and a half jobs and scrolls inside itself (its head says how many and keeps Stop all), and the menu's lines tighten as on a short screen, so the menu stays in sight */ .side .live-list { max-height: min(112px, 14dvh); } :root:not(.jobs-folded) .side:has(.live-jobs.on) nav a { height: 30px; } :root:not(.jobs-folded) .side:has(.live-jobs.on) .grp { margin: 14px 0 4px; } .jobs-folded .side .live-jobs.on { padding-bottom: 6px; } .deal-jobs.on { padding: 12px 16px; border-radius: var(--r4); } .deal-jobs .live-list a { font-size: 13.5px; } /* ==== end of 4 · home ==== */ /* ==== 5 · the deal page and its tabs (owner: deal) ==== */ /* The screen the firm lives on. Above the tabs, on every tab: the record's head, the eight stages, the status line (one sentence, its one press beside it, the line it was read from under it with whose move it is), then the tabs. The Overview keeps the page's measure (1,120px): the main card and the dossier on the left, the rail on the right. */ /* ---- 5.1 the stages: the note under the three that follow the financiers is words, so 12px like every word ---- */ .stg-strip { margin: 0 0 20px; } .stg-strip .st, .stg-strip .st > button { font-size: 12.5px; line-height: 16px; } .stg-strip .st i { height: 4px; margin-bottom: 8px; } .stg-strip[data-fin]::after { margin-top: 8px; padding-top: 6px; font-size: 12px; } @media (max-width: 1199px) { .stg-strip .st b { white-space: normal; overflow: visible; overflow-wrap: break-word; } } /* "Pre-qualification" breaks at its hyphen rather than losing its end */ /* ---- 5.2 the status line: the sentence at a reading measure, its press right beside it (it stood at the window's far edge, 150px from the words it acts on), and under it the source line with whose move it is ---- */ .next-bar.sl-bar { margin: 0 0 8px; } .next-bar.sl-bar .status-line { grid-template-columns: 16px fit-content(840px) auto; justify-content: start; column-gap: 12px; } .next-bar.sl-bar .status-line.bare { grid-template-columns: fit-content(840px) auto; } .next-bar.sl-bar .status-line > .mean { height: 28px; } .next-bar.sl-bar .status-line .sl-text { max-width: none; } .next-bar.sl-bar .sl-act { grid-row: 1; align-self: start; padding-left: 20px; } .next-bar.sl-bar .sl-act .btn { min-width: 104px; } .next-bar.sl-bar .sl-src { gap: 8px 12px; margin-top: 8px; font-size: 13px; line-height: 20px; } .next-bar.sl-bar .sl-from { flex: 0 1 auto; } .next-bar.sl-bar .nb-move, .next-bar.sl-bar .nb-s { min-height: 24px; } .next-bar.sl-bar .nb-s { gap: 8px; } .next-bar.sl-bar .nb-s > .val:empty { display: none; } /* Live says nothing, so it leaves no gap before Urgent */ .next-bar.sl-bar .sl-src .chip { height: 24px; } /* ---- 5.3 the tabs: pinned under the head, the words at 14px and the counts quiet ---- */ .deal .tabstrip { margin: 0 0 24px; padding-top: 4px; } .deal .tabstrip .tabs a { padding: 0 14px; } .deal .tabstrip .tabs a.active { font-weight: 600; } .deal .tabstrip .more-tabs { margin-top: 7px; } .deal .tabstrip .more-tabs > summary { height: var(--press-sm); line-height: 1; } /* ---- 5.4 the Overview: the page's measure, the main column wider (the board's cards cut their names) and the rail 300px, which holds short lines ---- */ .tabpane.tab-overview { max-width: 1120px; } .ov-grid.story { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px 40px; } .ov-grid.story .ov-main { gap: 24px; } @media (max-width: 1360px) { .ov-grid.story { grid-template-columns: minmax(0, 1fr) 272px; column-gap: 32px; } } /* under 1,260px the rail would squeeze the board (cards of 140px at 1,200): one column, the main card first, then the rail in two columns (what is to do and the agreements beside the timeline's first lines, All opens the rest), then the dossier */ @media (max-width: 1259px) { .ov-grid.story { grid-template-columns: minmax(0, 1fr); } .ov-grid.story .ov-main { display: contents; } .ov-grid.story .rail { order: 1; display: block; columns: 2; column-gap: 40px; } .ov-grid.story .rail > * { break-inside: avoid; margin: 0 0 28px; } .ov-grid.story .rail > #timeline { break-before: column; } .ov-grid.story .rail .tl > li:nth-child(n+9), .ov-grid.story .rail .tl > li.tl-day:nth-child(8) { display: none; } .ov-grid.story #dossier { order: 2; } } .ov-card.st-card, .ov-card.ds-card { padding: 20px 24px 24px; } .st-card > h3 { margin: 0 0 16px; font: 600 16px/24px var(--sans); letter-spacing: -0.008em; gap: 10px; } .st-card > h3 .x.ink { font-size: 14px; } .st-card > h3 .hint { font-size: 13px; line-height: 20px; } .st-card > h3 .x:not(.ink) { font-size: 13.5px; font-weight: 500; } .st-card .st-rows { margin: 0 -24px 16px; } .st-card .st-rows > .row { padding: 12px 24px; } /* ---- a tab's own filters (the VDR's papers, the Log's views) read as every other switch of one of several at a desk (a list's views, Settings' Table · Cards): a quiet track, the one in force a white key on it. The ink-filled pill was the heaviest thing on the tab, heavier than the tab itself ---- */ .vdr-filter, .logbook-views { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 2px; border-radius: var(--r2); background: var(--surface-2); } :is(.vdr-filter, .logbook-views) .chip { height: 28px; padding: 0 11px; gap: 6px; border: 0; border-radius: 6px; background: none; box-shadow: none; font: 500 13.5px/1 var(--sans); color: var(--ink-2); } :is(.vdr-filter, .logbook-views) .chip:hover { background: var(--fill-2); color: var(--ink); } :is(.vdr-filter .chip[aria-pressed="true"], .logbook-views .chip.live) { background: var(--surface); border-color: transparent; color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,53,.10), 0 0 0 .5px rgba(11,27,53,.08); } :is(.vdr-filter, .logbook-views) .chip .n { font-size: 12px; color: var(--muted); } :is(.vdr-filter .chip[aria-pressed="true"], .logbook-views .chip.live) .n { color: var(--muted); } :root[data-theme="dark"] :is(.vdr-filter .chip[aria-pressed="true"], .logbook-views .chip.live) { background: var(--fill-2); box-shadow: none; } /* ---- 5.5 the financiers' board: a step a column, a card that never cuts the financier's name while the card has room (it takes two lines), the fit's checks on one line when they fit ---- */ .fb-bar { gap: 8px 20px; margin: 0 0 16px; } .fb-counts { gap: 8px 20px; font-size: 13.5px; } .fb-cols { gap: 12px; padding: 2px 2px 4px; } .fboard.compact .fb-cols { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); } .fboard.compact .bcol { max-width: 340px; } .bcol { gap: 10px; } .bcol-h { min-height: 28px; padding: 0 4px; font-size: 14px; line-height: 20px; align-items: center; } .bcol-h .n { font-size: 13px; } .bcol-h .al { font-size: 12px; } .bnone { font-size: 13px; padding: 4px; } .fboard .bcard { gap: 6px; padding: 12px 14px 14px; border-radius: 12px; } /* the name never gives way to the move's word: on a narrow card the word goes under it, still at the card's right */ .fboard .bc-h { flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; } .fboard .bcard .bc-h > .bc-n { flex: 1 1 auto; font-size: 14px; line-height: 20px; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .fboard .bcard .bc-h > .mean { margin-left: auto; font-size: 12.5px; line-height: 20px; } .fboard .bc-p, .fboard .bc-l { font-size: 13px; line-height: 18px; } /* our contact and the last move wrap rather than end on an ellipsis ("Nothing s…" on a narrow card) */ .fboard .bc-p { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .fboard .bc-l .bc-lm { white-space: normal; overflow-wrap: break-word; } .fboard .bcard .fit:not(.tablewrap, .lb-opt) { font-size: 12.5px; line-height: 18px; gap: 2px 10px; } .fboard .bc-a { margin-top: 4px; } .fb-out { gap: 6px 16px; margin: 16px 0 0; padding: 12px 4px 0; font-size: 13px; line-height: 20px; } .fb-out .fb-o { white-space: nowrap; } /* ---- 5.6 the rail: what is still to do, the dates, the agreements, then the timeline, 28px apart; its headings 14px ---- */ .rail { gap: 28px; } .rail-sec > summary, .rail-sec > .rh { margin: 0 0 10px; } .rail-sec .rh { font-size: 14px; line-height: 20px; } .rail-sec .rh .n { font-size: 13px; } .rail-sec > summary .x, .rail-sec > .rh .x { font-size: 13px; } .rail .rows > .row { padding: 10px 0; row-gap: 4px; } .rail .row-t { font-size: 14px; line-height: 20px; } .rail .row-who, .rail .row-when { font-size: 13px; } .rail-note { font-size: 13px; line-height: 20px; } .rail .tl { font-size: 13.5px; } .rail .tl > li { grid-template-columns: 22px minmax(0, 1fr); padding-bottom: 14px; } .rail .tl > li::before { left: 10.5px; top: 26px; } .rail .tl > li.tl-day { padding: 4px 0 10px; font-size: 12.5px; } .rail .tl-b { font-size: 13.5px; line-height: 20px; } .rail .tl-m { font-size: 12.5px; line-height: 18px; margin-top: 2px; } .rail ul.dl-dates > li { padding: 10px 0; align-items: flex-start; gap: 10px; } .rail .dl-dates .w { font-size: 14px; line-height: 20px; } .rail .dl-dates .day { display: block; margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 600; } /* the day on its own line, like a row's when */ .rail .dl-dates .w > .muted.small { font-size: 12.5px; line-height: 18px; } .rail .dl-props > summary, .rail .empty { font-size: 13px; } .rail-agree .rd-ag { gap: 8px; } .rail-agree .rd-ag li { font-size: 14px; gap: 8px; } .rail-agree .rd-ag li small { font-size: 12.5px; color: var(--muted); } .rail-sec .ov-drafts { font-size: 13px; } /* ---- 5.7 the dossier: a reading page in the card, its figures an even grid (the eighth no longer falls alone onto a line), each part's heading at 17px, the facts at 14px with their source chip ---- */ .ds-card > h3 { margin: 0 0 16px; font: 600 16px/24px var(--sans); color: var(--ink); } .ds-card > h3 .seg { height: var(--press-sm); } .ds-card > h3 .seg button { font-size: 13px; padding: 0 12px; } .ds-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 24px; margin: 20px 0 0; padding: 16px 0 0; } .ds-figs b { font-size: 17px; line-height: 24px; } .ds-figs span { font-size: 12.5px; line-height: 18px; color: var(--ink-2); } .ds-figs small { font-size: 12px; line-height: 16px; color: var(--muted); } .ds-figs + .ds-part { margin-top: 20px; } .ds-read-page .ds-part { padding: 24px 0 20px; } .ds-read-page .ds-part h4, .ds-read-page .ds-int h4 { font-size: 17px; line-height: 24px; margin-bottom: 12px; gap: 10px; } .ds-part h4 .n { font-size: 13px; } .ds-part h4 .from { font-size: 13px; } .ds-part h4 .ed, .ds-int h4 .ed { font-size: 13px; padding: 4px 8px; margin-right: -8px; border-radius: var(--r2); } .ds-client { gap: 6px 16px; margin: 0 0 12px; font-size: 14px; } .ds-client .person .avatar { width: 22px; height: 22px; font-size: 9.5px; } .ds-empty { font-size: 14px; line-height: 1.55; } .ds-facts { margin-top: 16px; max-width: none; } .ds-facts li { gap: 4px 12px; padding: 10px 0; font-size: 14px; line-height: 21px; } .ds-facts .src-b { max-width: 240px; } .ds-facts-more a { font-size: 13px; } .ds-back { margin-top: 12px; max-width: none; } .ds-back > summary { font-size: 13px; min-height: 28px; } .ds-proof { padding: 14px 16px; gap: 14px; border-radius: var(--r3); } .ds-grp li { font-size: 14px; line-height: 1.5; } .ds-grp .lbl, .ds-pc .lbl { font-size: 12.5px; } .ds-int { margin-top: 12px; padding: 20px 24px 18px; border-radius: 12px; } .ds-int h4 .lock { font-size: 12.5px; } .ds-pc { gap: 16px 32px; margin-top: 16px; } .ds-pc ul { font-size: 14px; line-height: 1.5; gap: 8px; } .ds-foot { gap: 8px 20px; margin-top: 20px; padding-top: 16px; font-size: 13px; } .ds-by { font-size: 12.5px; margin-top: 8px; } .ds-more { font-size: 13px; margin-top: 6px; } /* ---- 5.8 the VDR: a list at a list's measure (1,040px), so a paper's name, its words and its date stay a hand apart (they stood 700px apart at 1,440); each part a 16px heading with its hint beside it ---- */ .tabpane.tab-vdr { max-width: 1040px; } .vdr-bar { gap: 8px 12px; margin: 0 0 28px; } .vdr-filter { gap: 6px; } .vdr-filter .chip { height: 30px; padding: 0 12px; font-size: 13.5px; } .vdr-filter .chip .n { font-size: 12.5px; } .vdr-acts { gap: 8px; } .vdr-part { margin: 0 0 40px; } .vdr-h { gap: 4px 12px; margin: 0 0 12px; } .vdr-h h2 { font-size: 16px; line-height: 24px; } .vdr-h > .muted.small { font-size: 13px; } .vdr .sub.mb2 { margin-bottom: 4px; font-size: 13.5px; } /* what we ask the client: its heading, figures and presses on one line, together */ .ak { margin: 0 0 40px; } .ak-h { gap: 8px 16px; margin: 0 0 4px; } .ak-h h2 { font-size: 16px; line-height: 24px; } .ak-h .cnt { font-size: 13.5px; } .ak-h .acts { margin-left: 0; gap: 8px; } .ak-bar { max-width: 480px; margin: 10px 0 0; } .ak-sub { margin: 12px 0 16px; font-size: 13.5px; max-width: 80ch; } .ak-blk { margin: 16px 0 0; border-radius: 12px; } .ak-blk > .t { padding: 10px 16px; font-size: 14px; gap: 4px 10px; } .ak-blk > .t small { font-size: 13px; } .ak-blk > .t .n { font-size: 13px; } .ak-l > li { column-gap: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px; } .ak-l .mk { margin-top: 2px; } .ak-l .w small { margin-top: 2px; font-size: 13px; line-height: 18px; } .ak-l .st { gap: 10px; font-size: 13px; line-height: 20px; } .ak-l .first { font-size: 12px; padding: 1px 8px; } .ak-foot { margin: 16px 0 0; font-size: 13px; } .ak-form { margin: 12px 0 8px; padding: 16px 20px; gap: 12px; border-radius: 12px; } /* one line per section of the papers: the name, its bar and its count side by side, a note after them */ .vdr-lines { margin: 4px 0 24px; } .vdr-lines li { grid-template-columns: 32px minmax(0, 260px) 120px 96px minmax(0, 1fr); column-gap: 16px; min-height: 44px; padding: 8px 4px; font-size: 14px; } .vdr-lines li.quiet { min-height: 36px; padding: 6px 4px; } .vdr-lines .sn { font-size: 13px; } .vdr-lines .k { font-size: 13px; text-align: left; } .vdr-lines .note { font-size: 13px; line-height: 18px; } /* the papers by section: a heading per section, rows of 48px, the words and the date in line from row to row */ .vdr .section-title { margin: 24px 0 8px; font: 600 13.5px/20px var(--sans); color: var(--ink-2); gap: 10px; } .vdr .section-title .n { font-weight: 500; color: var(--muted); } .vdr .files { border-radius: 12px; } .vdr .file { min-height: 48px; padding: 6px 16px; column-gap: 12px; } .vdr .file .nm { column-gap: 24px; } .vdr .file .nm > a, .vdr .file .nm > .val > a { font-size: 14px; } .vdr .file .nm .d { gap: 0 14px; font-size: 13px; } .vdr .file .nm .d .chip { font-size: 13px; } .vdr .file .nm .d .when { min-width: 104px; } .vdr .file .r { gap: 8px; } /* a row's More shows its three dots: the row's rule for a file's kind tag (.file .ic) also drew the icon as a grey tag */ .deal .file svg.ic { min-width: 0; padding: 0; background: none; border-radius: 0; } .vdr .twin-line { font-size: 13px; line-height: 18px; margin: 6px 0 2px; } /* our papers (agreements, materials): the name, and under it where it stands, who made it and when, like a row on the phone; the state word first (it stood alone on a line above the dates when the words did not fit beside the name) */ .vdr .doc-row .nm, .vdr .doc-todo .nm { display: block; padding: 2px 0; } .vdr .doc-row .nm > a, .vdr .doc-todo .nm > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vdr .doc-row .nm .d, .vdr .doc-todo .nm .d { display: block; margin-top: 2px; white-space: normal; text-align: left; line-height: 18px; } .vdr .doc-row .nm .d .chip { margin-right: 6px; font-size: 13px; font-weight: 500; } .vdr .doc-row .nm .d .chip.live { color: var(--ok); } .vdr .doc-row { min-height: 56px; } .vdr-part details > summary.small { font-size: 13px; } .vdr-part .files.mb1 + p.muted { margin-top: 10px; } /* shared with financiers: one card per financier, its links as rows; Live is the usual state of a link in sight, so it is not drawn (an ended link keeps its word) */ .vdr-shared > .section-title { margin-top: 0; } .rm-fin { margin: 0 0 16px; padding: 16px 20px 12px; border-radius: 12px; } .rm-fin-h { gap: 8px; margin-bottom: 4px; font-size: 14px; } .rm { padding: 12px 0 10px; gap: 6px; } .rm-h { gap: 6px 10px; } .rm-t { font-size: 14px; } .rm:not(.dead) .rm-h > .chip.live { display: none; } .rm-sum, .rm-rec, .rm-rec > summary, .rm-past > summary { font-size: 13px; } .rm-acts { gap: 6px 8px; } .rm-how { margin-top: 12px; font-size: 13px; } /* the folds at the foot of the VDR (AI on many papers, checklists, the client's links) */ .vdr-ai { margin-top: 32px; padding-top: 12px; } .vdr-ai > summary.section-title { font: 500 13.5px/20px var(--sans); color: var(--ink-2); margin: 4px 0; } .tab-vdr .work-fold > summary { min-height: 44px; font-size: 14px; } /* ---- 5.9 the Financiers tab: the full board, a step with nobody in it a narrow column so the cards keep their room, then the table's fold, Add lenders and the term sheets as a section of their own ---- */ .st-board.full { margin: 0 0 24px; } .fboard:not(.compact) .fb-cols { gap: 12px; } .fboard:not(.compact) .bcol { flex: 1 1 180px; min-width: 160px; } .fboard:not(.compact) .bcol.empty { flex: 0 1 88px; min-width: 72px; } .fboard:not(.compact) .bcol.empty .bcol-h { font-size: 13px; } .fboard:not(.compact) .bcol.empty .bcol-h .n { display: none; } /* "Nobody" under it says the 0 already */ @media (max-width: 1360px) { .fboard:not(.compact) .bcol.empty { flex: 0 0 76px; min-width: 0; } .fboard:not(.compact) .bcol.empty .bcol-h { font-size: 12.5px; } } /* the step says Declined once, at its head; its cards do not say it again */ .bcol[data-col="declined"] .bcard.out .bc-h > .mean.bad { display: none; } .tab-financiers .lb-fold { margin: 8px 0 20px; } .tab-financiers .lb-fold > summary { min-height: 36px; font-size: 13.5px; } .tab-financiers .lb-addbox { margin: 16px 0; } .tab-financiers #term-sheets.section-title { margin: 40px 0 12px; font: 600 16px/24px var(--sans); color: var(--ink); } .tab-financiers #term-sheets + p, .tab-financiers #term-sheets ~ .empty { font-size: 14px; } /* ---- 5.10 the Log: a reading column of 760px; the form to add an entry, then each entry as its day, who and how on one line (who always starts at the same place), and the words at 14px under it ---- */ .tab-log .logbook-views { gap: 6px; margin-bottom: 20px; } .tab-log .logbook-views .chip { height: 30px; padding: 0 12px; font-size: 13.5px; } .tab-log .logbook-views .chip .n { font-size: 12.5px; } .tab-log > * { max-width: 760px; } /* every view of the Log (conversations, notes, correspondence, events) at one reading column */ .tab-log > .sub { font-size: 14px; line-height: 21px; margin-bottom: 16px; } .tab-log > #writeup.panel { margin: 0 0 32px; } .tab-log .log { padding-left: 24px; } .tab-log .log::before { left: 7px; top: 12px; bottom: 12px; } .tab-log .log .e { padding: 6px 0 22px; } .tab-log .log .e::before { left: -21px; top: 12px; width: 8px; height: 8px; } .tab-log .log .e .h { gap: 8px; font-size: 13px; line-height: 20px; margin-bottom: 6px; } .tab-log .log .e .h > .val:first-child { flex: 0 0 148px; color: var(--ink-2); } .tab-log .log .e .h b { font-weight: 600; color: var(--ink); } .tab-log .log .e .b, .tab-log .log .e .doc-inline { font-size: 14px; line-height: 1.6; color: var(--ink); } .tab-log .log .e .small.muted { font-size: 13px; margin-top: 8px; } .tab-log .log-follow { gap: 8px; margin-top: 10px; } .tab-log .logbook-events li { font-size: 14px; } .tab-log > h2.mt0 { margin-bottom: 6px; } .tab-log > .corr-list { max-width: 960px; } /* a list of messages, not prose: a row's subject reads whole */ .tab-log .corr-list li { min-height: 52px; font-size: 14px; } .tab-log .corr-list .corr-a.ellipsis { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tab-log .corr-list li .m { font-size: 13px; } /* the Notes view of the Log: the same reading column */ .tab-log > #note-composer.panel { margin: 0 0 24px; } .tab-log .notes { gap: 16px; } .tab-log .note .h, .tab-fees .note .h { gap: 8px 10px; font-size: 13px; margin-bottom: 10px; } .tab-log .note .body, .tab-fees .note .body { font-size: 14px; line-height: 1.6; color: var(--ink); } /* ---- 5.11 Fees: the figures as one calm band (no boxes), each part a heading, its table inside the column with its name whole (it was cut while the table ran past the window's edge), the add press 12px under it ---- */ .tab-fees { max-width: 1120px; } .tab-fees .stat { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 8px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .tab-fees .stat div { padding: 14px 20px 14px 0; margin-right: 20px; background: none; border: 0; border-radius: 0; } .tab-fees .stat b { font: 600 20px/28px var(--num); letter-spacing: -0.01em; } .tab-fees .stat span { font-size: 13px; line-height: 18px; color: var(--ink-2); } .tab-fees .section-title { margin: 36px 0 12px; font: 600 16px/24px var(--sans); color: var(--ink); } .tab-fees .section-title + p.muted, .tab-fees .section-title + .muted.small { font-size: 14px; } .tab-fees .tablewrap.fee-table { margin: 0 0 12px; border: 1px solid var(--hair); border-radius: 12px; overflow-x: auto; } .tab-fees .fee-table table { table-layout: auto; min-width: 0; width: 100%; } .tab-fees .fee-table th[style] { width: auto !important; } /* the widths written on the header cells summed to 1,510px */ .tab-fees .fee-table th:first-child, .tab-fees .fee-table td:first-child { padding-left: 16px; } .tab-fees .fee-table td:first-child { white-space: normal; min-width: 150px; } .tab-fees .fee-table td.wrap { min-width: 140px; } .tab-fees details.mb3 > summary.btn { margin-top: 4px; } .tab-fees .props { max-width: 720px; grid-template-columns: 200px minmax(0, 1fr); } .tab-fees .card.note { max-width: 760px; } /* ---- 5.12 Details: the deal's own fields at a form's measure (720px), labels in a 200px column that holds them on one line, the source of a worked-out figure at the row's end a hand from its value; each group a heading ---- */ .tab-details > [data-quiet-props], .tab-details > .props.said, .tab-details > #people ~ * { max-width: 760px; } .tab-details .props { grid-template-columns: 200px minmax(0, 1fr); gap: 0 16px; font-size: 14px; } .tab-details .props dt { font-size: 13.5px; color: var(--muted); min-height: 36px; } .tab-details .props dd { min-height: 36px; } .tab-details .props dd .val { min-height: 36px; padding: 6px 0; font-size: 14px; } .tab-details .props dd .val .src { font-size: 12.5px; color: var(--muted); opacity: 1; } .tab-details .val .empty, .tab-details .props .empty { font-size: 14px; padding: 0; } /* a group of the details is named at the size of the deal's other tabs' sections (Fees, Term sheets: 16px) */ .tab-details .section-title { margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font: 600 16px/24px var(--sans); letter-spacing: -0.008em; color: var(--ink); } .tab-details [data-quiet-props] > .section-title:first-child { margin-top: 0; } .tab-details .props-add { font-size: 13px; margin-top: 20px; padding-top: 14px; } .tab-details > h2#people { margin: 48px 0 16px; font-size: 18px; line-height: 26px; } .tab-details #companies .list li, .tab-details #companies ~ .list > li { padding: 16px 20px; } .tab-details .list .props { grid-template-columns: 160px minmax(0, 1fr); } .tab-details .pill-row { gap: 6px; } .tab-details .list > li > details.menu { align-self: flex-start; } /* ---- 5.13 Every step (the Work tab): the deal's tasks at a list's measure, so a step's who, when and Chase stay beside its words (the row itself is the Tasks page's) ---- */ .tab-work .work-tasks { max-width: 960px; } .tab-work .work-tasks > h2 { margin: 0 0 16px; } .tab-work .work-fold > summary { min-height: 44px; font-size: 14px; } /* ---- 5.14 a financier on the deal: the conversation and the writer in the main column, the side at 340px; cards with room inside; the next step's line at 17px; the criteria's labels in their own column; the press that takes the financier off the deal a quiet line (it stood in a dashed box) ---- */ .lo { max-width: 1180px; } .lo.lo-single { max-width: 880px; } /* one message on its own page: a letter's width */ .lo-batch-grid { gap: 24px 32px; } .lo-bar { gap: 8px 16px; padding: 0 0 16px; margin: 0 0 24px; font-size: 13.5px; } .lo-bar .lo-since { font-size: 13px; } .lo-person { font-size: 14px; } .lo-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px 32px; } @media (max-width: 1360px) { .lo-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; } } .lo-side { gap: 16px; } .lo-card { padding: 16px 20px; border-radius: 12px; } .lo-card h4 { margin: 0 0 12px; font-size: 14px; line-height: 20px; } .lo-card > p.muted.small, .lo-card .muted.small { font-size: 13px; } .lo-dl { grid-template-columns: 104px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; line-height: 1.45; } .lo-dl dd .chip { height: auto; min-height: 22px; max-width: 100%; border-radius: 12px; padding-top: 2px; padding-bottom: 2px; white-space: normal; line-height: 18px; } /* a long product wraps in its chip instead of running past the card's edge */ .lo-next { gap: 12px 20px; padding: 20px 24px; } .lo-next-t b { font-size: 17px; line-height: 24px; } .lo-next-t > .muted, .lo-next-t > .warn { font-size: 14px; } .lo-reply, .lo-write { margin: 16px 0; padding: 16px 24px; } .lo-reply > summary, .lo-write > summary { min-height: 28px; align-items: center; font-size: 14px; } .lo-reply > summary .small, .lo-write > summary .small { font-size: 13px; } .lo-list { margin: 16px 0; padding: 20px 24px; } .lo-list-h h3 { font-size: 16px; } .lo-thread { margin: 32px 0; } .lo-thread-h { margin: 0 0 12px; } .lo-thread-h h3 { font-size: 16px; } .lt { padding: 16px 20px; margin: 0 0 12px; border-radius: 12px; } .lt-h { font-size: 13.5px; gap: 4px 10px; } .lt-body.doc { font-size: 14px; line-height: 1.6; padding: 14px 18px; } .lt-body.short { font-size: 14px; } .lt-ev { padding: 4px 20px 14px; font-size: 13px; } .lo-card.lo-off { padding: 4px 8px; border: 0; background: none; box-shadow: none; } .lo-notes textarea { font-size: 14px; } /* ---- 5.15 New deal: one calm card (680px), 20px between the questions, the labels at 13px, the two ways of a voice note side by side, Save the one primary ---- */ form.card[action="/deals/new"] { gap: 20px 16px; padding: 24px 28px 28px; } form.card[action="/deals/new"] label, form.card[action="/deals/new"] .lane-q { gap: 6px; font-size: 13px; color: var(--ink-2); } form.card[action="/deals/new"] label .muted.small, form.card[action="/deals/new"] .lane-q .muted.small { font-size: 13px; line-height: 18px; } form.card[action="/deals/new"] label > .flex { gap: 12px; align-items: center; } form.card[action="/deals/new"] details.full > summary { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; min-height: 28px; font-size: 14px; color: var(--ink); cursor: pointer; } form.card[action="/deals/new"] details.full > summary .muted.small { font-size: 13px; } form.card[action="/deals/new"] .actions { margin: 4px 0 0; } .content:has(form.card[action="/deals/new"]) > .sub { font-size: 14px; margin-bottom: 20px; } /* ---- 5.16 the client's file (partials/client_file.html), on a deal's client and on their own page: its cards headed like the dossier's, the business with us at 14px ---- */ .cf-card { padding: 20px 24px; border-radius: var(--r4); } .cf-card > h3 { margin: 0 0 6px; font: 600 16px/24px var(--sans); color: var(--ink); } .cf-card > .sub { margin: 0 0 8px; font-size: 13px; } .cf-papers .lbl { font-size: 12.5px; } .cf-papers ul { font-size: 14px; gap: 6px; } .cf-biz > li { padding: 10px 0; font-size: 14px; gap: 4px 16px; } .cf-biz .what small, .cf-biz .where { font-size: 13px; } /* ==== end of 5 · deal ==== */ /* ==== 6 · the records: contacts, companies, financiers, clients, documents, files, a task (owner: records) ==== */ /* A record at a desk reads like its phone card at desk scale (DESIGN §18): the head (the mark, the name, one line, the one primary press and More), then two columns: the panel of facts at the left, labels and values with air, never a box with its own scrollbar (the page scrolls, as Gabriel asked of every list on 07-10), and the record's own content at the right, in cards with room inside. The phone never reads this sheet. */ /* ---- the frame: the panel 320px (272px under 1,200px), the content after 36px of air ---- */ @media (min-width: 1000px) { .grid2.record { grid-template-columns: 320px minmax(0, 1fr); } .grid2.record > aside { position: static; max-height: none; overflow: visible; padding: 2px 28px 40px 0; } .grid2.record > div { padding-left: 36px; } } @media (min-width: 1000px) and (max-width: 1199px) { .grid2.record { grid-template-columns: 272px minmax(0, 1fr); } .grid2.record > aside { padding-right: 20px; } .grid2.record > div { padding-left: 24px; } } .grid2.record .tabs { margin: 0 0 24px; } /* ---- the panel: group titles in ink, labels 112px, a value its whole line, the Add line at its foot ---- */ .grid2.record > aside .section-title { font: 600 13px/20px var(--sans); color: var(--ink); margin: 28px 0 6px; } .grid2.record > aside .card:first-of-type > .section-title:first-child { margin-top: 10px; } .grid2.record > aside .section-title .n { font: 500 12.5px var(--num); color: var(--muted); } .grid2.record > aside .props { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; } .grid2.record > aside .props dt { font-size: 13px; line-height: 20px; padding: 8px 0; min-height: 36px; align-items: flex-start; } .grid2.record > aside .props dd { min-height: 36px; align-items: flex-start; } .grid2.record > aside .props dd .val { min-height: 36px; padding: 8px 0; line-height: 20px; font-size: 14px; } .grid2.record > aside .props dd .val > span:first-child { line-height: 20px; } /* the hover presses of a value (Copy, Edit) sit over the end of its first line instead of wrapping onto a line of their own, which left an empty band under every value that filled its width; a click anywhere on the value still edits it */ .grid2.record > aside .props dd .val, .grid2.record > aside .props dd .val:has(> .cp) { padding-right: 0; } .grid2.record > aside .props dd .val > .ed { position: absolute; top: 8px; right: 0; margin: 0; background: var(--surface); box-shadow: -10px 0 8px -4px var(--surface); } .grid2.record > aside .props dd .val > .cp { position: absolute; top: 8px; right: 50px; margin: 0; background: var(--surface); box-shadow: -10px 0 8px -4px var(--surface); } .grid2.record > aside .props dd .val:not(:has(> .ed)) > .cp { right: 0; } .grid2.record > aside .props-add { margin-top: 20px; padding-top: 14px; font-size: 13px; row-gap: 4px; } .grid2.record > aside .props-add button { padding: 4px 8px; } .grid2.record > aside .card + .card { margin-top: 4px; } .grid2.record > aside p.muted.small { font-size: 12.5px; line-height: 18px; margin: 8px 0 0; } /* ---- the content: lists of a record's things as cards with room, a section 32px under the one before ---- */ .grid2.record > div > .list.compact > li, .grid2.record > div > section:not(.cf-card) > .list.compact > li { min-height: 52px; padding: 10px 18px; } .grid2.record > div > .list.compact > li.empty, .grid2.record > div > section:not(.cf-card) > .list.compact > li.empty { min-height: 48px; color: var(--muted); } .grid2.record > div > h2:first-of-type { margin-top: 8px; } /* ---- the line of state under the head: what the head and the panel already say is not said again ---- */ .meta.kvrow:has(.kv-dup) { margin: 0 0 20px; gap: 8px; font-size: 13px; } .meta.kvrow .kv-dup { display: none; } .meta.kvrow:has(.kv-dup):not(:has(> :not(.kv-dup))) { display: none; } /* ---- a list inside the panel is rows on the panel itself (a card in a column of 290px left a name 150px wide) ---- */ .grid2.record > aside .list { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .grid2.record > aside .list li { min-height: 44px; padding: 10px 0; gap: 12px; border-bottom-color: var(--hair-soft); } .grid2.record > aside .list li:first-child { padding-top: 4px; } .grid2.record > aside .list li.empty { min-height: 0; padding: 2px 0 6px; font-size: 13.5px; color: var(--muted); } /* ---- a financier's "What they do": the value takes the line, its source stays beside it ---- */ .fin-crit .cr { grid-template-columns: 136px minmax(0, 1fr) auto; column-gap: 20px; padding: 11px 0; } .fin-crit .cr dt { font-size: 13px; } .fin-crit .cr .cr-s { max-width: 240px; } /* ---- a deal on a person's or a company's page: a live deal says nothing of being live (the usual state, §16 rule 3) ---- */ .grid2.record .dl-st.usual { display: none; } /* an obligation's Delete is its second press: in sight with the pointer or the keyboard on its row (§16 .sec) */ .grid2.record li:not(:hover):not(:focus-within) > form.ob-del { opacity: 0; } .grid2.record li > form.ob-del { transition: opacity .12s; } /* ---- a paper's page (a document, a file): the paper has the room. Its frame is as tall as the window under the head and stays in view while the facts beside it are read; the panel keeps its facts, a reference or a file name read in full ---- */ @media (min-width: 1000px) { .grid2.paper-rec { grid-template-columns: 304px minmax(0, 1fr); } .grid2.paper-rec > div { align-self: stretch; } .grid2.paper-rec > div > .viewer:not(.sheets) { position: sticky; top: calc(var(--head-h, 64px) + 20px); } .grid2.paper-rec > div > .viewer.live { height: calc(100dvh - var(--head-h, 64px) - 104px); min-height: 520px; } .grid2.paper-rec > div > .viewer:not(.live):not(.sheets) { min-height: 360px; } } @media (min-width: 1000px) and (max-width: 1199px) { .grid2.paper-rec { grid-template-columns: 264px minmax(0, 1fr); } } .grid2.record > aside .props dd { padding: 8px 0; line-height: 20px; font-size: 14px; } .grid2.record > aside .props dd > .person, .grid2.record > aside .props dd > .person .nm { white-space: normal; overflow: visible; } /* a file's own name (mono, often long) reads on two lines at most; all of it is one hover away (its title) */ .grid2.record > aside .props dd > span.mono[title] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid2.record > aside .props dd:has(> .val), .grid2.record > aside .props dd:has(> .inline-form) { padding: 0; } .grid2.record > aside .props dd > span.mono, .grid2.record > aside .props dd.mono { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } .grid2.record > aside .props dd > form.inline-form { flex-wrap: wrap; row-gap: 6px; min-height: 0; } /* the steps of a paper (Draft, Approved, Sent...): the deal's strip of stages, a 3px bar over each word */ .lifecycle { height: auto; border: 0; border-radius: 0; gap: 6px; margin: 0 0 24px; font-size: 12.5px; overflow: visible; } .lifecycle span { display: block; padding: 8px 0 0; border: 0; border-top: 3px solid var(--fill-2); background: transparent; text-align: left; place-items: initial; color: var(--faint); border-radius: 0; } .lifecycle span.done { border-top-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); color: var(--muted); } .lifecycle span.on { border-top-color: var(--accent); background: transparent; color: var(--ink); font-weight: 600; } /* ---- a task: its panel beside a list is a side sheet (a top bar, 28px of air, the title big), its page one column ---- */ .tk-drawer { width: min(560px, 100vw); border-left-color: var(--hair); } .tk-drawer-body { padding: 0 28px 48px; } .tk-panel-top { min-height: 56px; margin: 0 -28px 20px; padding: 10px 16px 10px 28px; gap: 8px; } .tk-panel-kind { font-size: 13px; gap: 8px; } .tk-page { max-width: 800px; } .tk-acts { gap: 8px; margin: 0 0 20px; } .tk-card { padding: 16px 20px; border-radius: var(--r3); margin: 0 0 20px; } .tk-ttl { font: 600 20px/28px var(--sans); letter-spacing: -0.016em; margin: 0 0 8px; } .tk-meta { gap: 8px; margin: 0 0 12px; } .tk-props { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; margin: 8px 0 4px; } .tk-props dt { line-height: 20px; padding: 8px 0; min-height: 36px; align-items: flex-start; font-size: 13px; } .tk-props dd { min-height: 36px; align-items: flex-start; } .tk-props dd .val { min-height: 36px; padding: 8px 0; line-height: 20px; font-size: 14px; } .tk-props dd .val .empty, .tk-props dd .val > span:first-child { font-size: 14px; } /* the description's Edit sits over the end of its first line with the pointer (it took a line of its own, an empty band between the words and the comments) */ .tk-desc { position: relative; } .tk-desc > .ed { position: absolute; top: 0; right: 0; margin: 0; background: var(--surface); box-shadow: -10px 0 8px -4px var(--surface); } /* the usual value (Normal, To do, no repeat, the kind, nobody it is about) is said quietly; each is still its own press */ .tk-props.u-prio dt:has(+ dd > [id$="-priority"]), .tk-props.u-prio dd > [id$="-priority"] > span:first-child, .tk-props.u-status dt:has(+ dd > [id$="-status"]), .tk-props.u-status dd > [id$="-status"] > span:first-child, .tk-props dt:has(+ dd > [id$="-kind"]), .tk-props dd > [id$="-kind"] > span:first-child, .tk-props.u-rep dt:has(+ dd .tk-repeat-menu), .tk-props.u-rep dd:has(.tk-repeat-menu) .val > .empty, .tk-props.u-about dt:has(+ dd .tk-about), .tk-props.u-about dd .tk-about > .empty { color: var(--faint); } .tk-sec h3 { font: 600 13px/20px var(--sans); color: var(--ink); margin: 28px 0 10px; } .tk-sec h3 .n { font: 500 12.5px var(--num); color: var(--muted); } .tk-people { gap: 8px; } .tk-people li { min-height: 32px; gap: 10px; } .tk-people .nm { font-size: 14px; } .tk-people .role { font-size: 13px; } .tk-people-acts { gap: 8px; margin: 12px 0 0; } .tk-step-add { gap: 8px; margin: 8px 0 0; } .tk-step-add > input[type=text] { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); color: var(--ink); font: 400 14px var(--sans); box-shadow: var(--sh1); } .tk-step-add > input[type=text]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } .tk-hint { font-size: 13px; line-height: 18px; margin: 8px 0 0; } .tk-md { font-size: 14px; line-height: 1.6; } .tk-md p { margin: 0 0 10px; } .tk-comments .e { padding: 16px 0; } .tk-comments .e .h { gap: 8px; font-size: 13px; margin-bottom: 8px; } .tk-comments .e .h b { font-weight: 600; color: var(--ink); } .tk-comments .e .b { font-size: 14px; line-height: 1.6; } .tk-comments .tk-write { margin-top: 12px; } .tk-history { margin-top: 28px; padding-top: 8px; } .tk-history > summary { font-size: 14px; padding: 10px 0; } /* ---- a paper's head: the step to take and More; Download is in More whenever a step stands there (as on a phone) ---- */ .page-head .btn.dl-folded { display: none; } /* ---- the record picker (partials/pick.html) at desk size: a field like every other, its hits a menu of 40px lines ---- */ .rpick .pick-q { height: 34px; padding: 0 10px; font-size: 14px; border-radius: var(--r2); } .rpick.sm .pick-q { height: 30px; font-size: 13.5px; } .pick-chip { height: 32px; padding: 0 4px 0 12px; font-size: 13.5px; gap: 6px; } .pick-hits { width: 360px; padding: 6px; border-radius: 12px; } .pick-hit { min-height: 40px; padding: 6px 10px; font-size: 14px; border-radius: 7px; } .pick-hit .pick-sub { font-size: 12.5px; } .pick-none { font-size: 14px; padding: 10px 12px; } /* ---- a new record's form: its parts named in ink, the first one at the top of its card ---- */ .fin-new-form > .section-title, .card.form-card > .section-title { font: 600 14px/20px var(--sans); color: var(--ink); margin: 32px 0 12px; } .fin-new-form > .section-title:first-of-type { margin-top: 4px; } /* ---- This phone, read at a desk: its two cards with their names in ink and their words at reading size ---- */ .me-phone { max-width: 680px; } .me-phone .phone-card { padding: 24px 28px; } .me-phone .phone-card > .section-title { font: 600 15px/22px var(--sans); color: var(--ink); margin: 0 0 6px; } .me-phone .phone-card > .sub { font-size: 14px; line-height: 1.6; color: var(--ink-2); } .me-phone .push-line { margin-top: 16px; } /* ---- a new person or company: the form a card with room inside ---- */ .narrow > form.form.card { padding: 28px 32px; row-gap: 18px; } .narrow > form.form.card > .actions { margin-top: 8px; } /* ---- a narrow desk (1,000 to 1,199px): the panel puts each label over its value, as the phone's card does, so a value keeps the panel's whole width (last in this section: it overrides the rows above) ---- */ @media (min-width: 1000px) and (max-width: 1199px) { .grid2.record > aside .props { grid-template-columns: minmax(0, 1fr); } .grid2.record > aside .props dt { min-height: 0; padding: 12px 0 0; font-size: 12.5px; line-height: 18px; } .grid2.record > aside .props dd, .grid2.record > aside .props dd .val { min-height: 0; } .grid2.record > aside .props dd { padding: 2px 0; } .grid2.record > aside .props dd .val { padding: 2px 0; } .grid2.record > aside .props dd:has(> .val), .grid2.record > aside .props dd:has(> .inline-form) { padding: 0; } .grid2.record > aside .props dd .val > .ed, .grid2.record > aside .props dd .val > .cp { top: 2px; } .tk-props { grid-template-columns: 104px minmax(0, 1fr); } .fin-crit .cr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .fin-crit .cr dt { grid-column: 1 / -1; } } /* ---- a record's More: a press that is a form reads as a line of the menu like the links beside it (it was the browser's own grey button, framed and centred) ---- */ .rec-more .menu-panel > form:not(.form) { display: block; padding: 0; min-width: 0; } .rec-more .menu-panel > form:not(.form) > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; box-shadow: none; font: 400 14px/20px var(--sans); color: var(--ink); text-align: left; cursor: pointer; } .rec-more .menu-panel > form:not(.form) > button:hover, .rec-more .menu-panel > form:not(.form) > button:focus-visible { background: var(--surface-hover); } .rec-more .menu-panel > form:not(.form) > button.danger { color: var(--bad); } .rec-more .menu-panel > form:not(.form) > button svg.ic { flex: none; color: var(--ink-2); } .rec-more .menu-panel > form:not(.form) > button.danger svg.ic { color: inherit; } /* a line without an icon keeps its words in line with the lines that have one (the deal's Archive) */ .rec-more .menu-panel > form:not(.form) > button:not(:has(svg)) { padding-left: 36px; } .rec-more .menu-panel { min-width: 240px; max-width: 340px; } .rec-more .menu-panel > a { height: auto; min-height: 34px; white-space: normal; line-height: 20px; padding-top: 7px; padding-bottom: 7px; } /* ---- a record's papers: "No files yet" sits inside its box with the room of a row ---- */ .grid2.record .files > .empty { padding: 14px 18px; color: var(--muted); } /* ---- a financier's people, as cards: wide enough for a name on one line; the card's own press is Log a call, its pencil and its x come with the pointer ---- */ .grid2.record .people-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .grid2.record .person-card { padding: 16px 20px; gap: 8px; } .grid2.record .person-card .pc-top { gap: 10px; align-items: center; } .grid2.record .person-card .pc-ch { gap: 4px; font-size: 13.5px; } .grid2.record .person-card .pc-foot { padding-top: 10px; font-size: 13px; } .grid2.record .person-card:not(:hover):not(:focus-within) .pc-top > details.menu:not([open]) > summary, .grid2.record .person-card:not(:hover):not(:focus-within) .pc-top > form > .btn { opacity: 0; } .grid2.record .person-card .pc-top > details.menu > summary, .grid2.record .person-card .pc-top > form > .btn { transition: opacity .12s; } .grid2.record > aside .fin-people.on-tab { display: none; } /* ---- a record's history (the Log, a financier's activity): an entry's words at reading size, a step of air between ---- */ .grid2.record .log .e { padding: 6px 0 20px; } .grid2.record .log .e .h { font-size: 12.5px; gap: 8px; margin-bottom: 4px; } .grid2.record .log .e .h b { font-weight: 600; color: var(--ink); } .grid2.record .log .e .b { font-size: 14px; line-height: 1.55; color: var(--ink); } .grid2.record .log .e .b.doc-inline p { margin: 0 0 8px; } .grid2.record .log .e::before { top: 11px; } /* ---- a section of a record's tab named in ink, at an h2's size (On deals now, Declines, Term sheets, The write-up): a financier's sections read at the size of a person's or a company's (16px, §18), their hint at 13px ---- */ .grid2.record > div > .section-title { font: 600 16px/24px var(--sans); letter-spacing: -0.008em; color: var(--ink); margin: 28px 0 12px; } .grid2.record .fin-h2 { font: 600 16px/24px var(--sans); letter-spacing: -0.008em; } .grid2.record .fin-h2 .hint, .grid2.record .fin-h2 .n { font-size: 13px; } /* the write-up's own headings stay under its section's name */ .grid2.record .card.writeup .doc h2 { font-size: 15px; line-height: 22px; } .grid2.record > div > .section-title:first-of-type, .grid2.record > div > .tabs + .section-title { margin-top: 0; } .grid2.record > div > .section-title .n { font: 500 12.5px var(--num); color: var(--muted); } /* ---- an NCNDA for a person (prospects/paper.html): the two papers side by side as choices, the chosen one in the accent; their side named in ink ---- */ .or-form { gap: 16px; } .or-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .or-papers > legend { font-size: 12.5px; margin-bottom: 8px; padding: 0; } .or-paper { padding: 14px 16px; border-radius: var(--r3); font-size: 14px; gap: 12px; } .or-paper span { gap: 4px; } .or-paper small { font-size: 13px; line-height: 1.45; } .or-paper:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .or-form > .section-title { font: 600 14px/20px var(--sans); color: var(--ink); margin: 20px 0 0; } /* an address in the panel reads whole on a second line rather than ending on an ellipsis (its copy is one hover away) */ .grid2.record > aside .props dd .val > a.chan { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } /* ---- a financier's write-up reads in the page, not in a box of its own that scrolls inside it (Gabriel 07-10: the page scrolls, never a box with its own scrollbar), and not as a card inside a card ---- */ .grid2.record .card.writeup { max-height: none; overflow: visible; padding: 24px 32px; } .grid2.record .card.writeup > .doc { border: 0; padding: 0; background: transparent; max-width: 76ch; } .grid2.record .fin-notes .note-item .doc-inline { font-size: 14px; line-height: 1.55; color: var(--ink); } .grid2.record .fin-notes > .section-title { font: 600 14px/20px var(--sans); color: var(--ink); margin: 0 0 12px; } .or-paper b { font-size: 14px; font-weight: 600; } /* ==== end of 6 · records ==== */ /* ==== 7 · the workspace: Assistant, Metrics, Knowledge, Settings, Changes, Commission, sign-in (owner: workspace) ==== */ /* The firm's back rooms read like a Mac app's settings and workspace panes: a big plain title, a side list of sections on the grey with the section you are on as a white card (the main menu's own look), the page at a reading measure, forms on one grid with air and one primary press, the usual state quiet, tables whose names are whole. */ /* -- 7.1 the pane: a side list of sections and the page beside it (Settings, Knowledge, Checklists) -- */ /* Settings and Knowledge: one side list of sections, the same width and the same gap to the page beside it (a page's left edge does not move between the two) */ .pb { grid-template-columns: 216px minmax(0, 1fr); gap: 32px; max-width: 1120px; align-items: start; } .pb > nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--ground); border-radius: var(--r4); } .pb > nav a { min-height: 32px; padding: 6px 10px; gap: 8px; border-radius: var(--r2); font: 500 14px/20px var(--sans); color: var(--ink-2); } .pb > nav a:hover { background: var(--side-hover); color: var(--ink); } .pb > nav a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,53,.08), 0 0 0 1px rgba(11,27,53,.05); } .pb > nav .section-title { margin: 16px 10px 4px; font: 500 12px/16px var(--sans); color: var(--muted); } .pb > nav .section-title:first-child { margin-top: 4px; } .pb > nav a .n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-grid; place-items: center; font: 600 11.5px/1 var(--num); color: var(--ink-2); background: var(--fill-2); } .pb > nav a.active .n { background: var(--surface-2); } .pb > div { min-width: 0; } /* Settings' list is short: it stays in sight while a long section scrolls under it */ .set-pb > nav { position: sticky; top: calc(var(--head-h, 64px) + 24px); } /* the way back to the pane's first page is the side list itself, so the head keeps one row of 64px: the name and the section. A back link to where the reader came from (a list, templating.back_from) has another address and stays. */ main:has(.set-pb) .page-head.has-back:has(> .back[href="/settings"]), main:has(.pb) .page-head.has-back:has(> .back[href="/knowledge"]) { flex-wrap: nowrap; height: 64px; min-height: 0; padding-top: 0; padding-bottom: 0; } main:has(.set-pb) .page-head > .back[href="/settings"], main:has(.pb) .page-head > .back[href="/knowledge"] { display: none; } /* the page beside the list: words at reading size, cards with room, a form's labels over its fields on one grid */ .pb > div > .sub, .pb > div > p.sub, .pb > div > .muted.small { max-width: 76ch; } .pb > div > :first-child { margin-top: 0; } .pb h2 { margin: 36px 0 12px; } .pb .card { padding: 24px; } .pb > div > .card + .card, .pb > div > .card.mt3, .pb > div > form.card + .card { margin-top: 16px; } .pb > div > .card.mb3, .pb > div > .card.mb2 { margin-bottom: 16px; } .pb .card > .section-title:first-of-type { margin: 0 0 6px; font: 600 15px/22px var(--sans); letter-spacing: -0.006em; color: var(--ink); } .pb .card > .section-title:first-of-type + .sub, .pb .card > .section-title:first-of-type + p { margin-top: 0; } .pb .card > .sub, .pb .card > p.muted { font-size: 13.5px; line-height: 20px; } .pb .form { gap: 16px 20px; } .pb .form > label, .pb .form > .full > label:not(.checkbox):not(.inline) { gap: 6px; font: 500 13px/18px var(--sans); color: var(--ink-2); } .pb .form > label small, .pb .form > label .muted.small { font-weight: 400; } .pb .actions { margin: 20px 0 0; gap: 8px; } .pb .form > .actions, .pb .form > .full.actions, .pb .form > div.full:last-child { margin-top: 4px; } .pb .notice { margin-bottom: 16px; } .pb .tablewrap th, .pb .tablewrap td { padding-left: 12px; padding-right: 12px; } .pb .tablewrap th:first-child, .pb .tablewrap td:first-child { padding-left: 16px; } .pb .tablewrap:not(.fit) th { width: auto !important; } .pb .tablewrap th { height: 38px; } .pb dl.props { grid-template-columns: 168px minmax(0, 1fr); } /* the usual state of a row (a person Active, a deal type on the client's account) is not drawn until the pointer or the keyboard is on its row (DESIGN §18.1 rule 3). The class has no rule on a phone, whose cards keep their look. */ .wk-usual { opacity: 0; transition: opacity .12s; } tr:hover .wk-usual, tr:focus-within .wk-usual, li:hover .wk-usual, li:focus-within .wk-usual, .card:hover > .flex > .wk-usual { opacity: 1; } /* -- 7.2 Settings -- */ /* two views of one list: a switch of two, the one in use a white card on the grey */ .set-pb .opts[role=navigation] { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border-radius: var(--r2); } .set-pb .opts[role=navigation] .chip { height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: none; font: 500 13.5px/1 var(--sans); color: var(--ink-2); } .set-pb .opts[role=navigation] .chip::before { display: none; } .set-pb .opts[role=navigation] .chip.live { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,53,.1), 0 0 0 .5px rgba(11,27,53,.06); } .set-pb .flex.mb2:has(> .opts[role=navigation]) { margin-bottom: 16px; } /* the people: the table is the page's one frame (no card around it), each name and address whole on one line */ .set-pb .card:has(> .tablewrap > .users-table) { padding: 0; border: 0; box-shadow: none; background: none; } .users-table td { height: 60px; } /* the people's table fits its column beside the side list, its last column (the row's ⋯) whole: 10px either side of a cell (it ran 6px past the card, the ⋯ under its edge) */ .pb .tablewrap .users-table th, .pb .tablewrap .users-table td { padding-left: 10px; padding-right: 10px; } .pb .tablewrap .users-table th:first-child, .pb .tablewrap .users-table td:first-child { padding-left: 14px; } .users-table td.u-who .flex { flex-wrap: nowrap; gap: 12px; } .users-table td.u-who .avatar { width: 30px; height: 30px; font-size: 11px; } .users-table td.u-who .ellipsis-block, .users-table td.u-who .ellipsis { white-space: nowrap; overflow: visible; overflow-wrap: normal; } .users-table td.u-who b { font-weight: 550; font-size: 14.5px; } .users-table td.u-who .muted.small { display: block; font-size: 13px; line-height: 18px; margin-top: 1px; } .users-table td.u-role .chip { height: auto; padding: 0; border: 0; background: none; font: 400 14px/20px var(--sans); color: var(--ink-2); } .users-table td.u-role .chip::before { display: none; } .users-table td.u-book, .users-table td.u-seen { color: var(--ink-2); white-space: nowrap; } .users-table td.u-more { width: 1%; padding-right: 12px; } .users-table th, .users-table td { padding-left: 12px; padding-right: 12px; } /* the columns are as wide as what they hold (the lender book may take two lines): name and address whole at 1,440 */ .set-pb .card .tablewrap.fit > .users-table { table-layout: auto; } .card .tablewrap.fit > .users-table th, .card .tablewrap.fit > .users-table td { overflow: visible; } .users-table td { white-space: nowrap; } .users-table td.u-book, .users-table td.u-seen { font-size: 13px; } .users-table td.u-book + td.u-book { white-space: normal; min-width: 128px; line-height: 18px; } .users-table td.u-who .avatar { width: 28px; height: 28px; } .users-table td.u-who .flex { gap: 10px; } .users-table td.u-state .chip.dim { height: auto; padding: 0; border: 0; background: none; font: 400 13.5px/20px var(--sans); color: var(--muted); } .users-table td.u-state .chip.dim::before { display: none; } /* under 1,440px the sections are one wrapping row of presses over the section (as on a phone, and as a Mac app's toolbar of panes), so the section's tables keep the width of the window */ @media (max-width: 1199px) { /* a narrow window: the address may take a second line (Gabriel, 25-09: "It is fine if it two rows"), the role and the last visit too, so the person's menu stays in sight */ .users-table td.u-who { min-width: 180px; } .users-table td.u-who .ellipsis-block { white-space: normal; } .users-table td.u-who .ellipsis-block .muted.small { white-space: normal; overflow-wrap: break-word; } .users-table td.u-who .u-at { display: inline-block; } .users-table td.u-role, .users-table td.u-book, .users-table td.u-seen { white-space: normal; line-height: 18px; } .users-table td.u-role { min-width: 76px; } .users-table td.u-book { min-width: 88px; } .users-table td.u-book + td.u-book { min-width: 96px; } .users-table td.u-seen { min-width: 56px; } .users-table th, .users-table td { padding-left: 10px; padding-right: 10px; } } @media (max-width: 1439px) { .set-pb { grid-template-columns: minmax(0, 1fr); gap: 20px; } .set-pb > nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 6px; } .set-pb > nav a { min-height: 30px; padding: 5px 12px; } } /* a section's own heading outside a card (Backups: Off-site copies, On this server) reads as a card's title does */ .set-pb > div > .section-title { margin: 0 0 4px; font: 600 15px/22px var(--sans); letter-spacing: -0.006em; color: var(--ink); } .set-pb > div > .section-title ~ .section-title { margin-top: 32px; } .set-pb > div > .section-title + .muted.small { margin: 0 0 14px; font-size: 13.5px; line-height: 20px; } /* a form in parts (a deal type): each part's title over its hint, with air between the parts */ .pb .card form > .section-title, .pb details.card form > .section-title { margin: 32px 0 4px; font: 600 14px/20px var(--sans); color: var(--ink); } .pb .card form > .section-title + .sub { margin: 0 0 12px; font-size: 13.5px; line-height: 20px; } .set-pb details.card > summary { min-height: 28px; gap: 8px; font-size: 15px; } .set-pb details.card > summary b { font-weight: 600; } .set-pb details.card[open] > summary { margin-bottom: 4px; } /* the people as cards: two to a row, each card's facts on a narrower label column */ .set-pb #users.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .set-pb .ucard { padding: 22px 24px; } .set-pb .ucard > .flex:first-child b.ink { font-size: 15px; font-weight: 600; } .set-pb .ucard dl.props { grid-template-columns: 112px minmax(0, 1fr); } .set-pb .ucard .presets { gap: 6px; } /* a company's facts: a select is as wide as what it holds, not the width of the card */ .set-pb dl.props .inline-form select { width: auto; min-width: 220px; max-width: 360px; } .set-pb dl.props .inline-form { flex-wrap: wrap; gap: 8px; } /* tags: what nobody carries is said quietly, and Delete comes with the pointer on its row */ .set-pb td.num > .muted { color: var(--faint); } .set-pb tr form[action^="/tags/"] > .btn.danger { opacity: 0; transition: opacity .12s; } .set-pb tr:hover form[action^="/tags/"] > .btn.danger, .set-pb tr:focus-within form[action^="/tags/"] > .btn.danger { opacity: 1; } .set-pb form.inline-form.card[action="/tags/new"] { display: flex; gap: 8px; align-items: center; padding: 16px; } .set-pb form.inline-form.card[action="/tags/new"] input[type=text] { flex: 1 1 260px; max-width: 360px; } /* the assistants at the door: one line each, and the new one's name, level and press on one line */ .set-pb #assistants ul.plain > li { display: grid; grid-template-columns: 140px auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; min-height: 40px; margin: 0; border-top: 1px solid var(--hair); } .set-pb #assistants ul.plain > li:first-child { border-top: 0; } .set-pb #assistants ul.plain > li > span:first-child { min-width: 0 !important; font-weight: 500; color: var(--ink); } .set-pb #assistants form.form { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid var(--hair); } .set-pb #assistants form.form .flex { flex-wrap: nowrap; gap: 8px; } .set-pb #assistants form.form .flex input[type=text] { flex: 1 1 auto; } .set-pb #assistants form.form .flex select { flex: 0 0 180px; } /* the figures of a section (AI's spend, the server's files): tiles with room, the figure 24px */ .set-pb .stat { gap: 12px; margin: 16px 0 12px; } .set-pb .stat div { padding: 14px 16px; border-radius: var(--r3); } .set-pb .stat b { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; } .set-pb .stat span { font-size: 13px; line-height: 18px; } .set-pb > div > .stat + p.sub { margin-top: 0; } /* who signs: the grid's choices at reading size, the entity's signers under its name */ .set-pb .sign-grid select { width: 100%; min-width: 0; } .set-pb .sign-grid th .muted.small { font-weight: 400; margin-top: 2px; } .set-pb .card .opts.multi { gap: 6px; } .set-pb .card .opts.multi label { height: 30px; padding: 0 12px; font-size: 13px; } /* a row of presses under a section (Run the export now, the repository, Test connection) */ .set-pb > div > .actions .inline-form input[type=text] { min-width: 300px; } .set-pb > div > .flex.mt3 { gap: 12px; margin-top: 16px; } /* a list typed one line each (a stage's checklist) shows all its lines at a desk, the box as tall as what it holds */ .set-pb form[action="/settings/stages"] textarea { field-sizing: content; min-height: 76px; max-height: 360px; } /* the AI jobs: the card is the table's frame (the table takes its whole width), the controls of a row a size smaller so each job's choices are whole beside the side list */ .set-pb form#ai-jobs.card { padding: 0 0 20px; overflow: hidden; } .set-pb form#ai-jobs > .tablewrap.fit { border: 0; border-radius: 0; } .set-pb form#ai-jobs > :not(.tablewrap) { margin-left: 24px; margin-right: 24px; } .set-pb #ai-jobs th, .set-pb #ai-jobs td { padding-left: 8px; padding-right: 8px; } .set-pb #ai-jobs th:first-child, .set-pb #ai-jobs td:first-child { padding-left: 20px; } .set-pb #ai-jobs th:nth-child(1) { width: 17% !important; } .set-pb #ai-jobs th:nth-child(2) { width: 5% !important; } .set-pb #ai-jobs th:nth-child(3) { width: 13% !important; } .set-pb #ai-jobs th:nth-child(4) { width: 18% !important; } .set-pb #ai-jobs th:nth-child(5) { width: 14% !important; } .set-pb #ai-jobs th:nth-child(6) { width: 21% !important; } .set-pb #ai-jobs th:nth-child(7) { width: 12% !important; } .set-pb #ai-jobs td.k { white-space: normal; overflow: visible; text-overflow: clip; line-height: 18px; font-size: 13.5px; } .set-pb #ai-jobs td select, .set-pb #ai-jobs td input.inline-input { height: 30px; padding: 0 6px; font-size: 13px; } .set-pb #ai-jobs td select { padding-right: 22px; background-position: right 6px center; } .set-pb #ai-jobs tr.prompt-row td { padding-left: 20px !important; } .set-pb #ai-jobs tr.job-group td { padding-left: 20px !important; } .set-pb #ai-jobs > .actions { gap: 12px 16px; } /* -- 7.3 Knowledge: the pages read like a document, the list of pages beside them -- */ .pb:has(> nav .section-title) { grid-template-columns: 216px minmax(0, 1fr); gap: 32px; } /* the page is the reading column itself, no frame around it: 15px on 1.65, about 72 characters a line. Its title is the head's (said once), so the copy at the top of the page is not drawn. */ .pb .doc { max-width: 720px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; line-height: 1.65; color: var(--ink); } .pb .doc > h1:first-child { display: none; } .pb .doc > h1:first-child + p.m.muted { margin-top: 0; } .pb .doc h2 { font: 600 19px/28px var(--sans); letter-spacing: -0.012em; margin: 40px 0 12px; } .pb .doc h2:first-child, .pb .doc > h1:first-child + h2 { margin-top: 0; } .pb .doc h3 { font: 600 16px/24px var(--sans); margin: 28px 0 8px; } .pb .doc h4 { font: 600 14px/20px var(--sans); margin: 20px 0 6px; } .pb .doc p { margin: 0 0 14px; } .pb .doc ul, .pb .doc ol { margin: 0 0 16px; padding-left: 1.3em; } .pb .doc li { margin-bottom: 8px; } .pb .doc li::marker { color: var(--muted); } /* a list of rows inside a page (the index's Resources) is a list card, not prose: no indent, no gap between its rows */ .pb .doc ul.list { padding-left: 0; margin: 0 0 12px; } .pb .doc ul.list > li { margin-bottom: 0; } .pb .doc blockquote { margin: 0 0 16px; padding: 2px 16px; border-left: 2px solid var(--line); color: var(--ink-2); } .pb .doc table { font-size: 14px; margin: 4px 0 20px; } .pb .doc hr { border: 0; border-top: 1px solid var(--hair); margin: 32px 0; } .pb .doc .section-title { margin: 28px 0 8px; } .pb .doc .pill-row { gap: 6px; } /* the superadmin's line over a page (who sees it, what is hidden from whom): one quiet row the width of the page */ .pb > div > .flex.mb3:has(> form[action$="/visibility"]) { max-width: 720px; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); } .pb > div > .flex.mb3 > form[action$="/visibility"] select { width: auto; min-width: 180px; } .pb > div > .flex.mb3 .ai-note { font-size: 13px; } .pb #kedit { max-width: 720px; } .pb > div > details.mt3 { max-width: 720px; margin-top: 32px; } /* the Knowledge index: the list of pages from the top on the left; the search, what it found and the page in one column beside it (the page's parts are one grid, the list spanning its rows, the last row taking what is left) */ .content:has(> form.quick + * ~ .pb > nav .section-title), .content:has(> form.quick + .pb > nav .section-title) { display: grid; grid-template-columns: 216px minmax(0, 720px); grid-template-rows: repeat(6, auto) 1fr; column-gap: 32px; align-items: start; } .content:has(> form.quick ~ .pb > nav .section-title) > * { grid-column: 2; min-width: 0; } .content:has(> form.quick ~ .pb > nav .section-title) > .pb { display: contents; } .content:has(> form.quick ~ .pb > nav .section-title) > .pb > nav { grid-column: 1; grid-row: 1 / -1; } .content:has(> form.quick ~ .pb > nav .section-title) > .pb > .doc { grid-column: 2; } .content:has(> form.quick ~ .pb > nav .section-title) > form.quick { margin: 0 0 24px; } .content:has(> form.quick ~ .pb > nav .section-title) > h2 { margin-top: 0; } .content:has(> form.quick ~ .pb > nav .section-title) > ul.list { margin-bottom: 32px; } @media (max-width: 1199px) { .pb:has(> nav .section-title) { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } .content:has(> form.quick + * ~ .pb > nav .section-title), .content:has(> form.quick + .pb > nav .section-title) { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; } } /* the tables Knowledge renders from Settings: framed, names whole, the initials square not drawn, the box words wrap */ .pb .tablewrap td.k > .avatar.sq { display: none; } .pb .tablewrap td.k, .pb .tablewrap td.k a { white-space: nowrap; } .pb .tablewrap td.k > a { display: inline; max-width: none; -webkit-line-clamp: unset; overflow: visible; } .pb .tablewrap th { white-space: normal; line-height: 16px; vertical-align: bottom; padding-top: 10px; padding-bottom: 10px; height: auto; } .pb .tablewrap td.kt-box { white-space: normal; min-width: 104px; line-height: 20px; padding-top: 10px; padding-bottom: 10px; } .pb .tablewrap td.num { white-space: nowrap; } /* -- 7.4 the pages that are tabs of one menu entry (Assistant · Metrics and Commission · What I brought): one bar under the head, its presses 32px pills, the one you are on filled, as the lists' views bar -- */ .tabs.claude-tabs, .views.pg-tabs, .views.wk-tabs { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 var(--gutter); margin: -28px calc(-1 * var(--gutter)) 28px; border-bottom: 1px solid var(--hair); overflow-x: auto; } .tabs.claude-tabs a, .views.pg-tabs a, .views.wk-tabs a { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border: 0; border-radius: var(--r2); font: 500 13.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; } .tabs.claude-tabs a:hover, .views.pg-tabs a:hover, .views.wk-tabs a:hover { background: var(--surface-hover); color: var(--ink); } .tabs.claude-tabs a.active, .views.pg-tabs a.on, .views.wk-tabs a.on { background: var(--surface-2); color: var(--ink); } /* -- 7.5 the Assistant: a chat app at a desk. The conversations on the left, the one open as a reading column in the middle of the window, the box at its foot with the model in sight; the window is the page (nothing scrolls but the list and the conversation) -- */ main:has(.cv2) .content { padding-bottom: 0; } .tabs.claude-tabs + .cv2 { margin-top: -28px; } .cv2 { height: calc(100dvh - var(--head-h, 64px) - 52px); min-height: 520px; margin: 0 calc(-1 * var(--gutter)); grid-template-columns: 296px minmax(0, 1fr); border: 0; border-radius: 0; background: var(--surface); } .cv2-list { padding: 14px 12px 24px; gap: 2px; border-right: 1px solid var(--hair); background: var(--surface); scrollbar-width: thin; } .cv2-search { height: 34px; padding: 0 12px; margin-bottom: 6px; border-color: var(--hair); border-radius: var(--r2); font-size: 14px; } .cv2-grp { margin: 16px 12px 6px; font: 500 12px/16px var(--sans); } .cv2-item { gap: 3px; padding: 9px 12px; border-radius: var(--r2); } .cv2-item .t { font-size: 14px; line-height: 20px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cv2-item .m { font-size: 12.5px; line-height: 16px; gap: 6px; } .cv2-item.on { background: var(--accent-soft); } .cv2-h { min-height: 56px; padding: 8px 32px; gap: 10px; } .cv2-h b { font: 600 15px/22px var(--sans); } .cv2-scroll { scrollbar-width: thin; } .cv2-read { max-width: 784px; padding: 32px 32px 40px; } .cv2-empty { padding: 96px 0 24px; gap: 8px; } .cv2-empty h3 { font: 650 22px/30px var(--sans); letter-spacing: -0.018em; margin-top: 12px; } .cv2-empty p { font-size: 15px; line-height: 1.6; } .cv2-comp { padding: 8px 32px 20px; border-top: 0; background: var(--surface); } .cv2-comp .cbox, .cv2-comp .chint { max-width: 720px; } .cthread { gap: 28px; } .cq-b { padding: 10px 16px; border-radius: 18px 18px 6px 18px; font-size: 15px; line-height: 1.55; } .cq-meta .chip { height: 24px; font-size: 12.5px; } .cq-t { font-size: 12px; } .ca { gap: 10px; } .ca-who { gap: 10px; font-size: 13px; } .ca-who b { font-size: 14px; } .ca-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; } .ca-mark.lg { width: 48px; height: 48px; border-radius: 13px; font-size: 17px; } .ca-body { font-size: 15px; line-height: 1.65; max-width: 72ch; } .ca-body .ai-md p, .ca-body .ai-md ul, .ca-body .ai-md ol { margin-bottom: 12px; } .ca-body .ai-md li + li { margin-top: 4px; } .ca-body .ai-md h1, .ca-body .ai-md h2, .ca-body .ai-md h3, .ca-body .ai-md h4 { font-size: 15px; margin: 18px 0 6px; } .ai-sources > summary { font-size: 13px; } .ca-acts { gap: 4px; } .ca-work { font-size: 14px; gap: 12px; } .cbox { padding: 12px 14px 10px; border-radius: 16px; border-color: var(--line); box-shadow: 0 1px 2px rgba(11,27,53,.05), 0 4px 16px rgba(11,27,53,.05); gap: 10px; } .cbox textarea, .cbox textarea:focus { font-size: 15px; line-height: 1.55; min-height: 26px; } .cbox .crow { gap: 8px; } .csend { width: 34px; height: 34px; } .cpill { height: 30px; padding: 0 12px; font-size: 13px; gap: 7px; } .cmenu { width: 320px; padding: 6px; } .cmenu-it { padding: 8px 10px; } .cmenu-tx { font-size: 13.5px; } .cmenu-tx span { font-size: 12.5px; } .chint { margin-top: 8px; padding-left: 6px; font-size: 12.5px; } @media (max-width: 1199px) { .cv2 { grid-template-columns: 248px minmax(0, 1fr); } .cv2-read, .cv2-h, .cv2-comp { padding-left: 24px; padding-right: 24px; } } /* the work given to Claude (the second tab): the ask as one form, the queue and the runs as quiet lists */ .claude-ask { gap: 16px 20px; } .claude-ask > label { gap: 6px; margin: 0; font: 500 13px/18px var(--sans); color: var(--ink-2); } .claude-ask > label:first-of-type { grid-column: 1 / -1; } .claude-ask > label:first-of-type b { font-weight: 600; font-size: 14px; color: var(--ink); } .claude-ask .lbl { margin-bottom: 8px; font: 500 13px/18px var(--sans); } .claude-ask .opts label, .claude-modes label { height: 30px; padding: 0 14px; font-size: 13px; } .claude-ask .actions { margin-top: 4px; gap: 14px; } /* a record picker in my forms is a field like the others (the foundation's fields left .rpick at 28px) */ .claude-ask .rpick, .keep-panel .rpick, .ts-form .rpick { max-width: none; } .claude-ask .rpick .pick-q, .cbox .rpick .pick-q, .keep-panel .rpick .pick-q, .ts-form .rpick .pick-q { height: 34px; padding: 0 10px; font-size: 14px; border-radius: var(--r2); } .cbox .rpick .pick-q { height: 30px; font-size: 13.5px; } .claude-ask input[type=date] { max-width: 220px; } main:has(.claude-tabs) .grid2 .card .opts label { height: 30px; padding: 0 12px; font-size: 13px; } main:has(.claude-tabs) .grid2 .card .inline-form { flex-wrap: wrap; gap: 8px; } .mode-line { margin-top: 8px; font-size: 13px; } .head-run { gap: 10px; } .head-run .opts { gap: 4px; } .head-run .opts label { height: 30px; } main:has(.claude-tabs) .content > p.sub { max-width: 76ch; margin-bottom: 24px; } main:has(.claude-tabs) .grid2 { gap: 32px; } main:has(.claude-tabs) .grid2 .section-title { margin: 32px 0 10px; font: 600 15px/22px var(--sans); color: var(--ink); } main:has(.claude-tabs) .grid2 .section-title .muted, main:has(.claude-tabs) .grid2 .section-title .small { font-weight: 400; font-size: 14px; } main:has(.claude-tabs) .grid2 .card > .section-title:first-child { margin-top: 0; } main:has(.claude-tabs) .grid2 .list li .m { overflow-wrap: anywhere; } #runs ~ .list .chip.plain, main:has(.claude-tabs) .grid2 .list .chip.plain { height: auto; padding: 0; border: 0; background: none; font: 400 13px/18px var(--sans); color: var(--muted); } main:has(.claude-tabs) .grid2 .list li > div > a.ink:first-child { font-weight: 500; } /* Claude's settings: each setting a title over its hint, then its choice; the modes as one table */ .claude-set { gap: 28px; max-width: 840px; padding: 28px; } .claude-set .field { gap: 8px; } .claude-set .lbl { font: 600 15px/22px var(--sans); } .claude-set .hint { font-size: 13.5px; line-height: 20px; } .claude-set textarea { font-size: 14px; line-height: 1.55; } .claude-set .opts label { height: 32px; padding: 0 16px; font-size: 13.5px; } .cset-row { padding: 12px 16px; gap: 16px; } .cset-head { font-size: 12.5px; padding-block: 10px; } .cset-name b { font-size: 14.5px; } .cset-row select, .cset-row input[type=text] { height: 34px; font-size: 14px; } /* a run of Claude's: where it stands in one line, then the answer as a page */ .run-meta { gap: 10px; } .run-meta .mono.small { font-size: 13px; } .run-answer { max-width: 784px; padding: 28px 32px; font-size: 15px; line-height: 1.65; } .run-answer.card { margin-top: 20px; } .run-steps li { padding: 8px 14px; font-size: 13.5px; grid-template-columns: 56px minmax(0, 1fr); } /* the head of a tab of the Assistant: its way back is the bar of tabs under it */ main:has(.claude-tabs) .page-head.has-back:has(> .back[href="/claude"]) { flex-wrap: nowrap; height: 64px; min-height: 0; padding-top: 0; padding-bottom: 0; } main:has(.claude-tabs) .page-head > .back[href="/claude"] { display: none; } .run-meta .chip.plain { height: auto; padding: 0; border: 0; background: none; font: 400 13.5px/20px var(--sans); color: var(--ink-2); } /* -- 7.6 the chat in the corner: a small window over the page, its words at reading size -- */ .cb-btn { right: 24px; bottom: 24px; width: 44px; height: 44px; } .cb-win { right: 24px; bottom: 80px; width: min(424px, calc(100vw - 48px)); height: min(660px, calc(100dvh - 112px)); border-radius: 16px; } .cb-h { min-height: 52px; padding: 8px 10px 8px 14px; gap: 6px; } .cb-h .ca-mark { width: 26px; height: 26px; } .cb-ht b { font-size: 14px; } .cb-sub { font-size: 12.5px; } .cb-msgs { padding: 18px 18px 12px; } .cb-msgs .cthread { gap: 20px; } .cb-msgs .cq-b { padding: 8px 13px; font-size: 14px; border-radius: 16px 16px 5px 16px; } .cb-msgs .ca-body { font-size: 14px; line-height: 1.6; } .cb-msgs .ca-who { font-size: 12.5px; } .cb-empty { padding: 48px 20px; gap: 12px; font-size: 14px; } .cb-empty p { max-width: 36ch; line-height: 1.55; } .cb-comp { padding: 10px 12px 12px; gap: 8px; } .cb-ctx { font-size: 12.5px; } .cb-comp .cbox { padding: 10px 12px 8px; border-radius: 14px; box-shadow: none; } .cb-comp .cbox textarea { font-size: 14px; } .cb-comp .csend { width: 32px; height: 32px; } .cb-comp .cpill { height: 28px; font-size: 12.5px; } .cb-has .content { padding-bottom: 96px; } /* -- 7.7 Metrics: one quiet look, the figures on one column and one baseline, colour only for the pipeline's stages and for a state (DESIGN §16 rule 5) -- */ .mx { max-width: 1180px; } .mx-hero { padding: 28px 32px 24px; margin-bottom: 16px; } .mx-eyebrow { font-size: 13.5px; } .mx-hero-fig { font-size: 48px; margin: 8px 0 16px; } .mx-hero-w { font-size: 13.5px; } .mx-hero-w b { font-size: 13.5px; } .mx-hero-facts { gap: 40px; } .mx-hero-facts dd { font-size: 26px; } .mx-hero-facts dt { font-size: 13px; } .mx-strip { height: 12px; margin: 24px 0 14px; } .mx-strip-key { gap: 8px 24px; font-size: 13px; } .mx-strip-key b { font-size: 13px; } .mx-strip-key .k-st, .mx-strip-key em { font-size: 12px; } /* the three groups of figures: each a short list, the figure in its own column and its words on one line beside it */ .mx-kgroups { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mx-kg { padding: 18px 20px 8px; border-radius: var(--r4); box-shadow: var(--sh-card); } .mx-kg .section-title { margin: 0 0 6px; font: 600 14px/20px var(--sans); color: var(--ink); } .mx-kt { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; } .mx-tile { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "fig lab spark" "fig d d"; align-items: center; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; } .mx-tile:first-child { border-top: 0; } .mx-tile > b { grid-area: fig; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; } .mx-tile > b .mx-sep { margin: 0 3px; } .mx-tile .lab { grid-area: lab; font-size: 13.5px; line-height: 19px; } .mx-tile .mx-spark { grid-area: spark; width: 72px; height: 22px; margin: 0; } .mx-tile .mx-d { grid-area: d; margin: 0; padding-top: 2px; font-size: 12.5px; } /* the sections: their name and one plain line, with air above */ .mx-sec { margin-top: 48px; } .mx-sh { gap: 4px 14px; padding-top: 20px; margin-bottom: 16px; border-top-color: var(--hair); } .mx-sh h2 { font-size: 18px; line-height: 26px; } .mx-sh p { font-size: 13.5px; } .mx-grid2 { gap: 16px; } .mx-grid2 + .mx-grid2 { margin-top: 16px; } .mx-card { padding: 20px 24px 22px; } .mx-card > .section-title, .mx-cardhead .section-title, .mx-sub-b > .section-title { margin: 0 0 14px; font: 600 14px/20px var(--sans); color: var(--ink); } .mx-cardhead .section-title { margin: 0; } .mx-total { font-size: 13px; } .mx-sub { font-size: 13px; } .mx-sub-b + .mx-sub-b { margin-top: 22px; padding-top: 18px; } .mx-one, .mx-quiet { font-size: 13.5px; } /* bars: a name is whole while its line has room, the figures in their columns */ .mxb { gap: 10px; } .mxb-r { grid-template-columns: minmax(120px, 46%) minmax(40px, 1fr) 48px 44px; gap: 12px; font-size: 13.5px; } .mxb-r:not(:has(.mxb-s)) { grid-template-columns: minmax(120px, 46%) minmax(40px, 1fr) 48px; } .mxb-v { font-size: 13px; } .mxb-s { font-size: 12px; } .mx-key { font-size: 13.5px; gap: 8px; } .mx-key li { grid-template-columns: 10px minmax(0, 1fr) 48px 44px; } .mx-key b { font-size: 13px; } .mx-key em { font-size: 12px; } .mx-legend { font-size: 12.5px; } .mx-x { font-size: 12px; } .mx-fig summary { font-size: 13px; } /* stage by stage and the work per person: rows of 40px, the amounts where the eye goes */ .mx-fr, .mx-wr { padding: 9px 8px; font-size: 14px; } .mx-fr { grid-template-columns: minmax(150px, 220px) minmax(80px, 1fr) 56px 100px 100px 84px; } .mx-wr { grid-template-columns: minmax(160px, 240px) minmax(80px, 1fr) 60px 72px 84px; } .mx-fh { font-size: 12px; } .mx-fr .num, .mx-wr .num { font-size: 13.5px; } .mx-fh .num { font-size: 12px; } .mx-st em, .mx-stn { font-size: 12px; } /* the largest live operations: names whole, figures in one weight and size */ .mx-tw { margin: 0 -24px; } .mx table.mx-top { font-size: 14px; } .mx table.mx-top td, .mx table.mx-top th { height: 44px; } .mx table.mx-top th { font-size: 12.5px; } .mx table.mx-top th:first-child, .mx table.mx-top td:first-child { padding-left: 24px; } .mx table.mx-top th:last-child, .mx table.mx-top td:last-child { padding-right: 24px; } .mx table.mx-top td.num { font: 500 14px var(--num); color: var(--ink-2); } .mx-top td.num.amt { font-weight: 600; color: var(--ink); } .mx-top .mx-name a { white-space: nowrap; } .mx .mx-fig table.mx-t { font-size: 13px; } /* three cards to a row: the bar goes under its name, so a financier's name is whole on its line */ .mx-grid2:has(> .mx-card:nth-child(3)) .mxb { gap: 12px; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-r { grid-template-columns: minmax(0, 1fr) 48px 44px; grid-template-areas: "l v s" "t t t"; row-gap: 6px; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-r:not(:has(.mxb-s)) { grid-template-columns: minmax(0, 1fr) 56px; grid-template-areas: "l v" "t t"; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-l { grid-area: l; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-t { grid-area: t; height: 4px; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-v { grid-area: v; } .mx-grid2:has(> .mx-card:nth-child(3)) .mxb-s { grid-area: s; } /* the money: the figures as the page's other tiles, the lists at reading size */ .mx-money { gap: 16px; } .mx-money div { padding: 16px 18px; border-radius: var(--r3); } .mx-money b { font-size: 26px; line-height: 34px; letter-spacing: -0.01em; } .mx-money span { font-size: 13px; } .mx-list li { min-height: 40px; font-size: 14px; } .mx-list b, .mx-list .muted { font-size: 13.5px; } @media (max-width: 1199px) { .mx-kgroups { gap: 12px; } .mx-kg { padding: 16px 16px 6px; } .mx-tile { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 10px; } .mx-tile > b { font-size: 21px; } .mx-tile .lab { font-size: 13px; } .mx-tile .mx-spark { width: 48px; } } /* -- 7.8 Commission and What I brought: the month's statements and the terms as framed tables, each column as wide as what it holds, the words that run long wrapping in their own column -- */ .cm-table.fee-table { margin: 0 0 12px; border: 1px solid var(--hair); border-radius: var(--r3); } .cm-table.fee-table table { table-layout: auto; min-width: 0; width: 100%; } .cm-table th { width: auto !important; } .cm-table th:first-child, .cm-table td:first-child { padding-left: 16px; } .cm-table td { white-space: nowrap; vertical-align: middle; } .cm-table td.wrap { white-space: normal; min-width: 132px; max-width: 360px; line-height: 20px; padding-top: 10px; padding-bottom: 10px; } .cm-table th { white-space: normal; line-height: 16px; padding-top: 10px; padding-bottom: 10px; height: auto; vertical-align: bottom; } .cm-table td .muted.small { font-size: 12.5px; } .cm-table td.wrap .muted.small { display: inline; } .cm-table td.wrap > a.ink { white-space: nowrap; } .cm-table tr.tot td { background: var(--surface-hover); } main:has(.pg-tabs) .content > h2 { margin-top: 44px; } main:has(.pg-tabs) .content > h2 + p.muted.small, main:has(.pg-tabs) .content > p.muted.small { max-width: 80ch; font-size: 13.5px; line-height: 20px; } main:has(.pg-tabs) .content > .toolbar .flex { gap: 10px; } main:has(.pg-tabs) .content > .toolbar .flex > b { font-size: 15px; } main:has(.pg-tabs) details > summary.btn { margin-top: 4px; } main:has(.pg-tabs) .ts-form.card { max-width: 760px; padding: 24px; gap: 16px 20px; } .menu-panel.ts-edit { width: min(600px, 92vw); padding: 16px; } .ts-form label { gap: 6px; font-size: 13px; } /* a statement: its state in one line, then the table */ .content > .meta.kvrow { gap: 10px; margin-bottom: 16px; font-size: 14px; } /* what a person brought: the people as page tabs, the deals and people as lists */ .grid2.br-page { grid-template-columns: minmax(0, 760px) 300px; gap: 40px; } .grid2.br-page > div { grid-column: 1; padding-left: 0; } .grid2.br-page > div > h2:first-child { margin-top: 0; } .grid2.br-page > aside { grid-column: 2; position: static; max-height: none; padding: 0; border: 0; } .grid2.br-page > aside .card { padding: 20px 24px; border: 1px solid var(--hair); background: var(--surface); } .grid2.br-page > aside .card > .section-title:first-child { margin: 0 0 8px; font: 600 15px/22px var(--sans); color: var(--ink); } @media (max-width: 1199px) { .grid2.br-page { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; } } /* -- 7.9 Knowledge's other pages: the firm's checklists as rows that open, the resources and the questions at reading size -- */ .cklib > h2:first-child { margin-top: 0; } .cklib details.card { padding: 14px 20px; margin-bottom: 8px; } .cklib details.card > summary { min-height: 28px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; } .cklib details.card > summary b { font-weight: 600; } .cklib details.card > summary > .muted.small { flex: none; white-space: nowrap; } .cklib details.card[open] { padding-bottom: 20px; } .cklib details.card ul.plain.small { font-size: 14px; line-height: 1.6; } .cklib form.form.card { padding: 24px; } .res-group + .res-group { margin-top: 28px; } .res-head h3 { font-size: 15px; margin: 0 0 10px; } .pb .res-group .list li { min-height: 60px; } .pb .res-group .list li .flex b { font-weight: 600; } /* -- 7.10 Changes: the asks as cards at a reading measure, the ask form opening under its press -- */ .builds-ask { max-width: 860px; } details.panel.builds-ask:not([open]) { padding: 0; border: 0; box-shadow: none; background: none; margin: 0 0 20px; } details.panel.builds-ask[open] { padding: 20px 24px; } .builds-ask .form { gap: 16px 20px; } .builds-ask .form > label { gap: 6px; font: 500 13px/18px var(--sans); color: var(--ink-2); } /* an ask is drawn as Approve & sign draws a change waiting for a partner (the same card: its room inside, its 17px name, 16px between cards), at this page's reading measure */ .appr-list:has(> .build-card) { max-width: 860px; display: grid; gap: 16px; } .build-card { padding: 20px 24px; border-radius: var(--r4); } .build-card .small { font-size: 13.5px; } main:has(.builds-ask) .content > .empty { max-width: 860px; padding: 40px 0; text-align: center; color: var(--muted); } /* -- 7.11 the page that says something went wrong: one quiet message in the middle of the window, the way back under it -- */ .err-page { max-width: 520px; margin: 14vh auto 0; text-align: center; } .err-page .sub { font-size: 16px; line-height: 24px; color: var(--ink-2); } .err-page .actions { justify-content: center; margin-top: 20px; } /* -- 7.12 the book's chat (/assistant): one frame, not three; its words at reading size -- */ .ai-chat-block:has(> #assistant-panel) { padding: 0; border: 0; background: none; } #assistant-panel.panel { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; } #assistant-panel .chatwrap { grid-template-columns: minmax(0, 760px) 280px; gap: 40px; } #assistant-panel .turns { gap: 16px; } #assistant-panel .turn .bubble { padding: 12px 16px; font-size: 15px; line-height: 1.6; border-radius: 16px; } #assistant-panel .turn.ai .bubble .doc { padding: 0; border: 0; background: none; max-width: none; font-size: 15px; } #assistant-panel .chat-input textarea { font-size: 15px; } #assistant-panel .chatside { padding-left: 24px; } #assistant-panel .chatside .sessions li { padding: 10px 0; } #assistant-panel .chatside .sessions li a { color: var(--ink-2); font-weight: 500; } #assistant-panel .chatside .sessions li a:hover { color: var(--accent); } #assistant-panel .chatside .sessions li.on a { color: var(--ink); font-weight: 600; } main:has(#assistant-panel) .content > p.sub { max-width: 76ch; } /* -- 7.13 outside the shell: the sign-in and a client's link, on the grey, one white card at the centre -- */ body:has(> .login) { background: var(--ground); } .login.card { max-width: 400px; margin: 16vh auto 0; padding: 32px 32px 28px; border-radius: 16px; box-shadow: 0 1px 2px rgba(11,27,53,.05), 0 8px 32px rgba(11,27,53,.08); } .login .flex.mb3 { gap: 12px; margin-bottom: 20px; } .login .avatar.sq.lg { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; } .login h1 { font-size: 24px; line-height: 32px; margin: 0; } .login .sub { font-size: 14.5px; line-height: 22px; margin: 0 0 20px; } .login .form { gap: 16px; } .login .form label { gap: 6px; font: 500 13px/18px var(--sans); color: var(--ink-2); } .login .form input { height: 40px; font-size: 15px; } .login .btn.primary, .login a.btn.primary { width: 100%; height: 40px; justify-content: center; font-size: 14.5px; } .login .muted.small { font-size: 13px; line-height: 19px; } body:has(> .portal) { background: var(--ground); } .portal { max-width: 760px; padding: 40px 24px 80px; } .portal .page-head.record { position: static; height: auto; min-height: 0; padding: 0 0 24px; margin: 0 0 24px; gap: 14px; background: transparent; border-bottom: 1px solid var(--hair); } .portal .page-head.record .avatar.sq.lg { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; } .portal .page-head.record h1 { font-size: 24px; line-height: 32px; } .portal .page-head.record .sub { font-size: 14px; } .portal .card { padding: 20px 24px; border-radius: var(--r4); } .portal .card > .section-title:first-child { margin: 0 0 12px; font: 600 15px/22px var(--sans); color: var(--ink); } .portal .card > .section-title .n { font: 500 13px var(--num); color: var(--muted); margin-left: 4px; } .portal .pt-list { border: 0; border-radius: 0; } .portal .pt-list li.pt-paper { min-height: 56px; padding: 10px 0; } .portal .pt-paper .nm { font-size: 14.5px; } .portal .pt-paper .m { font-size: 13px; } .portal .form { gap: 16px 20px; } .portal .form > label { gap: 6px; font: 500 13.5px/20px var(--sans); color: var(--ink-2); } .portal .pt-gate { max-width: 480px; margin: 8vh auto 0; } .portal > p.muted.small { font-size: 13px; } /* ==== end of 7 · workspace ==== */