/* ═════════════════════════════════════════════════════════════════════ kit.css · The RelayLeads component kit. LOADED LAST. App-wide rules for the element families — controls, buttons, cards, list rows, sheets — on top of the per-surface stylesheets. Colours, radii and type sizes are NOT set here: they come from the tokens in base.css. Layer headers live in overlay.css; status badges in their own sheets. Scoped rules use :where(.layer, .tb-sheet) so they add no specificity and never reach the home list or the customer-site preview. ═════════════════════════════════════════════════════════════════════ */ /* ─── Page chrome, home, pipeline, analytics, sheets ───────────────── */ body { line-height: 1.45; } button, input, select, textarea { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="switch"]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; } button:disabled { cursor: not-allowed; } .tb-topbar, nav { background: rgba(16,17,18,.96); border-color: var(--border); } .tb-pill { background: var(--card); border-color: var(--border); border-radius: var(--radius); } .tb-pill-copy, .tb-pill-chev, .tb-iconbtn, .layer-icon-btn, .cal-nav { min-height: 44px; min-width: 44px; } .tb-iconbtn, .layer-icon-btn, .cal-nav { border-radius: var(--radius); background: var(--card); } .tb-topbar { min-height: 64px; } .main { padding-top: 20px; } .title-row { margin-bottom: 20px; align-items: center; } .page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; } .page-sub { font-size: .8125rem; line-height: 1.5; color: var(--muted2); } .section { margin-bottom: 24px; } .section-head { min-height: 44px; } .section-title { font-size: .8125rem; letter-spacing: .04em; } .section-count { font-size: .6875rem; } .row-name { font-size: .875rem; font-weight: 600; letter-spacing: -.015em; } .row-meta { font-size: .75rem; line-height: 1.5; color: var(--muted2); } .row-sub { font-size: .6875rem; color: var(--muted); } .row-date, .row-value { font-size: .75rem; font-variant-numeric: tabular-nums; } .select, .fld input:not([type="checkbox"]):not([type="radio"]), .fld select, .fld textarea, .set-input, .off-in, .pr-param input, .mkt-spend-in input, .cj-line-amt, .cap-note { min-height: var(--ui-control-height); border-width: 1px; border-radius: var(--radius); } .fld input, .fld select, .fld textarea { background: var(--surface); } .fld label { line-height: 1.5; } .pipe-search { min-height: 44px; border-width: 1px; border-radius: var(--radius); background: var(--surface); } .pipe-chip, .cj-chip, .mkt-range, .svc-entry-tab, .cal-test, .set-connect, .set-manage, .svc-connect-btn, .svc-refresh, .cs-btn, .alerts-btn, .l-btn, .l-act, .tb-addrow, .tb-share-btn, .cal-time, .tb-row, .pipe-opt, .ns-more { min-height: 44px; } .l-btn, .set-connect, .set-manage, .svc-connect-btn, .cs-btn, .tb-share-btn { border-radius: var(--radius); font-size: var(--btn-fs); font-weight: 650; } .pipe-chip { font-size: .75rem; border-radius: var(--radius-sm); border-width: 1px; } .pipe-chips { gap: 8px; } .pipe-chip.on, .cj-chip.on { border-color: #76613b; background: var(--accent-glow); } .mkt-ranges { padding: 3px; gap: 3px; } .mkt-range { font-size: .75rem; border-radius: 7px; } .mkt-range.on { background: var(--accent-glow); color: var(--accent-light); } .mb-hero { border-color: var(--border); background: var(--card); border-radius: var(--radius-xl); } .mb-hero-label, .mb-label { color: var(--muted2); font-size: .6875rem; } .mb-sub { font-size: .6875rem; } .mb-fold, .mb-range, .mb-insights { min-height: 44px; } .mb-tile { border-radius: var(--radius-lg); border-color: var(--border); } .mkt-row, .mkt-stat, .off-card, .prp-card, .pf-section, .bl-card-el, .svc-pick { border-width: 1px; border-radius: var(--radius-lg); } .mkt-row { padding: 14px; } .mkt-row-sub { font-size: .75rem; } .layer-card, .tb-sheet { background: var(--card); border-color: var(--border); } .layer.sheet .layer-card { border-radius: var(--radius-xl); box-shadow: 0 24px 80px #0008; } .tb-sheet { border-radius: 16px 16px 0 0; } .tb-sheet h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; } .tb-rtitle { font-size: .875rem; font-weight: 600; } .tb-rsub { font-size: .75rem; line-height: 1.5; } .tb-row { padding-top: 14px; padding-bottom: 14px; } .tb-scrim, .pipe-scrim { backdrop-filter: blur(3px); } .ios-toggle { position: relative; } .ios-toggle::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%,44px); height: 44px; transform: translate(-50%,-50%); } .toast { border-radius: var(--radius); border-color: var(--border); font-size: .8125rem; } @media (max-width: 600px) { .main { padding-left: 16px; padding-right: 16px; } .tb-topbar { padding-left: 12px; padding-right: 12px; gap: 8px; } .tb-pill-copy { padding-left: 10px; padding-right: 8px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; } .layer-body.pipe-body { padding-left: 16px; padding-right: 16px; } .tb-linkwrap { gap: 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ─── App-wide primitives ───────────────────────────────────────────── */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]),select:not(.rl-select-native),textarea){box-sizing:border-box;max-width:100%;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;font-family:inherit;line-height:20px;padding:11px 12px} :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]),select:not(.rl-select-native)){height:44px;min-height:44px;max-height:44px} :where(textarea){min-height:88px;resize:vertical} :where(input,textarea)::placeholder{color:#838a94} :is(.fld,.pf-field,.pe-field,.wiz-field)>:is(label,.pf-lbl,.pe-flabel,.wiz-cap){display:block;margin:0 0 8px;line-height:20px;font-size:11px;color:var(--muted2)} :is(.fld,.pf-field,.pe-field,.wiz-field)>:is(input,select,textarea,.rl-select){margin-top:0;margin-bottom:0} :is(.prp-ai-notes,.prp-json,.cap-note,.cj-line-amt,.af-in,.bf-price,.pe-finput,.off-in,.bl-promo-in){border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)} :is(.perf-card,.coach-card,.cap-card,.prp-card,.sk-card,.mkt-stat,.mb-tile,.wiz-card,.wiz-prev-card,.wiz-pay-card,.wiz-pick-card){background:var(--card);border:1px solid var(--border);border-radius:12px} :is(.cp-head,.pr-head,.pf-card-head,.pf-chead,.pf-sheet-head,.pe-drawer-head,.wiz-alerts-head){padding:14px 16px;border-bottom:1px solid var(--border);gap:12px} :is(.pf-sheet-body,.pe-drawer-body,.wiz-alerts-body){padding:16px} :is(.pf-sheet-foot,.pe-drawer-foot,.prv-foot,.prp-footrow,.wiz-rail-foot){padding:16px;border-top:1px solid var(--border);gap:8px} :is(.activity-row,.prp-lead-row,.ns-row,.cj-mrow,.wiz-set-row,.wiz-sum-row){min-height:62px;padding:8px 12px;gap:10px;border-color:var(--border)} :is(.pf-grid,.pf-ms-grid,.pe-media-grid,.wiz-grid,.photo-grid){gap:12px} :is(.l-act,.cs-btn,.alerts-btn,.tb-addrow,.tb-share-btn,.cal-time,.pipe-chip,.cj-chip,.pf-add,.pf-btn,.wiz-btn){min-height:44px;border-radius:var(--radius);font-family:inherit} :is(.cs-btn,.alerts-btn,.tb-addrow,.tb-share-btn,.cal-time,.pipe-chip,.cj-chip,.pf-add,.pf-btn,.wiz-btn){font-size:13px} :where(button,input,textarea,select,a,[tabindex]):focus-visible{outline:2px solid var(--accent-light);outline-offset:3px} @media(max-width:600px){:is(.prp-linkrow,.prp-footrow,.pf-btnrow,.cj-addrow,.wiz-row){flex-wrap:wrap;gap:8px}:is(.pf-grid:not(.pf-grid-tight),.pf-ms-grid,.wiz-grid){grid-template-columns:minmax(0,1fr)}.layer-card{max-width:100%}:is(.pf-field,.pe-field,.wiz-field,.fld){min-width:0}} /* ─── Components inside layers + the top-bar sheets ─────────────────── */ .layer, .tb-sheet{ font-family:'Inter', ui-sans-serif, system-ui, sans-serif; color:var(--text); line-height:1.5; } :where(.layer, .tb-sheet) .layer-card { background:var(--card); border-color:var(--border); } :where(.layer, .tb-sheet) .layer-foot { padding:16px; gap:8px; border-top:1px solid var(--border); background:var(--card); } :where(.layer, .tb-sheet) .layer-body { padding-bottom:24px; } :where(.layer, .tb-sheet) .sect { margin-bottom:20px; } :where(.layer, .tb-sheet) .sect-label, :where(.layer, .tb-sheet) .off-lbl, :where(.layer, .tb-sheet) .pf-lbl, :where(.layer, .tb-sheet) .pe-flabel, :where(.layer, .tb-sheet) .svc-group-label { font-size:.6875rem; font-weight:600; letter-spacing:.065em; color:var(--muted2); line-height:1.5; } :where(.layer, .tb-sheet) .sect-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; } :where(.layer, .tb-sheet) .row { gap:12px; padding-top:12px; padding-bottom:12px; border-color:var(--border); } :where(.layer, .tb-sheet) .row-lbl { font-size:.75rem; color:var(--muted2); line-height:1.5; } :where(.layer, .tb-sheet) .row-val { font-size:.8125rem; line-height:1.55; } /* Primary, secondary, text and destructive button families */ :where(.layer, .tb-sheet) :is(.l-btn,.set-connect,.set-manage,.set-locked,.cal-test,.svc-save, .svc-refresh,.svc-change,.svc-connect-btn,.svc-toolbar-link, .bl-current-cta,.bl-promo-apply,.bl-addcard,.bl-more,.off-cancel,.off-del, .off-check,.pf-btn,.pf-tool,.pf-add,.pf-sheet-done,.pe-publish,.pe-fbtn, .pe-layout-btn,.pe-lbtn,.tb-field-btn,.tb-offer-copy,.tb-offer-edit) { min-height:44px; padding:10px 14px; border-radius:10px; font-family:inherit; font-size:.8125rem; font-weight:600; line-height:1.4; letter-spacing:0; text-transform:none; } :where(.layer, .tb-sheet) :is(.set-manage,.cal-test,.svc-refresh,.svc-change,.off-cancel,.pf-tool,.pe-fbtn,.pe-layout-btn) { background:var(--card2); border:1px solid var(--border); color:var(--text); } :where(.layer, .tb-sheet) :is(.l-btn.primary,.set-connect,.svc-save,.svc-connect-btn,.pe-publish,.pf-btn.primary) { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } :where(.layer, .tb-sheet) :is(.off-del,.pf-danger,.tb-danger) { color:#eca2a9; } :where(.layer, .tb-sheet) button:disabled, :where(.layer, .tb-sheet) button.disabled { opacity:.45; cursor:not-allowed; } :where(.layer, .tb-sheet) button:focus-visible, :where(.layer, .tb-sheet) a:focus-visible, :where(.layer, .tb-sheet) input:focus-visible, :where(.layer, .tb-sheet) textarea:focus-visible, :where(.layer, .tb-sheet) select:focus-visible, :where(.layer, .tb-sheet) [tabindex]:focus-visible { outline:2px solid var(--accent-light); outline-offset:3px; } :where(.layer, .tb-sheet) button:hover:not(:disabled) { filter:brightness(1.06); } /* Labels, editable controls, help and errors */ :where(.layer, .tb-sheet) :is(.fld input,.fld select,.fld textarea, .svc-bind-select,.cal-select,.pr-param input,.off-in,.off-code-in, .pf-in,.pf-ta,.pf-sl,.pe-finput,.pe-textarea,.bl-promo-in) { min-height:44px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; font-size:1rem; line-height:1.4; max-width:100%; } :where(.layer, .tb-sheet) input[type=checkbox], :where(.layer, .tb-sheet) input[type=radio] { min-height:auto; width:16px; height:16px; accent-color:var(--accent); padding:0; } :where(.layer, .tb-sheet) input[type=range] { accent-color:var(--accent); } :where(.layer, .tb-sheet) textarea { resize:vertical; min-height:96px; } :where(.layer, .tb-sheet) input::placeholder, :where(.layer, .tb-sheet) textarea::placeholder { color:#838a94; } :where(.layer, .tb-sheet) :is(.cal-note,.svc-muted,.svc-info,.off-hint,.pf-hint,.pe-lnote,.pe-media-note,.bl-promo-note) { font-size:.75rem; color:var(--muted2); line-height:1.6; } /* Hub and provider rows */ :where(.layer, .tb-sheet) .set-hub { padding:16px; display:flex; flex-direction:column; gap:8px; } :where(.layer, .tb-sheet) .set-hub-row { min-height:72px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); margin:0; } :where(.layer, .tb-sheet) .set-hub-main, :where(.layer, .tb-sheet) .set-name { font-size:.875rem; font-weight:600; letter-spacing:-.015em; } :where(.layer, .tb-sheet) .set-hub-sub, :where(.layer, .tb-sheet) .set-row-sub { font-size:.75rem; color:var(--muted2); line-height:1.55; margin-top:4px; } :where(.layer, .tb-sheet) .set-list { padding:16px; display:flex; flex-direction:column; gap:8px; } :where(.layer, .tb-sheet) .set-row { padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); gap:12px; flex-wrap:wrap; } :where(.layer, .tb-sheet) .set-row:last-child { border-bottom:1px solid var(--border); } :where(.layer, .tb-sheet) .set-row-main { flex:1 1 170px; } :where(.layer, .tb-sheet) .set-row-top { flex-wrap:wrap; gap:8px; } :where(.layer, .tb-sheet) .set-row-side { gap:12px; margin-left:auto; } :where(.layer, .tb-sheet) .set-row.disabled { opacity:.8; } :where(.layer, .tb-sheet) .ios-toggle { position:relative; flex-shrink:0; } :where(.layer, .tb-sheet) .ios-toggle::before { content:''; position:absolute; top:50%; left:50%; width:max(100%,44px); height:44px; transform:translate(-50%,-50%); } /* Segmented controls and scheduling choices */ :where(.layer, .tb-sheet) .svc-seg { padding:3px; gap:3px; background:var(--surface); border:1px solid var(--border); border-radius:10px; } :where(.layer, .tb-sheet) :is(.svc-seg button,.svc-chip,.cal-time) { min-height:44px; font-size:.8125rem; border-radius:8px; font-weight:550; letter-spacing:0; } :where(.layer, .tb-sheet) :is(.svc-seg button.on,.svc-chip.on) { background:var(--accent-glow); color:var(--accent-light); border-color:#76613b; } :where(.layer, .tb-sheet) :is(.pe-lmove,.pe-drawer-x,.pf-x,.cal-nav) { min-height:44px; min-width:44px; } /* Booking forms, proposals, offers, billing and website layout cards */ :where(.layer, .tb-sheet) :is(.svc-pick,.svc-row,.off-card,.bl-current,.bl-plan,.bl-card-el,.pf-section,.pf-card,.pe-card,.pe-lrow) { border:1px solid var(--border); border-radius:12px; background:var(--surface); } :where(.layer, .tb-sheet) :is(.svc-pick,.off-card,.bl-card-el,.pe-lrow) { padding:14px; } :where(.layer, .tb-sheet) :is(.svc-pick-t,.svc-name,.off-headline,.bl-plan-name,.pf-sect-head,.pe-lname-txt) { font-size:.875rem; font-weight:600; } :where(.layer, .tb-sheet) :is(.svc-pick-d,.svc-entry-sub,.off-meta,.bl-renew,.bl-pm-exp) { font-size:.75rem; color:var(--muted2); line-height:1.55; } :where(.layer, .tb-sheet) :is(.pf-grid,.pf-ms-grid,.pe-media-grid) { gap:12px; } :where(.layer, .tb-sheet) :is(.off-actions,.pf-btnrow,.cal-actions,.bl-card-actions) { gap:8px; flex-wrap:wrap; } :where(.layer, .tb-sheet) :is(.bl-inv,.pr-row,.svc-other-row) { min-height:64px; padding-top:12px; padding-bottom:12px; border-color:var(--border); } :where(.layer, .tb-sheet) :is(.pf-tap,.pf-more,.pe-lrow,.pe-layout-btn) { min-height:44px; } :where(.layer, .tb-sheet) :is(.pf-sheet,.pe-drawer) { background:var(--card); border-color:var(--border); border-radius:16px 16px 0 0; } :where(.layer, .tb-sheet) :is(.pf-sheet-head,.pe-drawer-head,.pf-sheet-body,.pe-drawer-foot) { padding:16px; } :where(.layer, .tb-sheet) .pe-frame { background:white; } /* Customer preview retains its own design. */ :where(.layer, .tb-sheet) .l-stub { border-radius:10px; padding:12px; font-size:.75rem; line-height:1.6; } @media(max-width:600px) { :where(.layer, .tb-sheet) .set-list, :where(.layer, .tb-sheet) .set-hub { padding:12px 16px; } :where(.layer, .tb-sheet) .set-row { padding:12px; } :where(.layer, .tb-sheet) .set-row-side { justify-content:flex-end; } :where(.layer, .tb-sheet) .pf-grid:not(.pf-grid-tight), :where(.layer, .tb-sheet) .pf-ms-grid { grid-template-columns:minmax(0,1fr); } :where(.layer, .tb-sheet) .bl-plans { grid-template-columns:minmax(0,1fr); } :where(.layer, .tb-sheet) .pr-param input { max-width:100%; } } /* ─── Control sizing: single-line controls are 44px at every width ──── */ :where(.layer, .tb-sheet) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),select):not(.rl-select-native){ box-sizing:border-box;height:var(--ui-control-height);min-height:var(--ui-control-height);max-height:var(--ui-control-height);line-height:20px;padding-top:11px;padding-bottom:11px; } /* ─── Dropdown (js/select.js) ─────────────────────────────────────────── The native