too. So the hero's panel opts in by name. */ @media (min-width: 901px) { .lb-console #viewPanel > .cc-camp-section--empty { flex: 1 0 auto; margin-bottom: 0; display: flex; flex-direction: column; } /* The panel takes the card's height and is a column that centres the group in it, by the one-panel pages' own rule (margin-block: auto on the empty state, near the top of this file): however tall the window, the group sits in the middle of its card (owner, 26 Sep). */ .lb-console .cc-camp-section--empty > .cc-camp-panel { flex: 1 0 auto; display: flex; flex-direction: column; } .lb-console .cc-camp-section--empty > .cc-camp-panel > .cc-camp-empty { margin-block: auto; } /* The card's padding is 8px above its panel and 20px below it, so the panel takes back the 12px difference and the group's middle is the card's middle, exactly as a phone does below. The tab row is above the card now, so the panel leads every list card, not only the first run's: the same 12px gives a list of Campaigns 20px above it as well. */ .lb-console .cc-camp-section > .cc-camp-panel:first-child { padding-top: 12px; } /* A desktop's hero is compact, so Add Campaign stays clear of Simulation Mode even in a short window (owner, 25 Sep): a smaller megaphone and tighter gaps. The heading and sentence keep their sizes and Add Campaign its full 48px. A phone keeps the larger hero, centred. */ .lb-console .cc-camp-empty .cc-camp-empty__art { width: 120px; margin-bottom: 8px; } .lb-console .cc-camp-empty .lb-empty__title { margin-bottom: 4px; } .lb-console .cc-camp-empty .lb-empty__action { margin-top: 16px; } } @media (max-width: 900px) { .lb-console .cc-camp-empty { min-height: 360px; justify-content: center; padding: 32px 16px; } /* The card's padding is 8px above its panel and 20px below it, and the panel is the card's first child. Where the group is centred, the panel takes back the 12px difference so the group sits in the card's middle, not 6px above it. */ .lb-console .cc-camp-section > .cc-camp-panel:first-child { padding-top: 12px; } } /* A finger gets the 44px these tabs always gave it. A pointer gets the reference's proportions, and the track the button's height. */ @media (max-width: 900px), (pointer: coarse) { .lb-console .cc-attn-switch.cc-camp-tabs .cc-tab { min-height: 44px; } } @media (max-width: 1180px) { .lb-console .cc-camp-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { /* 10px between cards across and down; 10 + 6 is still 16px below. */ .lb-console .cc-camp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; margin-bottom: 6px; } .lb-console .cc-camp-stat { margin-bottom: 10px; } .lb-console .cc-tabs.cc-camp-tabs { flex: 1 1 100%; } .lb-console .cc-camp-stat .stat-value { font-size: 1.3rem !important; } } @media (max-width: 560px) { .lb-console .cc-camp-section { padding: 6px 14px 16px !important; } /* 6px above and 16px below here, so the panel takes back 10, and so does the Trash Bin's sentence when it leads the card instead. */ .lb-console .cc-camp-section > .cc-camp-panel:first-child { padding-top: 10px; } .lb-console .cc-camp-note { margin-top: 10px; } .lb-console .cc-camp-card { flex-basis: 100%; max-width: none; } } @media (prefers-reduced-motion: reduce) { .lb-console .cc-camp-progress__fill { transition: none; } .lb-console .cc-camp-card[data-queue-card], .lb-console .cc-camp-card--settling, .lb-console .cc-camp-card--lifted .cc-camp-card__tile { transition: none; } .lb-console .cc-camp-card--aloft .cc-camp-card__tile { transform: none; } } @media (forced-colors: active) { .lb-console .cc-camp-card__tile, .lb-console .cc-camp-menu__list { border: 1px solid; } /* The slot is told from a card by its edge, where no ground is drawn. */ .lb-console .cc-camp-card--placeholder .cc-camp-card__tile { border-style: dashed; } .lb-console .cc-camp-progress__fill { background: Highlight; } /* A shadow is not drawn here, and the disc is nothing else. */ .lb-console .cc-camp-tabs .cc-count { border: 1px solid; } } /* ══════════════════════════════════════════════════════════════════════════ STEP 3 OF 5 — CLONE YOUR VOICE Inside the same .cc-onb card as steps 1 and 2, at the same width, with the same fixed top and fixed bottom. Nothing below restyles the shell: a step that changed the card it lives in would stop reading as one flow. ── THE PASSAGE IS A TELEPROMPTER, SO IT GETS THE CARD ─────────────────── It was set in a 620px column, which is a fine measure for prose somebody reads silently and the wrong one for a passage somebody reads ALOUD off a screen while a microphone is open. At 620px this script runs to fourteen lines, which pushed the recording controls off the bottom of a 1080p viewport: the operator had to scroll away from the words to find Start recording, and scroll back to read them. The fix is WIDTH, not smaller type. The same passage at the card's own measure is six lines, the type is untouched, the leading is untouched, and the controls sit under it where they can be seen while it is being read. The cap is there for a 4K monitor, where the card itself is wider than any measure is worth reading. ── AND THE HEADER DOES NOT FOLLOW IT ──────────────────────────────────── The step number, the title, the sentence under it and the language chips stay centred and narrow. They are one short line each; stretching them across a 1500px card would leave three words marooned at either end. ── NO SECOND VISUAL LANGUAGE ──────────────────────────────────────────── Hairline borders, the shared radius, the shared ink. No gradient, no frosted surface, no shadow of its own, no colour that is not already in the dashboard's palette — this is an onboarding step, not an instrument. ══════════════════════════════════════════════════════════════════════════ */ /* ── THE STEP'S OWN RHYTHM ──────────────────────────────────────────────── 18px between every part made the step read as one dense column: the language track, the passage, the regenerate button, the mode switch and the capsule all sat the same distance apart, so nothing grouped and the eye had no resting points. 26px is enough that the three things somebody actually moves between — where am I, what do I read, how do I record it — separate, while the parts INSIDE each of those keep their own tighter spacing. */ .lb-console .cc-v3 { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; min-width: 0; margin: 0 auto; max-width: 1680px; } /* The track sits under the card's own subtitle, not against it. */ .lb-console .cc-v3 > .cc-v3__lang:first-child { margin-top: 6px; } /* Each part of the step: a small heading and its content, separated by space rather than by a box. Nested cards inside a card is the crowding the approved design rules out. */ .lb-console .cc-v3__block { width: 100%; min-width: 0; } .lb-console .cc-v3__h { margin: 0 0 12px; font-size: 0.82rem; font-weight: 550; letter-spacing: -0.005em; color: var(--text); } /* ══════════════════════════════════════════════════════════════════════════ WHICH LANGUAGE — A SELECTOR, NOT A TRACK This replaced a segmented control — one tab per language, centred over the passage. Tabs read as "pick one", and every language the agent speaks has to be recorded, so people recorded one and looked for the way on. ── AND THEN IT WENT TOO FAR THE OTHER WAY ──────────────────────────────── What replaced the tabs was a progress TRACK: numbered circles joined by rules, with "Language 2 of 3" underneath. That is the shape of a wizard, and it says three things that are not true here — that there is an order, that the second circle is further along than the third, and that a circle you have not reached is not yet available. None of it holds. Any language may be recorded at any time, in any order, and the server files each one under its own language either way. So the rules between the circles are gone, the count is gone, and what is left is a row of round buttons that say how many languages there are, which are saved, and which one is showing. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-v3__lang { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; } /* ── THE GAP DOES WHAT THE CONNECTORS USED TO ───────────────────────────── A connector is the one thing that turns a row of dots into a sequence, so it is the one thing removed. The circles keep their spacing from `gap`, which scales with the viewport the same way the old rules did and holds three of them comfortably on the narrowest phone this supports. */ .lb-console .cc-v3__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 0 0 8px; padding: 0; list-style: none; max-width: 100%; } .lb-console .cc-v3__dot { display: flex; align-items: center; min-width: 0; } /* ── THE DEFAULT CIRCLE ─────────────────────────────────────────────────── A number on the page's own ground inside a hairline. Every circle starts here and only a SAVE moves it off. The numeral is the page's text colour rather than the muted grey it used to be: it is the label of a control somebody is meant to click, not a caption. */ .lb-console .cc-v3__dot-btn { appearance: none; cursor: pointer; border: 1.5px solid var(--line, #e5e7eb); background: var(--card, #fff); color: var(--text); display: inline-flex; align-items: center; justify-content: center; position: relative; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 0.8rem; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } /* ── 44px OF TARGET AROUND A 30px CIRCLE ────────────────────────────────── The circle stays 30px: that is the size its numeral is readable at, and the size at which it reads as a marker rather than as a button. What was wrong was the TARGET. 30px is under every touch minimum there is, and these are the step's primary navigation — the control somebody presses to go back and redo a language. So the hit area is extended 7px on every side by a transparent overlay, which leaves the ring, the green fill and the focus outline exactly where they were. The `gap` above is 16px so that two 44px targets clear each other by 2px rather than overlapping — an expanded target that eats its neighbour's is worse than a small one. */ .lb-console .cc-v3__dot-btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* ── WHERE YOU ARE: A BORDER, AND NOTHING ELSE ──────────────────────────── This used to be a solid black fill. Filled is the heaviest thing this control can say, and it was saying it about the circle that had achieved the LEAST — the one still being recorded — while the finished ones sat in outline. The step read as though selecting a language completed it. So being current is now a darker, thicker ring on the same white ground. It reads as focus, which is what it is. FILL IS RESERVED FOR SAVED. */ .lb-console .cc-v3__dot[data-state="current"] > .cc-v3__dot-btn { border-color: var(--accent, #111827); border-width: 2px; color: var(--text); } /* ── SAVED: GREEN, WITH THE NUMBER STILL IN IT ──────────────────────────── THE NUMERAL STAYS. A tick would remove the only thing that identifies the circle, and these are targets somebody clicks: "go back to 2" has to stay sayable after 2 is done. There is no checkmark here and no rule joining one circle to the next. Keyed on data-done, never on data-state, so selecting a saved language cannot take its green away. That is the whole point of the two attributes being separate. ── THE GREEN ITSELF, AND WHERE IT COMES FROM ──────────────────────────── #15803d — the console's dark forest green, borrowed from the billing and import screens, where it carries TEXT — read as a badge at 30px: dense, flat, closer to black than to a colour. This is the Labbie platform's own success green instead: `--lds-color-green` / #34C759 in frontend/design-system/tokens/tokens.css, the value the written specification names for "success, completion, confirmation, positive status", which is precisely what a saved language is. The token is named first and the literal is its fallback, because the console mounts the dashboard sheets rather than the token sheet — so the value is stated once, sourced, and picks the token up wherever it is present. It is not a hue invented for this control. The depth is a shadow rather than a second colour: a soft drop under the disc and one hairline of a darker tone inside its lower edge. Nothing joins one circle to the next, and nothing carries a checkmark. THE CONTRAST TRADE IS REAL AND IS STATED HERE. White on #34C759 measures about 2.2:1, where white on the old forest green measured 5.0:1. The numeral is aria-hidden and every circle states its number, its language and its condition in text beside it (WCAG 1.4.1), so no fact depends on reading the figure — but it is lighter against its ground than it was, and that is a deliberate move onto the platform's specified green, not an oversight. The weight below is raised to hold the figure together at this size. */ .lb-console .cc-v3__dot[data-done="true"] > .cc-v3__dot-btn { background: var(--lds-color-green, #34c759); border-color: var(--lds-color-green, #34c759); color: #fff; font-weight: 650; box-shadow: inset 0 -1.5px 0 rgba(36, 138, 61, 0.32), 0 1px 2px rgba(36, 138, 61, 0.24); } /* ── SAVED AND SELECTED: THE SAME DISC, RINGED IN ITS OWN DARKER TONE ───── The ring used to be the page's black --accent, which put a second colour around a circle that already had one and made the selected saved circle the heaviest object in the row. It is deeper green on green now — Apple's own darker green, not a third hue — so "saved" and "you are here" stack in one colour instead of competing in two. */ .lb-console .cc-v3__dot[data-done="true"][data-state="current"] > .cc-v3__dot-btn { border-color: #248a3d; border-width: 2px; box-shadow: inset 0 -1.5px 0 rgba(36, 138, 61, 0.32), 0 0 0 3px rgba(52, 199, 89, 0.24), 0 1px 2px rgba(36, 138, 61, 0.24); } .lb-console button.cc-v3__dot-btn:hover { border-color: var(--text); } .lb-console .cc-v3__dot[data-done="true"] > button.cc-v3__dot-btn:hover { background: #2fb35a; border-color: #2fb35a; } .lb-console .cc-v3__dot[data-done="true"][data-state="current"] > button.cc-v3__dot-btn:hover { border-color: #248a3d; } .lb-console .cc-v3__dot-btn:focus-visible { outline: 2px solid var(--accent, #111827); outline-offset: 2px; } .lb-console .cc-v3__dot-n { display: inline-flex; align-items: center; justify-content: center; } .lb-console .cc-v3__lang-name { margin: 0; font-size: 0.98rem; font-weight: 550; letter-spacing: -0.01em; color: var(--text); } /* The gate's copy of the same indicator, on the step's own rhythm. */ .lb-console .cc-v3__gate { margin: 0 0 18px; } /* ── THE PASSAGE ────────────────────────────────────────────────────────── The one surface on the step, and it is a page rather than a card: white, a hairline, generous padding, and text set at the size somebody can read from a phone propped against a laptop. */ .lb-console .cc-v3__passage { margin: 0; padding: 22px 28px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--card, #fff); color: var(--text); font-size: 1.02rem; line-height: 1.9; /* A long project name is broken rather than allowed to set the floor of the column and push the card wide. */ overflow-wrap: anywhere; transition: opacity 140ms ease; } /* ── REGENERATING ───────────────────────────────────────────────────────── The passage dims and stays exactly where it is. It is NOT emptied, NOT replaced by a spinner and NOT replaced by an error if the request fails: what is on screen is a passage the operator can read, and taking it away because a request for a SECOND one is in flight costs them the thing they came for. The button beside it carries the spinner and the word. */ .lb-console .cc-v3__passage[data-busy="true"] { opacity: 0.45; } .lb-console .cc-v3__scriptfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; } .lb-console .cc-v3__scriptnote { margin: 0; flex: 1 1 200px; min-width: 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); } /* Nothing to say means nothing on the page, rather than an empty paragraph holding a line of space open under the button. */ .lb-console .cc-v3__scriptnote:empty { display: none; } .lb-console .cc-v3__hint { margin: 0 0 10px; font-size: 0.84rem; line-height: 1.55; color: var(--muted); } /* ── MICROPHONE / UPLOAD AUDIO ────────────────────────────────────────── The Website Builder's switch, exactly as Step 2's tab strip wears it — see "AND IT WEARS THE WEBSITE BUILDER'S SWITCH" there. Scoped to this one .cc-seg: billing and the brain picker keep the shared segmented control. Every value is restated rather than inherited from .cc-seg, so a change to the shared control cannot move this one away from the workspace's. */ .lb-console .cc-v3__modes { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 2px 8px -4px rgba(28, 24, 16, 0.16); } .lb-console .cc-v3__modes .cc-seg__btn { padding: 5px 13px; border-radius: 999px; background: transparent; color: var(--muted, #6b7280); font-size: 0.78rem; font-weight: 500; line-height: 17px; letter-spacing: -0.005em; transition: background 140ms, color 140ms, box-shadow 140ms; } .lb-console .cc-v3__modes .cc-seg__btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.98); color: var(--text, #111827); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); } /* Hover darkens the label and nothing else: the shared control's white hover fill is not the workspace's. */ .lb-console .cc-v3__modes .cc-seg__btn:not([disabled]):not([aria-pressed="true"]):hover { background: transparent; color: var(--text, #111827); } .lb-console .cc-v3__modes .cc-seg__btn:focus-visible { outline: revert; outline-offset: revert; } .lb-console .cc-v3__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; min-width: 0; } /* The record flow has one primary action at a time, and it is the width of the step. Once a take is ready the quiet text action sits above it, right aligned, rather than beside it competing for the same weight. */ /* ── SAVE ───────────────────────────────────────────────────────────────── The step's one primary action, the width of the take above it. ── WHY IT NEEDS A HEIGHT AT ALL ───────────────────────────────────────── .btn-dark sets padding and line-height and no min-height, which is right for a button sitting in a row of controls — it comes out around 30px. Under a 68px black capsule, at the full width of the card, 30px reads as a strip rather than a button, and it was the one control on the step somebody has to hit on every language. 46px is the same decision the 720px rules below already made for this exact control (they set 44px, the touch-target floor, which is why only the desktop looked wrong). Nothing else is touched: radius, colour, weight and type all stay .btn-dark's, so this is the platform button at a comfortable size and not a second button geometry. */ .lb-console .cc-v3__record-primary { width: 100%; min-width: 0; flex: 1 1 100%; min-height: 46px; padding-block: 0; } /* ── AND ITS OWN ROW, BECAUSE IT IS ALWAYS THERE ────────────────────────── Save used to be rendered only once a take existed, inside whichever input flow produced it, so it appeared and vanished and moved between the two modes. It sits below both now, in a fixed place, in every state — grey and disabled until there is something to save. A control that is always in the same place is one somebody stops having to look for. */ .lb-console .cc-v3__save { display: flex; width: 100%; min-width: 0; margin-top: 12px; } /* ── STEP 3'S CONTINUE, WHILE THAT PRESS IS WORKING ─────────────────────── The button IS the loading indicator, for the whole of the press — the clone being built and the approval that publishes it afterwards. It keeps its geometry exactly — same width, height, radius, weight and colour — and nothing is inserted beside it, so the header does not shift when the press starts or ends. No spinner, and the surface itself never pulses or flashes: all of the motion is in the three dots. Non-clickable while it runs. `aria-disabled` carries the meaning and this rule carries the pointer half of the behaviour; the handler's own guard is what stops a keyboard press, which is why a real `disabled` attribute is not needed here (see the markup for why it would cost focus). Kept at full opacity rather than dimmed: it is working, not unavailable, and a greyed control would read as the step having stopped. */ .lb-console .cc-v3__continue--saving { pointer-events: none; /* ── AND IT DOES NOT SHRINK TO FIT THE SHORTER WORD ───────────────── The button is anchored by its RIGHT edge in the top corner, so a label narrower than "Continue" would pull its left edge inward the moment a press started. The floor is the resting button's own width — the label's 4.1em, measured in the browser, plus the pill's fixed 55px of padding, gap and arrow — so it tracks the font rather than pinning a pixel count, and it is declared on THIS state only: the resting button gains nothing. */ min-width: calc(4.1em + 55px); } /* ── AND THE ELLIPSIS, WHICH IS THE WHOLE OF THE MOTION ─────────────────── Three dots fading in turn, a sixth of a second apart. Reserved inline-block width per dot so the label cannot reflow as they fade, and the dots never leave the layout — they change opacity only, between a resting quarter and full, which is what keeps it a breath rather than a blink. The floor is 0.25 rather than 0: a dot that disappears entirely reads as text being deleted, and the eye follows the gap. */ .lb-console .cc-ellipsis { display: inline-block; letter-spacing: 0.06em; } .lb-console .cc-ellipsis i { font-style: normal; opacity: 0.25; animation: cc-ellipsis-fade 1.4s ease-in-out infinite; } .lb-console .cc-ellipsis i:nth-child(2) { animation-delay: 0.16s; } .lb-console .cc-ellipsis i:nth-child(3) { animation-delay: 0.32s; } @keyframes cc-ellipsis-fade { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } } /* Reduced motion keeps the WORD and the dots — they are what says the press is working — and takes away only the fading. A static "Saving..." still says the true thing. */ @media (prefers-reduced-motion: reduce) { .lb-console .cc-ellipsis i { animation: none; opacity: 1; } } /* ── THE LENGTH RULE, CENTRED ON SAVE ───────────────────────────────────── Directly under the button and centred on it, so it reads as that control's own note rather than as another left-ranged line of body copy. The step's text is ranged left throughout, which is exactly why this one is not: it is attached to a control, and the centring is what attaches it. */ .lb-console .cc-v3__save-hint { margin: 8px 0 0; text-align: center; } /* ── AND WHAT DISABLED LOOKS LIKE ───────────────────────────────────────── The platform button's own disabled treatment, stated here only because .btn-dark is a solid black surface and the shared rule has to be visible against it: the same geometry, the same radius, no shadow, and a weight that plainly cannot be pressed. No new colour is introduced — it is the console's own line and muted tokens. */ .lb-console .cc-v3__record-primary[disabled] { background: var(--line, #e5e7eb); border-color: var(--line, #e5e7eb); color: var(--muted); box-shadow: none; cursor: default; } /* ── THE STEP'S ONE STATUS LINE ─────────────────────────────────────────── Where three blocks used to be — "Hear your voice", "Your voice", and a failure card. Every one of them was saying where the voice had got to, which is a sentence rather than a section. Rendered only when there is something to say, so an ordinary recording pass has nothing here at all. */ .lb-console .cc-v3__state { margin: 14px 0 0; text-align: center; } /* ── THE IDLE CAPSULE ───────────────────────────────────────────────────── The SAME object as the live one and the finished one, in its first state: black, full width, a round control on the left, one line across it. It was a .btn-dark pill with an inline icon, which meant pressing it replaced one kind of object with another and the eye had to find its place again. Three columns rather than the capsule's own auto/1fr/auto, because the label is centred on the CAPSULE and not on the space left beside the button. The trailing column is the button's width, empty, holding the symmetry. */ .lb-console .cc-v3__cap--start { appearance: none; border: 0; cursor: pointer; grid-template-columns: auto minmax(0, 1fr) 52px; color: #fff; text-align: center; transition: background 150ms ease; } .lb-console .cc-v3__cap--start:hover { background: #24242a; } .lb-console .cc-v3__cap--start:focus-visible { outline: 2px solid var(--accent, #111827); outline-offset: 2px; } .lb-console .cc-v3__cap--start[disabled] { cursor: default; opacity: 0.72; } /* Not a button itself — the whole capsule is the button — so it is a span wearing the transport's shape. */ .lb-console .cc-v3__cap-btn--mic { pointer-events: none; } .lb-console .cc-v3__cap-say { min-width: 0; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; } /* ── A SAVED RECORDING THAT IS NOT PLAYABLE *YET* ──────────────────────── NOT the ordinary state of a saved language: that one is the real transport, over bytes fetched back from GET /voice/samples/:language/audio, and it wears .cc-v3__cap--player like every other take. This is the capsule for the two moments when there is nothing to press — while those bytes are still arriving, and when they could not be fetched at all — so a saved language is never a hole in the step where the other states have an object. The round control keeps the shape the other states put in that column, and gives up the affordances it has no use for. */ .lb-console .cc-v3__cap--saved { color: #fff; } .lb-console .cc-v3__cap--saved .cc-v3__cap-btn { cursor: default; pointer-events: none; } /* ── A TAKE AND THE WAY TO DISCARD IT, ON ONE ROW ───────────────────────── The capsule takes the space, the discard sits to its right at the size of a touch target. It used to be a text button on its own line underneath, which read as a second decision of equal weight to the pill below it. */ .lb-console .cc-v3__take { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; flex: 1 1 100%; } .lb-console .cc-v3__again { appearance: none; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line, #e5e7eb); border-radius: 50%; background: var(--card, #fff); color: var(--text); transition: background 150ms ease, border-color 150ms ease; } .lb-console .cc-v3__again:hover { background: var(--surface-2, #f3f4f6); border-color: var(--text); } .lb-console .cc-v3__again:focus-visible { outline: 2px solid var(--accent, #111827); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════ THE AUDIO CAPSULE One object in six states, and the same object whether the audio came from the microphone or from a file. Black, because it is the step's primary surface while it exists; pill-shaped, because that is this system's shape for a primary control and the capsule replaces one. Three parts on one row: the transport, the timeline, the measurement. The grid is minmax(0, 1fr) for the middle column ON PURPOSE — `1fr` alone means minmax(auto, 1fr), so fifty-six bars would set a floor under the column and push the timer off a narrow screen instead of compressing. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-v3__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-width: 0; flex: 1 1 100%; box-sizing: border-box; min-height: 68px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--token-btn-action-bg, #101012); box-shadow: var(--shadow, 0 1px 6px rgba(0, 0, 0, 0.05)); } /* THE TRANSPORT. One circular control, 44px, which is the touch target the rest of this product uses and large enough to hit while reading. */ .lb-console .cc-v3__cap-btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; transition: background 150ms ease; } .lb-console .cc-v3__cap-btn:hover { background: rgba(255, 255, 255, 0.22); } .lb-console .cc-v3__cap-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── THE ONE RED THING ON THE STEP ──────────────────────────────────────── Stopping is the only move available while the microphone is open, and this is the system's own red — the same #b91c1c the destructive controls use — rather than a second one introduced for a recorder. It breathes rather than blinks: a two-second ease, a little opacity and a little scale. A flash would read as an alarm, and nothing is wrong. */ .lb-console .cc-v3__cap-btn--stop { background: #b91c1c; box-shadow: 0 0 0 6px rgba(185, 28, 28, 0.22); animation: cc-v3-live-breathe 2s ease-in-out infinite; } .lb-console .cc-v3__cap-btn--stop:hover { background: #b91c1c; } .lb-console .cc-v3__cap-square { width: 17px; height: 17px; border-radius: 4px; background: #fff; } @keyframes cc-v3-live-breathe { 0%, 100% { opacity: 0.88; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } } /* Recording never borrows the dimmed disabled treatment. */ .lb-console .cc-v3__record-stop, .lb-console .cc-v3__record-stop:hover { opacity: 1 !important; } /* ── THE TIMELINE ───────────────────────────────────────────────────────── Two identical stacks of bars, one dim and one bright, the bright one clipped to the fraction that has played. That is what makes a frame of playback ONE custom-property write rather than fifty-six height writes, and it is why the progress can be smoother than the bars are wide. */ .lb-console .cc-v3__wave { position: relative; display: block; height: 34px; min-width: 0; border: 0; padding: 0; background: none; } .lb-console .cc-v3__wave[role="slider"] { cursor: pointer; } .lb-console .cc-v3__wave[role="slider"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; } .lb-console .cc-v3__wave-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; pointer-events: none; } .lb-console .cc-v3__wave-layer--played { clip-path: inset(0 calc(100% - var(--cc-played, 0%)) 0 0); } /* Slim, and capped so the capsule getting wider adds SPACE between the bars rather than fattening each one into a block. `flex: 1 1 0` with min-width 0 is what lets the same 128 bars survive a 390px screen as hairlines instead of overflowing it. */ .lb-console .cc-v3__bar { flex: 1 1 0; min-width: 0; max-width: 4px; height: 12%; border-radius: 999px; background: rgba(255, 255, 255, 0.30); transition: height 90ms linear; } .lb-console .cc-v3__wave-layer--played .cc-v3__bar { background: #fff; } /* Live capture is red for as long as it is live, and only then. */ .lb-console .cc-v3__wave--live .cc-v3__wave-layer--played .cc-v3__bar { background: #b91c1c; } /* ── THE MEASUREMENT ────────────────────────────────────────────────────── Tabular figures, so a timer counting 0:08 → 0:09 → 0:10 does not shift the digits beside it and make the whole capsule appear to twitch. */ .lb-console .cc-v3__cap-time { font-size: 0.92rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ CHOOSING A FILE The whole area is the control, exactly as the upload dialog's drop zone is: a wrapping the input, which keeps it a real target for a pointer AND reachable from the keyboard without a handler pretending to be one. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-v3__pick { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; flex: 1 1 100%; box-sizing: border-box; min-height: 68px; padding: 8px 20px 8px 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; background: var(--token-surface-secondary, #f9fafb); color: var(--text); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .lb-console .cc-v3__pick:hover { border-color: var(--text); } .lb-console .cc-v3__pick:focus-within { outline: 2px solid var(--text); outline-offset: 2px; } .lb-console .cc-v3__pick-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); color: var(--text); } .lb-console .cc-v3__pick-label { font-size: 0.92rem; font-weight: 500; } /* Visually hidden, still focusable — the same treatment the dialog's own picker gets, for the same reason. */ .lb-console .cc-v3__pick input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Once the take is ready the picker is re-opened by the quiet text action above it, so the label itself carries nothing and occupies nothing. */ .lb-console .cc-v3__pick--hidden { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); } /* ── CHOSEN, AND BEING READ ─────────────────────────────────────────────── The file's real name and a level timeline, on the light surface, because nothing is playable yet and a black transport with no transport in it would be a control that cannot be used. */ .lb-console .cc-v3__picked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-width: 0; flex: 1 1 100%; box-sizing: border-box; min-height: 68px; padding: 8px 20px 8px 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; background: var(--card, #fff); } .lb-console .cc-v3__picked .cc-v3__bar { background: rgba(17, 24, 39, 0.16); } .lb-console .cc-v3__picked-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } .lb-console .cc-v3__picked-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 500; color: var(--text); } .lb-console .cc-v3__pick--inline { position: static; width: auto; min-height: 0; padding: 0; border: 0; background: none; flex: 0 0 auto; } .lb-console .cc-v3__pick-replace { font-size: 0.8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .lb-console .cc-v3__pick--inline:hover .cc-v3__pick-replace { color: var(--text); } /* ── WHAT THE ACCOUNT ALREADY HAS ───────────────────────────────────────── One hairline above it, because it is a report about state rather than another thing to do, and the rule is the quietest way to say so. */ .lb-console .cc-v3__block--voice { padding-top: 22px; border-top: 1px solid var(--line, #e5e7eb); } /* ── AND THE SENTENCE BESIDE THE FOOTER IS GONE ─────────────────────────── `.cc-v3__whynot` used to stand permanently beside Save & continue, explaining why it could not be pressed. Save & continue can always be pressed now — pressing it is how somebody asks what is left — and what it answers with lands in the step's own notice and in `.cc-v3__state` above the recorder. One sentence, in one place, and only when there is one to say. */ /* ── REDUCED MOTION ─────────────────────────────────────────────────────── The dim is information, not decoration, so it survives — only the movement between the two states goes. The same rule decides the recorder: the red stop control stays red, stays ringed and stays the only red thing on the step; it simply stops breathing. And the bars stop EASING between heights rather than stopping updating — the waveform is the evidence that the microphone is working, so it is the last thing that may be taken away. */ @media (prefers-reduced-motion: reduce) { .lb-console .cc-v3__passage { transition: none; } .lb-console .cc-v3__cap-btn--stop { animation: none; opacity: 1; transform: none; } .lb-console .cc-v3__bar { transition: none; } /* The circles' STATE is the information — filled, ticked, outline — and it survives untouched. Only the ease between those states goes. */ .lb-console .cc-v3__dot-btn, .lb-console .cc-v3__again, .lb-console .cc-v3__cap--start { transition: none; } } /* ── NARROW SCREENS ─────────────────────────────────────────────────────── 720px, the card's own breakpoint, so the step and the shell it sits in change shape at the same width instead of one reflowing inside the other. The passage keeps its leading and loses its inset: 26px each side of a 320px screen is a sixth of the width spent on nothing, and the measure is what makes it readable. Every control becomes a full 44px target, and the footer's reason moves under its button and reads left — a right-aligned fragment beside a full-width button is a ragged edge mid-screen. */ @media (max-width: 720px) { .lb-console .cc-v3 { gap: 20px; max-width: 100%; } .lb-console .cc-v3__passage { padding: 18px 16px; font-size: 0.98rem; line-height: 1.8; } /* ── THE SELECTOR AT 390px ───────────────────────────────────────────── Nothing to reflow. There are at most three circles, each 30px with a 44px target and 16px between them — 138px of visible control inside a viewport that is 390px wide minus the card's own inset. The rules that used to compress here are gone with the track they belonged to. The circles keep their size at every width: they are targets somebody presses, and shrinking a 30px marker on the device where fingers are doing the pressing is the wrong direction. */ .lb-console .cc-v3 .cc-seg__btn { min-height: 44px; flex: 1 1 auto; } .lb-console .cc-v3__actions > .btn-dark, .lb-console .cc-v3__actions > .btn-ghost { min-height: 44px; flex: 1 1 150px; } .lb-console .cc-v3__actions > .cc-v3__record-primary { flex: 1 1 100%; } .lb-console .cc-v3__scriptfoot > .btn-ghost { min-height: 44px; } /* ── THE CAPSULE AT 390px ────────────────────────────────────────────── It keeps all three parts on one row — a transport that wrapped onto its own line would stop reading as one object — and gives up the space it does not need: the inner padding, the gaps, and the bars' own width. The transport stays 48px, comfortably over the 44px target, and the timer keeps `white-space: nowrap` and an `auto` column so it can never be clipped; the timeline is the part that compresses, because it is the only part with room to give. */ .lb-console .cc-v3__cap, .lb-console .cc-v3__pick, .lb-console .cc-v3__picked { min-height: 60px; padding: 6px 14px 6px 6px; gap: 10px; } /* 50px, not 48: the stop control BREATHES, and at the bottom of that cycle it is scaled to 0.94 — which is also its hit area. 48 would spend part of every two seconds at 45px, and the floor for a touch target is 44. */ .lb-console .cc-v3__cap-btn, .lb-console .cc-v3__pick-badge { width: 50px; height: 50px; } .lb-console .cc-v3__cap-btn--stop { box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.22); } .lb-console .cc-v3__wave { height: 28px; } /* ── THE GAPS GO BEFORE THE BARS DO ───────────────────────────────────── 128 bars and a 1px gap need 127px of gap alone, out of a track that is about 200px wide here: the bars are squeezed to half a pixel and the waveform becomes a flat grey band. Closing the gap gives the same 128 real measurements 1.6px each and draws them as a continuous silhouette. Every bar is still present and still its own peak — what is given up is the space between them, not any of the audio. */ .lb-console .cc-v3__wave-layer { gap: 0; } .lb-console .cc-v3__bar { border-radius: 1px; } .lb-console .cc-v3__cap-time { font-size: 0.85rem; } /* The idle capsule is the same object as the other two here as well, so it keeps their height rather than shrinking to a button's. Its trailing column matches the transport's phone width. */ .lb-console .cc-v3__cap--start { grid-template-columns: auto minmax(0, 1fr) 50px; } .lb-console .cc-v3__cap-say { font-size: 0.92rem; } /* Over the 44px floor, and it keeps its width when the capsule beside it compresses — a discard that shrinks with the row is the control somebody misses on a phone. */ .lb-console .cc-v3__take { gap: 10px; } .lb-console .cc-v3__again { width: 46px; height: 46px; } /* ── THE CHOSEN FILE, BEFORE IT IS PLAYABLE ──────────────────────────── Two columns here rather than three. The timeline in this state is a placeholder carrying no measurement yet, and 130px of placeholder between a badge and a filename is the widest thing on the row saying the least. The name gets that width instead, which is the part somebody is reading to check they picked the right file. */ .lb-console .cc-v3__picked { grid-template-columns: auto minmax(0, 1fr); } .lb-console .cc-v3__picked > .cc-v3__wave { display: none; } .lb-console .cc-v3__picked-meta { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .lb-console .cc-v3__picked-name { max-width: 100%; } /* The step has no footer any more: Back and Continue are the header's, and their 44px targets on a phone are the shared .cc-onb__nav rules. */ } /* ══════════════════════════════════════════════════════════════════════════ STEP 4 — ADD YOUR PHONE NUMBER Step 3's column, at step 3's measure, because they are two states of one card and a step that changed width would read as a different screen. No nested boxes: each part is a heading and its content, separated by space, which is the crowding the approved design rules out. ── THE ONE THING THE COLOURS MUST NOT DO ──────────────────────────────── Make the provider boundary look like a warning to be dismissed, or make a recorded number look confirmed. So there is NO green anywhere on this step and no amber — the Labbie palette has neither — and the boundary is set on the shared .lb-notice surface, which is the product's neutral one. The only coloured state on the step is a genuine refusal, and that is .lb-notice --error, which already exists. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-v4 { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; min-width: 0; margin: 0 auto; max-width: 620px; } .lb-console .cc-v4__block { width: 100%; min-width: 0; } .lb-console .cc-v4__h { margin: 0 0 10px; font-size: 0.82rem; font-weight: 550; letter-spacing: -0.005em; color: var(--text); } /* ── THE COUNTRY CODE, BESIDE THE BOX AND NOT INSIDE IT ─────────────────── A prefix a person can see and cannot type into. It is not a picker: this product calls Malaysian numbers only, and a country selector with one entry is a control that cannot be used. It is aria-hidden and the LABEL and hint carry the same fact in words, so the country is not something only a sighted user is told. */ .lb-console .cc-v4__inputrow { display: flex; align-items: stretch; gap: 8px; width: 100%; min-width: 0; } .lb-console .cc-v4__cc { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--surface, #f7f7f8); color: var(--muted, #6b7280); font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-console .cc-v4__input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; } .lb-console .cc-v4__hint { margin: 8px 0 0; } /* ── A NUMBER THAT IS RECORDED ──────────────────────────────────────────── Set large, because it is a number somebody has to CHECK digit by digit, and tabular so the digits line up under each other rather than drifting. Deliberately NOT on a coloured surface and with no tick beside it. It is a stored answer, not a confirmation, and every visual grammar this product uses for "confirmed" is reserved for things that were. */ .lb-console .cc-v4__number { margin: 0; font-size: 1.35rem; font-weight: 560; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; } .lb-console .cc-v4__meta { margin: 6px 0 0; font-size: 0.86rem; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lb-console .cc-v4__raw { margin: 4px 0 0; } /* ── THE PROVIDER BOUNDARY ──────────────────────────────────────────────── The most important thing on the step, and it is styled to be READ rather than to be noticed and dismissed. It sits on .lb-notice — the shared neutral surface — because it is not an error, not a warning and not a success: it is the true state of the product, stated once, in full. Left-aligned inside a centred column, because it is prose. */ .lb-console .cc-v4__boundary { width: 100%; min-width: 0; text-align: left; padding: 18px 20px; /* ── IT BORROWS .lb-notice's SURFACE, NOT ITS LAYOUT ────────────────── The shared .lb-notice is `display: flex` because it is built for one line beside an icon. This is four blocks of prose, and the inherited flex laid each of them out as a COLUMN — the heading wrapping one character per line down a 40px strip, the lead and the two roles in narrow bands beside it. What was wanted from .lb-notice is its SURFACE: the border, the radius, the secondary background and the muted colour, which are what mark this as the product speaking rather than the form. The row is not, so the display is restated here. */ display: block; } .lb-console .cc-v4__boundary .cc-v4__h { margin-bottom: 8px; } .lb-console .cc-v4__boundary-lead { margin: 0; font-size: 0.9rem; line-height: 1.65; } .lb-console .cc-v4__boundary-foot { margin: 14px 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted, #6b7280); } /* ── THE TWO ROLES, DRAWN AS TWO ────────────────────────────────────────── §15.2 states them as separate rules and they have separate answers, so they are two rows of a definition list rather than one status line. The rule between them is what stops the second being read as a continuation of the first. No colour distinguishes the states. `data-state` is on the element for a later release to style if the palette ever gains a token for it, and today both rows look identical — which is correct, because neither is available and the difference between them is what the WORDS say. */ .lb-console .cc-v4__roles { margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; } .lb-console .cc-v4__role { padding-top: 12px; border-top: 1px solid var(--line, #e5e7eb); } .lb-console .cc-v4__role-name { margin: 0 0 3px; font-size: 0.86rem; font-weight: 550; color: var(--text); } .lb-console .cc-v4__role-state { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted, #6b7280); } /* The campaign lock (§15.5). A refusal about the account's state, so it is a banner across the step rather than a message beside a field. */ .lb-console .cc-v4__lock { width: 100%; min-width: 0; text-align: left; } .lb-console .cc-v4__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* ── NARROW SCREENS ─────────────────────────────────────────────────────── Step 3's breakpoint and step 3's rules, because they are two states of one card: the column loses its inset, and every control becomes a full 44px target rather than the 30px the desktop footer uses. The country code and the box stay on ONE row. Stacking them would put a read-only "+60" on a line of its own above an empty field, which reads as two questions where there is one. */ @media (max-width: 720px) { .lb-console .cc-v4 { gap: 22px; max-width: 100%; } .lb-console .cc-v4__boundary { padding: 16px 14px; } .lb-console .cc-v4__number { font-size: 1.25rem; } .lb-console .cc-v4__input { min-height: 44px; } .lb-console .cc-v4__actions > .btn-dark, .lb-console .cc-v4__actions > .btn-ghost { min-height: 44px; flex: 1 1 150px; } /* THE STEP'S OWN FOOTER, scoped to the modifier so steps 1 to 3 keep the footers they shipped with. Back, Change number, Remove number and Save are the whole of what this step can do, and on a phone they were the smallest targets on the screen at 30px. */ .lb-console .cc-onb--step-four .cc-onb__foot .btn-dark, .lb-console .cc-onb--step-four .cc-onb__foot .btn-ghost, .lb-console .cc-onb--step-four .cc-onb__foot .btn-quiet { min-height: 44px; } .lb-console .cc-onb--step-four .cc-onb__foot-main > .btn-dark, .lb-console .cc-onb--step-four .cc-onb__foot-main > .btn-quiet { flex: 1 1 150px; } /* The declaration is a 44px row too: a checkbox is the easiest control on a step to miss with a thumb, and this one gates the whole save. */ .lb-console .cc-onb--step-four .lb-check { min-height: 44px; align-items: center; } } /* ══════════════════════════════════════════════════════════════════════════ STEP 5 OF 5 — THE AGENT'S PHONE NUMBER One centred column under the step's heading, as the approved references draw it: the handset, the small tracked label, and directly under the label exactly one thing — the Get phone number button, the number and Start, or a sentence. The card, header, segments and footer are the shell every step uses and nothing below restyles them; the buttons are the platform's own .btn-dark, whose height, radius, padding and type are set centrally and are NOT restated here. The label and the number are the product's own greys and ink; a failure is .lb-error's one red, carried by the words. The one colour on the step is the handset itself — the owner's approved violet→blue illustration, whose gradient lives in the icon sprite and nowhere in this stylesheet. ── THE COLUMN IS CENTRED IN THE BODY, NOT PINNED TO ITS TOP ────────────── The header carries the step count, the title and the one-line description; everything below sits in the card's body, and the body centres it in the space the header and footer leave. That is what gives the block the balance the approved reference has rather than a stack crowded under the heading. Scoped to this step's modifier, so no other step's body moves. */ .lb-console .cc-onb--step-five .cc-onb__body { display: flex; flex-direction: column; justify-content: center; align-items: center; } .lb-console .cc-v5 { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; max-width: 460px; margin: 0 auto; text-align: center; } /* The approved illustration at picture size — its own box, not an interface icon, so .cc-i's 18px stroke rules do not apply. The silhouette fills the 24px grid edge to edge, so the box IS the handset's size, and the gradient fill comes from the sprite (#i-phone-handset), not from `color`. */ .lb-console .cc-v5__icon { display: block; flex: 0 0 auto; width: 76px; height: 76px; } .lb-console .cc-v5__label { margin: 32px 0 0; font-size: 0.66rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted, #6b7280); } .lb-console .cc-v5__note { margin: 14px 0 0; max-width: 40ch; text-wrap: balance; } /* Directly under the label, as the reference has it. 120px is the written design system's button minimum (§8). */ .lb-console .cc-v5__action { margin-top: 24px; min-width: 120px; } .lb-console .cc-v5__note + .cc-v5__action { margin-top: 18px; } /* ── NARROW SCREENS ─────────────────────────────────────────────────────── Step 4's breakpoint and Step 4's rule: the step's own action becomes a full 44px thumb target. The column is already centred and shorter than the narrowest phone, so nothing else changes shape. */ @media (max-width: 720px) { .lb-console .cc-v5__action { min-height: 44px; } } /* ── STEP 5's ENTRY/EDIT FORM, VERIFY AND REVIEW ────────────────────────── The step's body is a centred column; a form and a review read as a left column of fields, so this widens the box and turns off the centring for those states only — down as well as across: the column starts under the header, as every other step's does, instead of floating in the middle of a card sized for its tallest state (the auto bottom margin takes the space the body would otherwise centre it in). Everything inside is a shared primitive (.lb-field, .lb-input, .lb-check, .lb-notice) — nothing here restyles one, it only lays them out. */ .lb-console .cc-v5--form { align-items: stretch; text-align: left; max-width: 480px; margin-bottom: auto; } .lb-console .cc-v5form { display: flex; flex-direction: column; gap: 16px; width: 100%; } .lb-console .cc-v5form .lb-field { margin: 0; } .lb-console .cc-v5__edit { align-self: flex-start; margin-top: 4px; } /* A connection's actions are one row, the console's own .cc-actions: Edit on the left, Re-verify and Disconnect pushed right (.cc-v5__push) — or Disconnect's Cancel and Disconnect. Set well apart from the facts above them. On a phone the shared row stretches its buttons across the width, which leaves the push nothing to take. */ .lb-console .cc-v5form > .cc-actions { margin-top: 36px; } .lb-console .cc-actions > .cc-v5__push { margin-left: auto; } /* ── THE VERIFIED SUMMARY (.cc-v5--summary) ────────────────────────────── The quiet screen after verification succeeds, drawn to the owner's reference: the facts, then one row — Edit on the left, Re-verify and Disconnect together on the right, the pair reaching past the facts as the reference has it. Its buttons are the reference's size, and Re-verify's grey and Disconnect's solid red belong to THIS screen only: the shared .btn-ghost and .btn-danger are untouched everywhere else. !important only where glass.css sizes a button with it. The red is the product's one red (#b91c1c, as .cc-v3__cap-btn--stop fills with it) — solid here, with a hover that darkens rather than a second red. On a phone the row keeps its buttons compact, one line, with the 44px press .cc-onb__next uses. */ .lb-console .cc-v5--summary .cc-v5__facts { gap: 12px; margin-top: 7px; } .lb-console .cc-v5__row { display: flex; align-items: center; gap: 9px; margin-top: 34px; } .lb-console .cc-v5__row > .cc-v5__push { margin-left: auto; } .lb-console .cc-v5__row > button { min-width: 98px; padding: 7px 24px !important; border-width: 0 !important; font-size: 0.875rem !important; font-weight: 500 !important; } .lb-console .cc-v5--summary .btn-ghost { background: #d5d6da; border-color: #d5d6da; color: #000; } .lb-console .cc-v5--summary .btn-ghost:hover { background: #c8c9ce; border-color: #c8c9ce; } .lb-console .cc-v5--summary .btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; } .lb-console .cc-v5--summary .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; opacity: 0.85; } @media (min-width: 721px) { .lb-console .cc-v5--summary .cc-v5__row { margin-right: -55px; } } @media (max-width: 560px) { .lb-console .cc-v5__row > button { min-width: 0; padding: 7px 16px !important; position: relative; } .lb-console .cc-v5__row > button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } } /* The connection's stored facts — a plain description list, using the console's own type and muted colour rather than any new token. */ .lb-console .cc-v5__facts { display: flex; flex-direction: column; gap: 10px; margin: 0; } .lb-console .cc-v5__facts > div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 12px; } .lb-console .cc-v5__facts dt { margin: 0; color: var(--muted, #6b7280); font-size: 0.82rem; } .lb-console .cc-v5__facts dd { margin: 0; word-break: break-word; } @media (max-width: 720px) { .lb-console .cc-v5__facts > div { grid-template-columns: minmax(0, 1fr); gap: 3px; } } /* ── NARROW SCREENS ─────────────────────────────────────────────────────── The card's own breakpoint is 720px and this matches it, so the step and the shell it sits in change shape at the same width rather than one reflowing inside the other. The two-column guide becomes one: two 12-word hints inside 280-odd pixels is four words a line. The footer's reason moves under its button and reads left, because a right-aligned fragment beside a full-width button is a ragged edge in the middle of the screen. */ @media (max-width: 720px) { .lb-console .cc-biz { gap: 18px; width: 100%; min-width: 0; max-width: 100%; } .lb-console .cc-biz--review { gap: 0; } .lb-console .cc-biz__cards { max-width: 100%; } /* ── ONE COLUMN, EVERYWHERE ──────────────────────────────────────── A label and its value side by side inside 280-odd pixels leaves four words a line for each. Stacked, the value keeps the whole width and the label sits above it as a caption — which is how a phone reads a field anyway. */ .lb-console .cc-biz__pair { grid-template-columns: minmax(0, 1fr); gap: 3px; } .lb-console .cc-biz__pairform, .lb-console .cc-biz__faq { grid-template-columns: minmax(0, 1fr); } .lb-console .cc-biz__faq textarea { grid-column: auto; } .lb-console .cc-biz__updated { grid-column: 2; grid-row: 2; justify-self: start; } .lb-console .cc-biz__sourcerow { grid-template-columns: 32px minmax(0, 1fr); } .lb-console .cc-biz__fileactions { grid-column: 2; flex-wrap: wrap; } .lb-console .cc-biz__card, .lb-console .cc-biz__facts, .lb-console .cc-biz__fact, .lb-console .cc-biz__faq, .lb-console .cc-biz__edit { min-width: 0; max-width: 100%; } .lb-console .cc-biz__missingitem { grid-template-columns: minmax(0, 1fr) auto; } /* ── ONE COLUMN HERE TOO ───────────────────────────────────────── A value and three controls side by side inside 300 pixels leaves no room for either. The controls go back under the fact — where they cost a line, which on a phone is the cheaper of the two prices — and they are always visible, because there is no hover to reveal them. */ .lb-console .cc-biz__card .cc-biz__factread { grid-template-columns: minmax(0, 1fr); } .lb-console .cc-biz__card .cc-biz__factread > .cc-biz__factfoot { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; } .lb-console .cc-biz__factfoot { align-items: center; flex-wrap: wrap; } .lb-console .cc-biz__sourcebtn, .lb-console .cc-biz__editbtn, .lb-console .cc-biz__drop, .lb-console .cc-biz__add { min-height: 44px; } /* Row controls are always visible here: there is no hover on a phone, and a control that only appears on one is a control this device does not have. The desktop rule is inside a (hover: hover) query for exactly this reason, so nothing has to be undone. */ .lb-console .cc-biz__tabs { max-width: 100%; } /* 44, like every other control on this step at this width. The strip is the step's main navigation and it was the one press here that was not a full touch target. */ .lb-console .cc-biz__tab { min-height: 44px; } .lb-console .cc-biz__progfile { grid-template-columns: 20px minmax(0, 1fr) auto; } .lb-console .cc-biz__progfile .cc-biz__filemeta { display: none; } .lb-console .cc-biz__counts { gap: 8px; } .lb-console .cc-biz__count + .cc-biz__count { padding-left: 8px; } /* ── THE FOOTER, THE WAY STEPS 3 AND 4 ALREADY DO IT ────────────────── Scoped to the step and written against the button CLASSES rather than three ids. The id list was the shape of the moment it was written: it covered Approve, View review and Analyse, and silently missed Back, Retry, Replace and Continue — so on a phone the approved state's own two actions were 31px tall. Found by measuring the real step at 375px. A footer button is the last thing somebody touches on a step, and the four missed ones include the two that leave it. */ .lb-console .cc-onb--step-two .cc-onb__foot .btn-dark, .lb-console .cc-onb--step-two .cc-onb__foot .btn-ghost, .lb-console .cc-onb--step-two .cc-onb__foot .btn-quiet, .lb-console .cc-onb--step-two .cc-onb__foot .btn-danger { min-height: 44px; } .lb-console .cc-onb__foot-main { width: 100%; } .lb-console .cc-onb--step-two .cc-onb__foot-main > .btn-dark, .lb-console .cc-onb--step-two .cc-onb__foot-main > .btn-quiet { flex: 1 1 132px; } .lb-console .cc-biz__pastefoot { align-items: stretch; } .lb-console .cc-biz__pastefoot .btn-dark { width: 100%; } .lb-console .cc-biz__whynot { max-width: none; text-align: left; } /* Back on its own row above the step's actions, which keeps the primary action full-width and under the thumb rather than sharing a line. */ .lb-console .cc-onb__foot > .cc-biz__whynot { order: 3; } /* ── THE READING COLUMN ON A PHONE ─────────────────────────────────── Shorter, tighter and inset less, because 22px each side of a 320px screen is a seventh of the width spent on nothing. The character loses 8px so the heading, which is the longest thing in that row, still fits on one line beside it and the seconds do not wrap under it. */ .lb-console .cc-read__box { height: 152px; } .lb-console .cc-read__layer { padding: 0 16px; } .lb-console .cc-read__avatar { width: 40px; height: 40px; } .lb-console .cc-read__head { gap: 10px; margin-bottom: 13px; } .lb-console .cc-read__title { font-size: 0.94rem; } .lb-console .cc-read__line { font-size: 0.85rem; padding-bottom: 13px; } } /* ══════════════════════════════════════════════════════════════════════════ THE TALKING-SPEED CONTROL Three real radios on a track. NOT a range input: every position of a range is a value, so it cannot express "nobody has chosen yet", and it announces a number where this control's whole vocabulary is Slow, Normal and Fast. A radio group arrows through natively, reads out its own labels, and starts with nothing selected — which is the honest state for a question nobody has answered. The inputs are hidden the way .lb-check hides its own: moved out of sight, NOT display:none, so they keep their place in the focus order and the keyboard still works. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-speed { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 8px; } /* The track, drawn between the first and last stop rather than edge to edge, so it starts and ends under a dot instead of in mid-air. */ .lb-console .cc-speed::before { content: ""; position: absolute; top: 15px; left: 16.666%; right: 16.666%; height: 2px; border-radius: 999px; background: var(--line, #e5e7eb); } .lb-console .cc-speed__input { position: absolute; opacity: 0; width: 0; height: 0; } .lb-console .cc-speed__stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; /* The platform's minimum target. The dot is 14px, which is a miss on a phone; the whole column is the target instead. */ min-height: 44px; cursor: pointer; } .lb-console .cc-speed__dot { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--card, #fff); border: 2px solid var(--line, #e5e7eb); transition: background-color 140ms ease, border-color 140ms ease; } .lb-console .cc-speed__text { font-size: 0.78rem; color: var(--muted); } .lb-console .cc-speed__input:checked + .cc-speed__stop .cc-speed__dot { background: var(--accent, #111827); border-color: var(--accent, #111827); } .lb-console .cc-speed__input:checked + .cc-speed__stop .cc-speed__text { color: var(--text); font-weight: 550; } .lb-console .cc-speed__stop:hover .cc-speed__dot { border-color: rgba(17, 24, 39, 0.5); } /* NEUTRAL, and the same ink as the rest of the console. No system blue. */ .lb-console .cc-speed__input:focus-visible + .cc-speed__stop .cc-speed__dot { outline: 2px solid var(--text); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════════ PHONE The same shell, the same three rows, the same rule about which of them scrolls. What changes is two numbers: 16px of margin each side, and 760px of height instead of 650. THE HEIGHT IS FIXED HERE TOO, for the reason it is fixed on a desktop: one height for every step and every state inside one, so nothing under the reader's thumb moves because a message appeared. calc(100vw - 32px) is the approved width. max-width: 100% sits beside it as the guard: 100vw counts a classic scrollbar gutter and the container does not, so on a desktop browser narrowed past this breakpoint the card would otherwise be a few pixels wider than the room it has — and a card wider than its container is a horizontal scrollbar on the page. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .lb-console .cc-onb { width: 100%; max-width: 100%; /* min-height for the same reason as the desktop rule: a phone is the width where step 2's contents are tallest, so a ceiling here is the clip at its worst. */ min-height: 760px; } /* ── BACK AND CONTINUE COME INTO FLOW ON A PHONE ─────────────────── Absolute at 40px of side padding is comfortable; at 20px, with the step count centred a few pixels below them, it is a collision. So on a narrow screen the pair takes its own row at the top of the card — Back still first on the left, Continue still on the right — and both are 44px targets. */ .lb-console .cc-onb__top { padding: 16px 20px 18px; } .lb-console .cc-onb__nav { position: static; /* The negative left margin puts Back's LABEL on the card's padding edge rather than its tap target. */ margin: 0 0 10px -11px; pointer-events: auto; } .lb-console .cc-onb__back { min-height: 44px; } /* The pill keeps its height and still takes a 44px press: an invisible extension above and below, the Start test control's own technique. */ .lb-console .cc-onb__next { position: relative; } .lb-console .cc-onb__next::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } .lb-console .cc-onb__title { font-size: 1.3rem; } .lb-console .cc-onb__body { padding: 4px 20px 24px; } .lb-console .cc-onb__foot { padding: 14px 20px 18px; } .lb-console .cc-onb__notice { margin: 0 20px 14px; } /* The character above the name rather than beside it: two columns inside 280-odd pixels leaves the input too narrow to read a name in. */ .lb-console .cc-onb__idrow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; } .lb-console .cc-onb__avatar-field { min-width: 0; } .lb-console .cc-onb__idrow > .cc-onb__field { width: 100%; } .lb-console .cc-agents-card { width: 100%; max-width: calc(100% - 32px); } .lb-console .cc-agents-card__body { padding: 34px 20px 30px; } } /* ── REDUCED MOTION ─────────────────────────────────────────────────────── The only motion this block introduces is the talking-speed dot filling in. Somebody who has asked for less of it gets the same control, with the same states, and none of the fade. */ @media (prefers-reduced-motion: reduce) { .lb-console .cc-speed__dot { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ THE LEADS LIBRARY Two screens, one dialog, and a menu. ── WHAT THIS OWNS, AND WHAT IT BORROWS ──────────────────────────────── Almost nothing here is a new primitive. The cards are .section-card, the inputs are .lb-input, the table is .lb-table, the empty state is .lb-empty and every button is .btn-dark / .btn-ghost / .btn-quiet / .btn-danger — the same components the rest of this console and the Labbie dashboard already use, so a later restyle of any of them moves this screen too. What this file adds is the part the reference design does differently from the shared defaults, and nothing else: a heavier page title and a navy subtitle, SCOPED to .cc-ll-head so the Agent, Campaigns and Settings screens keep the header they have today; a table with sentence-case headings and no grey band; the list tile, the three-dot menu, the two illustrations, and a dialog whose panel is .cc-modal__inner rather than .cc-modal__panel. ── SCOPED TO .lb-console, LIKE EVERYTHING ELSE IN THIS FILE ─────────── This stylesheet is served to a console whose carries .lb-console, and the shared sheets it loads are the SAME FILES the user dashboard links. An unscoped rule here would reach the dashboard the next time somebody linked this file, so every rule below is scoped. ── THE COLOURS ARE READ OFF THE REFERENCE, NOT INVENTED ─────────────── The seven reference images were sampled rather than eyeballed: for antialiased text every pixel is the same ink over the same paper at some coverage, so summing each pixel's distance from the paper across a run of type cancels the coverage and leaves the ink's exact direction. The navy, the muted blue-grey of the column headings, the placeholder grey and the two illustration palettes below are all that measurement. ══════════════════════════════════════════════════════════════════════════ */ .lb-console { /* Navy. The subtitle, the empty state's sentence, and the modal's quiet line — the reference uses one blue for all three. */ --ll-navy: #1f3163; /* The column headings and the stat card's label: the same hue, lifted. */ --ll-head: #717d9d; /* Placeholder text in the search field. */ --ll-faint: #a8aec1; /* The list tile, and the page title above it. */ --ll-ink: #0d0d10; /* The stat card's icon: periwinkle on the palest wash of itself. */ --ll-accent: #6877fd; --ll-accent-wash: #eaebfe; /* The drop zone's border while a file is being dragged over it, and the only thing this blue is still for. It was named for the upload illustration, which was a document with a blue disc on the corner and is a black folder now; the pale page fill that went with it had no second reader and is gone rather than left behind. */ --ll-drag-accent: #1f5cfa; /* The spreadsheet tag on a chosen file. */ --ll-sheet-tag: #04a13c; /* Delete. THE PRODUCT'S ONE RED, not a second one measured off the reference. The sampled value was #e5342c, which is 4.0:1 on white and therefore too faint for the one control in this feature that destroys something; darkening it produced a red a shade away from the red this console already uses for every refusal, toast and error line. Two reds that differ by a shade are not a palette, they are a bug nobody can see — so this is that same red, which is darker still and reads at 7.0:1. Pinned by coldcalling-ui-check.js, which allows exactly one. */ --ll-danger: #b91c1c; /* The upload review's warning badges. Not a new red: the approved follow-up red Needs Attention already uses (coldcalling-ui-check.js), white text on it reads at 5.6:1. */ --ll-alert: #e00004; /* Hairlines. Lighter than --line, which is what the reference shows: the table's rules are barely there and the toolbar's borders are thin. */ --ll-rule: rgba(17, 24, 39, 0.07); --ll-edge: rgba(17, 24, 39, 0.11); } /* ── THE PAGE HEAD ──────────────────────────────────────────────────────── NO TYPOGRAPHY HERE ANY MORE. This header used to set its own title at 1.97rem/700 and its own description at 0.97rem, to match a reference — and that is exactly how "Leads" ended up half again the size of "Agents" and heavy where every other page in the product is regular. One page cannot own the page-title style; the console does, once, in ONE PAGE HEADER, EVERY PAGE near the top of this file. AND NO BUTTONS HERE ANY MORE EITHER. This header used to carry Upload and Download example, which put the two controls outside the white panel that holds everything they act on. They live inside it now — see THE PANEL'S OWN ROW below — so all this class is left holding is the gap between the header and the panel under it. It is kept rather than dropped because leadsHead() still passes it and because that gap is this screen's, not every screen's. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-head { margin-bottom: 22px; } /* ── THE EMPTY STATE ────────────────────────────────────────────────────── The one screen a new account sees. It is the AT-REST markup — nothing here is drawn while a request is in flight — so it must look finished rather than like something still loading. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-empty-card { min-height: 460px; display: flex; } /* A COLUMN, because the card now has two children: the action row at the top and the state itself. The centring did not move to a second place — it is the state that takes the leftover height and centres inside it, which is what `align-items: center` on the body used to do when it was the only child. .lb-empty is already a centred flex column (shared components), so the horizontal half of it was never this rule's. */ .lb-console .cc-ll-empty-card > .cc-card__body { flex: 1; display: flex; flex-direction: column; } .lb-console .cc-ll-empty-card > .cc-card__body > .cc-ll-empty { flex: 1; justify-content: center; } .lb-console .cc-ll-empty { padding: 24px; } .lb-console .cc-ll-empty__art { display: block; margin-bottom: 22px; } /* NO HEADING SIZE, WEIGHT OR INK HERE. "No leads yet" was 1.63rem/700, then the shared .lb-empty__title in this screen's own ink and navy sentence, while "No campaigns yet" — the same kind of screen — was set larger in the console's own ink. One style now (owner, 1 Oct): the heading and the sentence are set by the shared big-empty-state rule beside "No campaigns yet" (the CAMPAIGNS PAGE first-run hero), and this screen keeps only its own measure — wide enough that, at the shared 1rem, the sentence is one line on a desktop rather than leaving "leads." alone on a second. */ .lb-console .cc-ll-empty .lb-empty__text { max-width: 36rem; } /* The folder. Flat fills rather than gradients: at 128px the reference's shading reads as two greys and a stack of white sheets, and two fills survive a forced-colours mode that would throw a gradient away. HALF THE SIZE IT WAS, and that is the whole change: 218x164 became 109x82. The DRAWING is untouched — same viewBox, same paths, same fills, same stack of sheets — because at 218px wide the illustration was the loudest thing on a screen whose message is one short heading and one sentence, and shrinking a picture is not redrawing it. IT STAYS CENTRED WITHOUT A RULE HERE. .lb-empty is a centred flex column, so the art is centred as a flex ITEM: it never depended on being any particular width, which is why halving the width moves nothing sideways. */ .lb-console .cc-ll-folder { width: 109px; height: 82px; display: block; filter: drop-shadow(0 10px 18px rgba(17, 24, 39, 0.16)); } .lb-console .cc-ll-folder__back { fill: #3f3f43; } .lb-console .cc-ll-folder__front { fill: #8d8d92; } .lb-console .cc-ll-folder__sheet { fill: #ffffff; stroke: rgba(17, 24, 39, 0.13); stroke-width: 1; } /* The two behind are turned and dimmed, so the stack reads as a stack. */ .lb-console .cc-ll-folder__sheet--b { fill: #ededf0; transform: rotate(-7deg); transform-origin: 39px 31px; } .lb-console .cc-ll-folder__sheet--c { fill: #e2e2e6; transform: rotate(9deg); transform-origin: 45px 25px; } /* ── THE OVERVIEW: FINDING A LIST ───────────────────────────────────────── There is no Total Leads card here any more, and its rules are gone with it rather than left behind to be wondered about. It showed the sum of the counts already printed on the tiles below — a figure nobody acted on, sitting where a person was looking for their list. The per-list count stays on each tile, where it answers a question. What took its place is a box that filters those tiles BY NAME, entirely in the browser: every list this account has is already on the page, so asking the server would add a round trip to a filter that can be instant. The list detail screen's search is the other kind — it looks inside the rows and it does ask. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-find { min-width: 0; flex: 1 1 320px; } .lb-console .cc-ll-search--lists { max-width: 320px; } /* The empty answer. Hidden until a search matches nothing, because a grid that simply goes blank reads as a fault rather than as a result. */ .lb-console .cc-ll-nofind { margin-top: 14px; } /* ── THE PANEL'S OWN ROW: SEARCH LEFT, ACTIONS RIGHT ────────────────────── Upload and Download example were the page HEADER's, which put them above and outside the white panel holding every list they act on. They are the panel's now, opposite its search field, so the surface carries both what is in it and what puts things into it. ONE ROW THAT WRAPS, NOT THREE BREAKPOINTS. `flex: 1 1 320px` on the search and `flex: 0 0 auto` on the actions is the whole tablet rule: the two share the line while 320px plus the action column still fit, and the actions drop to a line of their own the moment they do not. `margin-left: auto` is what keeps them hard right on EITHER line — an auto margin resolves per flex line, so the wrapped group does not fall back to the left edge the way justify-content would leave it. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-panelhead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } /* The empty state has no search to sit opposite, so the actions are the row. */ .lb-console .cc-ll-panelhead--bare { margin-bottom: 4px; } .lb-console .cc-ll-panelactions { margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* A ROUNDED RECTANGLE, NOT A PILL. The shared button is border-radius 999px and this design's primary is not — the one place it departs from the shared shape, spelled out here rather than by changing the shared class. The !important is not emphasis: glass.css sets padding, font-size and font-weight on .btn-dark with !important, and this has to outrank it. */ .lb-console .cc-ll-upload { border-radius: 10px; background: var(--ll-ink); font-weight: 500 !important; font-size: 0.85rem !important; padding: 12px 16px !important; gap: 7px; } .lb-console .cc-ll-upload .cc-i { width: 18px; height: 18px; opacity: 0.92; } /* THE QUIET ONE IS TEXT, NOT A SECOND BOX. Two boxes of the same size read as a choice between two equal things, and one of them downloads a sample file. Smaller, unfilled, and directly under the primary. */ .lb-console .cc-ll-example { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 8px; padding: 4px 3px; font: inherit; font-size: 0.8rem; font-weight: 500; line-height: 1.2; color: var(--ll-head); cursor: pointer; white-space: nowrap; transition: color 140ms; } .lb-console .cc-ll-example:hover { color: var(--ll-ink); text-decoration: underline; } .lb-console .cc-ll-example:focus-visible { outline: 2px solid var(--text, #111827); outline-offset: 2px; } .lb-console .cc-ll-example .cc-i { width: 15px; height: 15px; opacity: 0.85; } .lb-console .cc-ll-listcard { min-height: 380px; } .lb-console .cc-ll-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } /* ── THE TILE'S OWN MEASUREMENTS ────────────────────────────────────────── The card was 217 x 97px for two short lines of text: 56 of those 97 pixels were padding. Its footprint is set by the three numbers below and by nothing else, so it can be changed — and asserted — in one place. The height is the sum and is not written anywhere: 23 + 20.5 + 2 + 16.9 + 23 ≈ 85px, which is padding, the name's line box, the gap, the count's line box and padding again. Nothing is given a height, so a name that wraps on a narrow screen makes the card taller rather than being clipped. */ .lb-console .cc-ll-grid { --cc-tile-pad-y: 23px; --cc-tile-pad-l: 20px; --cc-tile-min-w: 232px; } /* THE TILE. Positioned, because the three-dot menu is its child and is placed from the ••• control's own offsets — see openLeadMenu(). No z-index here: leaving it `auto` keeps the tile out of the stacking context business, so the open menu's z-index competes with the OTHER tiles rather than being trapped underneath the ones after it. */ .lb-console .cc-ll-tile { position: relative; display: flex; align-items: center; background: var(--ll-ink); border-radius: 11px; min-width: var(--cc-tile-min-w); max-width: 100%; } .lb-console .cc-ll-tile__open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; cursor: pointer; padding: var(--cc-tile-pad-y) 6px var(--cc-tile-pad-y) var(--cc-tile-pad-l); border-radius: 11px 0 0 11px; text-align: left; } /* 600, which is semibold and is where this stops. The name has to win against the count under it, and it does that by being larger, brighter and heavier than it — three things, none of which has to be 700. */ .lb-console .cc-ll-tile__name { font-size: 0.95rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.35; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The count is the tile's second line, and it is DRAWN. It spent one release clipped to screen-reader-only because the reference then showed a title and nothing else; the reference now shows the count under the title, so it is a visible line again rather than a thing only a screen reader was told. Quieter than the name by three things at once — smaller, regular weight where the name is 600, and white at 0.7 rather than solid — so the tile still reads name first and the count answers "how big" underneath instead of competing with it. The 0.7 white is the same muted-on-near-black the chip's own count already uses (see .cc-ll-chip[data-on="true"] .cc-ll-chip__n): this is what a count on this background looks like here. The WORDING is not this file's business. "0 leads", "1 lead", "2 leads" come from plural() at the point the tile is built, because singular and plural is a fact about the number and not about its styling. */ .lb-console .cc-ll-tile__count { font-size: 0.78rem; font-weight: 400; line-height: 1.35; color: rgba(255, 255, 255, 0.7); } /* ••• SITS ON THE TITLE LINE, NOT IN THE MIDDLE OF THE TILE. The control still stretches the full height — that is its click target and its hover wash, and shrinking it to the glyph would make a corner control hard to hit — but the GLYPH is aligned to the top of that box rather than its centre. Before the count was drawn the tile was one line tall and the two were the same place; with a second line they are not, and a ••• hovering between the name and the count belongs to neither. The top padding is the open button's own, and now literally so: both read --cc-tile-pad-y, so the glyph's box starts where the name's box starts and the two cannot come apart when the card's density is changed. */ .lb-console .cc-ll-tile__menu { flex: none; align-self: stretch; display: grid; place-items: start center; background: none; border: 0; cursor: pointer; padding: var(--cc-tile-pad-y) 13px 0 8px; border-radius: 0 11px 11px 0; color: #fff; font-size: 0.9rem; line-height: 1; letter-spacing: 0.06em; } .lb-console .cc-ll-tile__menu:hover, .lb-console .cc-ll-tile__menu[aria-expanded="true"] { background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 70%, transparent 74%) center calc(var(--cc-tile-pad-y) - 9px) / 32px 32px no-repeat; } .lb-console .cc-ll-tile__open:focus-visible { outline-color: rgba(255, 255, 255, 0.85); } .lb-console .cc-ll-tile__menu:focus-visible { outline: none; background: radial-gradient(circle, transparent 57%, rgba(255, 255, 255, 0.9) 62% 68%, transparent 73%) center calc(var(--cc-tile-pad-y) - 11px) / 36px 36px no-repeat; } /* ── THE THREE-DOT MENU ─────────────────────────────────────────────────── Absolutely positioned; its top and left are written by openLeadMenu() from the ••• control's own offsets, so it opens under the control however wide the tile turned out to be. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-menu { position: absolute; z-index: 30; min-width: 156px; display: flex; flex-direction: column; padding: 6px 0; background: var(--card, #fff); border: 1px solid var(--ll-edge); border-radius: 11px; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.14), 0 2px 6px rgba(17, 24, 39, 0.06); } .lb-console .cc-ll-menu__item { background: none; border: 0; cursor: pointer; text-align: left; padding: 13px 18px; font-size: 0.92rem; color: var(--text, #111827); white-space: nowrap; } .lb-console .cc-ll-menu__item:hover { background: rgba(17, 24, 39, 0.05); } .lb-console .cc-ll-menu__item--danger { color: var(--ll-danger); } .lb-console .cc-ll-menu__item--danger:hover { background: rgba(217, 45, 36, 0.07); } /* ── ONE LIST: THE HEADING ROW ──────────────────────────────────────────── Back navigation and a two-line list identity sit at the left, with both ways to put a lead into it hard right. The reference's detail page shows the table alone; this row is what makes the screen navigable, and it stays above the card. BOTH ACTIONS ON THIS ROW, NOT ONE HERE AND ONE IN THE PAGE HEADER. Adding a file and adding a lead by hand are two answers to one question, and they were two screen-regions apart. The group carries `margin-left: auto` so it sits right on its own wrapped line too, exactly as the library panel's does. */ .lb-console .cc-ll-listhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; } .lb-console .cc-ll-listidentity { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; } .lb-console .cc-ll-back { color: var(--ll-navy); } /* The shared chevron points right; this one is a Back control. */ .lb-console .cc-ll-back__icon { transform: rotate(180deg); } .lb-console .cc-ll-listdivider { align-self: stretch; width: 1px; min-height: 36px; background: var(--ll-rule); flex: none; } .lb-console .cc-ll-listtitle { min-width: 0; } .lb-console .cc-ll-listname { margin: 0; font-family: var(--cc-font-ui, var(--font-ui)); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--ll-ink); min-width: 0; overflow-wrap: anywhere; } .lb-console .cc-ll-listcount { font-size: 0.78rem; line-height: 1.4; color: var(--ll-head); } .lb-console .cc-ll-listactions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* The same rounded rectangle the library panel's primary is, at the smaller size this row's other controls are. !important for the same reason: it has to outrank glass.css's own !important on .btn-dark. */ .lb-console .cc-ll-addfile { border-radius: 10px; background: var(--ll-ink); font-weight: 500 !important; padding: 8px 14px !important; gap: 6px; } .lb-console .cc-ll-addfile .cc-i { width: 16px; height: 16px; opacity: 0.92; } /* A LIGHT-GREY PILL, and a pill on purpose: it keeps the shared 999px shape the primary beside it gives up, so the two read as different weights of control rather than as two primaries. */ .lb-console .cc-ll-add { background: rgba(17, 24, 39, 0.05); border: 1px solid transparent; color: var(--ll-ink); font-weight: 500 !important; } .lb-console .cc-ll-add:hover { background: rgba(17, 24, 39, 0.09); } /* ── ONE LIST: SEARCH, FILTERS, SORT ────────────────────────────────────── Every control on this row is the same height and the same 10px radius, so the row reads as one instrument rather than four. The search field takes whatever is left after the other three have what they need. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .lb-console .cc-ll-search, .lb-console .cc-ll-select, .lb-console .cc-ll-more { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--card, #fff); border: 1px solid var(--ll-edge); border-radius: 10px; font-size: 0.85rem; color: var(--text, #111827); } .lb-console .cc-ll-search { flex: 1 1 260px; min-width: 0; cursor: text; } .lb-console .cc-ll-search__icon { display: block; flex: none; color: var(--ll-faint); } .lb-console .cc-ll-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 0.85rem; color: var(--text, #111827); padding: 0; } .lb-console .cc-ll-search input::placeholder { color: var(--ll-faint); } /* type="search" draws a clear button in WebKit that would sit on top of the border radius; the field already empties from the keyboard. */ .lb-console .cc-ll-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .lb-console .cc-ll-select { position: relative; cursor: pointer; } .lb-console .cc-ll-select__label { color: var(--ll-head); white-space: nowrap; } .lb-console .cc-ll-select select { appearance: none; -webkit-appearance: none; border: 0; outline: none; background: none; font: inherit; font-size: 0.85rem; color: var(--text, #111827); padding: 0 2px 0 0; margin: 0; cursor: pointer; max-width: 15ch; text-overflow: ellipsis; } .lb-console .cc-ll-select > .cc-i { color: var(--ll-head); pointer-events: none; } .lb-console .cc-ll-more { cursor: pointer; white-space: nowrap; } .lb-console .cc-ll-more:hover { background: rgba(17, 24, 39, 0.03); } .lb-console .cc-ll-more[aria-expanded="true"] { background: rgba(17, 24, 39, 0.05); border-color: rgba(17, 24, 39, 0.22); } .lb-console .cc-ll-more .cc-i { color: var(--ll-head); } /* The counted chips. Hidden behind More Filters, because the reference's toolbar is four controls and this is a fifth thing — but the counts are computed over the WHOLE list by the route, so a chip can say how many it would show before anybody presses it. */ .lb-console .cc-ll-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; } .lb-console .cc-ll-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--card, #fff); border: 1px solid var(--ll-edge); border-radius: 999px; font-size: 0.78rem; color: var(--text, #111827); cursor: pointer; } .lb-console .cc-ll-chip:hover { background: rgba(17, 24, 39, 0.04); } .lb-console .cc-ll-chip[data-on="true"] { background: var(--ll-ink); border-color: var(--ll-ink); color: #fff; } .lb-console .cc-ll-chip__n { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--ll-head); } .lb-console .cc-ll-chip[data-on="true"] .cc-ll-chip__n { color: rgba(255, 255, 255, 0.7); } /* ── ONE LIST: THE FOUR COLUMNS ─────────────────────────────────────────── No., Full Name, Phone Number, Remarks — and a fifth, unlabelled column holding the row's own controls. The shared .lb-table draws uppercase, letter-spaced headings on a grey band inside a bordered box. The reference draws sentence-case headings in a muted blue on white, with hairline rules and no box at all, so those four decisions are undone here and nothing else is. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-detailcard .lb-tablewrap { border: 0; border-radius: 0; background: none; } .lb-console .cc-ll-table { width: 100%; table-layout: fixed; font-size: 0.79rem; } .lb-console .cc-ll-no-col { width: 5%; } .lb-console .cc-ll-name-col { width: 27%; } .lb-console .cc-ll-phone-col { width: 22%; } .lb-console .cc-ll-actions-col { width: 184px; } .lb-console .cc-ll-table th { background: none; text-transform: none; letter-spacing: 0; font-size: 0.68rem; font-weight: 500; color: var(--ll-head); border-bottom: 1px solid var(--ll-rule); padding: 12px 14px; } .lb-console .cc-ll-table td { border-bottom: 1px solid var(--ll-rule); vertical-align: middle; padding: 13px 14px; } .lb-console .cc-ll-table tbody tr:last-child td { border-bottom: 0; } .lb-console .cc-ll-table tbody tr:hover td { background: rgba(17, 24, 39, 0.018); } .lb-console .cc-ll-table .cc-ll-no { width: 1%; white-space: nowrap; padding-right: 4px; padding-left: 18px; color: var(--ll-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .lb-console .cc-ll-name { font-weight: 500; color: var(--ll-ink); white-space: normal; overflow-wrap: anywhere; } .lb-console .cc-ll-phone { white-space: nowrap; font-variant-numeric: tabular-nums; } .lb-console .cc-ll-remarks { color: rgba(17, 24, 39, 0.86); min-width: 0; overflow-wrap: anywhere; } /* THE ROW'S HEIGHT IS THE TEXT'S, NOT THE BUTTONS'. The shared .btn-icon is a 34px circle, and two of them inside a cell with the row's own 13px padding made every row 61px tall against the reference's 44 — a table a third taller than the design, for controls the reference does not even draw. The cell gives up its vertical padding and the buttons come down to 30px, which is still a comfortable target and now fits inside the height the text already needed. */ .lb-console .cc-ll-actions { width: 184px; min-width: 184px; white-space: nowrap; text-align: right; } .lb-console .cc-ll-actions__inner { display: flex; gap: 2px; justify-content: flex-end; align-items: center; } /* td.cc-ll-actions, not .cc-ll-actions: the padding this has to beat is the one ".lb-console .cc-ll-table td" sets a few rules above, and that selector outranks a two-class one. */ .lb-console .cc-ll-table td.cc-ll-actions { padding-top: 0; padding-bottom: 0; } .lb-console .cc-ll-actions .btn-icon { width: 30px; height: 30px; } .lb-console .cc-ll-input { width: 100%; min-width: 0; box-sizing: border-box; } /* THE ROW'S CONTROLS ARE QUIET UNTIL THEY ARE WANTED. The reference shows a table with no per-row buttons at all; hiding them on opacity rather than on display keeps them in the tab order, and :focus-within brings them back the moment a keyboard reaches them — which `display: none` would have made unreachable. */ .lb-console .cc-ll-table tbody tr .cc-ll-actions > * { opacity: 0; transition: opacity 120ms ease; } .lb-console .cc-ll-table tbody tr:hover .cc-ll-actions > *, .lb-console .cc-ll-table tbody tr:focus-within .cc-ll-actions > *, .lb-console .cc-ll-table tbody tr[data-editing="true"] .cc-ll-actions > * { opacity: 1; } /* A touch screen has no hover, so there they are simply always there. */ @media (hover: none) { .lb-console .cc-ll-table tbody tr .cc-ll-actions > * { opacity: 1; } } /* The two marks a row can carry. Neither is an error: one says the number cannot be dialled, the other that somebody else in this list has it. */ .lb-console .cc-ll-flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; background: rgba(17, 24, 39, 0.06); color: var(--ll-head); vertical-align: 1px; } .lb-console .cc-ll-flag--warn { background: rgba(217, 45, 36, 0.08); color: var(--ll-danger); } /* A cell the server flagged as something a spreadsheet would execute. The value is shown exactly as the file wrote it — this is the warning. */ .lb-console .cc-ll-formula { border-bottom: 1px dashed rgba(217, 45, 36, 0.5); cursor: help; } /* Editing in place: the cells become inputs sized to their column. The Name / Company cell holds TWO of them — one fact each, stacked, because the column shows one line built from two values and an edit has to give both of them back separately. */ .lb-console .cc-ll-input { font-size: 0.82rem; padding: 7px 9px; } .lb-console .cc-ll-input--company { margin-top: 6px; } .lb-console .cc-ll-table tbody tr[data-editing="true"] .cc-ll-name { white-space: normal; min-width: 180px; } .lb-console .cc-ll-table tbody tr[data-editing="true"] td { background: rgba(17, 24, 39, 0.02); } .lb-console .cc-ll-pager { display: flex; align-items: center; gap: 12px; padding-top: 14px; } /* ── THE DIALOG ─────────────────────────────────────────────────────────── Upload, add by hand, rename, delete a list, delete a row: five uses, one shape. ── WHY .cc-modal__inner AND NOT .cc-modal__panel ────────────────────── .cc-modal above already exists for the import dialog, and its markup is .cc-modal > .cc-modal__scrim + .cc-modal__panel. This feature reuses the OUTER class deliberately — the fixed, centring layer is exactly what it needs — but carries its own scrim element and its own panel, so a change to either dialog cannot silently reshape the other. ── THE SCRIM IS WHITE, WHICH IS WHAT THE REFERENCE SHOWS ────────────── Measured rather than assumed: with the dialog open the page behind it is LIGHTER, not darker — the overview card reads #fafafb closed and #fdfdfd open, and the sidebar does not move at all. One white veil at about 0.6 explains both figures exactly. A dark scrim would be a different design. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-modal-backdrop { position: fixed; inset: 0; z-index: 2990; background: rgba(255, 255, 255, 0.62); /* NO BLUR, and the property that would produce one is not named here. The reference keeps the page behind the dialog sharp — the sidebar's type is as crisp with the dialog open as without it — and blurring it made it legibly softer than the measurements support. The veil alone is the whole effect. Written without the property's name on purpose: this product declares no frosted surface of its own, and two suites assert that by reading the stylesheet for it. One of them reads the file with its comments still in, so a comment saying "we did not use X" would fail the check that nothing uses X. */ } .lb-console .cc-modal-backdrop .cc-modal__inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 540px; max-height: min(760px, calc(100vh - 48px)); background: var(--card, #fff); border-radius: 15px; border: 1px solid var(--ll-edge); box-shadow: 0 26px 70px rgba(17, 24, 39, 0.20), 0 3px 10px rgba(17, 24, 39, 0.06); overflow: hidden; } .lb-console .cc-modal--sm .cc-modal__inner { max-width: 430px; } /* The head, body and foot are the ones .cc-modal already defines. What this changes is the reference's heavier title and its borderless head. */ .lb-console .cc-modal-backdrop .cc-modal__head { border-bottom: 0; padding: 22px 22px 8px; align-items: flex-start; } .lb-console .cc-modal-backdrop .cc-modal__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ll-ink); } .lb-console .cc-modal__close { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -3px -6px 0 0; background: none; border: 0; border-radius: 8px; color: var(--ll-head); cursor: pointer; } .lb-console .cc-modal__close:hover { background: rgba(17, 24, 39, 0.06); color: var(--ll-ink); } .lb-console .cc-modal-backdrop .cc-modal__body { padding: 12px 22px 4px; gap: 20px; } .lb-console .cc-modal-backdrop .cc-modal__foot { border-top: 0; padding: 22px 22px 24px; gap: 10px; } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-dark, .lb-console .cc-modal-backdrop .cc-modal__foot .btn-ghost, .lb-console .cc-modal-backdrop .cc-modal__foot .btn-danger { border-radius: 9px; padding: 9px 18px !important; font-weight: 500 !important; } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-dark { background: var(--ll-ink); } /* ── A DISABLED BUTTON UNDER THE POINTER MUST STILL BE THERE ─────────── The shared sheet dims a disabled .btn-dark to 0.45 and, on hover, sets `background: inherit`. Inside this footer that inherits transparent — so the moment the pointer rests on it, the disabled control loses its fill entirely and reads as an empty gap where a button was. It is reachable the instant the pointer stops moving after a click, which is exactly the position somebody is in while the file they just confirmed is being read. The dimming is right and stays. This restores only the fill. Scoped to this dialog: the shared rule is on the Labbie dashboard too, and what it does there is not this feature's to change. */ .lb-console .cc-modal-backdrop .cc-modal__foot .btn-dark:disabled:hover { background: var(--ll-ink); } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-ghost:disabled:hover { background: var(--card, #fff); } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-danger:disabled:hover { background: var(--card, #fff); } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-ghost { background: var(--card, #fff); border: 1px solid var(--ll-edge); color: var(--ll-ink); } /* The list's name, with the pencil that says it can be changed. It is a real input at rest rather than a label that becomes one: the reference shows the name already editable, and a control that only reveals itself on click is a control most people never find. */ .lb-console .cc-modal__name { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border: 1px solid var(--ll-edge); border-radius: 10px; background: var(--card, #fff); } .lb-console .cc-modal__name:focus-within { border-color: rgba(17, 24, 39, 0.34); } .lb-console .cc-modal__nameinput { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 1rem; font-weight: 500; color: var(--ll-ink); } .lb-console .cc-modal__pencil { display: block; flex: none; color: var(--ll-head); } /* ── THE DROP ZONE ────────────────────────────────────────────────────── One box, three states — choose, chosen, organising — all the same size, so nothing under the reader's pointer moves as the upload progresses. */ .lb-console .cc-modal__drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 196px; padding: 26px 24px; border: 1px dashed rgba(17, 24, 39, 0.17); border-radius: 11px; background: var(--card, #fff); cursor: pointer; } .lb-console .cc-modal__drop[data-drag="true"] { border-color: var(--ll-drag-accent); background: rgba(31, 92, 250, 0.04); } .lb-console .cc-modal__drop:focus-within { border-color: rgba(17, 24, 39, 0.4); outline: 2px solid rgba(17, 24, 39, 0.35); outline-offset: 2px; } /* The input covers the box so the whole zone is the control, and it stays FOCUSABLE — `display: none` would take the only keyboard route to the file picker away. */ .lb-console .cc-modal__drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .lb-console .cc-modal__dropart { display: block; margin-bottom: 6px; } .lb-console .cc-modal__droptitle { font-size: 1.08rem; font-weight: 700; color: var(--ll-ink); letter-spacing: -0.01em; } .lb-console .cc-modal__droptext { font-size: 0.91rem; color: var(--ll-navy); line-height: 1.5; max-width: 40ch; } .lb-console .cc-modal__droptext--quiet { color: var(--ll-head); font-size: 0.86rem; } /* Organising. The same box, the same height, one sentence in the middle. */ .lb-console .cc-modal__drop--busy { cursor: default; } .lb-console .cc-modal__busy { font-size: 1.05rem; font-weight: 600; color: var(--ll-ink); letter-spacing: -0.01em; } /* Chosen files. Tiles in the same dashed box, and the "+ Add" pill on its upper-right corner. EVERY NUMBER HERE IS MEASURED FROM THE OWNER'S REFERENCE, which is the dialog at 1.5675x: the pill 77x26 and 11px / 14px in from the box's outer top and right; the picture 52.3px; the × 22px, standing 14px above and 14px beyond the picture's upper-right corner; the picture's page, not its badge, over the middle of the name. They are the reference's, not a scale. AND THE FILE IS WHERE THE REFERENCE PUTS IT, which is 10.5px to the right of the box's middle and not on it. The owner's picture is the design; a centre worked out by arithmetic is not. */ .lb-console .cc-modal__drop.cc-modal__drop--files { flex-direction: row; flex-wrap: wrap; gap: 18px; /* Files in a row stand level: their pictures at one height, whether a name takes one line or two. The rows, not each tile, are what sit in the middle of the box — so one file is exactly where it was. */ align-items: flex-start; align-content: center; /* However many files there are, the box is as tall as they are and the dialog scrolls. Left to shrink, it is squeezed shorter than its rows on a small screen, and they spill out of it — upwards, under the pill. */ flex-shrink: 0; /* Top and bottom: room above the first row for the pill, which ends 37px down. A tile's × starts 6px inside its tile, so no × can reach the pill however many files there are — and with a name on two lines the box is still the 196px it always was. Left: 21px more than the right, which is what puts the tiles' middle 10.5px right of the box's. */ padding: 34px 24px 34px 45px; cursor: default; } /* The picker is behind the pill now, and the pill and each × show their own focus. The zone's own ring is for the state where the zone IS the control. */ .lb-console .cc-modal__drop.cc-modal__drop--files:focus-within { border-color: rgba(17, 24, 39, 0.17); outline: 0; } .lb-console .cc-modal__file { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 160px; /* Where the × stands. Inside the tile, so what sits in the middle of the box's height is the × and the picture and the name together, as the reference has it. */ padding-top: 20px; } .lb-console .cc-modal__fileicon { display: block; } .lb-console .cc-modal__filename { font-size: 0.97rem; font-weight: 600; color: var(--ll-ink); word-break: break-word; line-height: 1.35; } .lb-console .cc-modal__filex { position: absolute; top: 6px; right: 50%; transform: translateX(35px); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: #000; color: #fff; cursor: pointer; } .lb-console .cc-modal__filex svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .lb-console .cc-modal__add { position: absolute; top: 10px; right: 13px; display: inline-flex; align-items: center; gap: 11px; height: 26px; padding: 0 14.5px 0 10.5px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 1rem; font-weight: 500; line-height: 1; cursor: pointer; } .lb-console .cc-modal__add svg { display: block; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .lb-console .cc-modal__add:hover, .lb-console .cc-modal__filex:hover { background: #2a2a30; } .lb-console .cc-modal__add:focus-visible, .lb-console .cc-modal__filex:focus-visible { outline: 2px solid rgba(17, 24, 39, 0.35); outline-offset: 2px; } /* The two illustrations inside the dialog. */ /* ── THE DROP ZONE'S FOLDER ───────────────────────────────────────────── It was a document with a blue disc on its corner: four fills, of which two were blues this console's palette otherwise has no use for, drawn around a picture of the file somebody already has rather than of what they are about to do with it. IT IS TWO COLOURS NOW, and they are the only two: a solid black folder and a solid white arrow going up out of it. Nothing here is a token, because nothing here is a THEME — black and white is the drawing, and a variable would only invite it to become something else. THE FOOTPRINT IS THE ONE IT REPLACES: 62px square, same viewBox, same parent, so the dialog's copy and buttons sit exactly where they sat. */ .lb-console .cc-ll-upfolder { width: 62px; height: 62px; display: block; } .lb-console .cc-ll-upfolder__body { fill: #000; } /* Drawn as a round-capped stroke rather than as an outlined shape: one path, one weight, and the rounded ends the reference has. AND IT IS STATED ONCE, so it cannot be restated for a state. There is no :hover and no [data-drag] rule for this illustration anywhere: the drop zone's own border already answers "you are dragging something over me", and a picture that redrew itself underneath the pointer would be saying the same thing a second time. */ .lb-console .cc-ll-upfolder__arrow { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; } /* ── A CHOSEN SPREADSHEET'S PICTURE: THE OWNER'S EXCEL ARTWORK ─────────── The owner's own file (3 Oct), not a drawing of it. It ships byte for byte from this product's own mount, the way the Campaigns megaphone and the Needs Attention tray do, and is never redrawn, recoloured or restyled here. coldcalling-leads-ui-check.js pins its address — this one declaration — where it may be drawn, and the file's bytes, so a different picture cannot arrive under its name. IT IS A BACKGROUND, NOT AN , AND FOR ONE REASON. The dialog is painted again whenever a file is added or taken off, and this mount serves nothing a browser may keep. An made again on each paint is fetched again on each paint, and blinks. A stylesheet's picture is fetched once for the page and every tile draws that one copy. The zone's ::after asks for it as the dialog opens — it has no size and draws nothing — so the picture is there before the first file is chosen. THE FILE IS 1331x1182 WITH CLEAR MARGINS ROUND THE ARTWORK, which is 1052x1053 of it at (143, 76). It is shown at the reference's size, the artwork 52.3px across: so the whole file is drawn 66.2x58.8 and moved up and left by its own margins, and this box is exactly the artwork. The 10px on its right puts the PAGE over the middle of the name, as the reference has it, rather than the page and the badge that hangs off its left. */ .lb-console .cc-ll-xl, .lb-console .cc-modal__drop::after { background-image: url("/coldcalling/assets/assets/leads-file-excel.webp"); background-repeat: no-repeat; } .lb-console .cc-ll-xl { display: block; width: 52.3px; height: 52.4px; margin-right: 10px; background-size: 66.2px 58.8px; background-position: -7.1px -3.8px; } .lb-console .cc-modal__drop::after { content: ""; position: absolute; width: 0; height: 0; } /* Every other kind of file: the picture it always had. */ .lb-console .cc-ll-sheet { width: 48px; height: 56px; display: block; } .lb-console .cc-ll-sheet__page { fill: #ffffff; stroke: rgba(17, 24, 39, 0.16); stroke-width: 1.4; } .lb-console .cc-ll-sheet__fold { fill: #e8ecf5; } .lb-console .cc-ll-sheet__tag { fill: var(--ll-sheet-tag); } .lb-console .cc-ll-sheet__mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; } /* ── THE TWO REVIEWS ──────────────────────────────────────────────────── Neither is a warning to dismiss. A row with no usable number cannot be called, and two rows with one number are one person called twice — so both are asked as questions, with the answer editable in place. */ .lb-console .cc-modal__review { display: flex; flex-direction: column; gap: 18px; } .lb-console .cc-modal__section { display: flex; flex-direction: column; gap: 8px; } .lb-console .cc-modal__h { font-size: 0.85rem; font-weight: 600; color: var(--ll-ink); letter-spacing: -0.01em; } .lb-console .cc-modal__count { font-size: 0.85rem; font-weight: 500; color: var(--ll-ink); } .lb-console .cc-modal__text { font-size: 0.86rem; color: var(--text, #111827); line-height: 1.55; } .lb-console .cc-modal__form { display: flex; flex-direction: column; gap: 7px; } .lb-console .cc-modal__form .lb-label { margin-top: 5px; } .lb-console .cc-ll-refusal { color: #b91c1c; } .lb-console .cc-ll-review { display: flex; flex-direction: column; border: 1px solid var(--ll-edge); border-radius: 11px; overflow: hidden; } .lb-console .cc-ll-review__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ll-rule); } .lb-console .cc-ll-review__row:last-child { border-bottom: 0; } .lb-console .cc-ll-review__name { flex: 1 1 40%; min-width: 0; font-size: 0.82rem; font-weight: 500; color: var(--ll-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-console .cc-ll-review__num { flex: 0 1 auto; font-size: 0.8rem; color: var(--ll-head); font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-console .cc-ll-review__input { flex: 1 1 40%; min-width: 0; font-size: 0.82rem; padding: 7px 10px; } .lb-console .cc-ll-review__row [data-on="true"] { color: var(--ll-ink); font-weight: 500; } /* ── THE REVIEW STEP, AS ITS REFERENCE DRAWS IT ───────────────────────── Scoped to .cc-modal__inner--review, which paintUploadModal() sets only while the review is showing: choosing and organising keep their look. A larger title and list name, the total under it on the right, one red badge per question, rows on one shared grid so their columns line up, and a black Merge. The head and the actions stay put; only the body scrolls between them. */ .lb-console .cc-modal-backdrop .cc-modal__inner--review { max-width: 552px; border-radius: 20px; border-color: rgba(17, 24, 39, 0.06); box-shadow: 0 18px 48px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.04); } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__head { padding: 26px 24px 20px; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__title { font-size: 1.625rem; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; color: var(--ll-ink); } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__body { padding: 0 24px 8px; gap: 0; scrollbar-width: thin; scrollbar-color: rgba(17, 24, 39, 0.22) transparent; scrollbar-gutter: stable; } .lb-console .cc-modal__inner--review .cc-modal__body > * { flex: none; } .lb-console .cc-modal__inner--review .cc-modal__body::-webkit-scrollbar { width: 6px; } .lb-console .cc-modal__inner--review .cc-modal__body::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, 0.22); border-radius: 3px; } .lb-console .cc-modal__inner--review .cc-modal__name { height: 46px; padding: 0 14px 0 18px; border: 1px solid rgba(17, 24, 39, 0.45); border-radius: 8px; } .lb-console .cc-modal__inner--review .cc-modal__name:focus-within { border-color: var(--ll-ink); } .lb-console .cc-modal__inner--review .cc-modal__nameinput { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; } .lb-console .cc-modal__total { margin: 12px 0 0; text-align: right; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ll-ink); font-variant-numeric: tabular-nums; } .lb-console .cc-modal__inner--review .cc-modal__review { gap: 22px; margin-top: 14px; } .lb-console .cc-modal__inner--review .cc-modal__section { gap: 0; } .lb-console .cc-modal__inner--review .cc-modal__h { margin: 0; font-size: inherit; } /* ONE BADGE, for every question the review asks. */ .lb-console .cc-ll-badge { display: inline-block; padding: 1px 12px 2px; border-radius: 999px; background: var(--ll-alert); color: #fff; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; white-space: nowrap; } .lb-console .cc-ll-review__lede { margin: 4px 0 10px; font-size: 0.75rem; line-height: 1.4; color: #4d4d4d; } .lb-console .cc-modal__inner--review .cc-ll-review { margin: 0 6px; border-color: rgba(17, 24, 39, 0.08); border-radius: 10px; } .lb-console .cc-modal__inner--review .cc-ll-review__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 178px) auto; align-items: center; column-gap: 13px; min-height: 50px; padding: 0 22px 0 12px; border-bottom-color: rgba(17, 24, 39, 0.07); } .lb-console .cc-modal__inner--review .cc-ll-review__row:last-child { border-bottom: 0; } .lb-console .cc-modal__inner--review .cc-ll-review__name { font-size: 0.8125rem; font-weight: 600; color: #262628; } .lb-console .cc-modal__inner--review .cc-ll-review__input { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(17, 24, 39, 0.11); font-size: 0.8125rem; color: #545864; } .lb-console .cc-modal__inner--review .cc-ll-review__row [data-ll-drop] { padding: 6px 0 6px 10px !important; border: 0; background: none; font-size: 0.78rem !important; font-weight: 400; color: #aaadb6; } .lb-console .cc-modal__inner--review .cc-ll-review__row [data-ll-drop]:hover { color: var(--ll-ink); } .lb-console .cc-modal__inner--review .cc-ll-review__row--dupe { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 52px; padding-right: 10px; } .lb-console .cc-modal__inner--review .cc-ll-review__row--dupe .cc-ll-review__name { font-size: 0.875rem; font-weight: 500; } .lb-console .cc-modal__inner--review .cc-ll-review__num { font-size: 0.875rem; color: #8f97ad; } /* Merge, as a black pill. Merged keeps the pill: it is pressed again to keep the rows apart, so it stays a button. */ .lb-console .cc-ll-review__merge, .lb-console .cc-ll-review__row .cc-ll-review__merge[data-on="true"] { min-height: 28px; padding: 0 16px !important; border: 0; border-radius: 999px; background: var(--ll-ink); color: #fff; font-size: 0.875rem !important; font-weight: 500 !important; } .lb-console .cc-ll-review__merge:hover { background: #26262b; } /* The uncertain review keeps its own two-line layout. */ .lb-console .cc-modal__inner--review .cc-ll-review--uncertain .cc-ll-review__row { display: flex; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot { padding: 16px 18px 18px; gap: 12px; background: var(--card, #fff); } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot .btn-dark, .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot .btn-ghost { min-height: 38px; padding: 0 20px !important; border-radius: 10px; font-size: 0.875rem !important; font-weight: 500 !important; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot .btn-ghost { border-color: rgba(17, 24, 39, 0.12); } @media (max-width: 720px) { .lb-console .cc-modal-backdrop .cc-modal__inner--review { border-radius: 16px; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__head { padding: 20px 18px 16px; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__title { font-size: 1.375rem; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__body { padding: 0 18px 8px; } .lb-console .cc-modal__inner--review .cc-modal__nameinput { font-size: 1.25rem; } .lb-console .cc-modal__total { font-size: 1.0625rem; } .lb-console .cc-modal__inner--review .cc-ll-review { margin: 0; } /* The name over its own line; the number and Remove share the next. */ .lb-console .cc-modal__inner--review .cc-ll-review__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 12px; } .lb-console .cc-modal__inner--review .cc-ll-review__row > .cc-ll-review__name { grid-column: 1 / -1; } .lb-console .cc-modal__inner--review .cc-ll-review__row--dupe { grid-template-columns: minmax(0, 1fr) auto; } .lb-console .cc-modal__inner--review .cc-ll-review__row [data-ll-drop] { min-height: 44px; } .lb-console .cc-ll-review__merge { min-height: 44px; } .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot .btn-dark, .lb-console .cc-modal-backdrop .cc-modal__inner--review .cc-modal__foot .btn-ghost { min-height: 44px; } } /* ══════════════════════════════════════════════════════════════════════════ ORGANISING YOUR LEADS The panel shown while documents are being read. Deliberately quiet: five lines, a tick beside the ones that are finished, and one spinning mark beside the one that is running. THERE IS NO PROGRESS BAR AND NO PERCENTAGE, and nothing here could carry one — a bar would have to be given a width, and there is no honest number to give it. See uploadStages() in coldcalling.js. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-ll-organising { display: flex; flex-direction: column; gap: 4px; padding: 30px 26px; border: 1px solid var(--ll-edge); border-radius: 14px; background: #fff; } /* The file, which is now what the card leads with — the dialog carries the heading. Slightly stronger than a caption for that reason, and still quieter than the stage it is above. */ .lb-console .cc-ll-organising__file { margin: 0 0 16px; font-size: 0.9rem; font-weight: 500; color: var(--ll-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-console .cc-ll-organising__of { color: var(--ll-faint); } .lb-console .cc-ll-organising__note { margin: 16px 0 0; font-size: 0.8rem; color: var(--ll-faint); line-height: 1.5; } .lb-console .cc-ll-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .lb-console .cc-ll-stage { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; line-height: 1.3; color: var(--ll-faint); } /* Done and running are told apart by WEIGHT AND A MARK as well as by colour, so the panel still reads for somebody who cannot see the difference between two greys. */ .lb-console .cc-ll-stage[data-state="done"] { color: var(--ll-navy); } .lb-console .cc-ll-stage[data-state="now"] { color: var(--ll-ink); font-weight: 600; } .lb-console .cc-ll-stage__mark { flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .lb-console .cc-ll-stage__tick { width: 16px; height: 16px; fill: none; stroke: var(--ll-sheet-tag); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lb-console .cc-ll-stage__spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ll-accent-wash); border-top-color: var(--ll-accent); animation: cc-ll-spin 0.7s linear infinite; } @keyframes cc-ll-spin { to { transform: rotate(360deg); } } /* ── The third review ──────────────────────────────────────────────────── Rows this product could not confirm against the document. Taller than the other two, because each one carries the line it came from — which is the only thing that settles whether it is right. */ .lb-console .cc-ll-review--uncertain .cc-ll-review__row { flex-direction: column; align-items: stretch; gap: 7px; padding: 11px 12px; } .lb-console .cc-ll-uncertain__head { display: flex; align-items: center; gap: 10px; } .lb-console .cc-ll-uncertain__name { flex: 1 1 45%; min-width: 0; font-size: 0.82rem; padding: 7px 10px; } .lb-console .cc-ll-uncertain__why { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ll-danger); } .lb-console .cc-ll-uncertain__src { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--ll-head); } .lb-console .cc-ll-uncertain__at { color: var(--ll-faint); font-variant-numeric: tabular-nums; } .lb-console .cc-ll-uncertain__src q { quotes: '\201C' '\201D'; font-style: normal; } /* ── A file that was read without AI ─────────────────────────────────────*/ .lb-console .cc-ll-review__row--failed { align-items: flex-start; } .lb-console .cc-ll-failure__why { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; line-height: 1.45; color: var(--ll-navy); } .lb-console .cc-ll-failure__detail { font-size: 0.76rem; color: var(--ll-head); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; } .lb-console .cc-ll-discarded { color: var(--ll-navy); } /* Said only to a screen reader. The stage list carries its state visually as a tick and a weight, and neither of those is an announcement. */ .lb-console .cc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ CAMPAIGN DETAIL — the lead table (Master Plan v4 §20.1, §20.4–20.6, G.10) Shared tokens and shared primitives only: .lb-input, .lb-table, .lb-label and the badge do the work, and nothing below redefines a colour, a radius or a shadow of its own. ══════════════════════════════════════════════════════════════════════════ */ /* ── §20.4/20.5/20.6 — the view controls ───────────────────────────────── Search takes the room that is left; the two pickers keep their own width. Wraps rather than scrolling, for the reason the Campaign tabs do. */ .lb-console .cc-lead-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 14px; } .lb-console .cc-lead-bar__search { flex: 1 1 260px; min-width: 0; } .lb-console .cc-lead-bar__pick { flex: 0 0 auto; min-width: 0; } .lb-console .cc-lead-bar__pick .lb-label { display: block; margin-bottom: 2px; } .lb-console .cc-lead-bar__pick .lb-input { min-height: 44px; } .lb-console .cc-lead-bar__search .lb-input { min-height: 44px; width: 100%; } .lb-console .cc-lead-bar__count { flex: 0 0 auto; margin: 0 0 10px; font-size: 0.82rem; color: var(--muted, #6b7280); } /* A label that only a screen reader reads. The search box carries a visible placeholder AND this, because a placeholder is not a label: it disappears the moment somebody types. */ .lb-console .lb-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── §20.1's large-data rule, and G.10's ───────────────────────────────── "support at least 100/300+ rows without page-height failure … use a bounded vertical viewport with sticky header … do not create a page thousands of pixels tall." The bound is on the SCROLLER, not the page, so the page itself never grows past the viewport no matter how many leads a Campaign holds. The sticky header in that quote is the half NOT taken — §20.1 qualifies it with "where useful", and this shell does not allow it. See the note on the thead rule below. */ .lb-console .cc-lead-scroll { max-height: min(60vh, 560px); overflow-y: auto; overflow-x: auto; overscroll-behavior: contain; } .lb-console .cc-lead-table { width: 100%; } /* NOT position: sticky, deliberately. §20.1 asks for the sticky header "where useful" rather than always, and this console is built on a shell whose scroll contract coldcalling-ui-check.js enforces as a blanket ban on position: sticky in this stylesheet — origin/main carries none. The bounded scroller below is what §20.1 actually requires and it is kept; the header simply scrolls with its rows, as every other table in this console does. (§17.10 lists a sticky header unqualified, but §17.10 governs the Leads Library large-list UI, not Campaign Detail.) */ .lb-console .cc-lead-table thead th { background: var(--card, #fff); } .lb-console .cc-lead__no { width: 3.5rem; white-space: nowrap; } .lb-console .cc-lead__phone { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Remarks are free text and can be long. Bounded so one verbose row cannot set the width of the whole table, and wrapped rather than clipped so the text stays readable. */ .lb-console .cc-lead__remarks { max-width: 22rem; white-space: normal; overflow-wrap: anywhere; } .lb-console .cc-lead__act { white-space: nowrap; } /* A status is one or two words and the pill is read at a glance. The table inherits the console's overflow-wrap: anywhere so a long remark can never push the page sideways, but that permission let "Not Contacted" break INSIDE a word into a three-line pill once a verbose Remarks column narrowed the Status column at 1440 (final acceptance, 2026-09-16). The pill keeps its words whole; the Remarks column above stays the one that wraps. */ .lb-console .cc-lead-table .stat-badge { white-space: nowrap; } /* ── Mobile: the row reflows vertically and stays ONE list ─────────────── §20.1: "mobile reflows each row vertically without page-level horizontal scrolling while retaining a table/list relationship rather than unrelated standalone cards." So the header is hidden and each cell carries its own label, which keeps the row a row. */ @media (max-width: 720px) { .lb-console .cc-lead-scroll { overflow-x: hidden; max-height: none; } .lb-console .cc-lead-table, .lb-console .cc-lead-table tbody, .lb-console .cc-lead-table tr, .lb-console .cc-lead-table td { display: block; width: auto; } .lb-console .cc-lead-table thead { display: none; } .lb-console .cc-lead-table tr { border-bottom: 1px solid var(--line, #e5e7eb); padding: 10px 0; } .lb-console .cc-lead-table td { border: 0; padding: 2px 0; } /* A little room between the stacked fields and the table's left border, the same 12px the Search field above insets its text by, so the two line up (owner, 4 October 2026). The Campaign page's table only: the edit card's (.cc-camp-edit__table) was not part of that request. */ .lb-console .cc-lead-table:not(.cc-camp-edit__table) tr { padding-left: 12px; } /* The heading each cell lost, given back — the same idiom the Leads Library table already uses at this width, so the two read alike. Without it a stacked row is a column of bare values, and two empty cells — no phone, and never contacted — are both a lone em dash with nothing to say which is which. */ .lb-console .cc-lead-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 500; color: var(--muted, #6b7280); margin-bottom: 1px; } /* The row number is the block's own index, not a labelled field. */ .lb-console .cc-lead-table td.cc-lead__no::before { content: none; } .lb-console .cc-lead-table td.cc-lead__no { font-size: 0.72rem; font-weight: 500; color: var(--muted, #6b7280); } .lb-console .cc-lead__remarks { max-width: none; } .lb-console .cc-lead-bar__pick { flex: 1 1 46%; } .lb-console .cc-lead-bar__pick .lb-input { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lb-console .cc-lead-scroll { scroll-behavior: auto; } } @media (forced-colors: active) { .lb-console .cc-lead-table thead th { border-bottom: 1px solid; } .lb-console .cc-lead-table tr { border-bottom: 1px solid; } } /* ── §20.7 — selecting leads, and removing them ────────────────────────── Shared primitives only: .btn-danger, .btn-ghost and the drawer do the work. Nothing below defines a colour, a radius or a shadow of its own. */ .lb-console .cc-lead__pick-cell { width: 2.75rem; } .lb-console .cc-lead__pick { width: 18px; height: 18px; /* 44px of hittable area around an 18px box, without moving the layout. */ margin: 13px; cursor: pointer; } .lb-console .cc-lead-table tr.is-picked { background: var(--ll-accent-wash, #f5f5f4); } /* The contextual action row. Appears only when something is selected, so it sits between the controls and the table rather than reserving space. */ .lb-console .cc-lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--cc-read-surface, #fafafa); } .lb-console .cc-lead-actions__count { flex: 1 1 auto; margin: 0; font-size: 0.85rem; font-weight: 600; } .lb-console .cc-lead-actions .btn-sm { min-height: 36px; } @media (max-width: 720px) { /* The checkbox keeps its own labelled line when the row reflows, so it is never mistaken for part of the value above it. */ .lb-console .cc-lead__pick-cell { width: auto; } .lb-console .cc-lead__pick { margin: 4px 8px 4px 0; vertical-align: middle; } .lb-console .cc-lead-actions .btn-sm { flex: 1 1 auto; } } @media (forced-colors: active) { .lb-console .cc-lead-table tr.is-picked { outline: 2px solid; } } /* ══════════════════════════════════════════════════════════════════════════ THE LEADS LIBRARY — TABLET The four toolbar controls stop competing for one line, and the table's remarks column is allowed to be the one that gives up width. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* The title is not sized here. Every page title in the console narrows together, by --cc-title-size stepping down at this breakpoint — see the token block at the top of this file. */ .lb-console .cc-ll-search { flex: 1 1 100%; order: -1; } .lb-console .cc-ll-remarks { min-width: 0; } .lb-console .cc-ll-empty-card { min-height: 380px; } .lb-console .cc-ll-listcard { min-height: 260px; } } /* ══════════════════════════════════════════════════════════════════════════ THE LEADS LIBRARY — MOBILE ── THE TABLE STOPS BEING A TABLE ────────────────────────────────────── Four columns and a set of controls do not fit in 320 points, and a table that scrolls sideways hides the column somebody is looking for. Each row becomes a card, and every cell carries the heading it lost: the markup already writes data-label on the three that need one — see leadRowMarkup() — so this is a presentation change and not a second rendering of the same rows. The header row is hidden rather than removed, so the table is still a table to a screen reader reading it in the linear order. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .lb-console .cc-ll-head { margin-bottom: 18px; } .lb-console .lb-page-actions { width: 100%; } /* THE ACTIONS STACK UNDER THE SEARCH, RATHER THAN BESIDE IT. There is no width at which a 320px field and a button share 320 points, so the row stops trying: the search takes the line, the primary takes the next one full width, and the quiet action sits under it at a size a thumb can find. Nothing is compressed and nothing overlaps, which is the whole reason this is a column here and a row above it. */ .lb-console .cc-ll-panelhead { flex-direction: column; align-items: stretch; gap: 12px; } /* THE BASIS HAS TO BE RELEASED WITH THE DIRECTION. `flex: 1 1 320px` is a WIDTH while the row is a row and a HEIGHT the moment it is a column — so left alone it made the search box 320 points tall and then let it grow, opening half a screen of white between the field and the button under it. The one line that could not be left to the direction change. */ .lb-console .cc-ll-find { flex: 0 0 auto; } .lb-console .cc-ll-panelactions { margin-left: 0; width: 100%; align-items: stretch; gap: 8px; } .lb-console .cc-ll-upload { width: 100%; justify-content: center; min-height: 44px; } .lb-console .cc-ll-example { justify-content: center; min-height: 44px; font-size: 0.85rem; } .lb-console .cc-ll-search--lists { max-width: none; } .lb-console .cc-ll-grid { flex-direction: column; } .lb-console .cc-ll-tile { width: 100%; } .lb-console .cc-ll-tile__name { max-width: none; } .lb-console .cc-ll-tile__open, .lb-console .cc-ll-tile__menu { min-height: 52px; } /* The menu is placed from the control's offsets, which on a narrow screen would put a 148px panel off the right edge. This is the one place the inline style has to lose, so it says !important and says why. */ .lb-console .cc-ll-menu { left: auto !important; right: 8px; min-width: 168px; } .lb-console .cc-ll-listhead { gap: 12px; } .lb-console .cc-ll-listidentity { flex: 1 1 100%; gap: 10px; } .lb-console .cc-ll-listdivider { min-height: 44px; } .lb-console .cc-ll-listname { font-size: 1rem; } /* The identity gets the first line; the actions use the next line and stay grouped against its right edge. */ .lb-console .cc-ll-listactions { margin-left: 0; width: 100%; justify-content: flex-end; gap: 8px; } .lb-console .cc-ll-addfile, .lb-console .cc-ll-add { justify-content: center; min-height: 44px; } .lb-console .cc-ll-search, .lb-console .cc-ll-select, .lb-console .cc-ll-more { flex: 1 1 100%; height: 44px; } .lb-console .cc-ll-select select { flex: 1; max-width: none; } .lb-console .cc-ll-more { justify-content: center; } .lb-console .cc-ll-detailcard .lb-tablewrap { overflow-x: visible; } .lb-console .cc-ll-table, .lb-console .cc-ll-table tbody, .lb-console .cc-ll-table tr, .lb-console .cc-ll-table td { display: block; width: auto; } .lb-console .cc-ll-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .lb-console .cc-ll-table tbody tr { position: relative; border: 1px solid var(--ll-edge); border-radius: 12px; padding: 12px 14px 10px; margin-bottom: 10px; } .lb-console .cc-ll-table tbody tr:hover td { background: none; } .lb-console .cc-ll-table td, .lb-console .cc-ll-table tbody tr:last-child td { border-bottom: 0; padding: 3px 0; white-space: normal; } /* The heading each cell lost, given back. */ .lb-console .cc-ll-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 500; color: var(--ll-head); margin-bottom: 1px; } /* The row number is a corner mark rather than a line of its own. */ .lb-console .cc-ll-table .cc-ll-no { position: absolute; top: 10px; right: 14px; width: auto; padding: 0; font-size: 0.72rem; color: var(--ll-head); font-weight: 500; } .lb-console .cc-ll-name { font-size: 0.9rem; padding-right: 28px; } .lb-console .cc-ll-remarks { min-width: 0; } .lb-console .cc-ll-actions { width: auto; min-width: 0; text-align: right; padding-top: 8px; } .lb-console .cc-ll-actions__inner { justify-content: flex-end; } .lb-console .cc-ll-table tbody tr[data-editing="true"] .cc-ll-input { width: 100%; } .lb-console .cc-ll-table tbody tr .cc-ll-actions > * { opacity: 1; } .lb-console .cc-modal-backdrop .cc-modal__inner { max-width: 100%; max-height: calc(100vh - 24px); } .lb-console .cc-modal-backdrop .cc-modal__head { padding: 18px 18px 4px; } .lb-console .cc-modal-backdrop .cc-modal__body { padding: 12px 18px 4px; } .lb-console .cc-modal-backdrop .cc-modal__foot { padding: 14px 18px 18px; } .lb-console .cc-modal-backdrop .cc-modal__foot .btn-dark, .lb-console .cc-modal-backdrop .cc-modal__foot .btn-ghost, .lb-console .cc-modal-backdrop .cc-modal__foot .btn-danger { flex: 1; justify-content: center; min-height: 44px; } .lb-console .cc-modal__drop { min-height: 168px; padding: 22px 16px; } /* The reference is the desktop dialog. At this width the tiles sit in the middle of the box, which leaves them the most room to wrap in. */ .lb-console .cc-modal__drop.cc-modal__drop--files { padding-left: 16px; padding-right: 16px; } .lb-console .cc-ll-review__row { flex-wrap: wrap; } .lb-console .cc-ll-review__name { flex: 1 1 100%; } /* The name, the number and Remove will not fit on one line at 375px, so they stack — and Remove keeps its full tap target rather than being squeezed to a sliver beside two inputs. */ .lb-console .cc-ll-uncertain__head { flex-wrap: wrap; } .lb-console .cc-ll-uncertain__name { flex: 1 1 100%; } .lb-console .cc-ll-review--uncertain .cc-ll-review__input { flex: 1 1 100%; } .lb-console .cc-ll-organising { padding: 22px 16px; } .lb-console .cc-ll-failure__why { flex: 1 1 100%; } } /* ══════════════════════════════════════════════════════════════════════════ THE LEADS LIBRARY — WHAT SOMEBODY ASKED FOR Reduced motion, and a forced-colours mode where none of the fills above survive. Both are the same principle: the screen still says everything it said before, using whatever the reader's own settings allow. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .lb-console .cc-ll-table tbody tr .cc-ll-actions > * { transition: none; } /* The stage marker stops spinning and becomes a filled dot. It still says which stage is running — the state was never carried by the motion, only accompanied by it. */ .lb-console .cc-ll-stage__spin { animation: none; border-color: var(--ll-accent); background: var(--ll-accent); } } @media (forced-colors: active) { /* Colour is not available, so the marks that were carried by colour are carried by a border instead — and the tile, which was a black rectangle, becomes an outlined one. */ .lb-console .cc-ll-tile { border: 1px solid; } .lb-console .cc-ll-flag { border: 1px solid; } .lb-console .cc-ll-chip[data-on="true"] { border: 2px solid; } .lb-console .cc-ll-menu { border: 1px solid; } .lb-console .cc-modal-backdrop .cc-modal__inner { border: 1px solid; } .lb-console .cc-modal__drop { border: 1px dashed; } .lb-console .cc-ll-organising { border: 1px solid; } /* Every stage is the same colour here, so the tick and the marker are what tell them apart — which is why the state was never colour alone. */ .lb-console .cc-ll-stage__tick { forced-color-adjust: none; } .lb-console .cc-ll-stage__spin { border: 2px solid; } .lb-console .cc-ll-folder__back, .lb-console .cc-ll-folder__front, .lb-console .cc-ll-folder__sheet, .lb-console .cc-ll-sheet__page, .lb-console .cc-ll-sheet__tag, .lb-console .cc-ll-xl { forced-color-adjust: none; } /* THE DROP ZONE'S FOLDER IS NOT KEPT AS AUTHORED. It is a knockout — a white arrow cut out of a black body — and black on a dark high-contrast canvas is a folder nobody can see. So it is redrawn in the SYSTEM's own two colours, which is the same picture in either high-contrast theme rather than the right one in only half of them. */ .lb-console .cc-ll-upfolder__body { fill: CanvasText; forced-color-adjust: none; } .lb-console .cc-ll-upfolder__arrow { stroke: Canvas; forced-color-adjust: none; } } /* ══════════════════════════════════════════════════════════════════════════ USAGE & BILLING — M-14 The owner's layout, in every state: the balance, with Add funds and the auto-reload state, beside Spend this month with its periods and its chart area; then one Billing card holding the Default card, "Payment method & receipts" and the billing history table. A freeze, or a read that failed, is stated once above them. The chart area is a grid with no series — no spending exists to draw yet — and the history table is the shared .lb-table. ── WHAT THIS BLOCK IS ALLOWED TO DECLARE ────────────────────────────── Layout, and the one colour a monochrome page cannot carry: the green that says auto-reload is on. Every other value is a shared token — the ink, the muted grey, the hairline, the card, the radius — and the freeze notice is the shared .lb-notice--error, not a red of this page's own. ── THE CARDS ARE THE SHARED CARD ────────────────────────────────────── .section-card, not a billing card. What is restated here is the padding, because the console's own density rule sets 14px/18px for a column of small panels and these two are the page rather than rows on it. ══════════════════════════════════════════════════════════════════════════ */ .lb-console { /* ── THE ONE GREEN ──────────────────────────────────────────────────── Auto-reload being ON is the single state on this page that is good news, and the only place the product says so in colour. 5.4:1 on white — the tick beside it and the word On carry the same meaning, so a reader who cannot separate the hue still reads the state. */ --ll-bill-ok: #0f7a3d; } .lb-console .cc-bill { display: block; } /* Two cards of one height: what the account holds, and what it has spent — the spend card the wider of the two, as in the owner's design, because its chart needs the room. */ .lb-console .cc-bill__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-bottom: 20px; align-items: stretch; } .lb-console .cc-bill__card { padding: 18px 20px !important; margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; } .lb-console .cc-bill__body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .lb-console .cc-bill__label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 500; letter-spacing: -0.005em; color: var(--text); } /* The freeze sits above the cards it explains. */ .lb-console .cc-bill__status { margin-bottom: 16px; } /* ── THE BALANCE ROW ────────────────────────────────────────────────────── The figure and the one action on it, on one line, with the action hard right. They are a pair — "this is what you have, this is how you add to it" — and putting the button anywhere else makes the reader look for it. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; } /* The page's largest figure, and the only thing on it set in bold. Printed as the server wrote it, which can be long, so it wraps rather than overflows. */ .lb-console .cc-bill__amount { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } /* The shared primary, at the reference's radius and weight. !important for the reason every override of it in this file is: glass.css sets padding, size and weight on .btn-dark with !important of its own. Its disabled look is the shared one. */ .lb-console .cc-bill__primary { flex: none; border-radius: 10px; padding: 10px 20px !important; font-size: 0.85rem !important; font-weight: 500 !important; } /* Why Add funds is disabled, directly under it. */ .lb-console .cc-bill__off { margin-top: 8px; } /* ── AUTO-RELOAD: ITS STATE AND ITS ONE ACTION ──────────────────────────── A tick and "On", or an information mark and "Off", the amounts under it, and beside it the one action — the shared secondary, as the payment method's is. The action wraps under the state when the card is narrow and takes the full width on a phone (the 700px block below). In the side panel the same state line heads the Turn off view, and the amounts are picked with Add funds' own picker and money field. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__autorow { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; } /* The shared secondary at the primary's radius, so the card's two actions are one family. !important for glass.css's own on .btn-ghost. */ .lb-console .cc-bill__secondary { border-radius: 10px; padding: 10px 18px !important; font-size: 0.85rem !important; font-weight: 500 !important; } .lb-console .cc-bill__autostate { flex: 1 1 12rem; min-width: 0; } .lb-console .cc-bill__auto { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 500; color: var(--muted); } .lb-console .cc-bill__auto[data-on="true"] { color: var(--ll-bill-ok); } .lb-console .cc-bill__autoicon { display: flex; flex: none; } .lb-console .cc-bill__autodetail { margin-top: 4px; } .lb-console .cc-bill__autoform .cc-bill__field + .cc-bill__field { margin-top: 16px; } .lb-console .cc-bill__autoform .lb-hint, .lb-console .cc-bill__autonote { margin-top: 12px; } /* The consent step: the server's terms at the notice's size and in the text colour — not hint grey, because they are what the customer agrees to — and the shared .lb-check box under them. */ .lb-console .cc-bill__autoterms { margin: 12px 0 0; padding-left: 1.2rem; list-style: disc outside; font-size: 0.85rem; line-height: 1.55; color: var(--text); } .lb-console .cc-bill__autoterms li + li { margin-top: 6px; } /* The agreement sits in the panel's footer, on a row of its own above the two buttons, so it is in view whenever "Turn on auto-reload" is: on a short phone the terms scroll above it and the box is never below the fold. And the shared row wraps, which dropped this sentence onto a line of its own under an orphaned box; here it wraps BESIDE its box, as a Campaign's list rows do. The box itself is the shared one, untouched. */ .lb-console .lb-drawer__foot:has(> .cc-bill__autoagree) { flex-wrap: wrap; } .lb-console .cc-bill__autoagree { flex: 1 1 100%; flex-wrap: nowrap; } .lb-console .cc-bill__autoagree .lb-check__text { flex: 1 1 auto; min-width: 0; } /* ── THE CARDS IN THE SIDE PANEL ────────────────────────────────────────── Brand, last four and expiry, printed, one row per saved card. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__cardline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 0.95rem; font-weight: 500; color: var(--text); min-width: 0; } /* A brand with no mark of its own, printed — in the side panel's rows, and inside the page's tile for any network the tile does not draw. */ .lb-console .cc-bill__brand { flex: none; padding: 2px 5px; border: 1px solid var(--ll-edge); border-radius: 4px; background: rgba(17, 24, 39, 0.03); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text); } /* ── SPENDING, BY PERIOD ────────────────────────────────────────────────── Title and ranges on one line, the figure under them, then the chart: the server's buckets as a 2px line in the product's ink over a light wash of the same ink, one solid hairline at each mark of the server's scale with the mark's text in the muted ink beside it, the bucket names under the plot — fewer of them where the plot is narrow — and an 8px dot where the line ends, ringed in the card's white so it reads where it meets the line. The readout over the plot is the cards' own surface, border and shadow, and is kept inside the plot. While another range is read, the figure and the chart hold what they showed, dimmed (aria-busy), rather than flashing empty. The plot is percent-scaled SVG, so it stretches with the card; everything with a shape that must not stretch — text, the dot, the readout — is HTML positioned over it. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__spendhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lb-console .cc-bill__periods { flex-wrap: nowrap; } .lb-console .cc-bill__periods .cc-seg__btn { padding: 6px 12px; font-size: 0.8rem; } .lb-console .cc-bill__spendamount { margin-top: 12px; } .lb-console .cc-bill__spendfig { transition: opacity 120ms ease; } .lb-console [aria-busy="true"] .cc-bill__spendfig { opacity: 0.45; } /* The scale's text, then the plot; the bucket names under the plot. The text column is as wide as the widest mark, which the hidden sizer holds open, so a long figure never runs into the plot. */ .lb-console .cc-bill__chart { margin-top: 14px; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; } .lb-console .cc-bill__yaxis { position: relative; grid-column: 1; grid-row: 1; } .lb-console .cc-bill__ysizer { display: block; visibility: hidden; } .lb-console .cc-bill__ytick { position: absolute; right: 0; transform: translateY(-50%); } .lb-console .cc-bill__ysizer, .lb-console .cc-bill__ytick, .lb-console .cc-bill__xtick { font-size: 0.72rem; line-height: 1; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } .lb-console .cc-bill__plot { position: relative; grid-column: 2; grid-row: 1; height: 120px; border-radius: 4px; touch-action: pan-y; } .lb-console .cc-bill__plot:focus { outline: none; } .lb-console .cc-bill__plot:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .lb-console .cc-bill__chartgrid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } .lb-console .cc-bill__chartgrid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .lb-console .cc-bill__area { fill: var(--text); fill-opacity: 0.08; stroke: none; } .lb-console .cc-bill__line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .lb-console .cc-bill__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--card, #fff); pointer-events: none; } /* The readout: a hairline at the bucket, and the bucket's figure and date beside it — on whichever side has room, placed by the page so that it stays inside the plot. */ .lb-console .cc-bill__cross { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--muted); pointer-events: none; } .lb-console .cc-bill__tip { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow); transform: translateY(-50%); white-space: nowrap; pointer-events: none; } .lb-console .cc-bill__cross[hidden], .lb-console .cc-bill__tip[hidden] { display: none; } .lb-console .cc-bill__tipvalue { font-size: 0.9rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .lb-console .cc-bill__tipdate { font-size: 0.75rem; color: var(--muted); } /* The bucket names. Only the major ones are named unless the axis itself is wide enough for all of them to be read apart. It is asked its own width, not the window's: the card is at its narrowest on a mid-sized screen, where it shares a row with the balance, not on a phone. A browser that cannot ask keeps the major ones, which fit anywhere. */ .lb-console .cc-bill__xaxis { position: relative; grid-column: 2; grid-row: 2; height: 1em; margin-top: 8px; container-type: inline-size; } .lb-console .cc-bill__xtick { position: absolute; top: 0; transform: translateX(-50%); } .lb-console .cc-bill__xtick[data-edge="start"] { transform: none; } .lb-console .cc-bill__xtick[data-edge="end"] { transform: translateX(-100%); } .lb-console .cc-bill__xtick[data-minor] { display: none; } @container (min-width: 400px) { .lb-console .cc-bill__xtick[data-minor] { display: block; } } @media (prefers-reduced-motion: reduce) { .lb-console .cc-bill__spendfig { transition: none; } } /* Colour is not available: the line, the wash and the dot are the text colour, the hairlines the system's own grey, the readout outlined. */ @media (forced-colors: active) { .lb-console .cc-bill__line { stroke: CanvasText; } .lb-console .cc-bill__area { fill: CanvasText; } .lb-console .cc-bill__dot { background: CanvasText; } .lb-console .cc-bill__cross { border-left-color: CanvasText; } .lb-console .cc-bill__chartgrid line { stroke: GrayText; } .lb-console .cc-bill__tip { border: 1px solid CanvasText; } } /* ── BILLING, THEN HISTORY ──────────────────────────────────────────────── Two full-width cards (owner's reference, 6 October 2026). Billing: its title, the Default card's tile, masked number and expiry under it, and the payment method's one action — the page's primary, as Add funds is — hard right and centred on the card. History: its title and the table in a framed box that carries the cards' own shadow. Both titles are the top cards' own label: the console's Inter tops out at Medium, so the reference's heavier titles are drawn at the weight every other title on the page has. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__account { margin-top: 0; } .lb-console .cc-bill__account + .cc-bill__account { margin-top: 20px; } .lb-console .cc-bill__accounthead { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; } .lb-console .cc-bill__method { flex: 1; min-width: 0; } .lb-console .cc-bill__manage { display: flex; flex-direction: column; align-items: flex-end; flex: none; max-width: 100%; } /* The Default card, read-only: a white tile with a hairline edge holding the brand's mark, then the last four behind a mask, in the muted ink at the weight drawn, with the expiry under it. Not a control — the action is the button beside it. The slot with no card proven is the same row, with the wallet mark in the tile. */ .lb-console .cc-bill__cardslot { display: flex; align-items: center; gap: 14px; max-width: 100%; margin: 12px 0 4px; } .lb-console .cc-bill__cardtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lb-console .cc-bill__cardexp { line-height: 1.4; } .lb-console .cc-bill__tile { display: flex; align-items: center; justify-content: center; flex: none; width: 70px; height: 48px; border: 1px solid var(--ll-edge); border-radius: 6px; background: var(--card, #fff); } .lb-console .cc-bill__mark { display: block; flex: none; } /* A printed brand already sits in the tile's edge, so it drops its own. */ .lb-console .cc-bill__tile .cc-bill__brand { border: 0; background: none; } .lb-console .cc-bill__tileicon { width: 24px; height: 24px; color: var(--lds-icon-color-inactive, #8E8E93); } .lb-console .cc-bill__cardnum { min-width: 0; overflow-wrap: anywhere; } /* The page's card only: the side panel's rows keep their own ink. */ .lb-console .cc-bill__cardslot .cc-bill__cardnum { font-size: 0.95rem; font-weight: 500; color: var(--muted); } .lb-console .cc-bill__cardslot .cc-bill__cardnone { font-size: 0.88rem; font-weight: 400; } /* The table: the shared .lb-table in a frame with the cards' shadow, the shared header band, body text a step larger, every column left-aligned under its heading, and the columns in the reference's proportions. ── THE HEADER KEEPS ITS PLACE; ONLY THE ROWS SCROLL ─────────────────── History shows at most eight rows at once (owner decision, 9 October 2026), and the shell's scroll contract leaves this stylesheet no pinned positioning to hold a header with. So the header is stationary by construction: the table, its head and its body are three blocks, and the body is the only one that scrolls. How tall eight rows are is set on the body by the page, measured from the rows as drawn (billingHistoryFit) — so with eight rows or fewer nothing is bound and no scrollbar shows. A table sizes its columns from every row at once; a head and a body that are separate blocks cannot. So each row is its own grid on ONE template, the header's row among them, and the columns line up because they are one template. Each column is a pair of tracks, and a cell spans its pair: the least width the column can always be read in, then its share of whatever room the frame has left over — the shares that give the reference's proportions on a desktop. No track is sized by what a row happens to hold, and every fractional one is minmax(0, …), so no text can set a floor for it. The page gives the head the width the rows' scrollbar takes, as padding, and the head carries the band and its hairline itself so both run the full width. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__history { margin-top: 12px; box-shadow: var(--cc-card-shadow); container-type: inline-size; } .lb-console .cc-bill__history .lb-table, .lb-console .cc-bill__history .lb-table thead, .lb-console .cc-bill__history .lb-table tbody { display: block; } /* Five columns need this much to be read side by side. Only a browser that cannot ask the frame its width (below) ever meets it in a narrower frame, and there the table scrolls sideways inside the frame, as it always did. */ .lb-console .cc-bill__history .lb-table { min-width: 39rem; } .lb-console .cc-bill__history .lb-table thead { background: var(--token-surface-secondary); border-bottom: 1px solid var(--line); } .lb-console .cc-bill__history .lb-table tbody { overflow-x: hidden; overflow-y: auto; } .lb-console .cc-bill__history .lb-table tbody:focus { outline: none; } .lb-console .cc-bill__history .lb-table tbody:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; } .lb-console .cc-bill__history .lb-table tr { display: grid; grid-template-columns: 8.1rem minmax(0, 4fr) 7.5rem minmax(0, 20fr) 9.6rem minmax(0, 52fr) 7rem minmax(0, 1fr) 6.7rem minmax(0, 23fr); } .lb-console .cc-bill__history .lb-table th, .lb-console .cc-bill__history .lb-table td { grid-column: span 2; min-width: 0; padding: 11px 16px; } .lb-console .cc-bill__history .lb-table th { border-bottom: 0; } .lb-console .cc-bill__history .lb-table td { font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .lb-console .cc-bill__history .lb-table td.lb-td--wrap, .lb-console .cc-bill__history .lb-table td:nth-child(3) { white-space: normal; } .lb-console .cc-bill__history .lb-table td.cc-bill__histnote { grid-column: 1 / -1; padding: 22px 14px; text-align: center; white-space: normal; color: var(--muted); } /* Where the frame is too narrow for five columns to be read side by side — a phone, or the card beside the sidebar on a small screen — each row folds to two lines on one template, the header's row with it, so nothing runs off the side and every heading still sits where its values do: the description and the amount, then the date, the payment details and the status. The frame is asked its own width, not the window's. */ @container (max-width: 639px) { .lb-console .cc-bill__history .lb-table { min-width: 0; } .lb-console .cc-bill__history .lb-table tr { grid-template-columns: 5.4rem minmax(0, 1fr) auto; grid-template-areas: "desc desc amount" "date pay status"; gap: 2px 8px; padding: 10px 14px; } .lb-console .cc-bill__history .lb-table tbody tr { border-bottom: 1px solid var(--line); } .lb-console .cc-bill__history .lb-table tbody tr:last-child { border-bottom: 0; } .lb-console .cc-bill__history .lb-table th, .lb-console .cc-bill__history .lb-table td { padding: 0; border-bottom: 0; } /* On the narrowest phones a heading wraps rather than run under the next. */ .lb-console .cc-bill__history .lb-table th { white-space: normal; } .lb-console .cc-bill__history .lb-table :is(th, td):nth-child(1) { grid-area: date; } .lb-console .cc-bill__history .lb-table :is(th, td):nth-child(2) { grid-area: desc; } .lb-console .cc-bill__history .lb-table :is(th, td):nth-child(3) { grid-area: pay; } .lb-console .cc-bill__history .lb-table :is(th, td):nth-child(4) { grid-area: amount; text-align: right; } .lb-console .cc-bill__history .lb-table :is(th, td):nth-child(5) { grid-area: status; text-align: right; } .lb-console .cc-bill__history .lb-table td:nth-child(1), .lb-console .cc-bill__history .lb-table td:nth-child(3), .lb-console .cc-bill__history .lb-table td:nth-child(5) { font-size: 0.8rem; color: var(--muted); } /* A date longer than its column — another language's — wraps under itself rather than run under the payment details. */ .lb-console .cc-bill__history .lb-table td:nth-child(1) { white-space: normal; } .lb-console .cc-bill__history .lb-table td.cc-bill__histnote { grid-area: 1 / 1 / -1 / -1; padding: 12px 0; font-size: 0.9rem; text-align: center; } } /* The narrowest phones: the payment details take a line of their own, so they are read whole instead of broken across a column too thin for them. */ @container (max-width: 299px) { .lb-console .cc-bill__history .lb-table tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc amount" "date status" "pay pay"; } } /* ── PAYMENT METHODS, IN THE SHARED SIDE PANEL ──────────────────────────── Each saved card as a row: the card printed exactly as the page prints the Default one, the shared badge on the Default, and the row's own actions hard right — the shared quiet buttons. Hairlines between rows, as the history table has. Nothing else here is new. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__cards { list-style: none; margin: 0; padding: 0; } .lb-console .cc-bill__cardrow { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); } .lb-console .cc-bill__cardrow:first-child { padding-top: 0; } .lb-console .cc-bill__cardinfo { flex: 1 1 200px; min-width: 0; } .lb-console .cc-bill__cardinfo .cc-bill__cardline { margin-top: 0; } .lb-console .cc-bill__cardacts { display: flex; flex-wrap: wrap; gap: 8px; flex: none; } /* ── THE ADD FUNDS DIALOG ───────────────────────────────────────────────── The console's own dialog — .cc-modal-backdrop, the same panel, the same focus trap — carrying the shared segmented control as the amount picker and one money field for Other. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-bill__field { gap: 7px; } /* The SHARED segmented control, restated where the reference differs: a rounded rectangle rather than a pill, and an active segment that is the product's ink with the card's own white on it. The pressed state is still aria-pressed, so the styling and the announcement cannot drift. */ .lb-console .cc-bill__seg { padding: 3px; border-radius: 10px; background: var(--card, #fff); flex-wrap: wrap; } .lb-console .cc-bill__seg .cc-seg__btn { border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 400; } .lb-console .cc-bill__seg .cc-seg__btn[aria-pressed="true"] { background: var(--text); color: var(--card, #fff); box-shadow: none; font-weight: 500; } @media (hover: hover) { .lb-console .cc-bill__seg .cc-seg__btn:not([aria-pressed="true"]):not([disabled]):hover { background: rgba(17, 24, 39, 0.05); } } /* The symbol is printed BESIDE the field rather than typed into it: a currency mark somebody can delete is a currency mark somebody will. */ .lb-console .cc-bill__money { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius-md, 10px); } .lb-console .cc-bill__money:focus-within { border-color: rgba(17, 24, 39, 0.42); } .lb-console .cc-bill__money:has(.cc-bill__moneyinput[aria-invalid="true"]) { border-color: rgba(185, 28, 28, 0.45); } .lb-console .cc-bill__moneysym { flex: none; color: var(--muted); font-size: 0.95rem; } /* The whole height of the field is the input, so a tap anywhere on it but the currency sign focuses it — on a phone, the 46px field is the touch target. */ .lb-console .cc-bill__moneyinput { flex: 1; min-width: 0; align-self: stretch; border: 0; outline: none; background: none; font: inherit; font-size: 0.95rem; color: var(--text); font-variant-numeric: tabular-nums; } /* ── NARROW ─────────────────────────────────────────────────────────────── At 700 and below the two cards stack, and the figure and its action stop competing for one line. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .lb-console .cc-bill__top { grid-template-columns: minmax(0, 1fr); } .lb-console .cc-bill__balance { align-items: stretch; } .lb-console .cc-bill__primary { width: 100%; justify-content: center; min-height: 44px; } .lb-console .cc-bill__manage { align-items: stretch; width: 100%; } .lb-console .cc-bill__secondary { width: 100%; justify-content: center; min-height: 44px; } .lb-console .cc-bill__cardacts .btn-quiet { min-height: 44px; } /* The payment-methods panel's footer gets the same floor, its buttons sharing the row the way the Add funds sheet's do. Grown from their own width, never squeezed below it: "Add payment method" stays one line. */ .lb-console .cc-bill__sheetbtn { flex: 1 1 auto; justify-content: center; min-height: 44px; } .lb-console .cc-bill__seg { width: 100%; } .lb-console .cc-bill__seg .cc-seg__btn { flex: 1; min-height: 44px; padding: 8px 6px; } } @media (max-width: 380px) { /* The figure gives up a step rather than the layout giving up a column. */ .lb-console .cc-bill__amount { font-size: 1.8rem; } .lb-console .cc-bill__card { padding: 16px !important; } .lb-console .cc-bill__seg .cc-seg__btn { padding: 8px 2px; font-size: 0.8rem; } } /* Colour is not available, so the states are carried by the system's own two colours and by the shapes and words that were always there. */ @media (forced-colors: active) { .lb-console .cc-bill__seg .cc-seg__btn[aria-pressed="true"] { border: 2px solid; } .lb-console .cc-bill__brand { border: 1px solid; } .lb-console .cc-bill__tile { border: 1px solid; } .lb-console .cc-bill__money { border: 1px solid; } } /* ══════════════════════════════════════════════════════════════════════ NEEDS ATTENTION — Gate 7, Master Plan v4 Part 22 Every rule here is scoped to .lb-console and prefixed cc-attn-, so this screen composes the shared system rather than redefining any of it. The type and neutral border follow the existing console tokens. Needs Attention's switch is scoped here so the shared tabs elsewhere keep their existing appearance. ══════════════════════════════════════════════════════════════════════ */ /* ── The switch sits above the card, centered in the content column ──── */ .lb-console .cc-attn-bar { display: flex; justify-content: center; margin: 0 0 14px; } .lb-console .cc-attn-switch { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; margin: 0; padding: 3px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 9999px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 2px 8px -4px rgba(28, 24, 16, 0.16); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .lb-console .cc-attn-switch .cc-tab { flex: 0 1 auto; min-height: 34px; padding: 6px 13px; border: 0; border-radius: 9999px; background: transparent; color: #6b7280; font-family: var(--cc-font-ui, var(--font-ui)); font-size: 0.85rem; font-weight: 500; line-height: 1.2; white-space: nowrap; } .lb-console .cc-attn-switch .cc-tab.is-on { background: rgba(255, 255, 255, 0.98); color: #111827; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); } .lb-console .cc-attn-total { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; text-align: right; } /* ── The underline tab ───────────────────────────────────────────────── */ .lb-console .cc-tabs--underline { gap: 22px; margin: 0; border-bottom: 1px solid var(--line, #e5e7eb); flex: 1 1 auto; } .lb-console .cc-tab--underline { padding: 6px 2px 12px; border: 0; border-radius: 0; background: none; font-size: 0.95rem; /* The active tab is heavier AND underlined. Weight alone would be a colour-free signal that a reader still has to compare tabs to notice; the rule under it is the one that reads at a glance. */ border-bottom: 2px solid transparent; margin-bottom: -1px; } .lb-console .cc-tab--underline.is-on { background: none; color: var(--token-text, #111827); font-weight: 600; border-bottom-color: var(--token-text, #111827); } .lb-console .cc-tab--underline:hover { color: var(--token-text, #111827); } .lb-console .cc-tab--underline:focus-visible { outline: 2px solid var(--accent, #111827); outline-offset: 2px; border-radius: 4px; } /* ── The Campaign group cards ────────────────────────────────────────── */ .lb-console .cc-attn-grid { /* Flex rather than a fractional grid track. `1fr` means "at least min-content", so one long unbreakable Campaign name would set the track's floor and starve its neighbour — the trap this stylesheet forbids everywhere. `flex: 1 1 240px` gives the same behaviour (cards fill the row they are in, wrapping when they no longer fit) with a real floor instead of a content-derived one. */ display: flex; flex-wrap: wrap; gap: 14px; } .lb-console .cc-attn-grid--follow-up, .lb-console .cc-attn-grid--not-answered { gap: 20px; } /* ── Nothing waiting: the empty tray (owner, 1 Oct) ───────────────────── The owner's reference is the authority for where the group sits: centred across, and down the room under the tabs at the reference's own proportion — 132px of room above the tray's marks to 228px below the sentence, the group a little above the middle. The group is the card body's own child under the tabs; on a desktop it fills the room the grown panel leaves (the one-panel rule, near the top of this file), and on a phone — where panels do not grow — the 360px the "No campaigns yet" hero uses there. Heading and sentence come from the shared big-empty-state rule (CAMPAIGNS PAGE). */ .lb-console .cc-attn-empty { flex: 1 0 auto; min-height: 360px; justify-content: flex-start; padding: 0 24px; } /* The room is shared out by the two spacers at the reference's 132:228. The 77px start on the lower one is what the tab bar's 18px margin and the render's own white margin above its marks already put above the group: with it, the VISIBLE marks — not the file's edge — land where the reference puts them, at any height of room. */ .lb-console .cc-attn-empty::before, .lb-console .cc-attn-empty::after { content: ""; } .lb-console .cc-attn-empty::before { flex: 132 1 0; } .lb-console .cc-attn-empty::after { flex: 228 1 77px; } .lb-console .cc-attn-empty::before { flex-grow: 3; } .lb-console .cc-attn-empty::after { flex-grow: 2; } /* The render is a square of near-white paper round the tray. 200px wide draws the tray the reference's size; the negative margin takes back the paper below its shadow, so the heading sits the reference's 33px under the tray itself. */ .lb-console .cc-attn-empty__art { display: block; margin-bottom: -15px; } /* The paper is 253-254 grey on the card's 255 white, which a sharp screen shows as a pale square plate behind the tray (measured, 1 Oct). Two things remove it and leave the tray as drawn: a 1% lift takes the paper to the card's white (the tray's own greys move by at most 2 of 255 — its silhouette and shading are untouched), and the outer 8% of the square — paper only, levels 251-255; the tray, its marks and its shadow all lie inside it — fades into the card, so no edge is left either. */ .lb-console .cc-attn-empty__art img { display: block; width: 200px; height: auto; filter: brightness(1.01); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; } .lb-console .cc-attn-empty .cc-attn-empty__art img { transform: translateY(21px) scale(0.644); } /* Held unshown until the render can be drawn with it (holdHeroForArt). */ .lb-console .cc-attn-empty--waiting { visibility: hidden; } /* One line on a desktop, as the owner's reference shows it; a phone wraps. */ .lb-console .cc-attn-empty .lb-empty__text { max-width: 36rem; } /* A phone draws the render at 160px, so its margins — and the start they give the lower spacer — scale with it. The narrower side padding keeps the heading on one line at 375px, as the reference sets it. */ @media (max-width: 560px) { .lb-console .cc-attn-empty { padding: 0 8px; } .lb-console .cc-attn-empty::after { flex-basis: 64px; } .lb-console .cc-attn-empty__art { margin-bottom: -6px; } .lb-console .cc-attn-empty__art img { width: 160px; } .lb-console .cc-attn-empty .cc-attn-empty__art img { transform: translateY(11px) scale(0.805); } } .lb-console .cc-attn-card { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; /* A flex child defaults to min-width:auto, which is the same starvation by another name. */ min-width: 0; padding: 16px 18px; border: 1px solid var(--token-text, #111827); border-radius: 14px; background: var(--token-text, #111827); color: var(--card, #fff); text-align: left; cursor: pointer; font: inherit; } .lb-console .cc-attn-card:hover { opacity: 0.92; } .lb-console .cc-attn-card:focus-visible { outline: 2px solid var(--accent, #111827); outline-offset: 3px; } .lb-console .cc-attn-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .lb-console .cc-attn-card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.25; } .lb-console .cc-attn-card__sub { font-size: 0.85rem; /* Against the dark card, not a token meant for a light ground. */ color: rgba(255, 255, 255, 0.72); overflow-wrap: anywhere; } /* The populated follow-up cards keep their own compact width, even alone. */ .lb-console .cc-attn-card--compact, .lb-console .cc-attn-card--follow-up { flex: 0 1 256px; width: 256px; max-width: 100%; min-height: 86px; display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto auto; align-content: center; gap: 9px 7px; padding: 14px 17px; border: 0; border-radius: 17px; background: #000; color: #fff; } .lb-console .cc-attn-card--compact .cc-attn-card__head { grid-column: 1; } .lb-console .cc-attn-card--compact .cc-attn-card__title { font-size: 1.0625rem; } .lb-console .cc-attn-card--compact .cc-attn-card__sub { grid-column: 1; display: flex; align-items: center; gap: 7px; color: #ff2d55; font-size: 0.875rem; font-weight: 600; line-height: 1.25; } .lb-console .cc-attn-card__alert { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #e00004; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .lb-console .cc-attn-card--compact .cc-attn-card__alert { width: 17px; height: 17px; font-size: 13.5px; } .lb-console .cc-attn-card__chevron { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #fff; font-size: 28px; font-weight: 600; line-height: 1; } .lb-console .cc-attn-card--compact .cc-attn-card__chevron { font-size: 32px; } .lb-console .cc-attn-card--not-answered .cc-attn-card__sub { color: #a36800; } .lb-console .cc-attn-card--not-answered .cc-attn-card__alert { background: #a3661b; } .lb-console .cc-attn-card--not-answered .cc-attn-card__phone-x { width: 12px; height: 12px; stroke-width: 2.1; transform: translateY(0.3px); } /* Detail headers sit inside the panel; the centered switch sits outside it. */ .lb-console .section-card .cc-attn-bar { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 18px; } .lb-console .section-card .cc-attn-bar .cc-attn-total { margin: 0; text-align: left; } .lb-console .cc-attn-detail--refined .cc-attn-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: var(--token-text, #111827); font-family: var(--cc-font-ui, var(--font-ui)); font-weight: 500; } .lb-console .cc-attn-back__chevron { display: inline-grid; place-items: center; flex: none; width: 16px; height: 24px; font-size: 0; transform: translateY(4px); } .lb-console .cc-attn-back__chevron::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(135deg); } /* Campaign detail's leads table is drawn by these same rules (owner, 6 October 2026): one frame, one header band, one cell rhythm and one View details for the two pages that list the same leads. Its selector is listed FIRST in each group, so every rule still ends on this page's own selector. */ .lb-console .cc-camp-detail__leads .cc-lead-scroll, .lb-console .cc-attn-detail--refined .cc-attn-scroll { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; background: #fff; } .lb-console .cc-attn-detail--refined .lb-table { width: 100%; } .lb-console .cc-camp-detail__leads .lb-table th, .lb-console .cc-attn-detail--refined .lb-table th { padding: 13px 16px; background: #f8f9fb; color: var(--muted, #6b7280); font-size: 0.75rem; letter-spacing: 0.04em; } .lb-console .cc-camp-detail__leads .lb-table td, .lb-console .cc-attn-detail--refined .lb-table td { padding: 13px 16px; vertical-align: middle; } .lb-console .cc-camp-detail__leads .lb-table .cc-attn-status-cell, .lb-console .cc-attn-detail--refined .lb-table .cc-attn-status-cell { text-align: center; } .lb-console .cc-camp-detail__leads .lb-table tbody tr:last-child td, .lb-console .cc-attn-detail--refined .lb-table tbody tr:last-child td { border-bottom: 0; } .lb-console .cc-camp-detail__leads .cc-attn-view-details, .lb-console .cc-attn-detail--refined .cc-attn-view-details { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; border-color: #000 !important; border-radius: 999px; background: #000 !important; box-shadow: none !important; color: #fff !important; } .lb-console .cc-attn-view-details__chevron { display: inline-grid; place-items: center; flex: none; width: 12px; height: 16px; font-size: 0; transform: translateY(1.5px); } .lb-console .cc-attn-view-details__chevron::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } /* ── The group table ─────────────────────────────────────────────────── */ /* §22.1 asks for bounded vertical scrolling for large lists, so a Campaign with four hundred unanswered leads does not push the action off screen. */ .lb-console .cc-attn-scroll { max-height: 60vh; overflow-y: auto; } .lb-console .cc-attn-tick { width: 44px; } .lb-console .cc-attn-act { text-align: right; white-space: nowrap; } .lb-console .cc-attn-counts { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; } .lb-console .cc-attn-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .lb-console .cc-attn-blocked { margin: 0; flex: 1 1 240px; } /* ── The status chip ─────────────────────────────────────────────────── */ /* Fully specified here rather than composed from .cc-pill, which has modifiers in this sheet but no base rule anywhere — a chip built on it would inherit nothing and render as bare text. The two states differ in FILL as well as wording, never in hue alone. */ .lb-console .cc-attn-status { display: inline-block; padding: 3px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; font-size: 0.78rem; white-space: nowrap; color: var(--muted, #6b7280); } .lb-console .cc-attn-status--need_follow_up { border-color: var(--token-text, #111827); background: var(--token-text, #111827); color: var(--card, #fff); } /* The pill as this page's group tables draw it — and, in the same shape, every status pill on Campaign detail (owner, 6 October 2026), so the two pages' pills cannot drift apart. Only the fills below differ. A Campaign pill with no fill of its own keeps the plain chip above: a hairline and grey words. */ .lb-console .cc-camp-detail__leads .cc-attn-status, .lb-console .cc-attn-detail--follow-up .cc-attn-status--need_follow_up, .lb-console .cc-attn-detail--not-answered .cc-attn-status--not_answered { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; box-sizing: border-box; padding: 5px 12px; } .lb-console .cc-camp-detail__leads .cc-attn-status--need_follow_up, .lb-console .cc-attn-detail--follow-up .cc-attn-status--need_follow_up { border-color: #e00004; background: #e00004; color: #fff; } .lb-console .cc-attn-status--not_answered { border-style: dashed; } .lb-console .cc-camp-detail__leads .cc-attn-status--not_answered, .lb-console .cc-attn-detail--not-answered .cc-attn-status--not_answered { border: 1px solid #a36800; background: #a36800; color: #fff; } /* ── The detail drawer ───────────────────────────────────────────────── */ .lb-console .cc-facts { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; } .lb-console .cc-fact { display: flex; flex-direction: column; gap: 2px; } .lb-console .cc-fact dt { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #6b7280); } .lb-console .cc-fact dd { margin: 0; color: var(--token-text, #111827); overflow-wrap: anywhere; } .lb-console .cc-attn-block { margin: 0 0 18px; } .lb-console .cc-attn-h { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #6b7280); font-weight: 600; } .lb-console .cc-attn-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .lb-console .cc-attn-ul li { overflow-wrap: anywhere; } .lb-console .cc-attn-note { width: 100%; resize: vertical; } /* ══════════════════════════════════════════════════════════════════════════ VIEW RESULT, AS A CENTRED DIALOG (owner, 4 October 2026) The SAME #drawer — its backdrop, its X, Escape, focus return, the body openLeadResult fills and the refresh that re-reads a pending result — drawn as a centred card when openDrawer is given the 'dialog' look. Every other drawer keeps the shared right-hand panel and phone sheet. Built from what is already here: the shared .lb-drawer-backdrop (its tint and blur, untouched), the import dialog's card (.cc-modal__panel's radius, border and shadow) and this console's type. These selectors outrank both shared shapes — the panel and the 720px sheet — so one set of rules holds at every width, and a phone gets the same card with smaller margins, not a different design. The result's own wording and order are untouched: only how the sections are set changes, from grey capitals to the bold headings and dividers the owner's reference shows. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .lb-drawer[data-look="dialog"] { top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: min(560px, calc(100vw - 48px)); height: fit-content; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-xl, 16px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06); opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 200ms ease, transform 260ms cubic-bezier(.32, .72, .36, 1); } .lb-console .lb-drawer[data-look="dialog"][data-open="true"] { opacity: 1; transform: none; } .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__grip { display: none; } .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__head { padding: 24px 24px 4px; border-bottom: 0; } /* glass.css sets every h2 to 400 !important; this one title opts out. */ .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__title { font-size: 1.5rem; font-weight: 600 !important; line-height: 1.25; color: var(--text, #111827); } /* The body is the dialog's one scroll, and its basis is its content — never the shared drawer's flex: 1, a 0% basis. The dialog is as tall as its content (fit-content), and WebKit sizes that from the body's basis: on an iPhone the 0% left a card the height of its header, its result clipped and nothing to scroll (owner, 5 October 2026). Held by the dialog's max-height, the body shrinks (min-height: 0) and scrolls under a finger. */ .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 24px 24px; } /* Needs Attention's actions stay the dialog's own footer; on a phone they wrap onto a second line rather than run off the card. */ .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__foot { flex-wrap: wrap; } /* Each section: a bold heading over plain text, a hairline under it. */ .lb-console .lb-drawer[data-look="dialog"] .cc-facts { gap: 0; margin: 0; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact, .lb-console .lb-drawer[data-look="dialog"] .cc-attn-block { gap: 4px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line, #e5e7eb); } /* Only the dialog's first section sits closer to the title: Needs Attention's draws more than one list of facts. */ .lb-console .lb-drawer[data-look="dialog"] .cc-facts:first-of-type > .cc-fact:first-child { padding-top: 8px; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact dt, .lb-console .lb-drawer[data-look="dialog"] .cc-attn-h { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--text, #111827); } .lb-console .lb-drawer[data-look="dialog"] .cc-attn-h { margin-bottom: 6px; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact dd, .lb-console .lb-drawer[data-look="dialog"] .cc-attn-ul { font-size: 0.9375rem; line-height: 1.55; } /* The disposition leads, as a filled pill: the console's one red for a follow-up, its primary black for a decline and its Not answered gold for a call nobody answered, white on each. The pill is the value itself — the same label in the same

— so only how the result is set changes. Only this dialog lifts it above the Summary: the result panel's own order is untouched, and the first section's smaller top space moves up with it. */ .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone] { order: -1; padding-top: 8px; } .lb-console .lb-drawer[data-look="dialog"] .cc-facts:has(> .cc-fact[data-tone]) > .cc-fact:first-child:not([data-tone]) { padding-top: 14px; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="follow-up"] dd, .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="not-interested"] dd, .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="not-answered"] dd { align-self: flex-start; margin-top: 4px; padding: 6px 16px; border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: #fff; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="follow-up"] dd { background: #b91c1c; } .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="not-interested"] dd { background: var(--token-btn-action-bg, #101012); } /* The colour this console already gives Not answered (.cc-attn-status). */ .lb-console .lb-drawer[data-look="dialog"] .cc-fact[data-tone="not-answered"] dd { background: #a36800; } /* The transcript is the last section, so no hairline closes it. Its turns sit in one bordered box that scrolls by itself, so a long call never makes the dialog taller than the window. */ .lb-console .lb-drawer[data-look="dialog"] #resultTranscript .cc-attn-block { padding-bottom: 0; border-bottom: 0; } /* Needs Attention's Call result ends with the owner's note, so there the transcript keeps its hairline and the note, the last section, draws none. */ .lb-console .lb-drawer[data-look="dialog"] [data-attn-item] #resultTranscript .cc-attn-block { padding-bottom: 14px; border-bottom: 1px solid var(--line, #e5e7eb); } .lb-console .lb-drawer[data-look="dialog"] [data-attn-item] > .cc-attn-block:last-child { padding-bottom: 0; border-bottom: 0; } /* A Not answered record's saved reason ("The call was not answered.") is its disposition's caption: under the pill, above the hairline. */ .lb-console .lb-drawer[data-look="dialog"] [data-attn-item] > .cc-facts:has(+ .lb-hint) > .cc-fact:last-child { padding-bottom: 8px; border-bottom: 0; } .lb-console .lb-drawer[data-look="dialog"] [data-attn-item] > .cc-facts + .lb-hint { margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line, #e5e7eb); } .lb-console .lb-drawer[data-look="dialog"] .cc-result-turns { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-md, 10px); } /* The time beside the speaker's name, not centred on a long turn. */ .lb-console .lb-drawer[data-look="dialog"] .cc-result-turns .cc-event { align-items: baseline; } /* A phone: the same card, nearly the full width with the console's 16px gutter each side, and one scroll — the dialog's — rather than a box scrolling inside a box under a thumb. A long result takes about seven tenths of the screen, so the page still shows around it; a short one is only as tall as its content (owner, 5 October 2026). */ @media (max-width: 560px) { .lb-console .lb-drawer[data-look="dialog"] { width: calc(100vw - 32px); max-height: 72vh; max-height: min(72dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); } .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__head { padding: 18px 18px 2px; } .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__title { font-size: 1.375rem; } .lb-console .lb-drawer[data-look="dialog"] .lb-drawer__body { padding: 4px 18px 20px; } .lb-console .lb-drawer[data-look="dialog"] .cc-result-turns { max-height: none; overflow-y: visible; padding: 12px; } } /* ── Small screens ───────────────────────────────────────────────────── */ /* The table scrolls inside its wrapper on small screens. */ @media (max-width: 560px) { .lb-console .cc-attn-switch .cc-tab { padding-inline: 10px; font-size: 0.8rem; } .lb-console .cc-attn-card { flex-basis: 100%; } .lb-console .cc-attn-card--compact { flex: 0 1 256px; } .lb-console .cc-attn-scroll { max-height: 70vh; } } @media (pointer: coarse) { .lb-console .cc-camp-detail__leads .cc-attn-status, .lb-console .cc-attn-detail--follow-up .cc-attn-status--need_follow_up { min-height: 44px; } .lb-console .cc-attn-detail--not-answered .cc-attn-status--not_answered { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .lb-console .cc-attn-card { transition: none; } } @media (forced-colors: active) { .lb-console .cc-attn-card { border: 1px solid; } .lb-console .cc-tab--underline.is-on { border-bottom: 2px solid; } .lb-console .cc-attn-switch .cc-tab.is-on { border: 2px solid; } .lb-console .cc-attn-status { border: 1px solid; } } /* ══════════════════════════════════════════════════════════════════════ CAMPAIGN DETAIL — THE OWNER'S LAYOUT (6 October 2026) The page behind a Campaign card, laid out after the owner's reference and built from what is already here: Needs Attention's table, pills and View details (its rules above carry this page's selector, so the two pages share one definition), the console's one card shadow, and the platform's semantic colours, read as tokens with their values as the fallback — the pattern this file already uses for --lds-color-green. Every rule is scoped to this page's own classes. ══════════════════════════════════════════════════════════════════════ */ /* ── The header's state pill ───────────────────────────────────────────── Sized from the line it sits on (.page-sub), as the reference draws the two at one size, and one width for the short words, as its Completed and Ongoing share one. Completed is the platform's success green; Ongoing — running, by the Dashboard's rule — its indigo; every other state its inactive grey. White on that green measures about 2.2:1, the trade the saved-language dots (.cc-v3__dot) already state; the word is the state, so the fill is never the only signal. */ .lb-console .lb-page-head .page-sub .cc-camp-state { display: inline-flex; align-items: center; justify-content: center; min-width: 7.5em; min-height: 1.6em; box-sizing: border-box; /* With the space after it, the reference's ~10px to the words. */ margin-right: 6px; padding: 0 1em; border-radius: 999px; background: var(--lds-color-gray, #8E8E93); color: #fff; line-height: 1.2; white-space: nowrap; vertical-align: middle; } .lb-console .lb-page-head .page-sub .cc-camp-state[data-state="completed"] { background: var(--lds-color-green, #34C759); } .lb-console .lb-page-head .page-sub .cc-camp-state[data-state="running"] { background: var(--lds-color-indigo, #5856D6); } /* ── One row of five cards: the four counters, then the Notes ─────────── The reference's row: Leads, Called, Still to do, Do not call and the Campaign's Notes, five cards of one width. The Notes card takes a fifth of the row less its share of the four gaps, so the counters' grid beside it divides the rest into four cards of exactly that width. */ .lb-console .cc-camp-detail__summary { --cc-camp-detail-gap: 24px; display: flex; align-items: stretch; gap: var(--cc-camp-detail-gap); margin: 0 0 24px; } .lb-console .cc-camp-detail__summary > .cc-stats { flex: 1 1 0; min-width: 0; gap: var(--cc-camp-detail-gap); margin: 0; } .lb-console .cc-camp-detail__summary > .cc-camp-notes { flex: 0 0 calc((100% - 4 * var(--cc-camp-detail-gap)) / 5); min-width: 0; display: flex; flex-direction: column; margin: 0; } /* Each card: its label in the page's ink and in the words as written — not the shared small capitals — and the figure large beneath it, as the reference sets them. A counter's note keeps its small grey line. */ .lb-console .cc-camp-detail__summary .stat-card, .lb-console .cc-camp-detail__summary > .cc-camp-notes { padding: 9px 19px 11px !important; border-radius: 12px; } .lb-console .cc-camp-detail__summary .cc-stat { display: block; } .lb-console .cc-camp-detail__summary .stat-label, .lb-console .cc-camp-detail__summary > .cc-camp-notes .section-title { margin: 0 !important; color: var(--text, #111827); font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: normal !important; text-transform: none !important; } .lb-console .cc-camp-detail__summary .stat-value { margin-top: 5px; font-size: 2.375rem !important; line-height: 1 !important; } .lb-console .cc-camp-detail__summary .cc-stat__note { margin-top: 4px; } /* The Notes card sets its words as a counter sets its note. Beside the counters it adds no height of its own: the row is as tall as its counters, and long Notes scroll inside their card rather than stretching all five. */ .lb-console .cc-camp-detail__summary > .cc-camp-notes .section-head { margin: 0 0 4px; } .lb-console .cc-camp-detail__summary > .cc-camp-notes .cc-card__body { flex: 1 1 auto; min-height: 2.7em; contain: size; overflow-y: auto; overscroll-behavior: contain; font-size: 0.74rem; line-height: 1.35; color: var(--muted, #6b7280); } .lb-console .cc-camp-detail__summary > .cc-camp-notes .cc-card__body > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } /* Too narrow for five across: two counters a row (the shared .cc-stats rule) and the Notes under them at full width, as tall as their words. */ @media (max-width: 1180px) { .lb-console .cc-camp-detail__summary { flex-direction: column; } .lb-console .cc-camp-detail__summary > .cc-stats, .lb-console .cc-camp-detail__summary > .cc-camp-notes { flex: none; } .lb-console .cc-camp-detail__summary > .cc-camp-notes .cc-card__body { contain: none; min-height: 0; overflow-y: visible; } } /* ── The leads ────────────────────────────────────────────────────────── */ /* A row's first lines share one baseline — a name, a date, its pills and View details — so a note under one cell never lifts the pills beside it out of line. A row without notes sits as Needs Attention's do. */ .lb-console .cc-camp-detail__leads .lb-table td { vertical-align: baseline; } /* No lead in view can be ticked, so the tick column is not drawn. */ .lb-console .cc-camp-detail__leads--nopick .cc-lead__pick-cell { display: none; } /* A date never breaks inside itself. */ .lb-console .cc-camp-detail__leads .cc-lead__when { white-space: nowrap; } /* Contacted: the platform's success green. Not contacted: its inactive grey. Both in Needs Attention's pill shape, white-lettered like its two. */ .lb-console .cc-camp-detail__leads .cc-attn-status--contacted { border-color: var(--lds-color-green, #34C759); background: var(--lds-color-green, #34C759); color: #fff; } .lb-console .cc-camp-detail__leads .cc-attn-status--not_contacted { border-color: var(--lds-color-gray, #8E8E93); background: var(--lds-color-gray, #8E8E93); color: #fff; } /* The one note a pill still has — Result's "being prepared" and its kin — starts a little under it, and wraps between words only, so a phrase is never split inside itself. */ .lb-console .cc-camp-detail__leads .cc-attn-status-cell .lb-row__sub { margin-top: 4px; overflow-wrap: normal; } /* The tick column is its 44px target and no more. */ .lb-console .cc-camp-detail__leads .lb-table .cc-lead__pick-cell { padding-left: 4px; padding-right: 0; } /* The row's actions stack at the column's end: View details, then the quieter Do not call under it — one column as narrow as the reference's single View details allows. */ .lb-console .cc-camp-detail__leads .cc-lead__act > .btn-sm { display: flex; width: fit-content; margin-left: auto; } .lb-console .cc-camp-detail__leads .cc-lead__act > .btn-sm + .btn-sm { margin-top: 4px; } /* Under the leads: §20.6's sentence, alone on its line since the page lost its retry button (owner, 8 October 2026). The room under it is the floating Ask Agent launcher's corner (assistant.css: 24px from the corner, about 38px tall): at the end of a long list the launcher would otherwise sit over the sentence. */ .lb-console .cc-camp-detail__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 44px; } .lb-console .cc-camp-detail__foot > .lb-hint { flex: 1 1 260px; margin: 0; } /* A phone: the row reflows as it always has (CAMPAIGN DETAIL, earlier in this file). The table's cell rhythm above is for the table; a stacked row keeps its own, an empty cell is not drawn, and a pill starts its line. */ @media (max-width: 720px) { .lb-console .cc-camp-detail__leads .lb-table td { padding: 2px 0; } .lb-console .cc-camp-detail__leads .lb-table td:empty { display: none; } .lb-console .cc-camp-detail__leads .lb-table .cc-attn-status-cell, .lb-console .cc-camp-detail__leads .lb-table .cc-attn-act { text-align: left; } .lb-console .cc-camp-detail__leads .lb-table td.cc-attn-act { padding-top: 8px; } .lb-console .cc-camp-detail__leads .cc-lead__act > .btn-sm { margin-left: 0; } } @media (forced-colors: active) { .lb-console .lb-page-head .page-sub .cc-camp-state { border: 1px solid; } } /* ══════════════════════════════════════════════════════════════════════ TRASH BIN — Gate 8 Package B, Master Plan v4 Part 25 No approved Trash reference screenshot exists in the design pack, so this composes the shared system rather than inventing a look for it: the same section card, the same facts list the Needs Attention drawer uses, the same buttons, the same empty state. Every rule is scoped to .lb-console and prefixed cc-trash-, and no shared class is redefined. ══════════════════════════════════════════════════════════════════════ */ .lb-console .cc-trash-note { margin: 0 0 16px; } /* Flex rather than a fractional grid track: `1fr` means "at least min-content", so one long unbreakable Campaign name would set the track's floor and starve the card beside it. This stylesheet forbids that everywhere. */ .lb-console .cc-trash-grid { display: flex; flex-wrap: wrap; gap: 14px; } /* ── THE SAME TILE A LIVE CAMPAIGN GETS ─────────────────────────────── Since the owner's Gate 5B correction the Trash Bin is a tab of the Campaigns page, and its cards are drawn as Campaign cards: the article carries .cc-camp-card and its body carries .cc-camp-card__tile, so the dark tile, the title, the overflow menu and the caption slot are the Campaign card's own rules. What is Trash-specific is only the caption's meaning — the countdown — and it sits under the tile where a Waiting card's queue place sits. */ .lb-console .cc-trash-card { /* A flex child defaults to min-width:auto, which is starvation by another name. */ min-width: 0; } .lb-console .cc-trash-card__title { overflow-wrap: anywhere; } .lb-console .cc-trash-card__due { margin: 0; } /* The countdown. Never colour alone: the word carries the meaning and the weight reinforces it, so a reader who cannot separate hues still reads "Past its 30 days" rather than a red number. */ .lb-console .cc-trash-due { font-size: 0.9rem; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; } .lb-console .cc-trash-due--over { font-weight: 600; color: var(--token-text, #111827); } /* The permanent-delete confirmation is the only compact, centred Trash dialog. */ .lb-console .cc-trash-purge-modal { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(5px); } .lb-console .cc-trash-purge-modal__card { width: min(400px, 100%); padding: 24px; border: 1px solid var(--line, #e5e7eb); border-radius: 16px; background: var(--card, #fff); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2); } .lb-console .cc-trash-purge-modal__card h2 { margin: 0 0 20px; color: var(--text, #111827); font-size: 1.05rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .lb-console .cc-trash-purge-modal__actions { display: flex; gap: 10px; } .lb-console .cc-trash-purge-modal__actions button { flex: 1; min-height: 42px; justify-content: center; } .lb-console .cc-trash-purge-modal__actions .btn-danger { border-color: #b91c1c; background: #b91c1c; color: #fff; } .lb-console .cc-trash-purge-modal__actions .btn-danger:hover { background: #991b1b; } .lb-console:has(.cc-trash-purge-modal) .cc-toasts { z-index: 5001; } /* Step 2's locked Sol Review: one calm, single-column card. The surrounding Agent setup shell and its Sources view keep their existing styles. */ .lb-console .cc-biz__solreview { width: min(680px, 100%); margin: 12px auto 0; overflow: hidden; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; background: var(--card, #fff); } .lb-console .cc-biz__solsection { padding: 0 24px; } .lb-console .cc-biz__solsection:first-child { padding-top: 20px; } .lb-console .cc-biz__solsection + .cc-biz__solsection { padding-top: 20px; } .lb-console .cc-biz__solsection:last-of-type { padding-bottom: 18px; } .lb-console .cc-biz__solsection h3 { margin: 0 0 8px; color: var(--token-text, #111827); font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .lb-console .cc-biz__solsection ul { margin: 0; padding-left: 22px; color: var(--token-text, #111827); } .lb-console .cc-biz__solsection li { margin: 3px 0; line-height: 1.45; } /* The card has no footer: its Continue is the step header's, top right. */ @media (max-width: 560px) { /* One card per row. The card already wraps its own long values, so the page body never scrolls sideways at 375px or 430px. */ .lb-console .cc-trash-card { flex-basis: 100%; } } @media (forced-colors: active) { .lb-console .cc-trash-card { border: 1px solid; } .lb-console .cc-trash-due--over { text-decoration: underline; } } /* ══════════════════════════════════════════════════════════════════════════ THE COLD CALLING SIDEBAR, AND WHY THESE OVERRIDES ARE SCOPED The rules being corrected live in labbie-dashboard-desktop.css, which frontend/dashboard.html also loads. Editing them there would restyle that product's sidebar too, which nobody asked for — so every rule below is scoped to `body.lb-console` and reaches only this console. If the platform later wants this treatment everywhere, these move up into the shared sheet and this block goes away; it is deliberately shaped to be liftable. The shared sheet's own `.nav-item.active` is already neutral (rgba(0,0,0,0.05)). The warm tint comes from the DESKTOP sheet overriding it with #f1ece2 !important, so these have to be `!important` too — they are answering an `!important`, not winning an ordinary cascade. ══════════════════════════════════════════════════════════════════════════ */ /* Labels and icons in black, resting and active alike. The desktop sheet paints them #404656; a grey rail against black page text reads as disabled rather than as navigation. */ .lb-console .sidebar .nav-item, .lb-console .sidebar .nav-item:hover, .lb-console .sidebar .nav-item.active { color: #111827 !important; } .lb-console .sidebar .nav-item svg { color: inherit; } /* The selected row: neutral light grey, no warm tint. OPAQUE on purpose. The desktop sheet makes the rail transparent over a #f4efe4 page, so a translucent black — which is what the shared sheet uses — would pick that beige straight back up. Written rgb() rather than hex because ui-check reads any #f…/#e… fill on a .lb-/.btn- selector as a yellow or orange control; this is neither, and the notation says which. */ .lb-console .sidebar .nav-item.active { background: rgb(241, 241, 243) !important; } .lb-console .sidebar .nav-item:hover { background: rgba(17,24,39,0.04) !important; } /* Sign out is a bordered card rather than a bare row, and the hairline that sat above it is gone — the border already separates it, and the two together read as a rule plus a box for no reason. The element is removed from the markup; this keeps it gone if any sheet re-declares it. */ .lb-console .sidebar .sb-logout-divider { display: none !important; } .lb-console .sidebar .nav-item.logout { border: 1px solid var(--line, #e5e7eb) !important; background: var(--card, #fff) !important; color: #111827 !important; margin-top: 4px; } .lb-console .sidebar .nav-item.logout:hover { background: rgba(17,24,39,0.04) !important; color: #111827 !important; } /* ── Campaign stat tiles ──────────────────────────────────────────────── The six labels in black. The shared .stat-label is --muted, which is right for a dense dashboard and too quiet for six tiles that ARE the page head. */ .lb-console .cc-camp-stat .stat-label { color: #111827; } /* Not Contacted: the icon itself black. */ .lb-console .cc-camp-stat__icon[data-tone="neutral"] { color: #111827; } /* All six stat icons are drawn at 32px, centred on the 24px slot (owner, 8 October 2026): the five outcome tiles' filled badges (the i-stat-* symbols, which carry their own colours) and Total Campaign's target, which keeps its sidebar design at the same size. The grid and slot are unchanged. */ .lb-console .cc-camp-stat__icon .cc-i { width: 32px; height: 32px; } /* The target's outer ring fills less of its box than a badge's disc, so its box is larger for the two to read the same size (about 29px across), and its stroke is thinner so the line keeps its weight. */ .lb-console .cc-camp-stat__icon[data-tone="information"] .cc-i { width: 38px; height: 38px; stroke-width: 1.3; } /* The tone colours below are what an outcome icon drawn as a line would take; the i-stat-* badges set their own fills. */ .lb-console .cc-camp-stat__icon[data-tone="missed"] { color: #b91c1c; } .lb-console .cc-camp-stat__icon[data-tone="uninterested"] { color: #7C3AED; } /* ── The first-run megaphone ──────────────────────────────────────────── Sized here rather than in the artwork so the empty state keeps its own rhythm. .lb-empty__icon is the shared 48px icon pill; this is artwork, so the pill's ground, radius AND hairline border all go — the owner's render is shown unframed, as supplied. The render's background is TRANSPARENT — the owner replaced the earlier file precisely to remove the near-white square that showed around it — so there is no ground to hide and nothing here may put one back: no fill, no border, no radius, no shadow. `contain` rather than `cover`. The artwork occupies a square region inside a wider transparent canvas, so `cover` happened to work on this particular export by cropping only empty pixels — a coincidence of one file's margins, not a rule. `contain` cannot clip whatever the canvas turns out to be, and the slot is given the canvas's own 1507:1044 proportion so the megaphone still fills it rather than sitting in letterbox bars. */ .lb-console .cc-camp-empty__art { /* The reference's proportion: the render about as wide as the heading under it, not wider than the sentence. */ width: 160px; /* `height: auto` is load-bearing: .lb-empty__icon is the shared 48px icon pill, and an explicit height beats aspect-ratio. Without this the render is squashed into a 190x48 letterbox. */ height: auto; aspect-ratio: 1507 / 1044; max-width: 100%; display: block; margin: 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none; } .lb-console .cc-camp-empty__art img { width: 100%; height: 100%; display: block; object-fit: contain; } /* The plus sits before the label on both Add Campaign buttons. */ .lb-console .cc-camp-cta { display: inline-flex; align-items: center; gap: 8px; } .lb-console .cc-camp-cta__plus { width: 16px; height: 16px; stroke-width: 2; } /* ══════════════════════════════════════════════════════════════════════════ THE CAMPAIGN BUTTON SHAPE — A ROUNDED RECTANGLE, NOT A CAPSULE The platform's .btn-dark is a 999px pill. That is right for the small inline controls it was drawn for and wrong at this size: at 44px tall a 999px radius is a capsule with semicircular ends, which is not what the approved Campaign composition shows. So this is a RADIUS AND A SIZE, set on the Campaign CTA and on the creation card's own two actions, and nothing else about .btn-dark is touched — not its colour, not its type, not its states, and not the pill it still is everywhere else in the console. Both Add Campaign buttons — the page header's and the first run's — are the one campaignNewButton(), so they wear this together and cannot drift. The creation card's primary is given the same class for the same reason. ══════════════════════════════════════════════════════════════════════════ */ .lb-console .cc-camp-cta, .lb-console .cc-camp-create__actions > .btn-quiet, .lb-console .cc-camp-create__actions > .btn-dark { border-radius: 12px; min-height: 44px; /* !important because glass.css — a shared sheet this product does not own — sets .btn-dark's padding with !important of its own. Same reason the page header takes a `headClass` to change its title. Only the two properties that are actually contested are forced. */ padding: 10px 20px !important; font-size: 14px !important; /* glass.css also sets .btn-dark's weight to 400 with !important, which left Add Campaign lighter than Cancel beside it. Forced here, on these Campaign buttons only, so the pair reads as one pair. */ font-weight: 600 !important; line-height: 1.2; } /* The PAGE's Add Campaign — the header's and the first run's, one function — wears the Platform Design System's universal button geometry: 48px tall, a 16px radius, 24px of padding, a 15px semibold label and a 24px icon with an 8px gap (docs/design-system §8), read from its --lds-button-* tokens with each value as the fallback, since this console does not load tokens.css yet. The card's own footer keeps the 44px pair above, as approved. */ .lb-console .cc-camp-cta[data-new-campaign] { min-height: var(--lds-button-height, 48px); min-width: var(--lds-button-min-width, 120px); border-radius: var(--lds-button-radius, 16px); padding: 12px var(--lds-button-padding-inline, 24px) !important; gap: var(--lds-button-icon-gap, 8px); font-size: var(--lds-button-label-size, 15px) !important; } .lb-console .cc-camp-cta[data-new-campaign] .cc-camp-cta__plus { width: var(--lds-button-icon-size, 24px); height: var(--lds-button-icon-size, 24px); } /* The secondary: white ground, black text, a real border — a button that reads as a button, which a borderless grey label does not. */ .lb-console .cc-camp-create__actions > .btn-quiet { display: inline-flex; align-items: center; justify-content: center; background: var(--lds-surface-raised, #fff); color: var(--lds-text-primary, #111827); border: 1px solid var(--lds-border-default, #d1d5db); } .lb-console .cc-camp-create__actions > .btn-quiet:hover:not(:disabled) { background: var(--lds-surface-hover, #f3f4f6); } .lb-console .cc-camp-create__actions > .btn-quiet:active:not(:disabled) { background: var(--lds-surface-active, #e5e7eb); } /* Pressed and disabled, stated once for every Campaign primary. Disabled is dimmed AND uninteractive: a button that still looks pressable but does nothing is the one state that reads as a broken page. */ .lb-console .cc-camp-cta:active:not(:disabled), .lb-console .cc-camp-create__actions > .btn-dark:active:not(:disabled) { transform: translateY(1px); } /* ── DISABLED DIMS; BUSY DOES NOT ───────────────────────────────────── setBusy() sets `disabled` as well as aria-busy — deliberately, so a second submission cannot be issued — so every dimming rule has to exempt the busy case, or the button that is working looks exactly like the button that is refusing. The system's own button rules carry this exemption and these do too, in the same shape. */ .lb-console .cc-camp-cta:disabled:not([aria-busy="true"]), .lb-console .cc-camp-create__actions > .btn-dark:disabled:not([aria-busy="true"]), .lb-console .cc-camp-create__actions > .btn-quiet:disabled:not([aria-busy="true"]) { opacity: 0.55; cursor: not-allowed; } .lb-console .cc-camp-create__go[aria-busy="true"] { cursor: progress; } .lb-console .cc-camp-cta:focus-visible, .lb-console .cc-camp-create__actions > .btn-quiet:focus-visible, .lb-console .cc-camp-create__actions > .btn-dark:focus-visible { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .lb-console .cc-camp-cta:active:not(:disabled), .lb-console .cc-camp-create__actions > .btn-dark:active:not(:disabled) { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ THE CREATION CARD — Master Plan v4 §18 Composition, not a new visual language. The card, the section labels, the fields, the checkboxes and both buttons are the platform's own; what these rules own is the arrangement — a name that reads as the card's heading, the four semantic sections under it in the reference's column, the operational schedule after them, and one row of actions at the end. ── THERE IS ONE SCROLL CONTEXT, AND IT IS THE PAGE ───────────────────── The card is as tall as its content and the page's own scroll carries it, which is why the actions can sit in normal flow at the end. The one bounded scroller inside it is the Lead List checklist, which §18.12 asks to be searchable "when many lists exist" — a control with a height, not a second page. ══════════════════════════════════════════════════════════════════════════ */ /* ── The name, which is the heading ──────────────────────────────────── `min-width: 0` on both the row and the input is what actually contains a long name. Without it the input's default intrinsic width becomes a flex floor, the row grows past the card, and the page gets a horizontal scrollbar. With it the input stops at the row's width and scrolls its own text while it is being typed — the value is never touched. */ .lb-console .cc-camp-create__head { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0 0 4px; } /* As wide as the name, so the pencil sits beside the words (4.1). The `size` attribute campaignNameSize() writes is the same measure for a browser without field-sizing; either way it never exceeds its row. */ .lb-console .cc-camp-create__name { flex: 0 1 auto; min-width: 0; width: auto; field-sizing: content; max-width: min(420px, 100%); margin: 0; /* 44px, like the pencil beside it. This field replaced a standard .lb-input with a borderless heading, and a heading's padding is not a tap target's: without this the one control that names the Campaign would be the shortest thing on the card, and on a phone it lands at about 32px. */ min-height: 44px; padding: 4px 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--lds-text-primary, #111827); text-overflow: ellipsis; } /* --muted, not the dashboard's lighter grey: that one is below AA on white and this product does not put words in it. */ .lb-console .cc-camp-create__name::placeholder { color: var(--muted, #6b7280); font-weight: 600; } .lb-console .cc-camp-create__name:hover { border-bottom-color: var(--lds-border-subtle, #e5e7eb); } .lb-console .cc-camp-create__name:focus { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: 2px; border-bottom-color: transparent; } /* The pencil is a pointing at the input, so it needs the affordance of a button and none of the behaviour. 44px, because it is tapped. */ .lb-console .cc-camp-create__pencil { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--lds-text-secondary, #6b7280); cursor: pointer; } .lb-console .cc-camp-create__pencil:hover { background: var(--lds-surface-hover, #f3f4f6); color: var(--lds-text-primary, #111827); } .lb-console .cc-camp-create__pencil .cc-i { width: 18px; height: 18px; } /* ── The sections ─────────────────────────────────────────────────────── */ .lb-console .cc-camp-create__body { min-width: 0; } .lb-console .cc-camp-create__section { margin-top: 18px; min-width: 0; } .lb-console .cc-camp-create__label { margin: 0 0 8px; font-size: 0.92rem; /* glass.css — a shared sheet this product does not own — sets `h1, h2, h3 { font-weight: 400 !important }`, and these headings are

: without the !important every one rendered at 400, lighter than the 500 field labels under it. Only this contested property is forced, on this card's headings alone, as the Campaign buttons already do. / font-weight: 600 !important; line-height: 1.3; / Black: the primary labels of this card, the same ink as From and Until (Platform Design System --lds-color-black). / color: var(--lds-color-black, #000000); } .lb-console .cc-camp-createsub { margin: 12px 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--muted, #6b7280); } / ── The fields ─────────────────────────────────────────────────────── Long text is contained rather than trimmed. A goal grows to a readable height and then scrolls inside itself; a picker holding a very long project name stays the width of its column and ellipses what will not fit, because a . With no lists it is the same field, saying so, and it does not open. / .lb-console .cc-camp-picker { margin: 0; min-width: 0; border: 1px solid var(--line, #e5e7eb); border-radius: var(--cc-camp-field-radius); background: var(--card, #fff); } .lb-console .cc-camp-pickertrigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; list-style: none; cursor: pointer; border-radius: var(--cc-camp-field-radius); color: var(--text, #111827); } .lb-console .cc-camp-pickertrigger::-webkit-details-marker { display: none; } .lb-console .cc-camp-pickertrigger::marker { content: ""; } .lb-console .cc-camp-pickertrigger:focus-visible { outline: 2px solid rgba(17, 24, 39, 0.55); outline-offset: 2px; } .lb-console .cc-camp-pickervalue { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-console .cc-camp-pickervalue.is-placeholder { color: var(--muted, #6b7280); } .lb-console .cc-camp-pickerchevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted, #6b7280); transition: transform 160ms ease; } .lb-console .cc-camp-picker[open] > .cc-camp-pickertrigger .cc-camp-pickerchevron { transform: rotate(180deg); } .lb-console .cc-camp-picker[open] > .cc-camp-pickertrigger { border-bottom: 1px solid var(--line, #e5e7eb); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .lb-console .cc-camp-pickerpanel { padding: 8px 10px 10px; } / Inside the picker the field is the frame, so the list drops its own. / .lb-console .cc-camp-picker .cc-camp-lists { border: 0; border-radius: 0; padding: 0; } .lb-console .cc-camp-picker--empty { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; background: var(--token-surface-secondary, #f9fafb); color: var(--muted, #6b7280); } .lb-console .cc-camp-picker--empty + .lb-hint { margin-top: 6px; } / An edit's Lead List (§14): the same field, read only. The lock says so beside the words, and the whole name is shown — wrapped onto a second line on a phone rather than cut off, because it is the one place the editor names the list it calls from. / .lb-console .cc-camp-picker--locked { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 10px 12px; background: var(--token-surface-secondary, #f9fafb); color: var(--text, #111827); } .lb-console .cc-camp-picker--locked + .lb-hint { margin-top: 6px; } .lb-console .cc-camp-pickerlock { color: var(--muted, #6b7280); } .lb-console .cc-camp-pickerlocked-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { .lb-console .cc-camp-pickerchevron { transition: none; } } .lb-console .cc-camp-listssearch { margin-bottom: 8px; } .lb-console .cc-camp-lists { list-style: none; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--lds-border-subtle, #e5e7eb); border-radius: 12px; } .lb-console .cc-camp-listsitem .lb-check { width: 100%; min-height: 44px; align-items: center; / The shared row wraps, which on a phone dropped a long list name onto a line of its own under an orphaned checkbox. Here the name wraps BESIDE its box instead. / flex-wrap: nowrap; } .lb-console .cc-camp-listsitem .lb-checktext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .lb-console .cc-camp-listscount { color: var(--muted, #6b7280); } .lb-console .cc-camp-listswhy { display: block; font-size: 0.8rem; color: var(--muted, #6b7280); } .lb-console .cc-camp-listsitem.is-unavailable .lb-check { cursor: not-allowed; opacity: 0.7; } .lb-console .cc-camp-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .lb-console .cc-camp-orderitem { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px 4px 10px; border: 1px solid var(--lds-border-subtle, #e5e7eb); border-radius: 10px; } .lb-console .cc-camp-ordern { flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.78rem; font-weight: 600; background: #101012; color: #fff; } .lb-console .cc-camp-ordername { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .lb-console .cc-camp-orderbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; } .lb-console .cc-camp-orderbtn .cc-i { width: 18px; height: 18px; } .lb-console .cc-i--up { transform: rotate(180deg); } / ── §18.6 — the project rows, and what is nested inside the section ─── The card shows the choice and a picker shows the catalogue (owner, 7 October 2026), so the page is no longer as tall as the approved list is long. A row is a mark, the project's name and approved summary, and the one control that acts on it. Built from what is already here: the Agent row's mark surface, the attachment row's cross, and the shared ghost button, checkbox, input and badge. / .lb-console .cc-camp-projhead { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; } .lb-console .cc-camp-projhead h2, .lb-console .cc-camp-projhead h3 { margin: 0; } / The heading and the line that counts what is chosen, stacked, with the section's one button beside them. / .lb-console .cc-camp-projheading { min-width: 0; display: flex; flex-direction: column; gap: 2px; } / "Additional Projects": this card's heading ink and weight, one level down, because it sits INSIDE the Primary Project section (§18.2). glass.css sets every h3 to 400 !important, as it does the h2s above it. / .lb-console .cc-camp-projtitle { font-size: 0.92rem; font-weight: 600 !important; line-height: 1.3; color: var(--lds-color-black, #000000); } / Change and Add projects: the shared ghost button, in this card's own rounded rectangle rather than a capsule. !important for the reason the card's two actions carry it: glass.css forces .btn-ghost's padding and font-size. / .lb-console .cc-camp-projact { flex: 0 0 auto; margin-left: auto; min-height: 40px; border-radius: 12px; padding: 8px 16px !important; font-size: 14px !important; font-weight: 600; line-height: 1.2; } .lb-console .cc-camp-projact:focus-visible { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: 2px; } .lb-console .cc-camp-projmeta { margin: 0; } .lb-console .cc-camp-proj { display: flex; align-items: center; gap: 12px; min-width: 0; } .lb-console .cc-camp-projmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md, 10px); background: var(--token-surface-secondary, #f3f4f6); color: var(--lds-text-primary, #111827); } .lb-console .cc-camp-projmark .cc-i { width: 20px; height: 20px; } .lb-console .cc-camp-proj--primary .cc-camp-projmark { width: 48px; height: 48px; } .lb-console .cc-camp-projtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lb-console .cc-camp-projname { font-weight: 600; overflow-wrap: anywhere; } .lb-console .cc-camp-projsum { font-size: 0.85rem; color: var(--muted, #6b7280); overflow-wrap: anywhere; } .lb-console .cc-camp-projnone { color: var(--muted, #6b7280); } / The attachment row's cross, reused as it is; here it sits beside text that can be long, so it is told not to give up its width to it. / .lb-console .cc-camp-projremove { flex: 0 0 auto; } / On the card a summary is held to two lines, so a long one cannot make the page tall again. The picker shows it whole. / .lb-console .cc-camp-create .cc-camp-projsum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } / A chosen project that is no longer approved says so in the console's one red, the colour of the blocker under the button that it explains. / .lb-console .cc-camp-proj.is-gone .cc-camp-projsum { color: #b91c1c; } / The reference's hairlines: under the Primary Project, between the chosen Additional Projects, and under them. Drawn by these blocks, never by the Notes host below, which keeps no frame of its own. / .lb-console .cc-camp-proj--primary, .lb-console .cc-camp-addl { padding-bottom: 16px; border-bottom: 1px solid var(--line, #e5e7eb); } .lb-console .cc-camp-addllist { list-style: none; margin: 4px 0 0; padding: 0; } .lb-console .cc-camp-addllist > .cc-camp-proj { padding: 10px 0; } .lb-console .cc-camp-addllist > .cc-camp-proj:last-child { padding-bottom: 0; } .lb-console .cc-camp-addllist > .cc-camp-proj + .cc-camp-proj { border-top: 1px solid var(--line, #e5e7eb); } @media (pointer: coarse) { .lb-console .cc-camp-projact { min-height: 44px; } } / ── §18.6 — the two pickers ────────────────────────────────────────── Both are the shared drawer in its centred 'dialog' look, unchanged. These rules are only what a searchable list needs inside it: the search stays put, the list is the one thing that scrolls, and the Additional picker's count and two buttons stay below it. / .lb-console .cc-camp-pick { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .lb-console .cc-camp-picksearch { position: relative; flex: 0 0 auto; } .lb-console .cc-camp-pickglass { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--muted, #6b7280); pointer-events: none; } .lb-console .cc-camp-picksearch .lb-input { min-height: 44px; padding-left: 38px; } .lb-console .cc-camp-picklist { / The containing block of what it scrolls: without it the rows' visually hidden text is placed against the dialog instead, far below its edge, and the dialog itself gains a scroll it should not have. / position: relative; flex: 0 1 auto; min-height: 0; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .lb-console .cc-camp-pickrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .lb-console .cc-camp-pickrow { display: flex; / The shared checkbox row wraps, which would put its box on a line of its own above a long project. Here the project stays BESIDE its box. / flex-wrap: nowrap; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px; border: 0; border-radius: var(--radius-md, 10px); background: none; color: var(--lds-text-primary, #111827); font: inherit; text-align: left; cursor: pointer; } .lb-console .cc-camp-pickrow:hover { background: var(--lds-surface-hover, #f3f4f6); } .lb-console .cc-camp-pickrow.is-on, .lb-console .cc-camp-pickrow.is-primary { background: var(--token-surface-secondary, #f3f4f6); } .lb-console .cc-camp-pickrow.is-on .cc-camp-projmark, .lb-console .cc-camp-pickrow.is-primary .cc-camp-projmark { background: var(--lds-surface-raised, #fff); } .lb-console .cc-camp-pickrow.is-primary { cursor: default; } .lb-console button.cc-camp-pickrow:focus-visible { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: -2px; } .lb-console .cc-camp-pickbody { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; } .lb-console .cc-camp-picktick { flex: 0 0 auto; } .lb-console .cc-camp-picknone { margin: 0; padding: 16px 4px; } .lb-console .cc-camp-pickcount { margin: 0 auto 0 0; align-self: center; font-size: 0.85rem; color: var(--muted, #6b7280); } / The dialog that holds a picker: its body does not scroll, the list in it does. On a phone it may use the whole safe area rather than Call result's seven tenths of the screen, because a catalogue wants the room. / .lb-console .lb-drawer[data-look="dialog"]:has(.cc-camp-pick) .lb-drawerbody { display: flex; flex-direction: column; overflow: hidden; } @media (max-width: 560px) { .lb-console .lb-drawer[data-look="dialog"]:has(.cc-camp-pick) { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } .lb-console .cc-camp-picklist { max-height: none; } / Beside a checkbox on a phone, the mark would leave a project's words a column a few words wide. It is decoration, so the words get its room. / .lb-console .cc-camp-pickbody > .cc-camp-projmark { display: none; } .lb-console .cc-camp-proj { gap: 10px; } .lb-console .cc-camp-proj--primary .cc-camp-projmark { width: 40px; height: 40px; } } / Contained by Primary Project — §18.2's "not a fifth top-level field" — by sitting inside its section, under its choice, with no frame of its own: a second card inside the card would be one more box in a column of boxes, and its inset pushed the Notes field off the edge every other field keeps. / .lb-console .cc-camp-project-ctx { margin-top: 16px; padding: 0; border: 0; } .lb-console .cc-camp-attach { margin-top: 8px; } / Campaign Detail's read-only Notes: the customer's own line breaks, and a long unbroken word wraps instead of pushing the page sideways. / .lb-console .cc-camp-notestext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .lb-console .cc-camp-attachlist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } / Nothing attached and nothing happening: no gap under the Notes box. / .lb-console .cc-camp-attach:empty { display: none; } .lb-console .cc-camp-attachitem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .lb-console .cc-camp-attachicon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted, #6b7280); } / "Word document — price-list.docx": the kind, then the whole name. A long name wraps inside the row rather than widening the card. / .lb-console .cc-camp-attachfile { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; } .lb-console .cc-camp-attachtype { color: var(--muted, #6b7280); } .lb-console .cc-camp-attachsep { color: var(--muted, #6b7280); } .lb-console .cc-camp-attachname { color: var(--text, #111827); } .lb-console .cc-camp-attachnotes { flex-basis: 100%; font-size: 0.8rem; color: var(--muted, #6b7280); } .lb-console .cc-camp-attachactions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } / Remove: the cross alone, named for the file it removes. While the removal is in flight the shared busy spinner stands in for the cross. / .lb-console .cc-camp-attachremove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #6b7280); cursor: pointer; } .lb-console .cc-camp-attachremove:hover { color: var(--text, #111827); } .lb-console .cc-camp-attachremove:focus-visible { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: 0; } .lb-console .cc-camp-attachremove[aria-busy="true"] .cc-i { display: none; } @media (pointer: coarse) { .lb-console .cc-camp-attachremove { width: 44px; height: 44px; } } / ── §19.7 — the calling schedule, an operational control ───────────── Seven day toggles and two hours. Nothing is ticked by default, because the schedule domain refuses to default the days. / .lb-console .cc-camp-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; } .lb-console .cc-camp-day { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 12px; border: 1px solid var(--lds-border-default, #d1d5db); border-radius: 12px; background: var(--lds-surface-raised, #fff); color: var(--lds-text-primary, #111827); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .lb-console .cc-camp-day.is-on { background: #101012; border-color: #101012; color: #fff; } .lb-console .cc-camp-day:focus-within { outline: 2px solid var(--lds-focus-ring, #2563eb); outline-offset: 2px; } .lb-console .cc-camp-hours { max-width: 360px; } / From and Until are bold AND black (#000000, the owner's rule), at every width — the shared .lb-label is a grey, and a bold grey is not this. / .lb-console .cc-camp-hours .lb-label { font-weight: 600; color: var(--lds-color-black, #000000); } / ── The foot ───────────────────────────────────────────────────────── The blockers first, in words; then the server's refusal when there was one; then the two actions, wrapping rather than overflowing. Cancel stays first in the source so tabbing reaches it before the button that commits. / .lb-console .cc-camp-createfoot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lds-border-subtle, #e5e7eb); } .lb-console .cc-camp-createblockers, .lb-console .cc-camp-createmissing { margin: 0 0 10px; padding-left: 18px; font-size: 0.85rem; color: var(--muted, #6b7280); } .lb-console .cc-camp-createmissing { color: var(--lds-text-primary, #111827); } / The one sentence about the unsaved draft: true, and quiet — a hairline rectangle on the fields' edges rather than a filled card of its own. / .lb-console .cc-camp-createdraft { margin: 20px 0 0; padding: 10px 12px; font-size: 0.82rem; line-height: 1.45; color: var(--muted, #6b7280); background: none; border: 1px solid var(--line, #e5e7eb); border-radius: var(--cc-camp-field-radius); } .lb-console .cc-camp-createactions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; } / ── EDITING A CAMPAIGN (§13–§17) ───────────────────────────────────── The Add Campaign card again, so almost nothing here is new: the state line under the name, the Agent-updated notice's spacing, the leads the Campaign calls, and the line saying what Confirm will do. Composition of the console's own badges, notices, buttons and lead table only — no colour, radius or shadow of its own. / .lb-console .cc-camp-editstate { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .lb-console .cc-camp-editstate + .lb-notice { margin-top: 12px; } .lb-console .cc-camp-editagent { margin-top: 10px; } .lb-console .cc-camp-agent + .lb-notice { margin-top: 10px; } .lb-console .cc-camp-editpending { margin: 0 0 8px; } .lb-console .cc-camp-editleads .cc-lead-scroll { margin-top: 8px; } / A lead's own controls wrap under each other in a narrow cell instead of widening the table. / .lb-console .cc-camp-editacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lb-console .cc-camp-edittable .lb-error { margin: 4px 0 0; } .lb-console .cc-camp-editafter { margin: 0 0 10px; } / ── "Analysing ···" ────────────────────────────────────────────────── Hidden until the button says it is busy, which is the shared setBusy()'s doing and nothing else's. The owner's file is 320x320 with its dots across the middle; `cover` in a wide, short box crops the transparent margins to exactly that band, so the animation sits on the button's baseline instead of making the button square. / .lb-console .cc-camp-analysing, .lb-console .cc-camp-analysingstill { display: none; } .lb-console .cc-camp-creatego[aria-busy="true"] .cc-camp-analysing { display: block; width: 48px; height: 20px; object-fit: cover; object-position: center; } / setBusy's own spinner would be a second thing saying the same thing. / .lb-console .cc-camp-creatego[aria-busy="true"] .cc-spin { display: none; } .lb-console .cc-camp-analysingstill { gap: 5px; align-items: center; } .lb-console .cc-camp-analysingstill i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } / An SVG animates itself inside and no rule here can reach in to stop it — so reduced motion does not show that file at all. Three still dots take its place and the word Analysing never leaves. / @media (prefers-reduced-motion: reduce) { .lb-console .cc-camp-creatego[aria-busy="true"] .cc-camp-analysing { display: none; } .lb-console .cc-camp-creatego[aria-busy="true"] .cc-camp-analysingstill { display: inline-flex; } } / One column on a phone, and the actions become full-width rows in the order they are read. 560px is the same step the Campaign cards reflow at. / @media (max-width: 560px) { .lb-console .cc-camp-createname { font-size: 19px; max-width: 100%; } .lb-console .cc-camp-createactions { gap: 10px; } / Full width AND 44px tall. The shared buttons are sized for a mouse; a 31px row is under the minimum target on a phone, and these two are the only way out of this card. / .lb-console .cc-camp-createactions > .btn-quiet, .lb-console .cc-camp-createactions > .btn-dark { flex: 1 1 100%; min-height: 44px; } / "Analysing ···" on that full-width row (owner, 3 Oct). The owner's file draws its dots between x 83 and 235 of its 320px square, so at the 48px it is shown 12.45px is transparent on the left and 12.75px on the right: the dots read 20px from the word and the pair sat left of centre. Pulled in by that margin, the dots are the button's own 8px gap from the word and the pair is centred on what can be seen. A desktop keeps its spacing. / .lb-console .cc-camp-creatego[aria-busy="true"] .cc-camp-analysing { margin-inline: -12px; } / A phone stacks the Agent's name, its readiness and Open Agent on ONE edge beside the avatar, instead of wrapping the chip back under the avatar while the link sits somewhere else. / .lb-console .cc-camp-agent { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; } .lb-console .cc-camp-agentavatar { grid-row: 1 / span 3; align-self: start; } .lb-console .cc-camp-agent > .cc-camp-agentname, .lb-console .cc-camp-agent > .stat-badge, .lb-console .cc-camp-agent > .cc-camp-agentlink { grid-column: 2; justify-self: start; max-width: 100%; } .lb-console .cc-camp-agentlink { margin-left: 0; text-align: left; } .lb-console .cc-camp-hours { max-width: 100%; } / An edit's lead row stacks (the lead table's own 720px rule); its controls then share the row's width, each still a 44px target on a touch screen through the console's coarse-pointer rule. / .lb-console .cc-camp-editacts > .btn-quiet, .lb-console .cc-camp-editacts > .btn-ghost, .lb-console .cc-camp-editacts > .btn-danger { flex: 1 1 auto; justify-content: center; min-height: 44px; } } / ══════════════════════════════════════════════════════════════════════════ ADD CAMPAIGN — THE CARD'S LOOK (owner's reference, 8 October 2026) Presentation only. Not one element, word, control or handler is added, removed or moved: these rules restyle what campaignFormHtml already draws, and coldcalling.js is not touched by them. ── SCOPED TO THE ADD CARD, AND ONLY TO IT ────────────────────────────── Every selector below starts at the card that holds the Add Campaign button — [data-campaign-create], which campaignCreateFootHtml writes and nothing else does. The Edit card is the same .cc-camp-create with the same sections, but its foot carries data-campaign-edit-confirm instead, so it matches none of this and keeps every rule above exactly as it was. So do the Campaign list, the two project pickers (they open in the shared drawer, outside the card) and every other screen. A browser without :has() draws the card as it was before this block. ── WHAT THE REFERENCE ASKS FOR ───────────────────────────────────────── One column of label-then-field groups on one rhythm; one voice for every label; one height, edge and radius for every control; no rule and no box that is not a field; and room around the whole. The values are the console's own — --line, --card, --muted, the 0.92rem label, the 0.9rem field text — and not the mock's pixels. ══════════════════════════════════════════════════════════════════════════ / .lb-console .cc-camp-create:has([data-campaign-create]) { --cc-camp-field-radius: var(--lds-radius-sm, 8px); --cc-camp-add-control: 42px; --cc-camp-add-gap: 22px; / !important for the reason .cc-camp-section's own padding carries it: the console sets every .section-card's padding with !important. / padding: 16px 32px 28px !important; } / ── The name ───────────────────────────────────────────────────────── Its words start on the edge the labels start on (the field's own 2px inset is taken back), and the pencil sits beside them. Both keep their 44px targets. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createhead { margin-bottom: 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createname { margin-left: -2px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createpencil { margin-left: -4px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createpencil .cc-i { width: 16px; height: 16px; } / The name's ring is black, the ink of this card's labels, not the blue of a button's (owner, 8 October 2026). And there is none while the caret is in the name only because the card has just opened: campaignNameQuietFocus marks that, and unmarks it when the name is pressed, clicked or left. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createname:focus { outline-color: var(--lds-color-black, #000000); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createname[data-quiet-focus]:focus { outline: none; } / A Duplicate's notice under the name is a notice still, on the fields' radius. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createhead + .lb-notice { margin-top: 4px; border-radius: var(--cc-camp-field-radius); } / ── One rhythm ─────────────────────────────────────────────────────── The same gap above every group, and the same 6px between a label and its field. The goal's Instructions and the project's Notes are groups of their own in the reference, so they take the gap too. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createsection, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-project-ctx, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createsection > .lb-field + .lb-field { margin-top: var(--cc-camp-add-gap); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createlabel, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projhead { margin-bottom: 6px; } / ── One label voice ────────────────────────────────────────────────── Instructions and Notes are labelled in the section headings' own size, weight and ink instead of the small grey of a sub-field. What qualifies a label — "optional", "required — at least 10 words" — stays grey and light beside it. From and Until keep their own, smaller label: they are two halves of one control. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createsection > .lb-field > .lb-label, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-project-ctx > .lb-field > .lb-label { font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--lds-color-black, #000000); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createsection > .lb-field > .lb-label > .lb-hint, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-project-ctx > .lb-field > .lb-label > .lb-hint { font-size: inherit; font-weight: 400; line-height: inherit; } / A badge beside a name or a heading sits on its line, not 7px under it. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agent > .stat-badge, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projhead > .stat-badge { margin-top: 0; } / "Required" beside "Primary Project" is centred on the heading's words (owner, 8 October 2026). The heading keeps no margin of its own inside this row — the row carries the 6px down to the field — or the row is taller than its words and the mark hangs below their middle. And the mark is the shared quiet badge, in its own type, drawn a little tighter with its word centred in it, so it reads as a note on the heading rather than a second control. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projhead > .cc-camp-createlabel { margin-bottom: 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projhead > .stat-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; line-height: 1; } / ── One control ────────────────────────────────────────────────────── The Agent row, the Lead List picker, the goal, the two project rows and the two hours are one height with one radius and one size of text, so the column reads as one form. --cc-camp-field-radius already reaches the Agent row, the picker and the blockers; the shared inputs and the two text boxes are given it here. / .lb-console .cc-camp-create:has([data-campaign-create]) .lb-input, .lb-console .cc-camp-create:has([data-campaign-create]) .lb-select { min-height: var(--cc-camp-add-control); padding-top: 0; padding-bottom: 0; border-radius: var(--cc-camp-field-radius); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-goalbox, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-notesbox, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-orderitem { border-radius: var(--cc-camp-field-radius); } / The trigger sits inside the picker's own 1px edge. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-pickertrigger { min-height: calc(var(--cc-camp-add-control) - 2px); padding-top: 0; padding-bottom: 0; font-size: 0.9rem; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-picker--empty, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createblocker { min-height: var(--cc-camp-add-control); padding-top: 8px; padding-bottom: 8px; font-size: 0.9rem; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-picker + .lb-hint, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-order + .lb-hint { margin-top: 6px; } / The two fields that open are the same field: one size of chevron, and "Choose a goal…" in the grey "Choose a lead list…" is in, until a goal is chosen. The goals in the opened list keep the field's ink. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-pickerchevron { width: 16px; height: 16px; } .lb-console .cc-camp-create:has([data-campaign-create]) .lb-select { background-size: 16px 16px; } .lb-console .cc-camp-create:has([data-campaign-create]) .lb-select:has(> option[value=""]:checked) { color: var(--muted, #6b7280); } .lb-console .cc-camp-create:has([data-campaign-create]) .lb-select > option { color: var(--text, #111827); } / The Agent: the same row, at the control's height, and the name starts where every other field's words start. The mark is not shown on this card (owner, 8 October 2026: "remove the black avatar"): it is decoration, aria-hidden, and the Agent's name is written in the row. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agent { min-height: var(--cc-camp-add-control); padding: 5px 12px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agentavatar { display: none; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agentname { font-size: 0.9rem; } / The calling order: each chosen list is a row of the same height and text, and its two arrows fit inside it. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-orderitem { min-height: var(--cc-camp-add-control); padding: 4px 5px 4px 10px; font-size: 0.9rem; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-orderbtn { width: 32px; height: 32px; } / ── The two project rows ───────────────────────────────────────────── The reference draws each as a field under its label. They are still what they were — the chosen project with Choose or Change, the count with Add projects — in that field's shape: the hairlines that closed each block are gone, the mark is a glyph at the start of the row rather than a tile, and the row's one button sits inside its trailing edge. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-proj--primary { min-height: var(--cc-camp-add-control); padding: 5px 5px 5px 12px; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: var(--cc-camp-field-radius); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl { padding-bottom: 0; border-bottom: 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projmark { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--muted, #6b7280); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projmark .cc-i { width: 18px; height: 18px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projtext { font-size: 0.9rem; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projsum { font-size: 0.8rem; } / !important where the shared ghost button's padding and size are forced, as the rule this refines already says. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projact { min-height: 30px; border-radius: 6px; padding: 4px 12px !important; font-size: 13px !important; } / Additional Projects: its heading on a line of its own, as a label, and under it one field-shaped row holding the count and Add projects. The heading and the count are one stacked block in the markup; `contents` lets the row's grid place them, and the row's edge is drawn behind both without taking a click. Nothing is reordered. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl > .cc-camp-projhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; margin-bottom: 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl .cc-camp-projheading { display: contents; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl .cc-camp-projtitle { grid-column: 1 / -1; grid-row: 1; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl .cc-camp-projmeta { grid-column: 1; grid-row: 2; padding-left: 13px; font-size: 0.9rem; line-height: 1.3; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl .cc-camp-projact { grid-column: 2; grid-row: 2; margin: 6px 6px 6px 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addl > .cc-camp-projhead::after { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: stretch; min-height: var(--cc-camp-add-control); border: 1px solid var(--line, #e5e7eb); border-radius: var(--cc-camp-field-radius); pointer-events: none; } / The chosen Additional Projects: one outlined list under that row. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addllist { margin-top: 8px; padding: 0 6px 0 12px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--cc-camp-field-radius); } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-addllist > .cc-camp-proj { padding: 8px 0; } / ── The schedule ───────────────────────────────────────────────────── Its one sentence sits directly under its heading, then the days at the control's height. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createsection--ops > .cc-camp-createlabel { margin-bottom: 2px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-days { margin: 12px 0 14px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-day { min-height: var(--cc-camp-add-control); } / ── The foot ───────────────────────────────────────────────────────── The sentence about the unsaved draft and the reasons under it are quiet text, not a box and a rule: the fields are the only outlined things on the card, and the two actions close it. / .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createdraft { margin-top: var(--cc-camp-add-gap); padding: 0; border: 0; border-radius: 0; font-size: 0.78rem; line-height: 1.5; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createfoot { margin-top: 12px; padding-top: 0; border-top: 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createblockers, .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-createmissing { margin-bottom: 14px; padding-left: 16px; font-size: 0.78rem; line-height: 1.55; } / A phone keeps the card's narrower inset, and the Agent row its stack of name, readiness and Open Agent — in one column now, with no mark beside it to keep a column for. / @media (max-width: 560px) { .lb-console .cc-camp-create:has([data-campaign-create]) { --cc-camp-add-gap: 20px; padding: 8px 16px 18px !important; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agent { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-agent > { grid-column: 1; } } /* A finger keeps the 44px every control here gave it. The fields are 46px, which is 44px inside their edge; a row's button is drawn a little shorter than that and its target fills the row's height above and below it; and the calling order's arrows are the 44px squares they were. / @media (pointer: coarse) { .lb-console .cc-camp-create:has([data-campaign-create]) { --cc-camp-add-control: 46px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projact { position: relative; min-height: 34px; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-projact::after { content: ""; position: absolute; inset: -5px 0; } .lb-console .cc-camp-create:has([data-campaign-create]) .cc-camp-orderbtn { width: 44px; height: 44px; } } / ══════════════════════════════════════════════════════════════════════════ STEP 4 — SIMULATION CALL Composition, not a new visual language. The card, the header, the progress indicator and the footer are the onboarding shell every other step uses; the two buttons are the platform's own .btn-dark and .btn-ghost, whose height, radius, padding and typography are set centrally and are NOT restated here. What this file adds is the arrangement of one orb, one control, one state line and a transcript inside that card. ── THE ORB IS A MOUNT, AND THE ARTWORK IS NOT HERE ─────────────────────── voice-orb.svg is the approved asset. It carries its own gradients, its own layer structure and its own ambient animation, and it is inlined into #simOrb at runtime so the application can reach the one group inside it that playback amplitude moves. None of that is restated below and none of it is overridden: this file must not become a second opinion about how the orb looks, which is exactly what a stand-in gradient or a local keyframe here would be. What these rules own is the box — exactly as wide as it is tall, clipped to a circle, and unchanged by any state. ══════════════════════════════════════════════════════════════════════════ / / ── NOT `.cc-sim` ────────────────────────────────────────────────────────── This container was first given the class `.cc-sim`, which already belongs to the small grey "Simulation Call" pill on call records (see the rule near the top of this file: a 999px radius, a 1px border and a tinted ground). The two rules merged, and that pill's outline was stretched around this whole screen as one enormous faint oval. The screen's root has its own name so no rule written for something else can reach it again. / .lb-console .cc-simcall { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 8px 0 4px; } / One custom property drives BOTH dimensions, so the silhouette cannot stop being a circle at any width — that is the orb's first invariant, and this is where it is kept. The flat ground shows for as long as the asset takes to arrive, and is covered by it; it is not a picture of an orb. / .lb-console .cc-simorb { --cc-sim-orb: 196px; width: var(--cc-sim-orb); height: var(--cc-sim-orb); flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--line); / ── THE WHOLE ORB BREATHES WITH THE AGENT'S VOICE ────────────────────── public/voice-orb.js writes a uniform scale() on THIS element while the agent is audibly speaking. A transform does not reflow, so the control and the transcript below never move; one scale factor on both axes keeps the circle a circle. The artwork inside and its own ambient drift are not touched. Promoted to its own layer so the pulse is composited rather than repainting the filtered SVG each frame. / transform-origin: 50% 50%; will-change: transform; } .lb-console .cc-simorb > svg { display: block; width: 100%; height: 100%; } .lb-console .cc-simcontrolrow { display: flex; justify-content: center; width: 100%; } / Layout INSIDE the shared button. Its padding, radius and type are the platform's .btn-dark and are not restated; this only places the glyph beside the label at the standard 8px gap. ── A SLIM PILL, AND STILL A FULL-SIZE TARGET ───────────────────────────── Member A's reference for this control is a slim black pill: the height comes from the label and the button's own padding, not from a forced box. The chunkiness was two things added here — a `min-height: 44px`, and a 24px glyph box allowed to set the line height. The first is gone; the second is handled on the glyph below. The touch area is kept at 44px anyway, by an invisible extension above and below that takes pointer input without adding a pixel to the pill. / .lb-console .cc-simcontrol { position: relative; display: inline-flex; align-items: center; gap: 8px; } .lb-console .cc-simcontrol::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } / START and END share this one box, so the two faces are the same pill to the pixel: same height, same width of glyph, same gap, same padding. The box is the universal 24px icon size. Its drawing does not fill it — the waveform's bars run from 4.2 to 19.8 of 24 — so a negative block margin of 4px lets the 24px box sit inside the label's line instead of pushing the pill 8px taller around empty space. Nothing is clipped: the bars and the stop square are both inside the middle 16px. / .lb-console .cc-simglyph { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; margin-block: -4px; } .lb-console .cc-simglyph > svg { width: 100%; height: 100%; display: block; } / Both faces are in the DOM and one is hidden, so changing face never rebuilds the control and never drops focus mid-call. / .lb-console .cc-simcontrol[data-mode="start"] .cc-simglyph--stop, .lb-console .cc-simcontrol[data-mode="end"] .cc-simglyph--wave { display: none; } / The platform's only red, the one .lb-error and .lb-notice--error already use. It marks the stop control and nothing else on this screen. / .lb-console .cc-simglyph--stop::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #b91c1c; } / ── NO VISIBLE STATE BOX ─────────────────────────────────────────────────── Member A removed the bordered sentence that sat under the control ("Ready. Put your earphones on…", "Live. Earphones required…"). The state is still said — to assistive technology, through a live region that uses the shared .lb-visually-hidden utility and occupies no space — so a screen-reader user is still told Connecting, Live, Ending and why a start failed. Nothing about it is drawn, so it leaves no box and no gap. / .lb-console .cc-simtranscript { width: 100%; max-width: 720px; } .lb-console .cc-simh { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; color: var(--text); } .lb-console .cc-simlog { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); padding: 6px 0; min-height: 132px; max-height: 46vh; overflow-y: auto; } .lb-console .cc-simempty { margin: 0; padding: 18px 20px; color: var(--muted); font-size: 0.84rem; } .lb-console .cc-simline { display: flex; align-items: baseline; gap: 14px; padding: 7px 20px; } / A customer still speaking is one line that grows, and it is quieter than a line that was actually said. / .lb-console .cc-simline--partial { opacity: 0.6; } .lb-console .cc-simwho { flex: 0 0 88px; font-size: 0.8rem; color: var(--muted); } / ── NOT COLOUR ALONE ────────────────────────────────────────────────────── The agent's name is blue and the customer's is not, which is the reference's own treatment. The weight differs as well, so the two speakers are still distinguishable to somebody who cannot tell the colours apart (WCAG 1.4.1). The name itself is the real distinction: it is a name, and the other says Customer. / .lb-console .cc-simline--agent .cc-simwho { color: #2563eb; font-weight: 600; } .lb-console .cc-simline--customer .cc-simwho { color: var(--text); font-weight: 400; } .lb-console .cc-simtext { flex: 1; min-width: 0; color: var(--text); font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; } / Quiet on purpose: the words the agent said are the line, and this is a note about how far the customer got through them. / .lb-console .cc-simcut { margin-left: 8px; font-size: 0.75rem; font-style: italic; color: var(--muted); } .lb-console .cc-simactions { display: flex; justify-content: center; } / Why Continue can or cannot be pressed, in words rather than behind a tooltip, and pointed at by aria-describedby. Continue is in the header's corner, so the sentence sits under the call control it is about, centred with it and tucked closer than the column's own gap. / .lb-console .cc-simgate { margin: -10px 0 0; font-size: 0.78rem; color: var(--muted); text-align: center; } / ── A PHONE ─────────────────────────────────────────────────────────────── The same hierarchy, not a shrunken copy of the desktop composition. The orb scales with the viewport between a floor and a ceiling and stays circular because both of its dimensions are still the one property. Back and Continue are the shared header row here, like every other setup step. / @media (max-width: 720px) { .lb-console .cc-simcall { gap: 16px; } .lb-console .cc-simorb { --cc-sim-orb: clamp(132px, 46vw, 196px); } .lb-console .cc-simcontrol { width: 100%; justify-content: center; } .lb-console .cc-simwho { flex: 0 0 72px; } .lb-console .cc-simline { padding: 7px 14px; gap: 10px; } } / ══════════════════════════════════════════════════════════════════════════ NOTIFICATIONS — THE CARD AND ITS ICON Last in the sheet on purpose: these come after every per-screen rule that places a notice, so the card's left padding (the icon's room) and its ink win. The colours and glyphs are the tokens defined beside the toast. ══════════════════════════════════════════════════════════════════════════ / / ── The card ───────────────────────────────────────────────────────────── The Add Campaign card's draft sentence and field-shaped blockers are left as they are: the owner made them quiet text and a field on that card (8 October 2026), and a boxed notice there would undo it. :where() keeps the exclusion from raising this rule's weight above the per-screen rules that place a notice. / .lb-console .lb-notice:not(:where(.cc-camp-create:has([data-campaign-create]) :is(.cc-camp-createdraft, .cc-camp-createblocker))), .lb-console .cc-modalwarn { position: relative; padding-left: 44px; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 14px; background-color: var(--token-surface-primary, #fff); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 18px -8px rgba(16, 24, 40, 0.12); color: var(--text, #111827); text-align: left; --cc-note-color: var(--cc-note-info); --cc-note-glyph: var(--cc-glyph-info); } .lb-console .cc-modalwarn { padding: 12px 16px 12px 44px; } .lb-console .lb-notice:not(:where(.cc-camp-create:has([data-campaign-create]) :is(.cc-camp-createdraft, .cc-camp-createblocker)))::before, .lb-console .cc-modalwarn::before, .lb-console .cc-toast::before { content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; background-color: var(--cc-note-color, var(--cc-note-info)); -webkit-mask: var(--cc-note-glyph, var(--cc-glyph-info)) center / contain no-repeat; mask: var(--cc-note-glyph, var(--cc-glyph-info)) center / contain no-repeat; } / A prose notice opens with a heading on a taller first line. / .lb-console .cc-v4boundary::before { top: 20px; } / The billing status draws its own grey i-info; the card's icon replaces it. / .lb-console .lb-notice > .lb-noticeicon { display: none; } / An error reads in ink on the white card like every other notice; the red is the icon and a faint edge, and the octagon says it without the hue. / .lb-console .lb-notice--error { border-color: rgba(185, 28, 28, 0.14); } .lb-console .lb-notice--error strong { color: var(--text, #111827); } / ── Which icon ─────────────────────────────────────────────────────────── */ .lb-console .lb-notice--error, .lb-console .lb-notice[data-notice="error"], .lb-console .cc-ll-refusal, .lb-console #leadRemoveState, .lb-console #campDeleteState, .lb-console #campCancelState, .lb-console #campPauseState, .lb-console #ccProfileErrors, .lb-console #agentSetupNotice, .lb-console #setupNotice, .lb-console .cc-toast:is([data-tone="error"], [data-tone="bad"]) { --cc-note-color: var(--cc-note-error); --cc-note-glyph: var(--cc-glyph-error); } .lb-console #storageNotice, .lb-console #step3Notice, .lb-console #step4Notice, .lb-console #cEditStale, .lb-console .cc-teach-refused, .lb-console .cc-attn-blocked, .lb-console .cc-v4lock, .lb-console .cc-camp-createdraft, .lb-console .cc-camp-createblocker, .lb-console .lb-notice[data-ll-unfinished], .lb-console .lb-notice[data-followup-due], .lb-console .lb-notice[data-notice="warning"], .lb-console .cc-modalwarn, .lb-console .cc-toast[data-tone="warn"] { --cc-note-color: var(--cc-note-warning); --cc-note-glyph: var(--cc-glyph-warning); } .lb-console #staleNotice, .lb-console .lb-notice[data-biz-reconnect], .lb-console .lb-notice[data-notice="connection"] { --cc-note-color: var(--cc-note-warning); --cc-note-glyph: var(--cc-glyph-connection); } .lb-console .cc-toast:is([data-tone="ok"], [data-tone="good"]) { --cc-note-color: var(--cc-note-success); --cc-note-glyph: var(--cc-glyph-success); }