/* LNKX design system — ported 1:1 from the native app's Theme.swift. Every colour is defined for light and dark. Default follows the system via prefers-color-scheme; a data-theme attribute on pins it (Settings). */ :root { /* Brand — monochrome graphite */ --primary: #16181D; --on-primary: #FFFFFF; /* Semantic */ --success: #0FA968; --warning: #E08600; --danger: #E5484D; --violet: #7C5CFC; /* Text */ --ink: #0B1220; --body: #3A4658; --muted: #6B7688; --faint: #9AA6B6; /* Structure */ --hairline: #E6EAF1; --surface: #FFFFFF; --canvas: #F6F8FB; --shadow: rgba(11, 18, 32, 0.06); --shadow-strong: rgba(11, 18, 32, 0.10); --gradient-subtle: rgba(22, 24, 29, 0.05); --tint-soft: 0.10; /* opacity used for coloured pill backgrounds */ /* Spacing */ --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 20px; --xxl: 28px; --screen: 20px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #F3F6FA; --on-primary: #0B0E14; --success: #34D399; --warning: #F6B23C; --danger: #F87171; --violet: #A78BFA; --ink: #F3F6FA; --body: #C3CCDA; --muted: #8A94A6; --faint: #5C6676; --hairline: #262E3D; --surface: #161C28; --canvas: #0A0E16; --shadow: rgba(0, 0, 0, 0.55); --shadow-strong: rgba(0, 0, 0, 0.65); --gradient-subtle: rgba(243, 246, 250, 0.06); } } /* Explicit dark pin */ :root[data-theme="dark"] { --primary: #F3F6FA; --on-primary: #0B0E14; --success: #34D399; --warning: #F6B23C; --danger: #F87171; --violet: #A78BFA; --ink: #F3F6FA; --body: #C3CCDA; --muted: #8A94A6; --faint: #5C6676; --hairline: #262E3D; --surface: #161C28; --canvas: #0A0E16; --shadow: rgba(0, 0, 0, 0.55); --shadow-strong: rgba(0, 0, 0, 0.65); --gradient-subtle: rgba(243, 246, 250, 0.06); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: var(--font); background: var(--canvas); color: var(--ink); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } /* ---------- Typography ---------- */ .t-hero { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; } .t-title { font-size: 26px; font-weight: 700; } .t-section { font-size: 20px; font-weight: 700; } .t-headline { font-size: 17px; font-weight: 600; } .t-body { font-size: 15px; font-weight: 400; } .t-callout { font-size: 14px; font-weight: 500; } .t-caption { font-size: 12.5px; font-weight: 500; } .t-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; } .t-mono { font-family: var(--mono); font-size: 15px; font-weight: 600; } .t-mono-sm { font-family: var(--mono); font-size: 12.5px; font-weight: 600; } .c-ink { color: var(--ink); } .c-body { color: var(--body); } .c-muted { color: var(--muted); } .c-faint { color: var(--faint); } .c-primary { color: var(--primary); } .c-success { color: var(--success); } .c-danger { color: var(--danger); } .c-violet { color: var(--violet); } .c-warning { color: var(--warning); } /* ---------- App shell ---------- */ #app { min-height: 100%; } .screen { min-height: 100vh; min-height: 100dvh; background: var(--canvas); } /* Large-title nav bar (iOS style) */ .nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); padding: calc(env(safe-area-inset-top) + 6px) var(--screen) 8px; } .nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; } .nav-title-lg { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; padding: 2px var(--screen) 6px; color: var(--ink); } .nav-title-inline { font-size: 17px; font-weight: 600; text-align: center; flex: 1; } .nav-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-size: 17px; min-width: 32px; height: 36px; } .nav-back { display: inline-flex; align-items: center; gap: 3px; color: var(--primary); font-size: 17px; } /* Scroll content area, leaving room for the tab bar */ .content { padding: var(--screen); } .content.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom) + 16px); } .stack { display: flex; flex-direction: column; } .gap-xs { gap: var(--xs); } .gap-sm { gap: var(--sm); } .gap-md { gap: var(--md); } .gap-lg { gap: var(--lg); } .gap-xl { gap: var(--xl); } /* ---------- Tab bar ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: flex-start; padding: 8px 0 calc(env(safe-area-inset-bottom) + 6px); background: color-mix(in srgb, var(--canvas) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--hairline); } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--faint); flex: 1; padding-top: 2px; } .tab.active { color: var(--primary); } .tab svg { width: 24px; height: 24px; } .tab span { font-size: 10px; font-weight: 600; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--lg); box-shadow: 0 4px 14px var(--shadow); } .card.pad-md { padding: var(--md); } .card.pad-xl { padding: var(--xl); } .section-header { display: flex; flex-direction: column; gap: 2px; } .section-header .title { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); } .section-header .hint { font-size: 12.5px; font-weight: 500; color: var(--faint); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: var(--r-md); font-size: 17px; font-weight: 600; transition: transform .12s, opacity .12s; } .btn:active { transform: scale(.975); opacity: .9; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 18px var(--shadow-strong); } .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); } .btn-ink { background: var(--ink); color: var(--canvas); } .btn:disabled { opacity: .5; pointer-events: none; } .btn svg { width: 18px; height: 18px; } .btn-link { color: var(--primary); font-weight: 600; width: auto; height: auto; } /* "Sync now" in Settings — shown only while the outbox has queued cases. */ .btn-sync { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--hairline); color: var(--primary); font-size: 15px; font-weight: 500; transition: transform .12s; } .btn-sync:active { transform: scale(.975); } .btn-sync:disabled { color: var(--faint); pointer-events: none; } .btn-sync svg { width: 16px; height: 16px; } .press { transition: transform .12s, opacity .12s; } .press:active { transform: scale(.975); opacity: .92; } /* ---------- Fields ---------- */ .labeled { display: flex; flex-direction: column; gap: 7px; } .labeled > label { font-size: 14px; font-weight: 500; color: var(--body); } .labeled .hint { font-size: 12.5px; font-weight: 500; color: var(--faint); } .field { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); } .field svg { width: 18px; height: 18px; color: var(--faint); flex: none; } .field input { flex: 1; border: none; background: none; outline: none; font-size: 15px; color: var(--ink); min-width: 0; } .field input::placeholder { color: var(--faint); } textarea.field { height: auto; min-height: 150px; align-items: flex-start; padding: 12px 14px; resize: vertical; outline: none; font-size: 15px; color: var(--ink); line-height: 1.45; } select.field { -webkit-appearance: none; appearance: none; color: var(--ink); font-size: 15px; } /* Menu picker (dropdown look) — the native MenuPicker: same 50px box and 14px inset as .field, so leading icons line up across every field on a screen. */ .menu-picker { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); width: 100%; } .menu-picker svg.lead { width: 18px; height: 18px; color: var(--faint); flex: none; } .menu-picker .val { flex: 1; text-align: left; color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-picker svg.chev { width: 13px; height: 13px; color: var(--faint); flex: none; } /* Stretched over the row so a tap anywhere opens it, like a SwiftUI Menu. 16px keeps iOS from zooming the page when the picker takes focus. */ .menu-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; background: none; font-size: 16px; -webkit-appearance: none; appearance: none; } /* ---------- Chips / grids ---------- */ .chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .chip { height: 40px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--canvas); color: var(--body); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: transform .12s; } .chip:active { transform: scale(.97); } .chip.on { background: var(--primary); color: var(--on-primary); border-color: transparent; } .chip.accent-violet.on { background: var(--violet); } .big-toggle { height: 52px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--canvas); color: var(--body); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; flex: 1; } .big-toggle.on { background: var(--primary); color: var(--on-primary); border-color: transparent; } .big-toggle svg { width: 15px; height: 15px; } .seg-answer { height: 44px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--canvas); color: var(--body); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; flex: 1; } .seg-answer.on { background: var(--primary); color: var(--on-primary); border-color: transparent; } .seg-answer svg { width: 12px; height: 12px; } .level-count { height: 52px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--canvas); color: var(--body); font-size: 19px; font-weight: 700; flex: 1; } .level-count.on { background: var(--primary); color: var(--on-primary); border-color: transparent; } /* ---------- Badges / tags / pills ---------- */ .pill { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 4px 10px; font-size: 12.5px; font-weight: 500; } .tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } /* ---------- Segmented control ---------- */ .segmented { display: flex; background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: var(--r-sm); padding: 2px; gap: 2px; } .segmented button { flex: 1; height: 30px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--body); white-space: nowrap; } .segmented button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px var(--shadow); } .segmented.scroll { overflow-x: auto; } .segmented.scroll button { flex: none; padding: 0 14px; } /* ---------- Grids / rows ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); } .row { display: flex; align-items: center; gap: var(--md); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--md); } .spacer { flex: 1; } .divider { height: 1px; background: var(--hairline); border: none; } /* ---------- Stat tile ---------- */ .stat-tile .head { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; } .stat-tile .head svg { width: 13px; height: 13px; } .stat-tile .val { font-size: 30px; font-weight: 700; color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; } /* ---------- Avatar / brand mark ---------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 700; } .mark { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-weight: 900; } .wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.4px; } /* ---------- Case row ---------- */ .case-row .code { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); } /* ---------- Chart bits ---------- */ .count-bar { display: flex; align-items: center; gap: var(--md); } .count-bar .lbl { width: 100px; font-size: 12.5px; font-weight: 500; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; } .count-bar .track { flex: 1; height: 9px; background: var(--hairline); border-radius: 999px; overflow: hidden; } .count-bar .fill { height: 9px; border-radius: 999px; } .count-bar .num { width: 24px; text-align: right; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--muted); flex: none; } .stat-bar .top { display: flex; justify-content: space-between; margin-bottom: 7px; } .stat-bar .track { height: 9px; background: var(--hairline); border-radius: 999px; overflow: hidden; } .stat-bar .fill { height: 9px; border-radius: 999px; background: var(--primary); } .ring-wrap { display: flex; align-items: center; gap: var(--xl); } .legend-row { display: flex; align-items: center; gap: 9px; } .legend-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .insight-head { display: flex; align-items: center; gap: var(--sm); } .insight-head .chip { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; } .insight-head .chip svg { width: 16px; height: 16px; } .insight-head .txt .title { font-size: 17px; font-weight: 600; color: var(--ink); } .insight-head .txt .hint { font-size: 12.5px; font-weight: 500; color: var(--faint); } .split-bar .track { display: flex; height: 9px; gap: 3px; } .split-bar .track > div { border-radius: 999px; height: 9px; } /* ---------- Empty state ---------- */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; } .empty svg { width: 30px; height: 30px; color: var(--faint); } .empty .title { font-size: 17px; font-weight: 600; color: var(--body); } .empty .msg { font-size: 15px; color: var(--faint); max-width: 260px; } /* ---------- Compliance note ---------- */ .compliance { display: flex; align-items: flex-start; gap: 10px; padding: var(--md); border-radius: var(--r-md); background: color-mix(in srgb, var(--success) 6%, transparent); } .compliance svg { width: 15px; height: 15px; color: var(--success); flex: none; margin-top: 1px; } .compliance span { font-size: 12.5px; font-weight: 500; color: var(--muted); } /* ---------- Step bar ---------- */ .step-bar { display: flex; gap: 5px; } .step-bar .seg { flex: 1; height: 4px; border-radius: 999px; background: var(--hairline); transition: background .3s; } .step-bar .seg.on { background: var(--primary); } .bottom-bar { position: sticky; bottom: 0; display: flex; gap: var(--md); padding: var(--md) var(--screen) calc(var(--sm) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--canvas) 85%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .icon-btn-52 { width: 52px; height: 52px; flex: none; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); color: var(--body); display: flex; align-items: center; justify-content: center; } .icon-btn-52 svg { width: 16px; height: 16px; } /* ---------- Sheet / modal ---------- */ .sheet-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45); display: flex; flex-direction: column; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 101; background: var(--canvas); display: flex; flex-direction: column; animation: sheet-up .32s cubic-bezier(.2,.8,.2,1); } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet .nav { background: color-mix(in srgb, var(--canvas) 82%, transparent); } /* Center popup (announcement) */ .popup-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: var(--xl); animation: fade .2s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .popup { background: var(--surface); border-radius: var(--r-xl); width: 100%; max-width: 460px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .popup .body { overflow-y: auto; } /* Toast */ .toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 300; background: var(--ink); color: var(--canvas); padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: fade .2s ease; } /* Dropdown menu (facility/language pickers) */ .dropdown { position: fixed; z-index: 400; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: 0 12px 40px var(--shadow-strong); padding: 6px; min-width: 200px; max-height: 320px; overflow-y: auto; animation: fade .12s ease; } .dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); text-align: left; } .dropdown button:active { background: var(--canvas); } .dropdown button svg { width: 15px; height: 15px; color: var(--primary); flex: none; } .dropdown-scrim { position: fixed; inset: 0; z-index: 399; } /* PDF viewer */ .pdf-frame { flex: 1; width: 100%; border: none; background: var(--canvas); } /* Login glow */ .login-glow { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .login-glow .g1, .login-glow .g2 { position: absolute; border-radius: 50%; filter: blur(70px); background: var(--gradient-subtle); } .login-glow .g1 { width: 110vw; height: 110vw; left: -35vw; top: -34vh; } .login-glow .g2 { width: 90vw; height: 90vw; right: -25vw; top: -18vh; } .spin { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } .text-center { text-align: center; }