/* ────────────────────────────────────────────────────────────── MinLyd — design system Ported from the MediVox UX recipe (--s-* token system) and re-skinned with the MinLyd palette. Load this BEFORE anything else. Two principles inherited from MediVox: 1. As complex as necessary, as simple as possible. 2. Apple-like — clean, generous spacing, hierarchy via type/colour. Brand story baked into the palette: • Patient mode → teal (#0FA4B4) "your sound, your data" • Clinician mode→ indigo (#5B57E0) "the professional workspace" • The two are bridged by the teal→indigo brand gradient — the same bridge MinLyd builds between patient and clinic. ────────────────────────────────────────────────────────────── */ :root { /* ---- MinLyd brand ---- */ --ml-teal: #0FA4B4; --ml-teal-deep: #0C8693; --ml-teal-soft: rgba(15, 164, 180, 0.10); --ml-teal-ring: rgba(15, 164, 180, 0.22); --ml-indigo: #5B57E0; --ml-indigo-deep: #4A46C7; --ml-indigo-soft: rgba(91, 87, 224, 0.10); --ml-indigo-ring: rgba(91, 87, 224, 0.22); --ml-gradient: linear-gradient(135deg, #0FA4B4 0%, #5B57E0 100%); --ml-gradient-soft: linear-gradient(135deg, rgba(15,164,180,.12) 0%, rgba(91,87,224,.12) 100%); /* ---- Accent: defaults to teal; overridden per mode below ---- */ --s-accent: var(--ml-teal); --s-accent-hover: var(--ml-teal-deep); --s-accent-soft: var(--ml-teal-soft); --s-accent-ring: var(--ml-teal-ring); /* ---- Signal colours (Apple system) ---- */ --s-red: #FF3B30; --s-red-soft: rgba(255, 59, 48, 0.10); --s-red-ring: rgba(255, 59, 48, 0.25); --s-green: #30D158; --s-green-soft: rgba(48, 209, 88, 0.12); --s-green-text: #1B8C3A; --s-orange: #FF9500; --s-orange-soft:rgba(255, 149, 0, 0.12); --s-orange-text:#B26200; --s-purple: #AF52DE; /* official / NAV tone — calm institutional slate-blue */ --s-nav: #3A6EA5; --s-nav-soft: rgba(58, 110, 165, 0.10); /* ---- Text hierarchy ---- */ --s-text: #1D1D1F; --s-text-secondary: #86868B; --s-text-tertiary: #AEAEB2; /* ---- Surfaces ---- */ --s-bg: #F4F5F7; /* page background (cool off-white) */ --s-surface: #FFFFFF; /* card background */ --s-surface-2: #FBFBFD; /* subtly recessed surface */ --s-border: #D2D2D7; --s-border-light: #E8E8ED; --s-hairline: rgba(60, 60, 67, 0.12); /* iOS separator */ /* ---- Radius ---- */ --s-radius-sm: 10px; --s-radius: 14px; --s-radius-lg: 18px; --s-radius-xl: 24px; --s-pill: 980px; /* ---- Shadows (two-stop, diffused) ---- */ --s-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 0.5px 1px rgba(0,0,0,0.03); --s-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03); --s-shadow-lg: 0 8px 28px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --s-shadow-tabbar: 0 -0.5px 0 var(--s-hairline); /* ---- Motion ---- */ --s-transition: 250ms cubic-bezier(0.25, 0.1, 0.25, 1); --s-spring: 420ms cubic-bezier(0.32, 0.72, 0, 1); /* ---- Type ---- */ --s-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Inter', 'Segoe UI', system-ui, sans-serif; /* App column widths */ --ml-col-phone: 440px; --ml-col-tablet: 760px; } /* Per-mode accent re-mapping. Set the class on . */ .mode-patient { --s-accent: var(--ml-teal); --s-accent-hover: var(--ml-teal-deep); --s-accent-soft: var(--ml-teal-soft); --s-accent-ring: var(--ml-teal-ring); } .mode-clinician { --s-accent: var(--ml-indigo); --s-accent-hover: var(--ml-indigo-deep); --s-accent-soft: var(--ml-indigo-soft); --s-accent-ring: var(--ml-indigo-ring); } /* Same-origin nav fades instead of white-flash. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ────────────────────────────────────────────────────────────── Reset & base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--s-font); color: var(--s-text); background: var(--s-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; line-height: 1.45; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--s-accent-ring); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--s-accent-soft); } /* ────────────────────────────────────────────────────────────── App shell — centred "device" column. On desktop it reads as the mobile app; on a phone it's full-bleed. This is what makes the prototype demo as the future iOS/Android app. ────────────────────────────────────────────────────────────── */ .ml-app { position: relative; width: 100%; max-width: var(--ml-col-phone); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--s-bg); display: flex; flex-direction: column; } .mode-clinician .ml-app { max-width: var(--ml-col-tablet); } /* Desktop: float the column with soft shadow so it reads as a device. */ @media (min-width: 800px) { body { background: #E9EAEE; padding: 24px 0; } .ml-app { min-height: calc(100vh - 48px); border-radius: 28px; box-shadow: var(--s-shadow-lg); overflow: hidden; } } /* Scroll region. Bottom padding clears the tab bar. */ .ml-content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 0 20px calc(96px + env(safe-area-inset-bottom, 0px)); } .ml-content--flush { padding-left: 0; padding-right: 0; } .ml-content--no-tabbar { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } /* ────────────────────────────────────────────────────────────── Top bar — iOS large-title. The big title scrolls with content; a compact sticky bar appears for back/actions. ────────────────────────────────────────────────────────────── */ .ml-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px; background: rgba(244, 245, 247, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .ml-topbar--bordered { box-shadow: 0 0.5px 0 var(--s-hairline); } .ml-topbar__back { display: inline-flex; align-items: center; gap: 3px; color: var(--s-accent); font-size: 1.0625rem; font-weight: 400; background: none; border: none; cursor: pointer; padding: 4px 6px 4px 0; } .ml-topbar__back i { font-size: 1.0625rem; } .ml-topbar__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-topbar__spacer { flex: 1; } .ml-topbar__action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--s-accent); font-size: 1.0625rem; font-weight: 400; background: none; border: none; cursor: pointer; padding: 4px 2px; min-width: 32px; min-height: 32px; } .ml-topbar__action--icon { font-size: 1.1875rem; } /* Large title block (lives at top of .ml-content) */ .ml-large-title { padding: 4px 0 12px; } .ml-large-title h1 { margin: 0; font-size: 2.125rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .ml-large-title p { margin: 4px 0 0; color: var(--s-text-secondary); font-size: 0.9375rem; } .ml-large-title__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } /* ────────────────────────────────────────────────────────────── Bottom tab bar — frosted glass, role-aware accent. ────────────────────────────────────────────────────────────── */ .ml-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); box-shadow: var(--s-shadow-tabbar); } .ml-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; color: var(--s-text-tertiary); font-size: 0.625rem; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: color 160ms ease; } .ml-tab__icon { font-size: 1.375rem; line-height: 1; height: 26px; display: grid; place-items: center; } .ml-tab__label { letter-spacing: -0.01em; } .ml-tab--active { color: var(--s-accent); } .ml-tab:active { opacity: 0.6; } /* ────────────────────────────────────────────────────────────── Sections & grouped lists (iOS Settings idiom) ────────────────────────────────────────────────────────────── */ .ml-section { margin-top: 24px; } .ml-section:first-child { margin-top: 8px; } .ml-section__header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 8px; } .ml-section__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-text-tertiary); } .ml-section__action { font-size: 0.8125rem; font-weight: 500; color: var(--s-accent); background: none; border: none; cursor: pointer; } /* Card */ .ml-card { background: var(--s-surface); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); overflow: hidden; } .ml-card--lg { border-radius: var(--s-radius-lg); } .ml-card--pad { padding: 16px; } .ml-card--pad-lg { padding: 20px; } .ml-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; } .ml-card__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .ml-card__title i { color: var(--s-text-tertiary); font-size: 0.875rem; } .ml-card__divider { height: 1px; background: var(--s-hairline); margin: 0 16px; } /* Grouped list rows */ .ml-list { background: var(--s-surface); border-radius: var(--s-radius); overflow: hidden; box-shadow: var(--s-shadow-sm); } .ml-list--plain { box-shadow: none; background: transparent; } .ml-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; background: var(--s-surface); transition: background 140ms ease; width: 100%; border: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; font-size: inherit; } a.ml-row, button.ml-row { cursor: pointer; } .ml-row:not(:last-child)::after { content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 1px; background: var(--s-hairline); } .ml-row--inset:not(:last-child)::after { left: 52px; } /* When a list is filtered, JS marks the last visible row so its hairline hides. */ .ml-row--last-visible::after { display: none !important; } .ml-row:active { background: var(--s-surface-2); } .ml-row--static { cursor: default; } .ml-row--static:active { background: var(--s-surface); } .ml-row__leading { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--s-accent-soft); color: var(--s-accent); font-size: 0.875rem; flex-shrink: 0; } .ml-row__leading--green { background: var(--s-green-soft); color: var(--s-green-text); } .ml-row__leading--orange { background: var(--s-orange-soft); color: var(--s-orange-text); } .ml-row__leading--red { background: var(--s-red-soft); color: var(--s-red); } .ml-row__leading--gray { background: #EFEFF2; color: var(--s-text-secondary); } .ml-row__leading--lg { width: 40px; height: 40px; border-radius: 10px; font-size: 1.0625rem; } .ml-row__body { flex: 1; min-width: 0; } .ml-row__title { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-row__subtitle { font-size: 0.8125rem; color: var(--s-text-secondary); margin-top: 1px; } .ml-row__value { font-size: 0.9375rem; color: var(--s-text-secondary); white-space: nowrap; } .ml-row__chevron { color: var(--s-text-tertiary); font-size: 0.8125rem; flex-shrink: 0; } .ml-row__trailing { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ────────────────────────────────────────────────────────────── Stat tiles ────────────────────────────────────────────────────────────── */ .ml-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .ml-stat-grid--3 { grid-template-columns: repeat(3, 1fr); } .ml-stat { background: var(--s-surface); border-radius: var(--s-radius); padding: 16px; box-shadow: var(--s-shadow-sm); } .ml-stat__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s-text-tertiary); } .ml-stat__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; line-height: 1; } .ml-stat__value--sm { font-size: 1.25rem; } .ml-stat__meta { font-size: 0.8125rem; color: var(--s-text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 5px; } .ml-stat__meta i { font-size: 0.6875rem; } .ml-stat--accent { background: var(--ml-gradient); color: #fff; } .ml-stat--accent .ml-stat__label, .ml-stat--accent .ml-stat__meta { color: rgba(255,255,255,.82); } /* ────────────────────────────────────────────────────────────── Buttons — pill primary, soft secondary, ghost, danger ────────────────────────────────────────────────────────────── */ .ml-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: none; border-radius: var(--s-pill); font-size: 1rem; font-weight: 600; font-family: var(--s-font); letter-spacing: -0.01em; cursor: pointer; transition: background var(--s-transition), transform 120ms ease, opacity 160ms ease, box-shadow var(--s-transition); -webkit-tap-highlight-color: transparent; } .ml-btn:active { transform: scale(0.97); } .ml-btn--primary { background: var(--s-accent); color: #fff; } .ml-btn--primary:hover { background: var(--s-accent-hover); } .ml-btn--gradient { background: var(--ml-gradient); color: #fff; } .ml-btn--gradient:hover { box-shadow: 0 6px 18px rgba(15,164,180,.30); } .ml-btn--secondary { background: var(--s-accent-soft); color: var(--s-accent); } .ml-btn--secondary:hover { background: var(--s-accent-ring); } .ml-btn--ghost { background: var(--s-surface); color: var(--s-text); box-shadow: var(--s-shadow-sm); } .ml-btn--ghost:hover { background: var(--s-surface-2); } .ml-btn--danger { background: var(--s-red-soft); color: var(--s-red); } .ml-btn--danger:hover { background: var(--s-red-ring); } .ml-btn--block { display: flex; width: 100%; } .ml-btn--lg { padding: 15px 24px; font-size: 1.0625rem; } .ml-btn--sm { padding: 8px 14px; font-size: 0.875rem; } .ml-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* BankID button — recognisable institutional black with the BankID mark */ .ml-btn--bankid { background: #39134C; color: #fff; } .ml-btn--bankid:hover { background: #2c0f3b; } .ml-bankid-mark { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; letter-spacing: -0.02em; } .ml-bankid-mark b { color: #fff; } .ml-bankid-mark span { color: #ECA9FF; } /* ────────────────────────────────────────────────────────────── Badges & chips ────────────────────────────────────────────────────────────── */ .ml-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--s-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em; background: #EFEFF2; color: var(--s-text-secondary); white-space: nowrap; } .ml-badge--accent { background: var(--s-accent-soft); color: var(--s-accent); } .ml-badge--green { background: var(--s-green-soft); color: var(--s-green-text); } .ml-badge--orange { background: var(--s-orange-soft); color: var(--s-orange-text); } .ml-badge--red { background: var(--s-red-soft); color: var(--s-red); } .ml-badge--nav { background: var(--s-nav-soft); color: var(--s-nav); } .ml-badge--dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; } .ml-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--s-pill); background: var(--s-surface); color: var(--s-text); font-size: 0.875rem; font-weight: 500; box-shadow: var(--s-shadow-sm); cursor: pointer; transition: all 140ms ease; border: none; } .ml-chip--active { background: var(--s-accent); color: #fff; } /* ────────────────────────────────────────────────────────────── Segmented control (iOS) ────────────────────────────────────────────────────────────── */ .ml-segmented { display: inline-flex; padding: 2px; gap: 2px; background: #EBEBF0; border-radius: 10px; width: 100%; } .ml-segmented__option { flex: 1; text-align: center; padding: 7px 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--s-text); background: transparent; border: none; cursor: pointer; transition: background 200ms ease, box-shadow 200ms ease; } .ml-segmented__option--active { background: var(--s-surface); box-shadow: var(--s-shadow-sm); } /* ────────────────────────────────────────────────────────────── Avatar, hero, misc ────────────────────────────────────────────────────────────── */ .ml-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ml-gradient); color: #fff; font-weight: 600; font-size: 1rem; flex-shrink: 0; } .ml-avatar--lg { width: 64px; height: 64px; font-size: 1.5rem; } .ml-avatar--sm { width: 32px; height: 32px; font-size: 0.8125rem; } .ml-gradient-text { background: var(--ml-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ml-hero-card { border-radius: var(--s-radius-lg); background: var(--ml-gradient); color: #fff; padding: 20px; box-shadow: 0 10px 30px rgba(15,164,180,.22); } .ml-hero-card--indigo { background: linear-gradient(135deg,#5B57E0 0%,#7E7BEA 100%); box-shadow: 0 10px 30px rgba(91,87,224,.24); } .ml-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--s-radius-sm); background: var(--s-accent-soft); color: var(--s-text); font-size: 0.8125rem; line-height: 1.5; } .ml-note i { color: var(--s-accent); margin-top: 1px; } .ml-note--nav { background: var(--s-nav-soft); } .ml-note--nav i { color: var(--s-nav); } /* Empty state */ .ml-empty { text-align: center; padding: 40px 24px; color: var(--s-text-secondary); } .ml-empty i { font-size: 2rem; color: var(--s-text-tertiary); margin-bottom: 12px; } .ml-empty h3 { margin: 0 0 4px; font-size: 1rem; color: var(--s-text); } .ml-empty p { margin: 0; font-size: 0.875rem; } /* Utility */ .ml-spacer-sm { height: 8px; } .ml-spacer { height: 16px; } .ml-spacer-lg { height: 28px; } .ml-muted { color: var(--s-text-secondary); } .ml-tertiary { color: var(--s-text-tertiary); } .ml-center { text-align: center; } .ml-stack { display: flex; flex-direction: column; gap: 12px; } .ml-stack--sm { gap: 8px; } .ml-row-flex { display: flex; align-items: center; gap: 10px; } .ml-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ml-grow { flex: 1; min-width: 0; } .ml-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ────────────────────────────────────────────────────────────── Bottom sheet / modal (BankID consent flow lives here) ────────────────────────────────────────────────────────────── */ .ml-sheet-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--s-transition); } .ml-sheet-backdrop.open { opacity: 1; pointer-events: auto; } .ml-sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 100%; max-width: var(--ml-col-phone); z-index: 1101; background: var(--s-surface); border-radius: var(--s-radius-xl) var(--s-radius-xl) 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.18); padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); transition: transform var(--s-spring); max-height: 92vh; overflow-y: auto; } .mode-clinician .ml-sheet { max-width: var(--ml-col-tablet); } .ml-sheet.open { transform: translate(-50%, 0); } .ml-sheet__handle { width: 36px; height: 5px; border-radius: 980px; background: var(--s-border); margin: 8px auto 16px; } .ml-sheet__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } .ml-sheet__sub { color: var(--s-text-secondary); font-size: 0.9375rem; margin-top: 4px; } /* Consent line items inside the sheet */ .ml-consent-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; } .ml-consent-item:not(:last-child) { border-bottom: 1px solid var(--s-hairline); } .ml-consent-item__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--s-accent-soft); color: var(--s-accent); display: grid; place-items: center; flex-shrink: 0; } .ml-consent-item__title { font-weight: 600; font-size: 0.9375rem; } .ml-consent-item__desc { font-size: 0.8125rem; color: var(--s-text-secondary); margin-top: 2px; } /* BankID processing animation */ .ml-bankid-stage { text-align: center; padding: 24px 0 8px; } .ml-spinner { width: 44px; height: 44px; margin: 0 auto 16px; border: 3px solid var(--s-accent-soft); border-top-color: var(--s-accent); border-radius: 50%; animation: ml-spin 0.8s linear infinite; } @keyframes ml-spin { to { transform: rotate(360deg); } } .ml-check-pop { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--s-green); color: #fff; display: grid; place-items: center; font-size: 1.5rem; animation: ml-pop var(--s-spring); } @keyframes ml-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } /* ────────────────────────────────────────────────────────────── Timeline (HA history, request status) ────────────────────────────────────────────────────────────── */ .ml-timeline { position: relative; padding-left: 28px; } .ml-timeline__item { position: relative; padding-bottom: 22px; } .ml-timeline__item:last-child { padding-bottom: 0; } .ml-timeline__item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--s-surface); border: 2.5px solid var(--s-accent); } .ml-timeline__item--done::before { background: var(--s-accent); } .ml-timeline__item--muted::before { border-color: var(--s-border); } .ml-timeline__item:not(:last-child)::after { content: ''; position: absolute; left: -15px; top: 16px; bottom: 0; width: 2px; background: var(--s-hairline); } .ml-timeline__time { font-size: 0.75rem; color: var(--s-text-tertiary); font-weight: 600; } .ml-timeline__title { font-size: 0.9375rem; font-weight: 500; margin-top: 1px; } .ml-timeline__desc { font-size: 0.8125rem; color: var(--s-text-secondary); margin-top: 2px; } /* ────────────────────────────────────────────────────────────── Copy-confirm (inline, no toast — per MediVox silent-feedback rule) ────────────────────────────────────────────────────────────── */ .ml-copy { transition: background 160ms ease, color 160ms ease; } .ml-copy.copied { background: var(--s-green) !important; color: #fff !important; } /* Table-lite for commission / inventory (mobile-true, scroll-x) */ .ml-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .ml-table th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s-text-tertiary); font-weight: 600; padding: 8px 12px; } .ml-table td { padding: 12px; border-top: 1px solid var(--s-hairline); } .ml-table tr:first-child td { border-top: none; } .ml-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--s-radius); } /* Progress bar */ .ml-progress { height: 8px; border-radius: 980px; background: var(--s-border-light); overflow: hidden; } .ml-progress__fill { height: 100%; border-radius: 980px; background: var(--s-accent); transition: width var(--s-spring); } .ml-progress__fill--gradient { background: var(--ml-gradient); }