/* ============================================================ CoachWave design system — ported from the /design/clients prototype (public/design/clients/styles.css). All classes are ds- prefixed; tokens + body rules are scoped to .ds-shell so other layouts (auth/admin/portal/onboarding) are unaffected. Fonts are self-hosted variable woff2. ============================================================ */ /* ── Root font scale ───────────────────────────────────────── The design system sizes everything in rem against this root so the whole app can be rescaled from one place. On short-height viewports (≤900px tall — e.g. wide-but-short laptops) the root shrinks ~12.5%, uniformly shrinking every rem-based size. NB: rem always resolves against the root, so the scale MUST target . To keep the header's ".ds-shell only" scope contract, the shrink is gated on a .ds-shell body being present AND on it being the coach app — the auth / onboarding / charter layouts (.ds-auth / .ds-onb / .chz) share .ds-shell but are NOT shrunk, so their standalone card layouts are untouched. (:has() is already used throughout this file, so support is a non-issue.) */ html:has(body.ds-shell) { font-size: 16px; } /* 1rem = 16px */ @media (max-height: 1000px) { html:has(body.ds-shell:not(.ds-auth):not(.ds-onb):not(.chz)) { font-size: 14px; /* 14/16 = −12.5% — covers maximized 1080p (viewport ~910–960px) + shorter laptops */ } } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/inter-latin-variable-1f021a24.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/newsreader-latin-variable-dd08b472.woff2") format("woff2"); } /* ============ CoachWave — "Sundays"-inspired variant ============ */ .ds-shell{ --serif:'Inter',system-ui,sans-serif; /* booking-app style: one clean grotesk everywhere */ --sans:'Inter',system-ui,sans-serif; --ink:#243B53; --muted:#5B7183; --faint:#8CA0B3; --line:#DCE4ED; --line-soft:#EAF0F6; --field:#F4F8FB; --card:#FFFFFF; --lilac-1:#E3F2FB; --lilac-2:#EAF5FD; --active:#E3F2FB; --active-grad:linear-gradient(90deg,#FBE5D6 0%,#D4E7F8 100%); --active-tx:#1173C2; --black:#1173C2; --black-press:#0E5FA0; /* Primary-CTA fill — deliberately near-black, independent of the blue accent above (see DESIGN_SYSTEM.md). Every dark button routes here. */ --cta:#17181C; --cta-press:#000; --canvas:#E2EBF8; --panel:#FFFFFF; /* restrained clinical chips */ --green-bg:#E3F5EA;--green-tx:#177E4D; --laven-bg:#E7EBFC;--laven-tx:#4358C7; --peach-bg:#FDF0E1;--peach-tx:#B26B0C; --blue-bg:#E3F2FB;--blue-tx:#1173C2; --pink-bg:#FBE9F0;--pink-tx:#B0487E; --amber-bg:#FDF3E0;--amber-tx:#B26B0C; --teal-bg:#E1EAF6;--teal-tx:#2D5B9E; --mint-bg:#DFF3F1;--mint-tx:#0E7A70; --r-shell:0.75rem; --r-card:0.625rem; --r-row:0.625rem; --r-btn:0.625rem; --btn-h:2.5rem; --btn-minw:9.375rem; --pill:0.5rem; --side-w:15.5rem; } .ds-shell{margin:0;height:100%} .ds-shell{ font-family:var(--sans);color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh; } /* Element resets at zero specificity (:where) so any ds- component class (e.g. .ds-sgroup, .ds-btn-new) can restyle them without fighting. */ /* Own our box model instead of leaning on Tailwind's preflight — the app loads Tailwind (already border-box) but the standalone charter layout does not, so without this its width:100% inputs overflow their grid columns. */ .ds-shell,.ds-shell :where(*,::before,::after){box-sizing:border-box} .ds-shell :where(button){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .ds-shell :where(input){font-family:inherit} .ds-shell ::selection{background:#BFE0F7} /* ---- Shell ---- */ .ds-shell{ height:100vh;background:var(--canvas); display:flex;overflow:hidden; } /* ---- Sidebar ---- */ .ds-side{width:var(--side-w);flex:0 0 var(--side-w);border-right:1px solid var(--line);background:#fff; display:flex;flex-direction:column;padding:1.25rem 1.125rem 1.25rem} /* the wordmark keeps its serif identity — the one place serif survives the theme */ .ds-brand{font-family:'Newsreader',Georgia,serif;font-weight:700;font-size:1.5rem;letter-spacing:-.015em;color:var(--ink);padding:0 0.625rem 0.25rem;white-space:nowrap} .ds-brand .ds-dot{color:var(--active-tx)} .ds-menu-label{font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:0 0.75rem;margin:2.875rem 0 0.75rem} .ds-nav{display:flex;flex-direction:column;gap:0.1875rem} .ds-nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;border-radius:0.6875rem; color:var(--muted);font-size:0.9062rem;font-weight:600;transition:.15s;width:100%;text-align:left} .ds-nav-item svg{width:1.1875rem;height:1.1875rem;flex:0 0 1.1875rem} .ds-nav-item:hover{background:var(--line-soft);color:var(--ink)} .ds-nav-item.ds-on{background:var(--active-grad);color:var(--ink)} .ds-nav-item.ds-on svg{color:var(--ink)} .ds-nav-badge{margin-left:auto;font-size:0.6875rem;font-weight:700;background:#EF3F6A;color:#fff;width:1.1875rem;height:1.1875rem;display:grid;place-items:center;border-radius:50%} .ds-nav-item.ds-on .ds-nav-badge{background:var(--active-tx)} .ds-side-sp{flex:1} .ds-upsell{position:relative;border-radius:1.125rem;padding:1.125rem 1rem 1rem;overflow:hidden; background:linear-gradient(160deg,#FBE5D6 0%,#F2E4F0 52%,#E8D9F3 100%);margin-bottom:1rem} .ds-upsell h4{font-family:var(--serif);font-weight:700;font-size:1.125rem;margin:0 0 0.5rem;line-height:1.1} .ds-upsell p{font-size:0.75rem;color:#6E6480;line-height:1.45;margin:0 0 0.875rem} .ds-upsell .ds-bar{height:0.3125rem;border-radius:0.3125rem;background:rgba(14,138,124,.18);margin-bottom:0.875rem;overflow:hidden} .ds-upsell .ds-bar i{display:block;height:100%;width:62%;background:#0E8A7C;border-radius:0.3125rem} .ds-btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%; background:var(--cta);color:#fff;font-weight:600;font-size:0.875rem;height:var(--btn-h);border-radius:var(--r-btn);transition:.15s} .ds-btn-dark:hover{background:var(--cta-press)} .ds-btn-dark svg{width:0.9375rem;height:0.9375rem} .ds-side-foot{display:flex;flex-direction:column;gap:0.125rem;border-top:1px solid var(--line);padding-top:0.75rem} .ds-foot-item{display:flex;align-items:center;gap:0.6875rem;padding:0.5625rem 0.75rem;border-radius:0.625rem;color:var(--muted);font-size:0.8438rem;font-weight:500;transition:.15s;width:100%} .ds-foot-item:hover{background:var(--line-soft);color:var(--ink)} .ds-foot-item svg{width:1.0625rem;height:1.0625rem} /* ---- Main ---- */ .ds-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--canvas)} /* Topbar spans the full width (app-bar style: title hugs the sidebar, avatar the right edge); only the page content below is capped. */ /* Grid keeps the command box centered in the viewport: the two 1fr side columns always match, so a longer/shorter page title never shifts it. */ .ds-topbar{display:grid;grid-template-columns:1fr minmax(0,33.75rem) 1fr;align-items:center;gap:1.5rem;padding:1.375rem 1.875rem} .ds-page-title{font-size:1.375rem;font-weight:700;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* breadcrumb rendered into the topbar title slot (client profile page) — inherits the 22px/700 title scale so location reads as the page heading */ .ds-tb-crumb{display:flex;align-items:center;gap:0.625rem;min-width:0} .ds-tb-crumb svg{width:1.125rem;height:1.125rem;color:var(--faint);flex:0 0 1.125rem} .ds-tb-crumb-link{color:var(--muted)} .ds-tb-crumb-link:hover{color:var(--ink)} .ds-tb-crumb-here{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-cmd{width:100%;max-width:33.75rem;margin:0 auto;display:flex;align-items:center;gap:0.6875rem;height:3rem; background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:0 0.5rem 0 1.125rem;transition:.15s} .ds-cmd:focus-within{border-color:#A8D2F0;box-shadow:0 0 0 4px rgba(17,115,194,.10)} .ds-cmd svg{width:1.125rem;height:1.125rem;color:var(--faint);flex:0 0 1.125rem} .ds-cmd input{flex:1;border:none;outline:none;background:none;font-size:0.875rem;color:var(--ink)} .ds-cmd input::placeholder{color:var(--faint)} .ds-cmd .ds-kbd{font-size:0.6875rem;font-weight:700;color:var(--muted);background:var(--field);border-radius:0.4375rem;padding:0.3125rem 0.5rem} .ds-top-right{display:flex;align-items:center;gap:0.875rem;justify-self:end} .ds-bell{position:relative;width:3rem;height:3rem;border-radius:0.8125rem;display:grid;place-items:center;color:var(--muted);transition:.15s} .ds-bell:hover{background:var(--line-soft);color:var(--ink)} .ds-bell.ds-has-notif{color:var(--ink)} .ds-bell svg{width:1.5rem;height:1.5rem} /* plain red unread dot, overlapping the bell's top-right with a white ring */ .ds-bell .ds-notif-dot{position:absolute;top:0.5625rem;right:0.625rem;width:0.625rem;height:0.625rem;border-radius:50%; background:#EF3F6A;border:2px solid #fff;box-shadow:0 1px 3px rgba(239,63,106,.4)} /* subtle attention pulse on the dot */ .ds-bell .ds-notif-dot::after{content:"";position:absolute;inset:-0.125rem;border-radius:50%; border:2px solid #EF3F6A;opacity:0;animation:notifPulse 2.4s ease-out infinite} @keyframes notifPulse{0%{transform:scale(1);opacity:.5}60%{transform:scale(1.9);opacity:0}100%{opacity:0}} .ds-me{position:relative;width:2.625rem;height:2.625rem;border-radius:50%;background:linear-gradient(140deg,#5FA8DC,#1173C2); display:grid;place-items:center;color:#fff;font-weight:700;font-size:0.875rem;font-family:var(--serif); overflow:hidden;padding:0;flex:0 0 2.625rem;box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(16,42,67,.2);transition:box-shadow .15s} .ds-me:hover{box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(16,42,67,.32)} .ds-me img{width:100%;height:100%;object-fit:cover;display:block} .ds-me .ds-me-initials{display:none;position:absolute;inset:0;place-items:center} .ds-me.ds-noimg .ds-me-initials{display:grid} .ds-scroll{flex:1;overflow-y:auto;padding:1.625rem 1.875rem 2.5rem} .ds-page{max-width:100rem;margin-inline:auto} /* ---- White panels on canvas ---- */ /* transform:translateZ(0) promotes each panel to its own compositor layer so its 1px border + box-shadow rasterize on whole pixels, instead of blending against the canvas on a fractional boundary at non-integer display scales (which produced a faint grey seam under the column-label row at ~100% browser zoom + OS scaling). */ .ds-panel{background:var(--panel);border:none;border-radius:0.75rem;box-shadow:0 2px 10px -2px rgba(16,42,67,.10); transform:translateZ(0);backface-visibility:hidden} /* ---- Stat cards ---- */ .ds-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.25rem} .ds-stat{display:flex;align-items:center;gap:0.8125rem;border:none;border-radius:0.625rem; padding:0.9375rem 1.125rem;background:var(--panel);cursor:pointer;transition:.15s;position:relative;text-align:left; box-shadow:0 2px 6px -2px rgba(16,42,67,.08)} .ds-stat:hover{box-shadow:0 8px 22px -12px rgba(16,42,67,.30)} .ds-stat.ds-on{box-shadow:0 0 0 2px var(--active-tx), 0 8px 20px -14px rgba(16,42,67,.4)} .ds-stat .ds-ic{width:2.625rem;height:2.625rem;border-radius:0.75rem;display:grid;place-items:center;flex:0 0 2.625rem} .ds-stat .ds-ic svg{width:1.25rem;height:1.25rem} .ds-stat .ds-txt{min-width:0} .ds-stat .ds-val{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1} .ds-stat .ds-lab{color:var(--muted);font-size:0.8125rem;margin-top:0.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ds-stat .ds-pin{position:absolute;top:0.6875rem;right:0.75rem;width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--active-tx);opacity:0;transition:.15s} .ds-stat.ds-on .ds-pin{opacity:1} .ds-ic.ds-orange{background:#FCEAD8;color:#D9670A} .ds-ic.ds-green{background:var(--green-bg);color:var(--green-tx)} .ds-ic.ds-violet{background:var(--laven-bg);color:var(--laven-tx)} .ds-ic.ds-blue{background:var(--blue-bg);color:var(--blue-tx)} .ds-ic.ds-peach{background:var(--peach-bg);color:var(--peach-tx)} /* ---- Toolbar ---- */ .ds-toolbar{display:flex;align-items:center;gap:0.875rem;margin-bottom:1.125rem} .ds-toolbar .ds-sp{flex:1} .ds-seg-group{display:inline-flex;align-items:stretch;background:var(--panel);border:1px solid var(--line); border-radius:0.625rem;box-shadow:0 1px 2px rgba(16,42,67,.04)} .ds-seg{display:inline-flex;align-items:center;gap:0.5rem;height:var(--btn-h);padding:0 1.0625rem;font-size:0.875rem;font-weight:600; color:var(--ink);background:transparent;transition:.15s} .ds-seg:hover{background:var(--line-soft)} .ds-seg svg{width:0.9375rem;height:0.9375rem;color:var(--muted)} .ds-seg.ds-on{color:var(--active-tx)} .ds-seg.ds-on svg{color:var(--active-tx)} /* Dark-fill variant: the selected segment reads as a solid dark button (used by the client session-emails toggle). */ .ds-seg-dark .ds-seg.ds-on{background:var(--cta);color:#fff;border-radius:0.5rem} .ds-seg-dark .ds-seg.ds-on:hover{background:var(--cta-press)} .ds-seg-dark .ds-seg.ds-on svg{color:#fff} .ds-seg-first{border-radius:0.5625rem 0 0 0.5625rem} .ds-seg-last{border-radius:0 0.5625rem 0.5625rem 0} .ds-seg-div{width:1px;background:var(--line);margin:0.4375rem 0} .ds-btn-new{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;height:var(--btn-h);min-width:var(--btn-minw);padding:0 1.375rem;background:var(--cta); color:#fff;font-weight:600;font-size:0.875rem;border-radius:var(--r-btn);transition:.15s} .ds-btn-new:hover{background:var(--cta-press)} .ds-btn-new svg{width:1rem;height:1rem} .ds-pop{position:absolute;top:3rem;left:0;background:var(--card);border:1px solid var(--line);border-radius:0.625rem; box-shadow:0 18px 40px -18px rgba(16,42,67,.35);padding:0.375rem;width:12.5rem;z-index:40} .ds-pop.ds-right{left:auto;right:0} .ds-pop button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.5625rem 0.6875rem;border-radius:0.5625rem; font-size:0.8438rem;color:var(--ink);font-weight:500} .ds-pop button:hover{background:var(--line-soft)} .ds-pop button.ds-sel{color:var(--active-tx);font-weight:600} .ds-pop button svg{width:1rem;height:1rem} .ds-rel{position:relative} /* Upward-opening popover — anchored to a trigger near the bottom of a column (e.g. the sidebar footer Help & Support menu) so it rises above the button. */ .ds-pop.ds-pop-up{top:auto;bottom:calc(100% + 0.5rem)} /* Help & Support menu — nav-style rows (leading icon + label, left aligned), overriding the base .ds-pop button's space-between/right-meta layout. */ .ds-help-pop{width:13.75rem} .ds-help-pop button.ds-help-item{justify-content:flex-start;gap:0.6875rem;color:var(--muted);font-weight:500} .ds-help-pop button.ds-help-item:hover{background:var(--line-soft);color:var(--ink)} .ds-help-pop button.ds-help-item svg{width:1.0625rem;height:1.0625rem;flex:0 0 1.0625rem;color:var(--faint)} .ds-help-pop button.ds-help-item:hover svg{color:var(--muted)} .ds-help-sep{height:1px;background:var(--line);margin:0.375rem 0.25rem} /* ---- Section + rows ---- */ .ds-section-head{display:flex;align-items:center;gap:0.625rem;margin:1.375rem 0.125rem 0.625rem} .ds-section-head .ds-t{font-size:0.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .ds-section-head .ds-n{font-size:0.7188rem;font-weight:700;color:var(--faint);background:var(--field);border-radius:var(--pill);padding:0.0625rem 0.5rem} .ds-section-head .ds-sp{flex:1} .ds-section-head .ds-more{color:var(--faint);display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:0.4375rem} .ds-section-head .ds-more:hover{background:var(--line-soft);color:var(--muted)} .ds-section-head .ds-more svg{width:1rem;height:1rem} .ds-rows-panel{padding:0.375rem 0.625rem;position:relative} /* .ds-panel's translateZ(0) makes each panel a stacking context, so a popover near the bottom of one panel would paint UNDER the next panel. Lift the panel that currently has an open popover (status/type picker or row menu) above siblings. */ .ds-rows-panel:has(.ds-pop:not(.hidden)){z-index:60} .ds-crow{display:grid;grid-template-columns:minmax(13.125rem,1.5fr) 8.25rem 9.25rem minmax(7rem,0.9fr) 6.5rem 7.375rem 7rem minmax(8.75rem,1fr) 1.875rem 2rem; align-items:center;gap:0.6875rem;background:transparent;border:none;border-radius:0.5rem; padding:0.9375rem 0.875rem;cursor:pointer;transition:background .16s, box-shadow .16s;position:relative} .ds-rows-panel .ds-crow:not(:last-child)::after{content:"";position:absolute;left:0.875rem;right:0.875rem;bottom:0;height:1px; background:var(--line-soft);transition:opacity .16s} .ds-crow:not(.ds-crow-head):hover{background:#F3F8FC} .ds-crow:hover::after{opacity:0} /* Column headers (re-uses the .ds-crow grid so headers track the columns) */ .ds-crow-head{cursor:default;padding-top:0.25rem;padding-bottom:0.5625rem} .ds-crow-head:hover{background:transparent;box-shadow:none} .ds-crow-head>*{font-size:0.6875rem} .ds-crow-head>*{font-size:0.6562rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* icon headers for the narrow session / notes count columns (text won't fit 42px) */ .ds-h-cnt{display:flex;align-items:center;justify-content:flex-start;width:2.625rem} .ds-h-cnt svg{width:0.875rem;height:0.875rem;color:var(--faint)} .ds-cl{display:flex;align-items:center;gap:0.75rem;min-width:0;padding-right:0.875rem} .ds-cl .ds-star{flex:0 0 auto;color:#D5D1DD;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:0.375rem;transition:.14s} .ds-cl .ds-star:hover{color:#E8A93C} .ds-cl .ds-star.ds-on{color:#E8A93C} .ds-cl .ds-star svg{width:1rem;height:1rem} .ds-av{width:2.625rem;height:2.625rem;border-radius:50%;flex:0 0 2.625rem;display:grid;place-items:center; font-weight:700;font-size:0.8125rem;background:#E8EFF7;color:#3D5C7C;font-family:var(--serif)} .ds-av-img{object-fit:cover} .ds-cl .ds-nm{font-size:0.8438rem;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* a truncated name reveals its full length while hovering the client cell */ .ds-crow:not(.ds-crow-head) .ds-cl:hover .ds-nm{overflow:visible;text-overflow:clip;position:relative;z-index:3; width:max-content;max-width:none;background:#F3F8FC;padding:0.125rem 0.625rem 0.125rem 0;margin:-0.125rem 0;border-radius:0.375rem} .ds-cl .ds-sub{font-size:0.8125rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0.0625rem} /* count chips (sessions / notes) — outlined pill buttons */ .ds-cnts{display:flex;gap:0.625rem;justify-self:start;min-width:0} .ds-cnt{display:inline-flex;align-items:center;justify-content:flex-start;gap:0.375rem;font-size:0.8125rem;font-weight:600;color:var(--ink);white-space:nowrap; min-width:2.625rem} .ds-cnt svg{width:0.875rem;height:0.875rem;color:var(--faint)} /* Read-only session-email indicator: its own last content column (before the ⋮ menu). Greyed by default (off), green when the client will receive emails. */ .ds-eml-cell{display:flex;justify-content:center} .ds-h-eml{display:flex;justify-content:center} .ds-h-eml svg{width:0.875rem;height:0.875rem;color:var(--faint)} .ds-eml-chip{min-width:0} /* off = grey (inherits .ds-cnt svg --faint); on = blue (will send); paused = amber (coach turned it on, but sending is globally paused). */ .ds-eml-chip.ds-eml-on svg{color:#1173C2} .ds-eml-chip.ds-eml-paused svg{color:#B26B0C} /* goal progress */ .ds-prog{display:flex;align-items:center;gap:0.6875rem;min-width:0} .ds-prog .ds-track{flex:1;height:0.5rem;border-radius:0.5rem;background:#ECEAF1;overflow:hidden;min-width:2.5rem} .ds-prog .ds-track i{display:block;height:100%;background:var(--ink);border-radius:0.375rem;transition:width .3s} .ds-prog .ds-pct{font-size:0.8125rem;font-weight:700;color:var(--ink);min-width:2.875rem;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .ds-prog.ds-none{color:var(--faint);font-weight:500;font-size:0.8125rem} /* package renewal signals, matching the drawer's session-package bar */ .ds-prog.ds-warn .ds-track i{background:var(--amber-tx)} .ds-prog.ds-warn .ds-pct{color:var(--amber-tx)} .ds-prog.ds-full .ds-track i{background:#C0392B} .ds-prog.ds-full .ds-pct{color:#C0392B} .ds-crow .ds-chip{justify-self:start} .ds-chip{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:500;padding:0.375rem 0.75rem;border-radius:var(--pill);white-space:nowrap} /* "by client" marker on a client-cancelled session chip */ .ds-chip-by{font-size:0.6875rem;font-weight:600;opacity:.7;font-style:italic;margin-left:-0.125rem} .ds-chip svg{width:0.8125rem;height:0.8125rem} /* status / type badges — time-slot style: tinted fill, dark text. Shared by clients (stchip/tychip) AND sessions (sstchip/typill) so the two pages' badges stay identical in height, weight and radius. */ .ds-stchip,.ds-tychip,.ds-sstchip,.ds-typill{border-radius:0.4375rem;font-weight:600;padding:0.4375rem 0.75rem;color:var(--ink)} .ds-stchip .ds-chevDown,.ds-tychip .ds-chevDown{opacity:.45} .ds-st-active{background:var(--green-bg);color:var(--green-tx)} .ds-st-new{background:var(--laven-bg);color:var(--laven-tx)} .ds-st-follow{background:var(--peach-bg);color:var(--peach-tx)} .ds-st-inactive{background:#ECF1F6;color:#5B7183} /* ---- Status / Type chips as edit triggers ---- */ .ds-st-wrap{display:inline-flex;justify-self:start} .ds-stchip,.ds-tychip,.ds-sstchip,.ds-typill{cursor:pointer;transition:filter .14s, box-shadow .14s} .ds-stchip .ds-chevDown,.ds-stchip svg,.ds-tychip .ds-chevDown,.ds-tychip svg,.ds-sstchip svg,.ds-typill svg{width:0.75rem;height:0.75rem;opacity:.55;margin-left:-1px} .ds-stchip:hover,.ds-tychip:hover,.ds-sstchip:hover,.ds-typill:hover{filter:brightness(.97);box-shadow:0 0 0 2px rgba(16,42,67,.08)} /* manual-override marker: a small ring-dot before the label */ .ds-stchip.ds-manual{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .ds-man-dot{width:0.375rem;height:0.375rem;border-radius:50%;background:currentColor;flex:0 0 0.375rem; box-shadow:0 0 0 2px rgba(255,255,255,.6)} /* status popover */ .ds-st-pop{width:13.75rem;padding:0.375rem;top:2.375rem} /* chips are ~28px tall — sit just below them, not at the toolbar-button offset */ .ds-st-pop-h{font-size:0.6562rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:0.4375rem 0.625rem 0.375rem} .ds-st-pop button{gap:0.625rem} .ds-st-swatch{width:0.625rem;height:0.625rem;border-radius:50%;flex:0 0 0.625rem} .ds-st-pop-lbl{flex:1;display:flex;align-items:center;gap:0.5rem;min-width:0} .ds-st-auto-tag{font-size:0.5938rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--active-tx); background:var(--active);border-radius:var(--pill);padding:0.0625rem 0.4375rem} .ds-st-pop-div{height:1px;background:var(--line);margin:0.3125rem 0.25rem} .ds-st-revert{display:flex;align-items:center;gap:0.625rem;width:100%;padding:0.5625rem 0.6875rem;border-radius:0.5625rem; font-size:0.8438rem;color:var(--ink);font-weight:500} .ds-st-revert:hover{background:var(--line-soft)} .ds-st-revert svg{width:1rem;height:1rem;color:var(--muted);flex:0 0 1rem} .ds-ty-individual{background:var(--blue-bg);color:var(--blue-tx)} .ds-ty-corporate{background:var(--teal-bg);color:var(--teal-tx)} /* slot style: the tinted background carries the semantic; text stays dark */ .ds-chip.ds-stchip,.ds-chip.ds-tychip{color:var(--ink)} .ds-next-cell{display:flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:600;color:var(--ink);white-space:nowrap} .ds-next-cell svg{width:0.875rem;height:0.875rem;color:var(--muted)} .ds-next-cell.ds-none{color:var(--faint);font-weight:500} .ds-company-cell{display:flex;align-items:center;gap:0.4375rem;font-size:0.8438rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ds-company-cell svg{width:0.9375rem;height:0.9375rem;color:var(--faint);flex:0 0 0.9375rem} .ds-company-cell.ds-none{color:var(--faint);font-weight:500} .ds-ls-cell{display:flex;align-items:center;gap:0.4375rem;white-space:nowrap} .ds-ls-cell svg{width:0.875rem;height:0.875rem;color:var(--faint);flex:0 0 0.875rem} .ds-ls-cell .ds-ls-d{font-size:0.8125rem;font-weight:600;color:var(--ink);line-height:1.15} .ds-ls-cell .ds-ls-r{font-size:0.6875rem;color:var(--faint);margin-top:0.0625rem} .ds-ls-cell.ds-none{color:var(--faint);font-weight:500} .ds-rmore{color:var(--faint);display:grid;place-items:center;width:2rem;height:2rem;border-radius:0.5rem;transition:background .14s, color .14s, box-shadow .14s} /* clear hover: white chip + ring so it reads even on the tinted row-hover background */ .ds-rmore:hover{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 2px 6px -2px rgba(16,42,67,.25)} .ds-rmore:active{background:var(--line-soft)} /* keep it highlighted while its menu is open */ .ds-rmore-wrap .ds-rmore.ds-open,.ds-rmore-wrap:has(.ds-row-pop:not(.hidden)) .ds-rmore{background:var(--active);color:var(--active-tx);box-shadow:none} .ds-rmore svg{width:1.0625rem;height:1.0625rem} .ds-rmore-wrap{justify-self:end} /* row action menu */ .ds-row-pop{top:2.375rem;width:13.75rem} .ds-row-pop>button,.ds-pop.ds-row-pop>a,.ds-row-pop form button{display:flex;align-items:center;justify-content:flex-start;gap:0.625rem;width:100%;padding:0.5625rem 0.6875rem;border-radius:0.5625rem; font-size:0.8438rem;font-weight:500;color:var(--ink);text-align:left} .ds-row-pop>button:hover,.ds-pop.ds-row-pop>a:hover,.ds-row-pop form button:hover{background:var(--line-soft)} .ds-row-pop>button svg,.ds-pop.ds-row-pop>a svg,.ds-row-pop form button svg{width:1rem;height:1rem;color:var(--muted);flex:0 0 1rem} .ds-row-pop .ds-row-danger{color:#C0392B} .ds-row-pop .ds-row-danger svg{color:#C0392B} .ds-row-pop .ds-row-danger:hover{background:#FBEAE7} /* inline delete confirmation */ .ds-row-confirm{padding:0.5rem 0.5625rem 0.375rem} .ds-row-confirm .ds-rc-q{font-size:0.8125rem;font-weight:600;color:var(--ink);margin-bottom:0.5625rem} .ds-row-confirm .ds-rc-acts{display:flex;gap:0.5rem} .ds-row-confirm .ds-rc-acts button{flex:1;height:2.125rem;border-radius:0.5625rem;font-size:0.7812rem;font-weight:600; display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;transition:.14s} .ds-row-confirm .ds-rc-cancel{background:var(--field);color:var(--ink)} .ds-row-confirm .ds-rc-cancel:hover{background:var(--line)} .ds-row-confirm .ds-rc-del{background:#C0392B;color:#fff} .ds-row-confirm .ds-rc-del:hover{background:#A93226} .ds-row-confirm .ds-rc-del svg{width:0.875rem;height:0.875rem} .ds-add-row{display:flex;align-items:center;justify-content:center;gap:0.5625rem;border:1.5px dashed #D7D3E0;border-radius:var(--r-row); padding:0.8125rem;color:var(--muted);font-size:0.8438rem;font-weight:600;background:transparent;width:100%;transition:.15s;margin-bottom:0.25rem} .ds-add-row:hover{border-color:#C9BEE0;color:var(--active-tx);background:var(--line-soft)} .ds-add-row svg{width:1rem;height:1rem} .ds-empty-sec{padding:1.125rem;text-align:center;color:var(--faint);font-size:0.8438rem} /* ---- Empty states (no clients yet / no matches) ---- */ .ds-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center; background:var(--panel);border:1px solid var(--line);border-radius:1.25rem;box-shadow:0 1px 2px rgba(16,42,67,.04); padding:3.375rem 1.75rem 3.125rem;margin-top:0.375rem} .ds-es-badge{width:3.75rem;height:3.75rem;border-radius:1.0625rem;background:var(--active);color:var(--active-tx); display:grid;place-items:center;margin-bottom:1.25rem} .ds-es-badge svg{width:1.6875rem;height:1.6875rem} .ds-es-title{font-family:var(--serif);font-weight:700;font-size:1.375rem;letter-spacing:-.01em;margin:0 0 0.5rem} .ds-es-sub{font-size:0.875rem;color:var(--muted);line-height:1.55;margin:0 0 1.375rem;max-width:22.5rem} .ds-add-row.ds-big{width:auto;padding:0.8125rem 1.375rem;border-radius:var(--pill);margin-bottom:0} .ds-es-clear{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;height:var(--btn-h);min-width:var(--btn-minw); padding:0 1.375rem;border-radius:var(--r-btn);background:var(--cta);color:#fff;font-weight:600;font-size:0.875rem;transition:.15s} .ds-es-clear:hover{background:var(--cta-press)} /* ---- Drawer ---- */ .ds-scrim{position:fixed;inset:0;background:rgba(13,38,63,.40);backdrop-filter:blur(2px);z-index:80;opacity:0;animation:fade .2s forwards} @keyframes fade{to{opacity:1}} .ds-drawer{position:fixed;top:0;right:0;height:100vh;width:35rem;max-width:96vw;z-index:90;background:#fff; box-shadow:-30px 0 70px -30px rgba(16,42,67,.4);display:flex;flex-direction:column; transform:translateX(100%);animation:slide .27s cubic-bezier(.22,.61,.36,1) forwards} @keyframes slide{to{transform:translateX(0)}} /* frame reload while the drawer is already open (tab switch, edit/save) — no re-entry slide */ .ds-drawer.ds-open{animation:none;transform:none} /* exit animation — drawer slides back out and the scrim fades before removal */ .ds-drawer.ds-closing{animation:slideOut .24s cubic-bezier(.4,0,1,1) forwards} @keyframes slideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} .ds-scrim.ds-closing{animation:fadeOut .22s ease forwards} @keyframes fadeOut{from{opacity:1}to{opacity:0}} /* top action bar */ .ds-dr-bar{display:flex;align-items:center;justify-content:space-between;padding:0.8125rem 1rem;border-bottom:1px solid var(--line)} .ds-dr-bar-l,.ds-dr-bar-r{display:flex;align-items:center;gap:0.25rem} .ds-dr-act{display:inline-flex;align-items:center;gap:0.5rem;height:2.25rem;padding:0 0.75rem;border-radius:var(--r-btn);font-size:0.875rem;font-weight:600;color:var(--ink)} .ds-dr-act:hover{background:var(--line-soft)} .ds-dr-act svg{width:1rem;height:1rem;color:var(--muted)} .ds-dr-ic{width:2.25rem;height:2.25rem;border-radius:var(--r-btn);display:grid;place-items:center;color:var(--muted)} .ds-dr-ic:hover{background:var(--line-soft);color:var(--ink)} .ds-dr-ic svg{width:1.125rem;height:1.125rem} .ds-dr-ic .ds-on{color:#E8A93C} /* Prominent status actions — natural-width buttons with breathing room, between the pills and the quiet facts (promoted out of the top bar). */ .ds-dr-actions{display:flex;gap:0.625rem;margin:2.375rem 0 2.625rem;flex-wrap:wrap;justify-content:center} .ds-dr-actions .ds-gbtn{min-width:0;padding:0 1rem} .ds-dr-scroll{flex:1;overflow-y:auto;padding:1.625rem 1.875rem 1.625rem} /* Drawer identity header: read-only avatar (photo or initials tint) beside the eyebrow/title/goal. Upload + crop live on the full profile page, not the peek. */ .ds-dr-head{display:flex;align-items:flex-start;gap:0.9375rem;margin-bottom:0.125rem} .ds-dr-head-id{min-width:0;flex:1} .ds-dr-avatar{flex:0 0 3.5rem;width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center; font-size:1.0625rem;font-weight:700;font-family:var(--serif)} .ds-dr-avatar.ds-av{font-size:1.0625rem} .ds-dr-avatar-img{object-fit:cover} .ds-dr-head .ds-dr-eyebrow{margin-bottom:0.5625rem} .ds-dr-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.7812rem;font-weight:600;color:var(--muted);margin-bottom:0.875rem} .ds-dr-eyebrow svg{width:0.9375rem;height:0.9375rem;color:var(--faint)} .ds-dr-title{font-family:var(--serif);font-weight:700;font-size:1.625rem;line-height:1.1;letter-spacing:-.015em;margin:0 0 0.6875rem} /* title row with the "View profile" link pushed to the right edge */ .ds-dr-title-row{display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;margin:0 0 0.6875rem} .ds-dr-title-row .ds-dr-title{margin:0} .ds-dr-title-row .ds-sc-view{margin-left:auto;padding:0.25rem 0.5rem;align-self:center} /* quiet goal/focus line under the name */ .ds-dr-goal{display:flex;align-items:center;gap:0.5rem;font-size:0.8438rem;font-weight:600;color:var(--muted);margin-bottom:0.875rem} .ds-dr-goal svg{width:0.9375rem;height:0.9375rem;color:var(--faint)} /* session-package banner: sessions delivered vs the agreed package, with a renewal nudge as it runs out (warn = almost done, full = used up) */ .ds-dr-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:0.625rem;padding:0.8125rem 1rem;margin-bottom:1.25rem; background:#EAF3FC} .ds-dr-banner.ds-warn{background:#FBF3E4} .ds-dr-banner.ds-full{background:#FBEBE9} .ds-dr-banner .ds-bn-l{display:flex;align-items:center;gap:0.8125rem;min-width:0} .ds-dr-banner .ds-bn-ic{width:2.5rem;height:2.5rem;border-radius:0.6875rem;background:var(--black);color:#fff;display:grid;place-items:center;flex:0 0 2.5rem} .ds-dr-banner .ds-bn-ic svg{width:1.1875rem;height:1.1875rem} .ds-dr-banner .ds-bn-t{font-size:0.8438rem;font-weight:700} .ds-dr-banner .ds-bn-s{font-size:0.7812rem;color:var(--muted);margin-top:0.125rem} .ds-dr-banner .ds-bn-s.ds-warn{color:var(--amber-tx);font-weight:600} .ds-dr-banner .ds-bn-s.ds-full{color:#C0392B;font-weight:600} .ds-dr-banner .ds-bn-pct{font-family:var(--serif);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;white-space:nowrap;flex:0 0 auto} .ds-dr-pills{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.125rem} /* Session page: status chips left, primary action + ⋮ right on the same row. */ .ds-sess-hd-pills{align-items:center} .ds-sess-hd-actions{margin-left:auto} .ds-chip.ds-outline{background:#fff;border:1px solid var(--line);color:var(--muted)} .ds-dr-block{margin-bottom:1.625rem} .ds-bk-h{font-size:0.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:0.75rem} .ds-bk-sub{font-size:0.7188rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:0.625rem} .ds-bk-p{font-size:0.8438rem;line-height:1.6;color:#46617A;margin:0} .ds-bk-empty{font-size:0.8438rem;color:var(--faint)} .ds-dr-quick{display:flex;gap:1.375rem;padding:0.8125rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:1.25rem} .ds-dr-quick .ds-qk{display:flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;color:var(--muted);font-weight:500} .ds-dr-quick .ds-qk b{color:var(--ink);font-weight:700} .ds-dr-quick .ds-qk svg{width:0.9375rem;height:0.9375rem;color:var(--faint)} /* Delivery-mode glyph inlined into the "Starts at … · " fact/banner. */ .ds-mode-ic{vertical-align:-2px;margin-right:0.0625rem} /* Session drawer — with the actions compacted onto the chips row there's room to open up the header rhythm. Scoped to .ds-sess-drawer so the session page (kept tight to fit the viewport) and the client drawer are untouched; the detail-field rows below keep their existing spacing. */ .ds-sess-drawer{padding-top:2rem} .ds-sess-drawer .ds-dr-eyebrow{margin-bottom:1.25rem} .ds-sess-drawer .ds-dr-title-row{margin-bottom:0.875rem} .ds-sess-drawer .ds-dr-sub-date{margin:0 0 1.375rem} .ds-sess-drawer .ds-dr-pills{margin-bottom:1.625rem} .ds-sess-drawer .ds-dr-quick{padding:1rem 0;margin-bottom:1.75rem} .ds-file{display:flex;align-items:center;gap:0.8125rem;padding:0.75rem 0;border-bottom:1px solid var(--line-soft)} .ds-file:last-child{border:none;padding-bottom:0} .ds-file-ic{width:2.375rem;height:2.375rem;border-radius:0.625rem;display:grid;place-items:center;flex:0 0 2.375rem} .ds-file-ic svg{width:1.125rem;height:1.125rem} .ds-file-ic.ds-pdf{background:#FBE9E7;color:#C43D3D} .ds-file-ic.ds-docx{background:var(--blue-bg);color:var(--blue-tx)} .ds-file-meta{flex:1;min-width:0} .ds-file-nm{font-size:0.8438rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ds-file-dt{font-size:0.7188rem;color:var(--faint);margin-top:0.125rem} .ds-file-acts{display:flex;gap:0.75rem} .ds-lnk{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:600;color:var(--active-tx)} .ds-lnk:hover{color:#0E5FA0} .ds-lnk svg{width:0.875rem;height:0.875rem} .ds-dr-tabs{display:flex;gap:2rem;border-bottom:1px solid var(--line);margin-bottom:1rem} .ds-dtab{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.875rem;font-weight:600;color:var(--muted);padding-bottom:0.6875rem;border-bottom:2px solid transparent;margin-bottom:-1px} .ds-dtab.ds-on{color:var(--active-tx);border-color:var(--active-tx)} .ds-dtab:hover{color:var(--ink)} .ds-dtab .ds-dtab-n{font-size:0.6875rem;font-weight:700;color:var(--faint);background:var(--field);border-radius:var(--pill); min-width:1.125rem;height:1.125rem;padding:0 0.375rem;display:grid;place-items:center;line-height:1} .ds-dtab.ds-on .ds-dtab-n{color:var(--ink)} .ds-thread{display:flex;flex-direction:column} /* hairline divider between notes — half-width, centered; margin+padding split keeps it vertically centered in the gap */ .ds-thread > .ds-cmt + .ds-cmt{margin-top:0.875rem;padding-top:0.9375rem;position:relative} .ds-thread > .ds-cmt + .ds-cmt::before{content:"";position:absolute;top:0;left:25%;width:50%;height:1px;background:var(--line-soft)} .ds-cmt{display:flex;gap:0.6875rem} .ds-cmt-body{flex:1;min-width:0} /* visibility chip (client-portal beta) + "(edited)" marker inside a note head */ .ds-cmt-vis{display:inline-flex;align-items:center;gap:0.1875rem;font-size:0.6875rem;font-weight:600; color:var(--muted);background:var(--field);border-radius:var(--pill);padding:0.0625rem 0.4375rem} .ds-cmt-vis svg{width:0.75rem;height:0.75rem} .ds-cmt-vis.ds-shared{color:var(--active-tx);background:var(--active)} .ds-cmt-edited{font-style:italic} /* hover edit/delete actions on a note */ .ds-cmt-act{display:flex;gap:0.125rem;flex:0 0 auto;opacity:0;transition:opacity .14s} .ds-cmt:hover .ds-cmt-act,.ds-cmt:focus-within .ds-cmt-act, .ds-note:hover .ds-cmt-act,.ds-note:focus-within .ds-cmt-act{opacity:1} .ds-cmt-ic{width:1.75rem;height:1.75rem;border-radius:0.5rem;display:grid;place-items:center; color:var(--faint);transition:background .14s,color .14s} .ds-cmt-ic:hover{background:var(--line-soft);color:var(--ink)} .ds-cmt-ic.ds-danger:hover{background:#FDECEC;color:#C0392B} .ds-cmt-ic svg{width:0.9375rem;height:0.9375rem} /* ---- Notes in a comment layout: note icon + timestamp + content ---- */ /* No avatar/author name — every note is the coach's own; a soft blue note-icon badge leads, the timestamp sits where the name would, content below. */ .ds-note-ic{width:2.125rem;height:2.125rem;border-radius:50%;flex:0 0 2.125rem;display:grid;place-items:center; background:var(--blue-bg);color:var(--active-tx)} .ds-note-ic svg{width:1.0625rem;height:1.0625rem} .ds-note-head{display:flex;align-items:center;gap:0.5rem;min-height:1.25rem} .ds-note-head .ds-cmt-act{margin-left:auto} .ds-note-when{display:inline-flex;align-items:center;gap:0.3125rem;font-size:0.7812rem;font-weight:600; color:var(--faint);white-space:nowrap} .ds-note-when svg{width:0.8125rem;height:0.8125rem;color:var(--faint)} .ds-note-tx{font-size:0.8438rem;line-height:1.55;color:var(--ink);margin-top:0.125rem;overflow-wrap:break-word} .ds-note-tx ul li::marker,.ds-note-tx ol li::marker{color:var(--faint)} @media (prefers-reduced-motion: no-preference){ #notes_list .ds-cmt{animation:noteIn .3s ease both} @keyframes noteIn{from{opacity:0;transform:translateY(0.25rem)}to{opacity:1;transform:none}} } .ds-timeline{display:flex;flex-direction:column;gap:0.125rem} .ds-tl{display:flex;gap:0.75rem;padding:0.5rem 0;align-items:flex-start} .ds-tl-dot{width:0.625rem;height:0.625rem;border-radius:50%;background:#D5D1DD;margin-top:0.25rem;flex:0 0 0.625rem} .ds-tl-dot.ds-up{background:var(--active-tx)} .ds-tl div b{font-size:0.8438rem;font-weight:700} .ds-tl div span{font-size:0.8125rem;color:var(--muted)} .ds-tl-s{font-size:0.7812rem;color:var(--faint);margin-top:0.125rem} /* next-session pill muted state */ .ds-chip.ds-outline.ds-muted{color:var(--faint)} /* Contact details — rows are identical in read and edit mode; only the value on the right swaps to an input, so fields don't jump when toggling edit. */ .ds-dr-fields{display:flex;flex-direction:column;gap:0.125rem} .ds-dr-field{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.5625rem 0;border-bottom:1px solid var(--line-soft)} .ds-dr-field:last-child{border-bottom:none} .ds-dr-field .ds-dfl{display:flex;align-items:center;gap:0.5625rem;font-size:0.8125rem;color:var(--muted);font-weight:500;flex:0 0 auto} .ds-dr-field .ds-dfl svg{width:0.9375rem;height:0.9375rem;color:var(--faint)} .ds-dr-field .ds-dfv{flex:1;min-width:0;max-width:60%;margin-left:auto;padding-left:0.75rem;font-size:0.8438rem;color:var(--ink);font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* editing: input sits in the value's place. Left-aligned text so password-manager fill icons (LastPass, 1Password) injected at the input's right edge land over empty space instead of shoving the value left. */ .ds-dr-field .ds-dfi{flex:1;min-width:0;max-width:60%;margin-left:auto;border:1px solid var(--line);border-radius:0.5rem; padding:0.5rem 0.6875rem;font-size:0.8438rem;color:var(--ink);font-weight:600;text-align:left;background:var(--field); outline:none;transition:.15s;font-family:inherit;-webkit-appearance:none;appearance:none} .ds-dr-field .ds-dfi::placeholder{color:var(--faint);font-weight:500} /* these are type=search (to dodge password-manager fill icons) — strip search chrome */ .ds-dr-field .ds-dfi::-webkit-search-decoration, .ds-dr-field .ds-dfi::-webkit-search-cancel-button, .ds-dr-field .ds-dfi::-webkit-search-results-button{-webkit-appearance:none;display:none} .ds-dr-field .ds-dfi:focus{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 3px rgba(17,115,194,.10)} /* ds_select sized to the drawer's compact label-left / control-right row */ .ds-dr-field .ds-lsel{flex:1;min-width:0;max-width:60%;margin-left:auto} .ds-dr-field .ds-lsel-btn{height:1.9375rem;padding:0 0.6875rem;font-size:0.8438rem} .ds-dr-field a.ds-dfv-link{color:var(--active-tx);text-decoration:none} .ds-dr-field a.ds-dfv-link:hover{text-decoration:underline} /* About textarea (edit) */ .ds-dr-textarea{width:100%;border:1px solid var(--line);border-radius:0.625rem;padding:0.625rem 0.8125rem;font-size:0.875rem; color:#4f5662;background:var(--field);outline:none;transition:.15s;font-family:inherit;resize:vertical;line-height:1.6} .ds-dr-textarea::placeholder{color:var(--faint)} .ds-dr-textarea:focus{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} /* ---- Inline per-field editing (.ds-fld rows, field-edit controller) ---- */ .ds-fld.ds-dr-field{flex-wrap:wrap;padding:0.1875rem 0} /* view state: the value is a click-to-edit button; hover tints it like a field */ .ds-fld-viewwrap{flex:1;min-width:0;max-width:60%;margin-left:auto;display:inline-flex;align-items:center;gap:0.375rem} .ds-fld-viewwrap .ds-dfv{flex:1;min-width:0;max-width:none;margin-left:0} button.ds-fld-view{cursor:pointer;border-radius:0.5rem;padding:0.3125rem 0.6875rem;transition:background .12s} button.ds-fld-view:hover{background:var(--field)} /* lazily-loaded searchable-select rows (country/timezone): the frame holds either the value link (flag + label) or, once loaded, the ds_select form. Same class in both states so the frame element keeps its layout on load. */ .ds-fld-selframe{flex:1;min-width:0;max-width:60%;margin-left:auto;display:flex;align-items:center} .ds-fld-selframe .ds-fld-form,.ds-fld-selframe .ds-lsel{flex:1;min-width:0;max-width:none;margin-left:0} a.ds-fld-view{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;cursor:pointer;border-radius:0.5rem;padding:0.3125rem 0.6875rem; font-size:0.8438rem;font-weight:600;color:var(--ink);transition:background .12s} a.ds-fld-view:hover{background:var(--field)} a.ds-fld-view .ds-fld-selval{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-fld-empty{color:var(--faint);font-weight:400} .ds-dr-field .ds-dfv.ds-fld-empty{color:var(--faint);font-weight:400} a.ds-fld-view.ds-fld-empty .ds-fld-selval{color:var(--faint);font-weight:400} .ds-fld-open{width:1.625rem;height:1.625rem;border-radius:0.4375rem;display:grid;place-items:center;color:var(--muted);flex:0 0 1.625rem} .ds-fld-open:hover{background:var(--line-soft);color:var(--ink)} .ds-fld-open svg{width:0.875rem;height:0.875rem} /* edit state: the micro-form takes the value slot */ .ds-fld-form{flex:1;min-width:0;max-width:60%;margin-left:auto;display:flex} .ds-fld-form .ds-dfi{flex:1;min-width:0;max-width:none;margin-left:0} .ds-fld-form .ds-lsel{flex:1;min-width:0;max-width:none;margin-left:0} /* selects are always live — flat until hovered/opened so they read as values */ .ds-fld .ds-lsel-btn{border-color:transparent;background:transparent} .ds-fld .ds-lsel-btn:hover{background:var(--field)} .ds-fld .ds-lsel.ds-open .ds-lsel-btn{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} .ds-fld .ds-lsel-btn .ds-lsel-chev{opacity:0;transition:opacity .12s} .ds-fld .ds-lsel-btn:hover .ds-lsel-chev,.ds-fld .ds-lsel.ds-open .ds-lsel-chev{opacity:1} /* clearer subsection headers in the contact tab (Contact details / About) */ .ds-fld-sec{font-size:0.75rem;font-weight:600;letter-spacing:.09em;color:var(--muted)} .ds-fld-sec-gdpr{display:flex;align-items:center} .ds-fld-sec-gdpr .ds-hint{vertical-align:0} /* Client-communication section sits after the About/notes block — give it a clear margin + a hairline so it reads as its own group, not part of notes. */ .ds-fld-sec-comms{margin-top:3.25rem;padding-top:1.875rem;border-top:1px solid var(--line-soft)} /* About block variant — a divider separates it from the field list above */ .ds-fld-block .ds-fld-sub{display:flex;align-items:center;gap:0.375rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)} .ds-fld-block button.ds-fld-view{display:block;width:100%;text-align:left;padding:0.5rem 0.6875rem;margin:0 -0.6875rem;cursor:pointer} .ds-fld-block .ds-fld-form{max-width:none;display:block} /* saving / saved / error states */ .ds-fld-busy{opacity:.55;pointer-events:none} .ds-fld-check{display:inline-grid;place-items:center;color:var(--green-tx);opacity:0} .ds-fld-check svg{width:0.75rem;height:0.75rem} .ds-fld-saved .ds-fld-check{animation:fldSaved 1.6s ease forwards} @keyframes fldSaved{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}} .ds-fld-error .ds-dfi{border-color:#D66A5E;box-shadow:0 0 0 3px rgba(196,61,61,.08)} .ds-fld-err{flex-basis:100%;text-align:right;font-size:0.75rem;font-weight:600;color:#C0392B;padding-top:0.125rem} .ds-fld-gdpr{display:flex;align-items:center;gap:0.4375rem;font-size:0.75rem;color:var(--faint);margin-top:0.875rem} .ds-fld-gdpr svg{width:0.75rem;height:0.75rem;flex:0 0 0.75rem} /* tooltip trigger sits flush as the leading item (no trailing-icon margin) */ .ds-fld-gdpr .ds-hint{margin-left:0} .ds-fld-gdpr .ds-hint svg{width:0.75rem;height:0.75rem} /* Invoices tab — cards (legacy sessions recipe, still used by clients/_invoices_tab) */ .ds-sess-list{display:flex;flex-direction:column;gap:0.75rem} .ds-sess-card{border:1px solid var(--line);border-radius:0.625rem;padding:0.875rem 1rem;background:#fff;transition:box-shadow .14s} .ds-sess-card:hover{box-shadow:0 6px 18px -12px rgba(16,42,67,.3)} .ds-sess-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.625rem} .ds-sess-meta{display:flex;gap:1.125rem;flex-wrap:wrap;margin-bottom:0.5rem} .ds-sess-meta span{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.8125rem;font-weight:600;color:var(--ink)} .ds-sess-meta svg{width:0.875rem;height:0.875rem;color:var(--faint)} /* Sessions tab — flat rows on white with hairline dividers (client drawer + profile page). Icon tile softly tinted by session type, real status chip right with the relative time beneath. Each row is an to the session page; the book CTA lives in the sessions footer (.ds-ss-foot). */ /* group headers reuse the ledger's .ds-sgroup (collapsible) — normalize its ledger-panel margins to the tab width */ .ds-ss-list .ds-sgroup{width:100%;margin:1.25rem 0 0.25rem} .ds-ss-list .ds-sgroup:first-child{margin-top:0.125rem} .ds-ss-group{display:flex;flex-direction:column} .ds-ss-hint{padding:0.125rem 0.25rem 0.25rem} /* truncation note: clear air between the last row and the small print */ .ds-ss-group + .ds-ss-hint{margin-top:1rem} /* Centered empty state shared by the drawer/profile tabs (notes, sessions, tasks): soft icon, small title, muted hint. */ .ds-tab-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.875rem 1.25rem 2.5rem} .ds-tab-empty > svg{width:2.5rem;height:2.5rem;color:var(--line);margin-bottom:0.75rem} .ds-tab-empty .ds-te-t{font-size:0.9375rem;font-weight:600;color:var(--ink)} .ds-tab-empty .ds-te-s{font-size:0.8438rem;color:var(--muted);margin-top:0.25rem} .ds-ss-card{display:flex;align-items:center;gap:0.9375rem;padding:0.875rem 0.25rem;border-radius:0.75rem;color:inherit;text-decoration:none;cursor:pointer;transition:background .12s} .ds-ss-card:hover{background:var(--field)} .ds-ss-group .ds-ss-card + .ds-ss-card{border-top:1px solid var(--line-soft)} .ds-ss-ic{width:2.375rem;height:2.375rem;border-radius:0.6875rem;background:var(--field);color:var(--muted);display:grid;place-items:center;flex:0 0 2.375rem} .ds-ss-ic svg{width:1.0625rem;height:1.0625rem} .ds-ss-body{flex:1;min-width:0} .ds-ss-meta{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;font-size:0.8125rem;font-weight:600;color:var(--ink)} .ds-ss-meta span{display:inline-flex;align-items:center;gap:0.375rem} .ds-ss-meta svg{width:0.875rem;height:0.875rem;color:var(--faint)} .ds-ss-note{margin-top:0.25rem;font-size:0.8125rem;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-ss-tasks{background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:6.1875rem;padding:0.125rem 0.5rem;font-size:0.7188rem;font-weight:600;color:var(--muted)} .ds-ss-tasks svg{width:0.8125rem;height:0.8125rem;color:var(--faint)} .ds-ss-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.4375rem;flex:0 0 auto} /* minimalist status: icon + coloured text, no pill */ .ds-ss-st{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.8125rem;font-weight:600;white-space:nowrap} .ds-ss-st svg{width:0.875rem;height:0.875rem} .ds-ss-st.ds-scheduled{color:var(--active-tx)} .ds-ss-st.ds-completed{color:var(--green-tx)} .ds-ss-st.ds-cancelled{color:#C43D3D} .ds-ss-days{font-weight:500;font-size:0.8125rem;white-space:nowrap;color:var(--faint)} /* sessions footer — lifetime summary left, book CTA right */ .ds-ss-foot{display:flex;align-items:center;justify-content:space-between;gap:0.875rem} .ds-ss-foot .ds-dr-action{flex:0 0 auto;height:2.5rem;padding:0 1.125rem;font-size:0.8438rem} .ds-ss-foot .ds-dr-action svg{width:0.9375rem;height:0.9375rem} .ds-ss-total{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8125rem;font-weight:500;color:var(--muted);min-width:0} .ds-ss-total svg{width:1rem;height:1rem;color:var(--green-tx);flex:0 0 1rem} .ds-ss-foot.ds-pg{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line-soft)} /* sessions toolbar: removable active client-filter chip */ .ds-client-flt{display:inline-flex;align-items:center;gap:0.5rem;height:2.375rem;padding:0 0.875rem;border-radius:0.625rem;background:var(--active);color:var(--active-tx);font-size:0.8125rem;font-weight:600;white-space:nowrap;transition:filter .12s} .ds-client-flt:hover{filter:brightness(.96)} .ds-client-flt svg{width:0.875rem;height:0.875rem} .ds-client-flt svg:last-child{opacity:.6} /* status chip is read-only here — neutralize inherited interactive affordances */ .ds-chip.ds-static{cursor:default} .ds-chip.ds-static:hover{filter:none;box-shadow:none} .ds-dr-compose{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;border-top:1px solid var(--line);background:#fff} .ds-dr-compose input{flex:1;height:2.875rem;border:1px solid var(--line);border-radius:0.625rem;padding:0 1rem;font-size:0.875rem;background:var(--field);outline:none;transition:.15s} .ds-dr-compose input:focus{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} .ds-dr-compose .ds-send{width:2.875rem;height:2.875rem;border-radius:0.625rem;background:var(--black);color:#fff;display:grid;place-items:center;flex:0 0 2.875rem} .ds-dr-compose .ds-send:hover{background:var(--black-press)} .ds-dr-compose .ds-send svg{width:1.125rem;height:1.125rem} /* contextual tab actions (Sessions / Files) — real buttons, not fake composers */ .ds-dr-action{flex:1;height:var(--btn-h);border-radius:0.625rem;display:inline-flex;align-items:center;justify-content:center;gap:0.5625rem; background:var(--cta);color:#fff;font-weight:600;font-size:0.875rem;transition:.15s} .ds-dr-action:hover{background:var(--cta-press)} .ds-dr-action svg{width:1.0625rem;height:1.0625rem} .ds-dr-action.ds-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)} .ds-dr-action.ds-ghost:hover{background:var(--line-soft)} .ds-dr-action.ds-ghost svg{color:var(--muted)} /* ---- Client profile page (full-page counterpart of the drawer) ---- */ .ds-profile-page{max-width:77.5rem;margin:0 auto;width:100%} /* On desktop the white card fills the available viewport height and keeps that height constant across tabs — the active tab's content scrolls inside it rather than growing/shrinking the card. The full-height flex chain is scoped to the scroll column via :has() so no other ds- page is affected. Below the sidebar breakpoint the header alone would eat the whole card, so we fall back to natural (content) height and let the page scroll normally. */ @media(min-width:1024px){ .ds-scroll:has(.ds-profile-page){overflow:hidden} .ds-scroll:has(.ds-profile-page) > .ds-page{height:100%} .ds-scroll:has(.ds-profile-page) > .ds-page > main{height:100%;display:flex;flex-direction:column} .ds-profile-page{flex:1;min-height:0;display:flex;flex-direction:column} /* the session page wraps its panel in the #session_page stream target — keep the full-height flex chain flowing through it */ .ds-profile-page > #session_page{flex:1;min-height:0;display:flex;flex-direction:column} .ds-profile-page > .ds-profile, #session_page > .ds-profile{flex:1;min-height:0;display:flex;flex-direction:column} .ds-profile-page .ds-profile > #client_header, .ds-profile-page .ds-profile > #session_header{flex:0 0 auto} .ds-profile-page #client_profile_tabs, .ds-profile-page #session_profile_tabs{flex:1;min-height:0;display:flex;flex-direction:column} #session_page > .ds-bcrumb{flex:0 0 auto} .ds-profile-page .ds-dr-block{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0} .ds-profile-page .ds-dr-block > .ds-dr-tabs{flex:0 0 auto} .ds-profile-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-right:-0.5rem;padding-right:0.5rem} } @media(min-width:1024px){ /* Session page card height: fill the viewport so every tab is the same height (no short tab collapsing the card), but let a tab taller than the viewport grow the card and scroll the PAGE — never an internal sliver scrollbar (the tall session header would otherwise squeeze the body to a few lines). Client profiles keep the fixed pinned-tabs lock; this replaces it for #session_page. Only .ds-page carries the percentage floor — it resolves against the definite-height .ds-scroll; everything below just flex-grows to fill it. */ .ds-scroll:has(#session_page){overflow-y:auto} .ds-scroll:has(#session_page) > .ds-page{min-height:100%;display:flex;flex-direction:column} .ds-scroll:has(#session_page) > .ds-page > main{flex:1 0 auto;display:flex;flex-direction:column} .ds-profile-page:has(#session_page), .ds-profile-page:has(#session_page) > #session_page, #session_page > .ds-profile, .ds-profile-page:has(#session_page) #session_profile_tabs, .ds-profile-page:has(#session_page) .ds-dr-block{flex:1 0 auto;display:flex;flex-direction:column} .ds-profile-page:has(#session_page) .ds-dr-block{margin-bottom:0} .ds-profile-page:has(#session_page) .ds-profile-body{flex:1 0 auto;overflow:visible;margin-right:0;padding-right:0} } .ds-bcrumb{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;margin-bottom:1.125rem;flex-wrap:wrap} .ds-bcrumb-actions{justify-content:flex-end} .ds-bc-trail{display:flex;align-items:center;gap:0.5625rem;min-width:0} .ds-bc-trail svg{width:1rem;height:1rem;color:var(--faint);flex:0 0 1rem} .ds-bc-link{font-size:0.9375rem;font-weight:600;color:var(--muted)} .ds-bc-link:hover{color:var(--ink)} .ds-bc-here{font-size:0.9375rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ds-bc-actions{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;row-gap:0.5rem} .ds-profile{padding:1.875rem 2.375rem 2.125rem} /* header: avatar left of the identity block */ .ds-ph-top{display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:1rem} .ds-ph-id{min-width:0;flex:1} .ds-ph-id .ds-dr-title{margin-bottom:0.5rem} .ds-ph-id .ds-dr-goal{margin-bottom:0.625rem} .ds-ph-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .ds-ph-since{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.7812rem;font-weight:500;color:var(--faint)} .ds-ph-since svg{width:0.875rem;height:0.875rem} .ds-ph-avatar-wrap{position:relative;flex:0 0 auto} .ds-ph-avatar-img{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;display:grid;place-items:center; font-size:1.375rem;font-weight:700;font-family:var(--serif)} .ds-ph-avatar-edit{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;border-radius:50%; background:var(--black);color:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(16,42,67,.35)} .ds-ph-avatar-edit:hover{background:var(--black-press)} .ds-ph-avatar-edit svg{width:0.75rem;height:0.75rem} /* portal invitation status line (beta) */ .ds-portal{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.7812rem;font-weight:600} .ds-portal svg{width:0.875rem;height:0.875rem} .ds-portal-active{color:var(--green-tx)} .ds-portal-pending{color:var(--amber-tx)} .ds-portal-off{color:var(--faint)} .ds-portal-btn{background:none;border:none;padding:0;cursor:pointer} /* invoices tab bits */ .ds-inv-num{font-size:0.8438rem;font-weight:700} .ds-inv-amount{font-family:var(--serif);font-weight:800;font-size:0.9375rem} .ds-chip.ds-inv-draft{background:var(--field);color:var(--muted)} .ds-chip.ds-inv-sent{background:var(--blue-bg);color:var(--blue-tx)} .ds-chip.ds-inv-paid{background:var(--green-bg);color:var(--green-tx)} .ds-chip.ds-inv-overdue{background:#FBEBE9;color:#C0392B} /* resources tab header */ .ds-res-head{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;margin-bottom:1.125rem} @media(max-width:640px){ .ds-profile{padding:1.375rem 1.125rem 1.625rem} .ds-ph-top{gap:0.875rem} .ds-bc-actions{width:100%;justify-content:flex-end} } /* ---- Modal ---- */ .ds-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.5rem} .ds-box{position:relative;background:#fff;width:min(32.5rem,100vw - 2rem);max-height:92vh;overflow:hidden; display:flex;flex-direction:column;border-radius:0.75rem;box-shadow:0 40px 90px -30px rgba(16,42,67,.5); transform:translateY(0.625rem) scale(.99);animation:pop .22s forwards} @keyframes pop{to{transform:translateY(0) scale(1)}} .ds-m-head{padding:1.625rem 1.75rem 0;position:relative} .ds-m-badge{width:3.125rem;height:3.125rem;border-radius:0.875rem;background:var(--active);color:var(--active-tx);display:grid;place-items:center;margin-bottom:0.875rem} .ds-m-badge svg{width:1.5rem;height:1.5rem} .ds-m-title{font-size:1.3125rem;font-weight:700;letter-spacing:-.01em} .ds-m-sub{color:var(--muted);font-size:0.8438rem;margin-top:0.3125rem} .ds-m-close{position:absolute;top:1.25rem;right:1.375rem;width:2.125rem;height:2.125rem;border-radius:0.625rem;display:grid;place-items:center;color:var(--muted)} .ds-m-close:hover{background:var(--line-soft);color:var(--ink)} .ds-m-close svg{width:1.0625rem;height:1.0625rem} .ds-m-form{flex:1;min-height:0;display:flex;flex-direction:column} .ds-m-body{flex:1;min-height:0;padding:1.375rem 1.75rem 1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto} .ds-frow{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem} .ds-field label{display:block;font-size:0.7812rem;font-weight:600;color:var(--ink);margin-bottom:0.4375rem} .ds-field label .ds-req{color:#C0392B} /* per-field validation error (auth forms): red border on the control + message */ .ds-field-invalid :where(input, textarea){border-color:#D66A5E;box-shadow:0 0 0 3px rgba(196,61,61,.08)} .ds-field-invalid .ds-lsel-btn,.ds-lsel-invalid .ds-lsel-btn{border-color:#D66A5E;box-shadow:0 0 0 3px rgba(196,61,61,.08)} .ds-field-msg{margin:0.375rem 0 0;font-size:0.75rem;font-weight:600;color:#C0392B} /* label carrying a trailing help icon — flex keeps the icon centred on the text */ .ds-field label.ds-lbl-help{display:flex;align-items:center;gap:0.25rem} /* zero class-specificity (:where) so a composite control's single-class rule (.ds-phone-num, .ds-lsel-search input) cleanly overrides without a scoping arms race — see DESIGN_SYSTEM "element resets are zero-specificity". */ :where(.ds-field) input{width:100%;height:2.875rem;border:1px solid var(--line);border-radius:0.75rem;padding:0 0.875rem;font-size:0.875rem; color:var(--ink);background:var(--field);outline:none;transition:.15s} :where(.ds-field) input::placeholder{color:var(--faint)} :where(.ds-field) input:focus{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} :where(.ds-field) select{width:100%;height:2.875rem;border:1px solid var(--line);border-radius:0.75rem;padding:0 0.75rem;font-size:0.875rem; color:var(--ink);background:var(--field);outline:none;transition:.15s;cursor:pointer} :where(.ds-field) select:focus{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} /* international phone input: dial-code picker + number */ .ds-phone{position:relative;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:0.75rem;background:var(--field);transition:.15s} .ds-phone:focus-within{border-color:#A8D2F0;background:#fff;box-shadow:0 0 0 4px rgba(17,115,194,.10)} .ds-phone-cc{display:flex;align-items:center;gap:0.375rem;height:2.875rem;padding:0 0.75rem;background:transparent;border:none;cursor:pointer;font-size:0.875rem;color:var(--ink);border-radius:0.75rem 0 0 0.75rem} .ds-phone-cc:hover{background:var(--line-soft)} .ds-phone-flag{width:1.375rem;height:1rem;border-radius:0.125rem;object-fit:cover;box-shadow:0 0 0 1px rgba(16,42,67,.08)} .ds-phone-dial{font-weight:600} .ds-phone-chev{display:inline-flex} .ds-phone-chev svg{width:0.875rem;height:0.875rem;color:var(--muted)} .ds-phone-num{flex:1;min-width:0;width:auto;height:2.875rem;border:none;background:transparent;padding:0 0.875rem;font-size:0.875rem;color:var(--ink);outline:none;border-radius:0 0.75rem 0.75rem 0;box-shadow:none} .ds-phone-num:focus{border:none;background:transparent;box-shadow:none} .ds-phone-num::placeholder{color:var(--faint)} /* Shared dropdown-menu shell for the phone / list / autocomplete pickers. */ .ds-phone-menu,.ds-lsel-menu,.ds-ac-menu{position:absolute;top:calc(100% + 0.375rem);left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:0.75rem;box-shadow:0 18px 40px -18px rgba(16,42,67,.35)} .ds-phone-menu{overflow:hidden} .ds-phone.ds-up .ds-phone-menu{top:auto;bottom:calc(100% + 0.375rem)} .ds-phone-search{display:flex;align-items:center;gap:0.5rem;padding:0.625rem 0.75rem;border-bottom:1px solid var(--line-soft)} .ds-phone-search svg{width:1rem;height:1rem;color:var(--muted);flex:0 0 auto} .ds-phone-search input{flex:1;border:none;outline:none;font-size:0.875rem;background:transparent;color:var(--ink)} .ds-phone-list{max-height:15rem;overflow-y:auto;padding:0.375rem} .ds-phone-opt{display:flex;align-items:center;gap:0.625rem;width:100%;padding:0.5625rem 0.625rem;border:none;background:transparent;cursor:pointer;border-radius:0.5rem;font-size:0.875rem;color:var(--ink);text-align:left} .ds-phone-opt:hover{background:var(--line-soft)} .ds-phone-opt-flag{width:1.375rem;height:1rem;border-radius:0.125rem;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px rgba(16,42,67,.08)} .ds-phone-opt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-phone-opt-dial{color:var(--muted);font-weight:600;flex:0 0 auto} /* Reusable custom single-select styled like the phone picker (ds_select partial + list-select controller). The DS alternative to a native