html, body {
overflow-x: hidden !important;
max-width: 100vw;
position: relative;
}
/* =========================================================
Arogya Workspace — Phase F-1
Direction B: left rail + canvas + attention rail
Mobile: drawer + bottom nav
========================================================= */
/* Explicit body background — prevents dark-mode black-on-load */
body {
background: #FAFAF7;
margin: 0;
}
/* ── Shell ───────────────────────────────────────────────────────────────── */
.ws-shell {
/* ═══ agt107 (K3) — side-panel gutters, single source of truth ═══
Anything that is position:fixed but must sit INSIDE the canvas (today:
the chat composer dock) has to know how much horizontal space the side
panels occupy. Those numbers used to be re-typed by hand in each place
and drifted apart — the dock hardcoded left:242px/right:320px while the
attention rail had grown to 360px, so the composer ran 40px under the
rail in the default layout and only lined up by accident when the
sidebar happened to be collapsed. That mismatch is what produced the
inconsistent gap Kiran saw across screens.
Read these instead of re-typing widths. They stay in step with the
panels through every breakpoint and the collapsed state. */
--ws-gutter-left: 242px; /* .ws-rail — expanded sidebar */
--ws-gutter-right: 360px; /* .ws-attention — right rail */
--ws-attention-w: 360px; /* the rail's own width reads from here too */
display: flex;
height: 100vh;
width: 100vw;
max-width: 100vw;
overflow: hidden;
background: var(--color-background-tertiary);
/* rb17 fix — the pre-rb17 cap was `min(env(safe-area-inset-top), 6px)` on
BOTH platforms, chosen because Android WebViews with `overlaysWebView:
false` already put the WebView below the status bar and would stack an
additional band. iOS WKWebView does NOT do that; the cap starved iOS of
its ~47px notch inset and Kiran saw content collide with the iOS status
bar on Records (which has no tall header of its own to absorb the space).
Now: full inset by default (correct for web + iOS); the Android-only
override below caps it back to 6px. native_bridge.js stamps
`.is-android` on under a Capacitor Android runtime. */
padding-top: env(safe-area-inset-top);
}
/* Fill the safe-area notch with teal to match the topbar. */
@supports (padding-top: env(safe-area-inset-top)) {
.ws-shell::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: env(safe-area-inset-top);
background: var(--color-teal-900);
z-index: 100;
}
}
/* Android-only cap (see comment above). */
.is-native-app.is-android body {
padding-top: min(env(safe-area-inset-top), 6px);
}
.is-native-app.is-android .ws-shell::before {
height: min(env(safe-area-inset-top), 6px);
}
/* ── Left rail ───────────────────────────────────────────────────────────── */
.ws-rail {
/* ii5-fix: widened 220 → 242px (+10%) so longer member names fit without
wrapping. Kept in sync with the chat composer's desktop left-inset. */
width: 242px;
flex-shrink: 0;
background: var(--color-teal-900);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 20;
}
.ws-rail-inner {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
.ws-rail-top { padding: 18px 14px 12px; }
.ws-rail-brand {
font-size: 20px; font-weight: 700; color: #fff;
letter-spacing: -.01em; margin-bottom: 12px;
padding: 0 2px;
display: flex; align-items: center; gap: 8px;
}
/* Family switcher */
.ws-rail-fam {
display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.1);
border: 0.5px solid rgba(255,255,255,0.12);
border-radius: 10px; padding: 8px 10px;
cursor: pointer; transition: background .12s;
}
.ws-rail-fam:hover { background: rgba(255,255,255,0.14); }
.ws-rail-fam-mono {
width: 26px; height: 26px; border-radius: 6px;
background: rgba(0,0,0,0.3); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.75);
}
.ws-rail-fam-name { font-size: 13px; font-weight: 500; color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-rail-fam-chev { font-size: 13px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.ws-rail-fam-multi { cursor: pointer; }
.ws-rail-fam-multi:hover { background: rgba(255,255,255,0.16); }
.ws-rail-fam-menu {
margin: 2px 8px 8px;
background: rgba(0,0,0,0.25);
border-radius: 10px;
overflow: hidden;
}
.ws-rail-fam-opt {
display: flex; align-items: center; gap: 8px;
padding: 9px 14px; font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.7); text-decoration: none;
transition: background .1s;
}
.ws-rail-fam-opt:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ws-rail-fam-opt.active { color: var(--color-teal-200); }
/* Nav */
.ws-rail-nav { flex: 1; }
.ws-rail-sec {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .09em; color: rgba(255,255,255,0.35);
padding: 12px 16px 5px;
}
.ws-rail-item {
display: flex; align-items: center; gap: 10px;
font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.7);
padding: 10px 16px; text-decoration: none; cursor: pointer;
border: none; background: none; width: 100%; text-align: left;
margin: 1px 8px; border-radius: 10px; width: calc(100% - 16px);
transition: background .12s, color .12s;
}
.ws-rail-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ws-rail-item.active {
background: rgba(255,255,255,0.13);
color: #fff; font-weight: 600;
}
.ws-rail-item i { font-size: 17px; flex-shrink: 0; width: 20px; text-align: center; }
/* Member items */
.ws-rail-member {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px 8px 16px; text-decoration: none; cursor: pointer;
margin: 1px 8px; border-radius: 10px; width: calc(100% - 16px);
transition: background .12s;
}
.ws-rail-member:hover { background: rgba(255,255,255,0.08); }
.ws-rail-member.active { background: rgba(255,255,255,0.13); }
.ws-rail-m-av {
width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; color: #fff;
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}
.ws-rail-m-name { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); flex: 1; }
.ws-rail-member.active .ws-rail-m-name { color: #fff; font-weight: 600; }
.ws-rail-flag {
font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.1); border-radius: 999px;
padding: 1px 6px; min-width: 18px; text-align: center; flex-shrink: 0;
margin-right: 2px;
}
/* Add member */
.ws-rail-add {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.38);
padding: 8px 16px; text-decoration: none; cursor: pointer;
margin: 1px 8px; border-radius: 10px; width: calc(100% - 16px);
transition: color .12s, background .12s;
}
.ws-rail-add:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
.ws-rail-add i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }
/* Bottom */
.ws-rail-bottom { padding: 10px 12px 16px; margin-top: auto; }
.ws-rail-disclaimer {
background: rgba(0,0,0,0.2); border-radius: 10px;
padding: 10px 12px; margin-bottom: 10px;
font-size: 10px; color: rgba(255,255,255,0.32); line-height: 1.6;
}
.ws-rail-foot-link {
display: block; padding: 6px 4px;
font-size: 14px; color: rgba(255,255,255,0.72);
text-decoration: none; cursor: pointer;
}
.ws-rail-foot-link:hover { color: rgba(255,255,255,0.95); }
.ws-rail-foot-signout {
display: flex; align-items: center; gap: 7px;
padding: 8px 4px; margin-top: 4px;
font-size: 14px; color: rgba(255,255,255,0.72);
text-decoration: none; cursor: pointer;
}
.ws-rail-foot-signout:hover { color: rgba(255,255,255,0.95); }
/* Legacy — kept for any templates still using ws-rail-item-muted */
.ws-rail-item-muted { color: rgba(255,255,255,0.45); font-weight: 400; }
/* ── Main area (top bar + content) ───────────────────────────────────────── */
.ws-main { flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 100%; overflow: hidden; background: var(--color-background-tertiary); }
/* Top bar */
.ws-top {
display: flex; align-items: center; gap: 10px;
padding: 0 14px; height: 44px; flex-shrink: 0;
background: var(--color-background-primary);
border-bottom: 0.5px solid var(--color-border-tertiary);
position: sticky; top: 0; z-index: 10;
}
.ws-menu-btn {
display: none; /* hidden on desktop */ background: none; border: none;
font-size: 18px; color: var(--color-text-secondary); cursor: pointer;
padding: 4px; border-radius: 6px; flex-shrink: 0;
}
.ws-top-brand {
display: none; /* hidden on desktop — branding is in the rail */
align-items: center; gap: 6px; text-decoration: none;
font-size: 14px; font-weight: 500; color: var(--color-text-primary);
}
.ws-top-brand i { font-size: 16px; color: #1D9E75; }
.ws-top-family {
font-size: 12px; color: var(--color-text-secondary);
display: flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 20px;
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
}
.ws-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ws-top-btn {
width: 30px; height: 30px; border-radius: 8px; font-size: 16px;
display: flex; align-items: center; justify-content: center;
color: var(--color-text-secondary); text-decoration: none;
border: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-secondary);
}
.ws-top-btn:hover { background: var(--color-background-primary); color: var(--color-text-primary); }
/* Content row: canvas + right attention rail */
.ws-content { display: flex; flex: 1; min-height: 0; overflow: hidden; max-width: 100%; }
/* Main canvas */
.ws-canvas { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; min-width: 0; max-width: 100%; }
/* Right attention rail.
ii5: widened 260 → 320px so 4-line attention cards stop wrapping and the
Notifications section fits. Hidden below 768px (rule further down), so the
Capacitor WebView (iOS ≤430px / Android ≤412px) never renders it — mobile
is unaffected. */
.ws-attention {
/* ii6: 320 → 360px. The 320 was already live but the service worker was
serving some users the old 260px stylesheet; the build-id cache-buster
bump (?v=ii6) forces the refresh, and 360 makes the widening obvious.
agt107 (K3): the literal moved to --ws-attention-w on .ws-shell so the
composer dock can inset by the SAME number instead of its own copy. */
width: var(--ws-attention-w, 360px); flex-shrink: 0;
background: var(--color-background-secondary);
border-left: 0.5px solid var(--color-border-tertiary);
overflow-y: auto; padding: 12px 0;
}
/* K3 (Kiran, 20 Jul 2026): the desktop right rail is a web-only affordance and
must NEVER appear inside the native app, whatever CSS width the WebView
reports. WKWebView can lay a phone out wider than its physical screen, and a
stale cached stylesheet can miss the max-width:768px hide below — both leak
the rail onto the phone. native_bridge.js stamps .is-native-app on
under Capacitor; gate the rail off by context, not by pixel width. */
.is-native-app .ws-attention { display: none !important; }
/* rb18 R3 → rb19 R3 (21 Jul 2026): belt-and-suspenders for the K3
rail-on-native leak. rb18 set this to 899px; Kiran's iPhone still
showed the rail after that deploy, which means WKWebView was reporting
layout width ≥900. Bumped to 1023 so any viewport narrower than a true
desktop (iPad landscape starts at 1024) hides the rail unconditionally,
regardless of whether the K3 `.is-native-app` class got stamped in time.
rb19 also moves the .is-native-app stamp to an inline sync script in
base_web.html so a Capacitor WebView never paints without the class,
but this wider media query is the true safety net. */
@media (max-width: 1023px) {
.ws-attention { display: none; }
/* agt107 (K3): the rail is gone here, so nothing should reserve space for
it. Before this, the composer dock kept a hardcoded right:320px from
900px upward — a dead 320px gutter on every 900–1023px window with no
rail in it. */
.ws-shell { --ws-gutter-right: 0px; }
}
/* rb19 R8 (21 Jul 2026): iOS auto-zooms any focused text-shaped input whose
font-size is under 16px. Audit surfaced six input classes triggering the
zoom app-wide — .member-search-input (13), .modal-input (13), .af-inp
(13), .wiz-input (14), .hg-input (14), .ob-inp (15). rb17's B-158 fix
only patched the Records filter bar; every other search bar, form input,
and modal was still auto-zooming on Kiran's iPhone. One media-query rule
pins all text-shaped inputs to 16px at mobile widths — desktop keeps its
designed sizes. Matches Kiran's typography rule (≥15px body) and iOS
platform defaults. Explicit type-list rather than a blanket `input`
selector so checkboxes/radios/ranges don't get font-sized. */
@media (max-width: 768px) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input:not([type]),
textarea,
select {
font-size: 16px;
}
}
.ws-attn-hdr {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--color-text-tertiary);
padding: 0 12px 8px; display: flex; align-items: center; gap: 5px;
}
.ws-attn-card {
margin: 0 10px 7px; padding: 9px 10px;
border-radius: var(--border-radius-md);
font-size: 13px; line-height: 1.5;
display: flex; align-items: flex-start; gap: 6px;
border: 0.5px solid;
}
.ws-attn-card i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.ws-attn-info { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; }
.ws-attn-amber { background: #FAEEDA; border-color: #FAC775; color: #633806; }
.ws-attn-red { background: #FCEBEB; border-color: #F09595; color: #791F1F; }
.ws-attn-empty { font-size: 11px; color: var(--color-text-tertiary); padding: 0 12px; font-style: italic; }
/* Mobile attention strip (hidden on desktop) */
.ws-attn-strip { display: none; }
/* Mobile scrim */
.ws-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; }
/* ig25 — scrim bumped from 49 to 199 so it beats the Ask-Arogya sticky
AI bar (z-index:150 per ig19). The paired .ws-rail bump is below
in the mobile block. */
/* Mobile bottom nav */
.ws-bottom-nav { display: none; }
/* ── Login page ──────────────────────────────────────────────────────────── */
.login-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #062A1C 0%, #0A3D2B 35%, #0D5C40 65%, #1D9E75 100%);
}
/* Decorative floating circles */
.login-shell::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: rgba(29, 158, 117, 0.18);
pointer-events: none;
}
.login-shell::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 260px; height: 260px;
border-radius: 50%;
background: rgba(29, 158, 117, 0.12);
pointer-events: none;
}
.login-deco-mid {
position: absolute;
top: 50%; left: -40px;
transform: translateY(-60%);
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
pointer-events: none;
}
.login-deco-top {
position: absolute;
top: 30px; left: 40%;
width: 80px; height: 80px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
pointer-events: none;
}
.login-deco-br {
position: absolute;
bottom: 80px; right: 60px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
pointer-events: none;
}
.login-card {
background: #ffffff;
border-radius: 16px;
padding: 40px 36px;
max-width: 390px;
width: 100%;
text-align: center;
position: relative;
z-index: 1;
box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 22px;
font-weight: 600;
color: #0A3D2B;
margin-bottom: 6px;
}
.login-logo-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #0D5C40, #1D9E75);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(13,92,64,0.3);
}
.login-logo-icon i { font-size: 22px; color: #ffffff; }
.login-tagline {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1D9E75;
margin-bottom: 20px;
}
.login-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 8px;
color: #111827;
line-height: 1.3;
}
.login-sub {
font-size: 13px;
color: #6B7280;
margin: 0 0 28px;
line-height: 1.6;
}
.login-error {
font-size: 12px; color: #791F1F;
background: #FCEBEB; border: 0.5px solid #F09595;
border-radius: 8px; padding: 10px 12px;
margin-bottom: 16px; text-align: left;
}
.login-google-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 13px 16px; border-radius: 10px;
background: #111827;
color: #ffffff;
font-size: 14px; font-weight: 500; text-decoration: none;
border: none; cursor: pointer;
transition: background .15s, transform .1s;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.login-google-btn:hover {
background: #1f2937;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.login-google-btn:active { transform: translateY(0); }
.login-legal {
font-size: 11px;
color: #9CA3AF;
margin-top: 14px;
line-height: 1.6;
}
.login-legal a { color: #1D9E75; text-decoration: none; }
.login-legal a:hover { text-decoration: underline; }
.login-divider {
height: 0.5px;
background: #E5E7EB;
margin: 20px 0;
}
.login-note {
font-size: 11px;
color: #9CA3AF;
margin-top: 0;
line-height: 1.55;
display: flex;
align-items: flex-start;
gap: 6px;
text-align: left;
}
.login-note i { font-size: 12px; color: #1D9E75; flex-shrink: 0; margin-top: 1px; }
/* ── Home canvas ─────────────────────────────────────────────────────────── */
.home-canvas { padding: 20px; }
.home-fam-lbl { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 10px; }
/* ── Hero section ── */
.home-hero {
background: linear-gradient(135deg, #2D4538 0%, #4D7561 100%);
border-radius: 14px;
padding: 18px 22px 20px;
margin-bottom: 20px;
box-shadow: rgba(0,0,0,0.1) 0px -8px 16px 0px inset;
}
.home-hero-meta {
font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: rgba(255,255,255,0.45); margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.home-hero-badge {
background: rgba(255,255,255,0.12); padding: 1px 7px; border-radius: 10px;
color: rgba(255,255,255,0.55);
}
.home-hero-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.home-hero-left { flex: 1; min-width: 0; }
.home-hero-greeting { font-size: 22px; font-weight: 500; color: #fff; margin: 0 0 4px; line-height: 1.25; }
.home-hero-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; }
.home-hero-stats { display: flex; gap: 20px; flex-shrink: 0; text-align: center; padding-top: 2px; }
.home-hero-stat-num { font-size: 28px; font-weight: 500; color: #fff; line-height: 1; }
.home-hero-stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 3px; }
/* ── Member cards v2 ── */
.home-member-grid-v2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 520px) { .home-member-grid-v2 { grid-template-columns: 1fr; } }
.home-mc-v2 {
background: #fff;
border: 0.5px solid #E4E1D8;
border-radius: 14px;
padding: 16px;
display: flex; align-items: center; gap: 14px;
text-decoration: none; color: inherit;
box-shadow: rgba(0,0,0,0.06) 0px 4px 10px 0px;
}
.home-mc-v2:hover { box-shadow: rgba(0,0,0,0.1) 0px 6px 16px 0px; }
.home-mc-av {
width: 52px; height: 52px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 500; color: #fff; flex-shrink: 0;
}
.home-mc-av-add {
background: #F2EFE7 !important; border: 1px dashed #C8C4B8 !important;
box-shadow: none !important;
}
.home-mc-av-add i { color: #8a93a0; font-size: 20px; }
.home-mc-info { flex: 1; min-width: 0; }
.home-mc-name { font-size: 15px; font-weight: 500; color: #1f2a36; margin-bottom: 2px; }
.home-mc-rel { font-size: 12px; color: #8a93a0; margin-bottom: 7px; }
.home-mc-docs { font-size: 12px; color: #8a93a0; display: flex; align-items: center; gap: 4px; }
.home-mc-docs i { font-size: 12px; }
.home-mc-arr { font-size: 16px; color: #c8c4ba; flex-shrink: 0; }
.home-mc-add { background: #FAFAF7 !important; border: 1px dashed #C8C4B8 !important; box-shadow: none !important; }
.home-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; }
.home-member-card {
display: flex; align-items: flex-start; gap: 13px;
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-tertiary);
border-top: 2px solid var(--color-teal-200);
border-radius: var(--border-radius-lg); padding: 16px 16px 14px;
text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
.home-member-card:hover {
border-color: #5DCAA5;
box-shadow: 0 2px 10px rgba(8,80,65,.08);
}
.home-member-avatar {
width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
background: var(--color-teal-900); color: var(--color-teal-200);
display: flex; align-items: center; justify-content: center;
font-size: 17px; font-weight: 600; margin-top: 1px;
}
.home-member-avatar.avatar-pet { background: #FAEEDA; color: #633806; }
.home-member-avatar i { font-size: 20px; }
.home-member-info { flex: 1; min-width: 0; }
.home-member-name { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 3px; }
.home-member-meta { font-size: 12px; color: var(--color-text-tertiary); }
.home-member-arrow { font-size: 14px; color: var(--color-text-tertiary); flex-shrink: 0; }
.home-empty { font-size: 13px; color: var(--color-text-secondary); font-style: italic; }
/* ── Member canvas ───────────────────────────────────────────────────────── */
.member-canvas { padding: 0; }
.ws-tab-nav {
display: flex; border-bottom: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-primary);
padding: 0 16px; gap: 0; position: sticky; top: 44px; z-index: 5;
}
.ws-tab {
display: flex; align-items: center; gap: 5px;
font-size: 14px; padding: 11px 16px; text-decoration: none;
color: var(--color-text-secondary); border-bottom: 2px solid transparent;
white-space: nowrap;
}
.ws-tab:hover { color: var(--color-text-primary); }
.ws-tab.active { color: var(--color-text-primary); font-weight: 500; border-bottom-color: #1D9E75; }
.ws-tab i { font-size: 14px; }
.ws-tab-content { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* agt107 (K3): below 768px the sidebar is an overlay drawer, not a column,
so it occupies no layout width — the gutter must be 0 or fixed-position
children would inset by 242px against a rail that isn't in flow. Note
.ws-rail keeps its own 242px width: that's the drawer's slide-in size. */
.ws-shell { --ws-gutter-left: 0px; }
/* Hide desktop rail */
.ws-rail {
position: fixed; top: 0; left: 0; bottom: 0;
transform: translateX(-100%); transition: transform .22s ease;
/* ig25: bumped from 50 to 200 — the Ask-Arogya sticky AI bar on /home
sits at z-index 150 (per ig19), so the drawer was rendering behind
it. 200 keeps ample headroom over both the AI bar and the paired
.ws-scrim at 199. */
z-index: 200;
}
.ws-shell.drawer-open .ws-rail { transform: translateX(0); }
.ws-shell.drawer-open .ws-scrim { display: block; }
/* Show mobile controls */
.ws-menu-btn { display: flex; }
.ws-top-brand { display: flex; }
.ws-top-family { display: none; }
/* Hide desktop right rail */
.ws-attention { display: none; }
/* Show mobile attention strip */
.ws-attn-strip {
display: block;
border-bottom: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-secondary);
}
.ws-attn-strip-toggle {
display: flex; align-items: center; gap: 7px;
width: 100%; padding: 9px 14px; font-size: 12px;
color: var(--color-text-secondary); background: none; border: none;
cursor: pointer; font-weight: 500; text-align: left;
}
.ws-attn-strip-toggle i:first-child { color: #EF9F27; }
.ws-attn-chev { margin-left: auto; font-size: 12px; transition: transform .15s; }
.ws-attn-strip-body { padding: 0 10px 8px; }
/* Bottom nav — teal background (agt52: reshaped)
Changes vs agt49:
- Icon glyphs: Tabler line-icons → colored emoji (see bottom_nav.html)
- Labels: 10px/500 → 13px/600 (typography floor per user memory)
- Bar height reduced ~11% via slimmer vertical padding
- Active tab gets a 3px white underline via ::after (was color-only)
*/
.ws-bottom-nav {
display: flex; position: fixed; bottom: 0; left: 0; right: 0;
background: var(--color-teal-900);
border-top: none;
/* Cap the safe-area padding so phones with large gesture bars don't
show a doubled-height teal strip below the icons. Small buffer is
still respected on iPhones with home indicators. */
padding-bottom: min(env(safe-area-inset-bottom), 8px);
z-index: 30;
}
/* K11 fix (12 Jul 2026) — nothing ever hid this bar when the iOS keyboard
opened, so it stayed pinned to the (keyboard-resized) viewport bottom,
squeezing whatever input was trying to use that space (reported on the
chat/Ask AI composer). `ws-keyboard-open` is toggled on by
native_bridge.js's Keyboard.addListener("keyboardWillShow"/"WillHide")
handlers — see there for why this couldn't be done with CSS alone
(no reliable :focus-within-style signal for "the OS keyboard is up"). */
body.ws-keyboard-open .ws-bottom-nav {
display: none;
}
.ws-bnav-item {
flex: 1; display: flex; flex-direction: column; align-items: center;
/* ig11: gap 2px → 6px so the emoji doesn't crowd the label, especially
on Calendar (📅) which has a top handle that visually collides. */
gap: 6px; padding: 8px 4px 6px; font-size: 13px; font-weight: 600;
color: rgba(255,255,255,0.72); text-decoration: none;
background: none; border: none; cursor: pointer;
position: relative;
}
.ws-bnav-item i { font-size: 20px; line-height: 1; }
.ws-bnav-emoji {
font-size: 22px; line-height: 1;
font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
/* ig11: Profile tab uses a Tabler SVG icon (ti-user) instead of the
👤 emoji, which was fixed-black on the teal bar and read as "dead". SVG
inherits color: rgba(255,255,255,0.72) from .ws-bnav-item — white by
design. Slightly bigger than the default 20px to visually match the
22px emojis on the other tabs. */
.ws-bnav-user-icon { font-size: 24px !important; line-height: 1; }
.ws-bnav-label { line-height: 1.1; }
.ws-bnav-item.active, .ws-bnav-item:focus { color: #fff; }
.ws-bnav-item.active::after {
content: "";
position: absolute;
left: 50%; bottom: 2px; transform: translateX(-50%);
width: 22px; height: 3px; border-radius: 2px;
background: #fff;
}
/* agt69: Ask Arogya AI centerpiece — a raised white disc carrying the Arogya
logo, poking above the teal bar so it reads as the app's focal action.
Replaces the old center "+" (which moved to the floating .ws-fab). The
3px border matches the bar background (var(--color-teal-900)) so the disc reads as a
notch cut into the bar, not a floating blob. */
.ws-bnav-center { flex: none; width: 62px; }
.ws-bnav-disc {
width: 54px; height: 54px; border-radius: 50%;
background: #fff;
display: flex; align-items: center; justify-content: center;
margin-top: -24px; margin-bottom: 2px;
border: 3px solid var(--color-teal-900);
box-shadow: 0 4px 14px rgba(0,0,0,0.32);
}
.ws-bnav-disc svg { width: 40px; height: 40px; display: block; }
/* The disc is its own emphasis; suppress the underline used by flat tabs. */
.ws-bnav-center.active::after { display: none; }
.ws-bnav-add {
background: #1D9E75; color: #fff; border-radius: 50%;
width: 46px; height: 46px; flex: none; margin: 0 8px;
align-self: center;
display: flex; align-items: center; justify-content: center;
flex-direction: row; padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ws-bnav-add i { font-size: 24px; }
/* gu2: exclude .ws-bnav-plus from the display:none blanket so the "+" renders.
gu's fix put display:inline-block on .ws-bnav-plus but that lost the specificity
fight — .ws-bnav-add span (0,1,1) beats .ws-bnav-plus (0,1,0). Fix at source. */
.ws-bnav-add > span:not(.ws-bnav-plus) { display: none; }
.ws-bnav-plus {
display: inline-block;
font-size: 28px; font-weight: 700; color: #fff;
line-height: 1;
}
.ws-bnav-add.active::after,
.ws-bnav-add::after { display: none; }
/* Push canvas up from bottom nav — matches the capped nav padding above.
Slimmer bar (~58px vs ~66px prior) means slightly less bottom padding
but keep 60px as a safety cushion so nothing hides behind the bar. */
.ws-canvas { padding-bottom: calc(60px + min(env(safe-area-inset-bottom), 8px)); }
/* Home canvas single column */
.home-canvas { padding: 16px; }
.home-members-grid { grid-template-columns: 1fr; }
/* Member tab content tighter */
.ws-tab-content { padding: 10px; }
.ws-tab-nav { top: 44px; overflow-x: auto; }
}
/* ── F-2: Upload panel ──────────────────────────────────────────────────── */
.up-overlay {
position: fixed; inset: 0; z-index: 50;
background: rgba(0,0,0,.5);
display: flex; align-items: flex-end; justify-content: center;
}
/* Prevent display:flex from fighting display:none set via JS */
.up-overlay[style*="display: none"],
.up-overlay[style*="display:none"] { display: none !important; }
@media (min-width: 600px) {
.up-overlay { align-items: center; }
}
.up-panel {
background: var(--color-background-primary);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
padding: 0 0 16px;
}
@media (min-width: 600px) {
.up-panel { border-radius: var(--border-radius-lg); }
}
.up-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 0.5px solid var(--color-border-tertiary);
position: sticky; top: 0; background: var(--color-background-primary); z-index: 1;
}
.up-panel-tabs { display: flex; gap: 4px; }
.up-tab {
font-size: 12px; padding: 6px 12px; border-radius: 6px;
border: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-secondary);
color: var(--color-text-secondary); cursor: pointer;
display: flex; align-items: center; gap: 5px;
}
.up-tab.active {
background: var(--color-background-primary);
color: var(--color-text-primary); font-weight: 500;
border-color: var(--color-border-secondary);
}
.up-close {
background: none; border: none; font-size: 18px;
color: var(--color-text-tertiary); cursor: pointer;
padding: 4px; border-radius: 6px;
}
.up-close:hover { background: var(--color-background-secondary); }
.up-for-whom { padding: 14px 16px 0; }
.up-field-label { display: block; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; }
.up-select, .up-input {
width: 100%; font-size: 13px; padding: 8px 10px;
border-radius: var(--border-radius-md);
border: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-primary);
color: var(--color-text-primary);
}
.up-field-row { display: flex; gap: 10px; padding: 10px 16px 0; }
.up-field { display: flex; flex-direction: column; }
.up-input { padding: 7px 10px; }
.up-drop-zone {
margin: 12px 16px 0; border: 1.5px dashed var(--color-border-secondary);
border-radius: var(--border-radius-lg); padding: 28px 16px;
text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.up-drop-zone:hover, .up-drop-zone.drag-over {
border-color: #1D9E75; background: var(--color-teal-50);
}
.up-drop-zone i { font-size: 28px; color: var(--color-text-tertiary); display: block; margin-bottom: 8px; }
.up-drop-text { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 4px; }
.up-drop-hint { font-size: 11px; color: var(--color-text-tertiary); margin: 0; }
.up-link { color: #185FA5; cursor: pointer; }
.up-file-list { margin: 8px 16px 0; }
.up-file-row {
display: flex; align-items: center; gap: 7px; padding: 6px 8px;
background: var(--color-background-secondary);
border-radius: var(--border-radius-md); margin-bottom: 5px; font-size: 12px;
}
.up-file-row i { font-size: 14px; color: var(--color-text-secondary); }
.up-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file-size { color: var(--color-text-tertiary); flex-shrink: 0; }
.up-file-row button { background: none; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: 14px; padding: 2px; }
.up-status { margin: 10px 16px 0; padding: 9px 12px; border-radius: var(--border-radius-md); font-size: 12px; line-height: 1.45; }
.up-status-ok { background: var(--color-teal-50); color: var(--color-teal-900); border: 0.5px solid var(--color-teal-200); }
.up-status-err { background: #FCEBEB; color: #791F1F; border: 0.5px solid #F09595; }
.up-submit-btn {
margin: 12px 16px 0; width: calc(100% - 32px); padding: 11px 16px;
border-radius: var(--border-radius-md); background: var(--color-text-primary);
color: var(--color-background-primary); font-size: 14px; font-weight: 500;
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.up-submit-btn:disabled { opacity: .4; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── F-2: Queue / upload history ────────────────────────────────────────── */
.queue-canvas { padding: 20px; max-width: 800px; }
.queue-header { margin-bottom: 18px; }
.queue-title { font-size: 20px; font-weight: 500; margin: 0 0 3px; }
.queue-sub { font-size: 12px; color: var(--color-text-tertiary); margin: 0; }
.queue-empty { text-align: center; padding: 40px 0; }
.queue-empty i { font-size: 32px; color: var(--color-text-tertiary); display: block; margin-bottom: 10px; }
.queue-empty p { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0; }
.queue-list { display: flex; flex-direction: column; gap: 0; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); overflow: hidden; background: var(--color-background-primary); }
.queue-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.queue-row:last-child { border-bottom: none; }
.queue-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.queue-info { flex: 1; min-width: 0; }
.queue-filename { font-size: 13px; font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.queue-meta { font-size: 11px; color: var(--color-text-tertiary); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.queue-channel-web { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #E6F1FB; color: #0C447C; border: 0.5px solid #85B7EB; }
.queue-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.queue-status-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.qsb-done { background: var(--color-teal-50); color: var(--color-teal-900); }
.qsb-failed { background: #FCEBEB; color: #791F1F; }
.qsb-processing { background: #FAEEDA; color: #633806; }
.qsb-pending { background: var(--color-background-secondary); color: var(--color-text-tertiary); border: 0.5px solid var(--color-border-tertiary); }
.queue-link { font-size: 15px; color: #185FA5; text-decoration: none; }
.queue-reassign-btn { background: none; border: none; font-size: 15px; color: var(--color-text-tertiary); cursor: pointer; padding: 2px; border-radius: 4px; }
.queue-reassign-btn:hover { background: var(--color-background-secondary); }
.queue-reassign-panel { margin-top: 6px; display: flex; align-items: center; }
.ws-upload-btn {
background: #1D9E75; border-color: #1D9E75; color: #fff;
width: auto; padding: 0 12px; gap: 5px;
font-size: 12px; font-weight: 500;
box-shadow: rgba(29,158,117,0.4) 0px 4px 12px 0px, rgba(0,0,0,0.15) 0px -2px 5px 0px inset;
}
.ws-upload-btn:hover { background: var(--color-teal-700); border-color: var(--color-teal-700); transform: translateY(-1px); }
/* ── Upload progress stages ─────────────────────────────────────────────── */
.up-attribution-note {
font-size: 11px; color: var(--color-text-tertiary);
padding: 8px 16px 0; display: flex; align-items: flex-start; gap: 5px;
line-height: 1.5;
}
.up-attribution-note a { color: #185FA5; }
.up-action-row { padding: 12px 16px 0; }
.up-done-btn {
width: 100%; padding: 11px 16px; border-radius: var(--border-radius-md);
background: #1D9E75; color: #fff;
font-size: 14px; font-weight: 500; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.up-prog-row {
padding: 10px 16px 8px; border-bottom: 0.5px solid var(--color-border-tertiary);
}
.up-prog-row:last-child { border-bottom: none; }
.up-prog-name {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 500; color: var(--color-text-primary);
margin-bottom: 6px; overflow: hidden;
}
.up-prog-name i { font-size: 14px; color: var(--color-text-tertiary); flex-shrink: 0; }
.up-prog-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-prog-stages { display: flex; flex-wrap: wrap; gap: 5px; }
.up-stage {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; padding: 2px 8px; border-radius: 20px;
}
.up-stage i { font-size: 11px; }
.up-stage-ok { background: var(--color-teal-50); color: var(--color-teal-900); }
.up-stage-err { background: #FCEBEB; color: #791F1F; }
.up-stage-spin { background: #FAEEDA; color: #633806; }
/* ── Home member cards — richer ─────────────────────────────────────────── */
.home-member-docs {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--color-text-tertiary); margin-top: 4px;
}
.home-member-docs i { font-size: 12px; }
/* ── Records two-column layout (desktop only) ───────────────────────────── */
.web-records-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
margin-top: 12px;
}
.web-records-col-left,
.web-records-col-right {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (max-width: 900px) {
.web-records-cols {
grid-template-columns: 1fr;
}
}
/* ── Home member card actions ───────────────────────────────────────────── */
.home-member-card-wrap { position:relative; }
.home-member-actions {
position:absolute; top:50%; right:40px; transform:translateY(-50%);
display:none; gap:4px;
}
.home-member-card-wrap:hover .home-member-actions { display:flex; }
.home-member-action-btn {
width:28px; height:28px; border-radius:8px; font-size:14px;
display:flex; align-items:center; justify-content:center;
border:0.5px solid var(--color-border-tertiary);
background:var(--color-background-primary);
color:var(--color-text-secondary); cursor:pointer; text-decoration:none;
}
.home-member-action-btn:hover { background:var(--color-background-secondary); color:var(--color-text-primary); }
.home-add-card { border-style:dashed; }
.home-add-card:hover { background:var(--color-background-secondary); }
/* ── Global search bar in top bar ───────────────────────────────────────── */
.ws-search-wrap {
flex: 1; max-width: 380px; margin: 0 8px; display: flex;
}
.ws-search-form { display:flex; align-items:center; width:100%; position:relative; }
.ws-search-input {
width: 100%; padding: 6px 32px 6px 30px;
border-radius: 20px; border: 0.5px solid var(--color-border-tertiary);
background: var(--color-background-secondary); font-size: 12px;
color: var(--color-text-primary); font-family: inherit;
}
.ws-search-input:focus { outline:none; border-color:#1D9E75; background:var(--color-background-primary); }
.ws-search-icon { position:absolute; left:9px; font-size:13px; color:var(--color-text-tertiary); pointer-events:none; }
.ws-search-submit { position:absolute; right:6px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--color-text-tertiary); padding:0; }
.ws-search-submit:hover { color:#1D9E75; }
@media (max-width:768px) { .ws-search-wrap { display:none; } }
/* ── Records two-column (JS-driven grid, replaces CSS columns) ──────────── */
.web-sys-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
margin-top: 12px;
}
.web-sys-col {
display: flex;
flex-direction: column;
gap: 0;
}
@media (max-width: 900px) {
.web-sys-grid { grid-template-columns: 1fr; }
}
/* ── Web records accordion — new 3-level design ─────────────────────────── */
.web-rec-wrap { margin-top:12px; }
.web-rec-header { display:flex; align-items:center; justify-content:space-between; padding:0 2px 10px; }
.web-rec-title { font-size:13px; font-weight:500; color:var(--color-text-primary); display:flex; align-items:center; gap:6px; }
.web-rec-title i { font-size:14px; color:#1D9E75; }
.web-rec-sub { font-size:11px; color:var(--color-text-tertiary); }
/* Level 1 — System */
.web-sys { border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); overflow:hidden; margin-bottom:8px; }
.web-sys-summary { list-style:none; background:var(--color-background-secondary); padding:12px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.web-sys-summary::-webkit-details-marker { display:none; }
.web-sys-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.web-sys-name { font-size:13px; font-weight:700; color:var(--color-text-primary); flex:1; text-transform:uppercase; letter-spacing:.04em; }
.web-sys-counts { display:flex; align-items:center; gap:6px; }
.web-sys-total { font-size:11px; color:var(--color-text-tertiary); }
.web-sys-flagged { font-size:11px; background:#FCEBEB; color:#791F1F; padding:1px 8px; border-radius:20px; }
.web-sys-chev { font-size:13px; color:var(--color-text-tertiary); transition:transform .2s; }
.web-sys[open] .web-sys-chev { transform:rotate(180deg); }
.web-sys-body { background:var(--color-background-primary); }
/* Level 2 — Panel */
.web-panel { border-top:0.5px solid var(--color-border-tertiary); }
.web-panel-summary { list-style:none; padding:8px 14px 8px 28px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; background:var(--color-background-primary); }
.web-panel-summary::-webkit-details-marker { display:none; }
.web-panel-chev { font-size:12px; color:var(--color-text-tertiary); flex-shrink:0; transition:transform .15s; }
.web-panel[open] .web-panel-chev { transform:rotate(90deg); }
.web-panel-name { font-size:12px; font-weight:500; color:var(--color-text-primary); flex:1; }
.web-panel-meta { display:flex; align-items:center; gap:6px; }
.web-panel-count { font-size:11px; color:var(--color-text-tertiary); }
.web-panel-flagged { font-size:11px; background:#FCEBEB; color:#791F1F; padding:1px 7px; border-radius:20px; }
/* Level 3 — Metric rows */
.web-metric-table { padding:0 14px 0 46px; background:var(--color-background-primary); }
.web-metric-cols-hdr {
display:grid; grid-template-columns:1fr 80px 90px 68px 52px; gap:8px; align-items:center;
padding:5px 0; border-bottom:0.5px solid var(--color-border-secondary);
background:var(--color-background-secondary); margin:0 -14px 0 -46px; padding-left:46px; padding-right:14px;
}
.web-metric-cols-hdr span { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-tertiary); }
.web-metric-row {
display:grid; grid-template-columns:1fr 80px 90px 68px 52px; gap:8px; align-items:center;
padding:6px 0; border-bottom:0.5px solid var(--color-border-tertiary); font-size:12px;
}
.web-metric-row:last-child { border-bottom:none; }
.web-m-name { color:var(--color-text-secondary); display:flex; align-items:center; gap:5px; }
.web-m-trend { font-size:10px; color:var(--color-text-tertiary); display:inline-flex; align-items:center; gap:2px; }
.web-m-trend i { font-size:10px; }
.web-m-val { color:var(--color-text-primary); font-variant-numeric:tabular-nums; }
.web-m-val a { text-decoration:none; }
.web-m-val a:hover { text-decoration:underline; }
.web-m-unit { font-size:10px; color:var(--color-text-tertiary); }
.web-m-range { font-size:11px; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; }
.web-m-status { font-size:11px;display:flex;align-items:center;gap:3px; }
.web-m-date { font-size:11px; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; }
/* Status dot — red for any out-of-range value */
.status-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#E24B4A;flex-shrink:0;margin-right:2px; }
/* Status colour classes — compound selectors (both classes on same element) */
.status-normal, .in-range { color:var(--color-text-secondary) !important; }
/* Flagged row — bold entire row + subtle background tint */
.web-metric-row.web-metric-flagged {
background: rgba(250, 238, 218, 0.45);
}
.web-metric-row.web-metric-flagged .web-m-name,
.web-metric-row.web-metric-flagged .web-m-date { font-weight:600; color:var(--color-text-primary); }
/* Value cell colouring — already bold from status classes below */
.web-m-val.status-high, .web-m-val.status-critical { color:#791F1F !important; font-weight:600; }
.web-m-val.status-low { color:#854F0B !important; font-weight:600; }
/* Status badge pill */
.web-m-status.status-high,
.web-m-status.status-critical { background:#FCEBEB; color:#791F1F !important; padding:2px 8px; border-radius:20px; font-weight:600; }
.web-m-status.status-low { background:#FAEEDA; color:#854F0B !important; padding:2px 8px; border-radius:20px; font-weight:600; }
.web-m-status.status-normal { background:var(--color-teal-50); color:var(--color-teal-900) !important; padding:2px 8px; border-radius:20px; }
/* Responsive — single column on narrow screens */
@media (max-width:640px) {
/* Auto-width columns — let status pill and date take as much as they need */
.web-metric-cols-hdr, .web-metric-row {
grid-template-columns: 1fr auto auto auto;
gap: 6px;
padding: 7px 0;
}
/* Hide Range column entirely on mobile (was already hidden) */
.web-metric-cols-hdr span:nth-child(3), .web-m-range { display: none; }
/* Tighter font and no-wrap to prevent visual collision */
.web-m-name { font-size: 12px; line-height: 1.3; }
.web-m-val { font-size: 12px; white-space: nowrap; }
.web-m-status {
font-size: 10px !important;
padding: 2px 6px !important;
white-space: nowrap;
flex-shrink: 0;
}
.web-m-date { font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.web-m-unit { font-size: 9px; }
/* Reduce left indent so name column has more room */
.web-metric-table { padding: 0 12px 0 30px; }
.web-metric-cols-hdr { padding-left: 30px; margin-left: -30px; }
}
/* ── Inline trend chart (web Records accordion) ─────────────────────────── */
.web-trend-wrap {
display: none;
grid-column: 1 / -1; /* span all 5 metric columns */
padding: 10px 0 6px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.web-trend-wrap.open { display: block; }
.web-trend-canvas { width: 100%; height: 180px; display: block; }
/* ge Item 1: trend wrap extensions — chips, stats row, action links */
/* gh2 (ge-1): header row above chips */
.web-trend-hdr {
display: flex; align-items: flex-start; gap: 10px;
padding: 4px 12px 8px;
}
.web-trend-hdr-meta { flex: 1; min-width: 0; }
.web-trend-hdr-title {
font-size: 12px; font-weight: 600; color: var(--color-teal-900);
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.web-trend-hdr-sub {
font-size: 10px; color: var(--color-text-tertiary);
margin-top: 2px; line-height: 1.4;
}
.web-trend-close {
font-size: 13px; color: var(--color-text-tertiary);
background: none; border: none; cursor: pointer;
padding: 2px 6px; font-family: inherit; line-height: 1; align-self: flex-start;
}
.web-trend-close:hover { color: var(--color-teal-900); }
.web-trend-chips {
display: flex; gap: 4px; align-items: center;
flex-shrink: 0;
}
.web-trend-chip {
font-size: 10px; font-weight: 500;
padding: 3px 8px; border-radius: 999px;
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
color: var(--color-text-secondary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
font-family: inherit;
}
.web-trend-chip:hover { background: var(--color-teal-50); }
.web-trend-chip.on {
background: var(--color-teal-900); border-color: var(--color-teal-900); color: #fff;
}
/* gh2 (ge-2): stats as bordered cards matching mockup C2 */
.web-trend-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 6px; padding: 8px 12px 4px;
margin-top: 6px; border-top: 0.5px solid var(--color-border-tertiary);
}
.web-trend-stat {
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: 7px;
padding: 7px 9px;
text-align: center;
display: flex; flex-direction: column; gap: 2px;
}
.web-trend-stat-lbl {
font-size: 9px; color: var(--color-text-tertiary);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.web-trend-stat-val {
font-size: 14px; font-weight: 700; color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.web-trend-stat-val.flag-hi { color: #A32D2D; }
.web-trend-stat-val.flag-lo { color: #854F0B; }
.web-trend-stat-val.flag-ok { color: #1D9E75; }
.web-trend-links {
display: flex; gap: 6px; padding: 6px 12px 4px;
margin-top: 2px;
}
.web-trend-link {
font-size: 11px; font-weight: 500; color: var(--color-teal-900);
text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
background: var(--color-teal-50); border: 0.5px solid rgba(var(--color-brand-rgb),0.2);
border-radius: 5px; padding: 5px 10px;
}
.web-trend-link:hover { background: #B9E5D2; text-decoration: none; }
.web-trend-link .ti { font-size: 12px; }
@media (max-width: 540px) {
.web-trend-hdr { flex-wrap: wrap; }
.web-trend-stats { grid-template-columns: repeat(2, 1fr); }
.web-trend-links { flex-wrap: wrap; }
}
/* Colored left border on Level 1 — override border-radius on left side */
.web-sys { border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; }
/* ── Modals (trend chart + add reminder) ────────────────────────────────── */
.modal-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.hidden { display:none; }
.modal-box {
background:var(--color-background-primary); border-radius:var(--border-radius-lg);
border:0.5px solid var(--color-border-tertiary); width:100%; max-width:560px;
max-height:90vh; overflow-y:auto; padding:20px;
}
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-title { font-size:15px; font-weight:500; color:var(--color-text-primary); }
.modal-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--color-text-tertiary); padding:0; }
.modal-close:hover { color:var(--color-text-primary); }
.modal-field { margin-bottom:14px; }
.modal-label { display:block; font-size:11px; font-weight:500; color:var(--color-text-secondary); margin-bottom:5px; }
.modal-input, .modal-select { width:100%; box-sizing:border-box; font-size:13px; padding:8px 10px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); background:var(--color-background-primary); color:var(--color-text-primary); }
.modal-input:focus, .modal-select:focus { outline:none; border-color:#1D9E75; }
.modal-type-row { display:flex; gap:8px; }
.modal-type-btn { flex:1; padding:7px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); background:var(--color-background-secondary); font-size:12px; cursor:pointer; color:var(--color-text-secondary); }
.modal-type-btn.active { background:var(--color-teal-50); border-color:#1D9E75; color:var(--color-teal-900); font-weight:500; }
.modal-save-btn { width:100%; padding:10px; border-radius:var(--border-radius-md); background:#1D9E75; color:#fff; font-size:14px; font-weight:500; border:none; cursor:pointer; margin-top:4px; }
.modal-save-btn:disabled { opacity:.4; }
.modal-save-btn:not(:disabled):hover { background:var(--color-teal-700); }
/* Trend table */
.trend-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:14px; }
.trend-table th { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-tertiary); padding:5px 8px; border-bottom:0.5px solid var(--color-border-secondary); text-align:left; }
.trend-table td { padding:6px 8px; border-bottom:0.5px solid var(--color-border-tertiary); }
.trend-table tr:last-child td { border-bottom:none; }
.trend-val-flag { color:#A32D2D; font-weight:500; }
/* ── Search bar: slimmer idle, dramatically prominent when active ────────── */
/* Idle: compact and unobtrusive */
.search-bar {
padding: 6px 12px !important;
transition: padding 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease, background 0.18s ease;
}
.search-bar input {
font-size: 12px;
transition: font-size 0.18s ease;
}
/* Active: visibly larger — user knows they are in search mode */
.search-bar:focus-within {
width: 60%; /* narrows to bring Clear button within reach */
padding: 11px 16px !important;
border-color: #1D9E75 !important;
border-width: 1.5px !important;
box-shadow: 0 0 0 4px rgba(29,158,117,0.15), 0 2px 8px rgba(0,0,0,0.06) !important;
background: #fff !important;
}
@media (max-width: 768px) {
.search-bar:focus-within { width: 100%; }
/* Hide "Add Health Data" label on mobile — bottom nav + is sufficient */
.ws-upload-btn span { display: none; }
.ws-upload-btn { padding: 0 10px; min-width: 36px; }
}
.search-bar:focus-within input {
font-size: 15px !important;
color: var(--color-text-primary);
}
.search-bar:focus-within .ti-search {
color: #1D9E75 !important;
font-size: 16px !important;
}
/* ── Member header edit pencil (web-only, overlaid top-right of card) ───── */
.member-header-edit-btn {
position: absolute;
top: 18px; right: 18px;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 6px;
color: var(--color-text-tertiary);
text-decoration: none;
font-size: 14px;
transition: background 0.12s, color 0.12s;
}
.member-header-edit-btn:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
}
/* ── Search bar X clear button ──────────────────────────────────────────── */
#search-clear-btn {
display: none; /* shown via JS (inline-flex) when input has content */
align-items: center; justify-content: center;
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
cursor: pointer;
padding: 3px 6px;
border-radius: 20px;
color: var(--color-text-secondary);
font-size: 11px;
line-height: 1;
flex-shrink: 0;
gap: 3px;
}
#search-clear-btn:hover { background: var(--color-background-primary); color: var(--color-text-primary); border-color: var(--color-border-secondary); }
/* ── Search bar: stronger active state ──────────────────────────────────── */
.search-bar {
transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar:focus-within {
border-color: #1D9E75;
box-shadow: 0 0 0 3px rgba(29,158,117,0.14);
}
.search-bar:focus-within input {
font-size: 14px;
color: var(--color-text-primary);
}
.search-bar:focus-within .ti-search { color: #1D9E75 !important; }
/* ── Ask Arogya button in top bar (replaces search form) ────────────────── */
.ws-ask-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 20px; border-radius: 20px;
background: var(--color-teal-900); color: var(--color-teal-50);
border: none;
font-size: 13px; font-weight: 500;
text-decoration: none; white-space: nowrap; flex-shrink: 0;
box-shadow: rgba(8,80,65,0.4) 0px 4px 14px 0px, rgba(0,0,0,0.2) 0px -3px 6px 0px inset;
}
.ws-ask-btn:hover { background: #0A6652; color: var(--color-teal-50); border-color: transparent; transform: translateY(-1px); box-shadow: rgba(8,80,65,0.5) 0px 6px 18px 0px, rgba(0,0,0,0.2) 0px -3px 6px 0px inset; }
.ws-ask-btn i { font-size: 13px; }
/* ── Rail upload job cards ───────────────────────────────────────────────── */
.rail-job-card {
margin: 0 10px 9px;
padding: 9px 10px;
background: var(--color-background-primary);
border-radius: var(--border-radius-md);
border: 0.5px solid var(--color-border-tertiary);
}
.rjc-name {
font-size: 11px; color: var(--color-text-secondary);
margin-bottom: 8px; word-break: break-all; line-height: 1.3;
}
/* 4-stage progress track */
.rjc-track {
display: flex; align-items: center; margin-bottom: 4px;
}
.rjt {
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.rjt.rjt-pending { background: var(--color-background-secondary); border: 1.5px solid var(--color-border-secondary); }
.rjt.rjt-active { background: var(--color-teal-50); border: 1.5px solid #1D9E75; animation: rjtPulse 1.2s ease-in-out infinite; }
.rjt.rjt-done { background: #1D9E75; border: 1.5px solid #1D9E75; color: #fff; }
.rjt.rjt-failed { background: #FCEBEB; border: 1.5px solid #E24B4A; color: #E24B4A; }
@keyframes rjtPulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.rjl { flex: 1; height: 1.5px; background: var(--color-border-secondary); }
.rjl.rjl-done { background: #1D9E75; }
.rjc-labels {
display: flex; justify-content: space-between;
font-size: 9px; color: var(--color-text-tertiary);
margin-bottom: 6px; padding: 0 1px; letter-spacing: 0;
}
/* Attribution section */
.rjc-attr { margin-top: 2px; }
.rja-saved { font-size: 11px; color: var(--color-text-secondary); line-height: 1.4; }
.rja-toggle {
font-size: 10px; color: var(--color-text-tertiary); background: none;
border: none; cursor: pointer; padding: 0 2px; text-decoration: underline;
}
.rja-change {
display: none; flex-direction: column; gap: 5px; margin-top: 6px;
}
.rja-sel {
font-size: 11px; padding: 4px 6px; border-radius: 6px;
border: 0.5px solid var(--color-border-secondary); width: 100%;
background: var(--color-background-secondary); font-family: inherit;
}
.rja-btn {
font-size: 11px; padding: 4px 10px; border-radius: 6px;
border: none; background: #1D9E75; color: #fff; cursor: pointer; align-self: flex-start;
}
.rja-btn:hover { background: #178a63; }
/* ── Global window drag-drop overlay ────────────────────────────────────── */
#global-drop-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(29,158,117,0.07);
border: 3px dashed #1D9E75;
display: none; /* shown as flex by JS */
align-items: center; justify-content: center;
}
.gdrop-inner {
background: #fff; border-radius: 16px;
padding: 28px 36px; text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,.14);
pointer-events: none;
}
/* Rail card failure message */
.rjc-fail-msg {
font-size: 10px;
color: #A32D2D;
line-height: 1.4;
margin-top: 5px;
padding-top: 5px;
border-top: 0.5px solid #FCEBEB;
}
/* ── Rail card top row (name + dismiss button) ─────────── */
.rjc-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4px;
margin-bottom: 6px;
}
.rjc-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--color-text-primary); word-break: break-all; }
.rjc-dismiss {
flex-shrink: 0;
background: none; border: none; cursor: pointer;
font-size: 13px; line-height: 1; color: var(--color-text-tertiary);
padding: 0 2px; margin-top: -1px;
}
.rjc-dismiss:hover { color: var(--color-text-secondary); }
/* ── Collapsed success card ─────────────────────────────── */
.rjc-collapsed .rjc-track,
.rjc-collapsed .rjc-labels,
.rjc-collapsed .rjc-attr { display: none; }
.rjc-collapsed .rjc-name::before {
content: '\2713\00a0';
color: #1D9E75;
font-weight: 700;
}
/* ── Attribution: Tier 2 proposed ───────────────────────── */
.rja-proposed { margin-top: 6px; }
.rja-proposed-lbl { font-size: 11px; color: var(--color-text-secondary); line-height: 1.4; display: block; margin-bottom: 5px; }
.rja-conf { color: var(--color-text-tertiary); font-size: 10px; }
.rja-btn-row { display: flex; gap: 5px; margin-bottom: 3px; }
.rja-btn-confirm {
background: #1D9E75; color: #fff; border: none;
border-radius: 4px; font-size: 10px; font-weight: 600;
padding: 4px 10px; cursor: pointer;
}
.rja-btn-confirm:hover { background: #178a64; }
.rja-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Attribution: Tier 3 unidentified ───────────────────── */
.rja-tier3 { margin-top: 6px; }
.rja-tier3 span { font-size: 11px; color: #9A5800; line-height: 1.4; display: block; margin-bottom: 5px; }
/* ── Attribution: Tier 1 saved ──────────────────────────── */
.rja-saved { margin-top: 6px; font-size: 11px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* ── Change row (shared across tiers) ───────────────────── */
.rja-change { display: none; flex-direction: row; gap: 4px; margin-top: 4px; align-items: center; }
.rja-sel { font-size: 10px; border: 1px solid var(--color-border-secondary); border-radius: 4px; padding: 3px 4px; background: var(--color-bg-primary); flex: 1; }
.rja-btn { background: var(--color-bg-secondary); border: 1px solid var(--color-border-secondary); border-radius: 4px; font-size: 10px; padding: 4px 8px; cursor: pointer; }
.rja-btn:hover { background: var(--color-bg-tertiary); }
.rja-toggle { background: none; border: none; font-size: 10px; color: #1D9E75; cursor: pointer; padding: 0; text-decoration: underline; }
/* ── Failure message ─────────────────────────────────────── */
.rjc-fail-msg { font-size: 10px; color: #A32D2D; line-height: 1.4; margin-top: 5px; padding-top: 5px; border-top: 0.5px solid #FCEBEB; }
/* ── Upload rail accordion header ─────────────────────────── */
.rail-uploads-header {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px 5px;
cursor: pointer;
border-radius: 6px;
margin-bottom: 2px;
user-select: none;
}
.rail-uploads-header:hover { background: var(--color-background-secondary, #f5f5f2); }
.rail-uploads-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--color-text-primary);
}
.rail-uploads-summary {
font-size: 10px;
color: var(--color-text-tertiary);
margin-left: 2px;
}
/* ── Rail card: name + dismiss row ────────────────────────── */
.rjc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom:6px; }
.rjc-name { flex:1; font-size:11px; font-weight:600; color:var(--color-text-primary); word-break:break-all; }
.rjc-dismiss { flex-shrink:0; background:none; border:none; cursor:pointer; font-size:14px; line-height:1; color:var(--color-text-tertiary); padding:0 2px; margin-top:-1px; }
.rjc-dismiss:hover { color:var(--color-text-secondary); }
/* ── Rail card: attribution row ────────────────────────────── */
.rja-saved { margin-top:6px; font-size:11px; color:var(--color-text-secondary); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rja-change { display:none; flex-direction:row; gap:4px; margin-top:4px; align-items:center; }
.rja-sel { font-size:10px; border:1px solid var(--color-border-secondary); border-radius:4px; padding:3px 4px; background:#fff; color:#333; flex:1; }
.rja-btn { background:#f0f0ed; border:1px solid #ccc; border-radius:4px; font-size:10px; color:#333; padding:4px 10px; cursor:pointer; white-space:nowrap; }
.rja-btn:hover { background:#e5e5e0; }
.rja-btn:disabled { opacity:0.5; cursor:not-allowed; }
.rja-toggle { background:none; border:none; font-size:10px; color:#1D9E75; cursor:pointer; padding:0; text-decoration:underline; white-space:nowrap; }
/* ── Failure message ───────────────────────────────────────── */
.rjc-fail-msg { font-size:10px; color:#A32D2D; line-height:1.4; margin-top:5px; padding-top:5px; border-top:0.5px solid #FCEBEB; }
/* ── Tab canvas: smooth transition on load ─────────────────── */
#ws-tab-canvas { transition: opacity 0.15s ease; }
/* ── Accordion sections (details/summary) ─────────────────────────────────── */
.arog-accordion { border-radius: var(--border-radius-lg); overflow: hidden; margin-bottom: 12px; }
.arog-accordion > summary { list-style: none; cursor: pointer; user-select: none; }
.arog-accordion > summary::-webkit-details-marker { display: none; }
.arog-accordion > summary::marker { display: none; }
.arog-accordion-chev { transition: transform .2s; margin-left: auto; flex-shrink: 0; }
.arog-accordion[open] .arog-accordion-chev { transform: rotate(180deg); }
details[open] .arog-accordion-chev { transform: rotate(180deg); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
Member AI topbar — shared across member.html and home.html
═══════════════════════════════════════════════════════════════════════════ */
/* Topbar height varies by breakpoint — child elements (tab-nav-row) use this */
:root { --member-topbar-h: 58px; }
@media (max-width: 768px) { :root { --member-topbar-h: 50px; } }
.member-ai-topbar {
background: var(--color-teal-900);
padding: 8px 16px 8px 14px;
display: flex; align-items: center; gap: 0;
flex-shrink: 0; position: sticky; top: 0; z-index: 30;
}
.member-menu-btn {
width: 36px; height: 36px; border-radius: 7px;
background: rgba(255,255,255,0.1); border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; margin-right: 10px;
-webkit-tap-highlight-color: transparent;
}
.member-menu-btn i { font-size: 18px; color: rgba(255,255,255,0.85); }
/* Scope dropdown */
.member-scope-wrap { position: relative; flex-shrink: 0; }
.member-scope-btn {
background: rgba(255,255,255,0.12); border: none; cursor: pointer;
color: #fff; font-size: 14px; font-weight: 700;
padding: 5px 10px; border-radius: 8px;
display: flex; align-items: center; gap: 5px;
font-family: var(--font-sans); letter-spacing: -0.01em;
white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.member-scope-btn:hover { background: rgba(255,255,255,0.18); }
.member-scope-menu {
position: absolute; top: calc(100% + 6px); left: 0;
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-secondary);
border-radius: 10px; padding: 4px 0;
/* ig11: bumped from 50 → 70 so the family-switcher dropdown stacks above
the floating Ask-Arogya FAB (z-index 60). Was rendering behind the FAB
on mobile — Kiran had raised this before. Modals sit at 9000+, so 70
doesn't collide with anything above. */
min-width: 200px; z-index: 70;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.scope-opt {
display: flex; align-items: center; gap: 8px;
padding: 9px 14px; font-size: 13px; font-weight: 500;
color: var(--color-text-primary); text-decoration: none;
cursor: pointer; white-space: nowrap;
}
.scope-opt:hover { background: var(--color-background-secondary); }
.scope-opt-active { color: var(--color-teal-900); background: var(--color-teal-50); }
.scope-opt-active:hover { background: #D0F0E6; }
.member-scope-divider {
width: 1.5px; height: 28px; background: rgba(255,255,255,0.25);
flex-shrink: 0; margin: 0 12px;
}
/* Desktop search bar */
.member-ai-bar-inner {
flex: 0 0 400px; background: #fff;
border-radius: 10px; display: flex; align-items: center;
gap: 8px; padding: 8px 8px 8px 13px; cursor: text;
min-height: 42px;
}
.member-search-input {
flex: 1; border: none; outline: none;
font-size: 13px; font-family: var(--font-sans);
background: transparent; color: var(--color-text-primary);
}
.member-search-input::placeholder { color: #B0ADA8; font-size: 13px; }
.member-mic-btn {
background: none; border: none; cursor: pointer;
color: #B0ADA8; display: flex; align-items: center;
padding: 2px; flex-shrink: 0;
}
.member-mic-btn i { font-size: 16px; }
.member-search-send {
background: var(--color-teal-900); color: #fff; border: none;
border-radius: 8px; padding: 7px 14px;
font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 6px;
cursor: pointer; flex-shrink: 0; font-family: var(--font-sans);
white-space: nowrap;
}
.member-search-send i { font-size: 15px; color: var(--color-teal-200); }
.member-topbar-spacer { flex: 1; min-width: 18%; }
/* ── Topbar "Add health data" button — shown on all pages ── */
.topbar-add-btn {
margin-left: auto;
background: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 18px;
color: var(--color-teal-900); font-size: 12px; font-weight: 700;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
font-family: var(--font-sans);
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.10);
letter-spacing: 0.01em;
}
.topbar-add-btn:hover { background: #f0faf6; box-shadow: 0 3px 8px rgba(0,0,0,0.22); }
.topbar-add-btn:active { background: #e0f5ed; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.topbar-add-btn i { font-size: 14px; color: var(--color-teal-900); }
@media (max-width: 768px) {
.topbar-add-btn {
padding: 8px 12px;
border-radius: 8px;
/* Build fu1 (AUDIT-008): removed margin-right:110px reservation —
the deprecated .member-mobile-ask pill no longer occupies that space. */
}
.topbar-add-btn-label { display: none; }
}
/* ── Build hj: notification bell + panel ────────────────────────────────── */
.ws-notif-btn {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(255,255,255,0.10); border: none;
display: flex; align-items: center; justify-content: center;
position: relative; flex-shrink: 0; cursor: pointer;
/* Build hl-fix4: margin-left:auto so the bell sticks to the right of
the search bar (or hamburger on mobile) alongside the Add (+) button.
Without this, only Add had margin-left:auto and the bell stayed left-
justified. */
margin-left: auto;
margin-right: 8px;
-webkit-tap-highlight-color: transparent;
}
.ws-notif-btn:hover { background: rgba(255,255,255,0.18); }
.ws-notif-btn:active { background: rgba(255,255,255,0.22); }
.ws-notif-btn i { font-size: 18px; color: rgba(255,255,255,0.90); }
/* ═══════════════════════════════════════════════════════════════════════════
ii6 — Desktop topbar redesign (Kiran, 17 Jul 2026). DESKTOP ONLY.
Every rule here is inside @media (min-width: 900px) so the phone / Capacitor
WebView topbar (which uses the @media (max-width: 768px) block far below,
keeps its logo, hides the ask bar + add button) is byte-identical.
1. Slimmer bar (~58→44px) + drop shadow for a raised, 3-D edge.
2. Ask bar +20% (400→480px).
3. Bell moves to the far corner, after Add-health-data (also reordered
in home.html; here the bell drops its margin-left:auto so it sits
right after the add button instead of absorbing the free space).
5. Logo hidden (it's already in the left sidebar on desktop) → the
Everyone ▾ scope grows to 17px with a gap before the ask bar.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
.member-ai-topbar {
padding: 4px 16px;
box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.26);
}
.member-brand-logo { display: none; } /* (5) */
.member-scope-btn {
font-size: 17px; /* (5) bigger */
padding: 5px 12px;
max-width: 220px;
}
.member-scope-divider { height: 24px; }
.member-ai-bar-inner {
flex: 0 0 480px; /* (2) +20% */
min-height: 0; /* slimmer — drop the 42px floor */
padding: 3px 6px 3px 13px;
margin-left: 20px; /* (5) gap before ask bar */
}
/* the mic + Ask button inside carry a 44px touch-target floor that was
bloating the bar to 60px → topbar 70px. Shrink them on desktop (pointer,
not touch) so the whole bar lands ~36px and the topbar ~44px (−25%). */
.member-ai-bar-inner .member-mic-btn { height: 30px; min-height: 0; }
.member-ai-bar-inner .member-search-send{ height: 30px; min-height: 0; padding: 0 14px; }
.member-menu-btn { width: 32px; height: 32px; }
.topbar-add-btn { margin-left: auto; padding: 6px 16px; } /* absorbs free space → right group */
.ws-notif-btn { width: 32px; height: 32px; margin-left: 8px; margin-right: 0; } /* (3) hugs add btn, far corner */
}
.ws-notif-dot {
position: absolute; top: 5px; right: 5px;
width: 10px; height: 10px; border-radius: 50%;
background: #E24B4A;
border: 1.5px solid var(--color-teal-900);
animation: ws-notif-pulse 1.5s ease-in-out infinite;
}
@keyframes ws-notif-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* Floating panel anchored to the topbar, drops down on the right.
Mobile: full-width with a 10px gutter. */
.ws-notif-overlay {
position: fixed; inset: 56px 0 0 0;
background: rgba(0,0,0,0.35);
z-index: 39;
}
.ws-notif-panel {
position: absolute; top: 100%; right: 12px;
width: min(380px, calc(100vw - 24px));
max-height: 75vh; overflow-y: auto;
background: #ece8df;
border: 0.5px solid #d8d3c6;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
z-index: 100; /* agt40: bumped from 40 — was rendering behind .ws-fab (z:60) */
padding-bottom: 10px;
}
/* agt40: belt-and-suspenders — the Ask Arogya FAB dims out while the
notification panel is open. `body.notif-open` is toggled by the notif
bell JS. Fix reported on Android where the FAB overlapped the notif
drawer; equally applies to web. */
body.notif-open .ws-fab {
visibility: hidden;
pointer-events: none;
}
@media (max-width: 768px) {
.ws-notif-panel { right: 8px; left: 8px; width: auto; }
}
.ws-notif-panel-body { padding: 0; }
.ws-notif-loading {
padding: 18px; text-align: center; font-size: 12px;
color: var(--color-text-secondary);
}
.ws-notif-loading i { font-size: 14px; vertical-align: -1px; margin-right: 4px; }
/* Panel internal — mirrors docs/mockups/notification_panel_v1.html */
.notif-panel { background: transparent; }
.notif-phdr {
display: flex; align-items: center; gap: 8px;
padding: 11px 14px;
background: #e2dccf;
border-bottom: 0.5px solid #d8d3c6;
border-radius: 14px 14px 0 0;
position: sticky; top: 0; z-index: 2;
margin-bottom: 10px;
}
.notif-phdr-title {
font-size: 13px; font-weight: 600; color: #1a1a1a;
flex: 1; display: flex; align-items: center; gap: 6px;
}
.notif-phdr-title i { color: #EF9F27; font-size: 14px; }
.notif-phdr-dismiss {
font-size: 11px; font-weight: 500; color: var(--color-teal-700);
cursor: pointer; background: none; border: none;
}
.notif-phdr-dismiss:hover { text-decoration: underline; }
.notif-empty {
padding: 28px 14px; text-align: center; font-size: 13px;
color: var(--color-text-secondary);
}
.notif-empty i { font-size: 16px; vertical-align: -2px; margin-right: 6px; color: #1D9E75; }
.notif-card {
display: flex; background: #fff;
margin: 0 10px 8px;
border-radius: 10px;
border: 0.5px solid #d8d3c6;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);
overflow: hidden;
}
.notif-card-bar { width: 3px; flex-shrink: 0; }
.notif-card-body { flex: 1; padding: 8px 6px 8px 9px; min-width: 0; }
.notif-card-x {
width: 24px; padding: 8px 4px 0 0;
background: none; border: none;
cursor: pointer; color: #c8c4bc; font-size: 12px;
flex-shrink: 0;
}
.notif-card-top {
display: flex; align-items: center; gap: 4px;
line-height: 1;
}
.notif-card-icon {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.notif-card-icon i { font-size: 12px; }
.notif-card-member {
padding: 1px 5px; border-radius: 4px;
font-size: 10px; font-weight: 600; flex-shrink: 0;
line-height: 1.3;
}
.notif-capsule {
padding: 1px 6px; border-radius: 20px;
font-size: 9px; font-weight: 700;
letter-spacing: 0.03em; text-transform: uppercase;
flex-shrink: 0; line-height: 1.4;
}
.notif-capsule.cap-red { background: #FCEBEB; color: #A32D2D; }
.notif-capsule.cap-amber { background: #FAEEDA; color: #854F0B; }
.notif-capsule.cap-blue { background: #E6F1FB; color: #185FA5; }
.notif-capsule.cap-teal { background: var(--color-teal-50); color: var(--color-teal-700); }
.notif-capsule.cap-green { background: #EAF3DE; color: #3B6D11; }
.notif-card-time {
margin-left: auto; font-size: 10px; color: #b4b2a9;
white-space: nowrap; flex-shrink: 0;
}
.notif-card-title {
font-size: 13px; font-weight: 600; color: #1a1a1a;
line-height: 1.25; margin-top: 3px;
}
.notif-card-sub {
font-size: 11px; color: #5f5e5a;
line-height: 1.3; margin-top: 1px;
}
.notif-actions {
display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap;
}
.notif-btn-p, .notif-btn-r, .notif-btn-s {
padding: 3px 9px; border-radius: 5px;
font-size: 11px; font-weight: 500;
white-space: nowrap; line-height: 1.4;
cursor: pointer; text-decoration: none;
font-family: inherit;
display: inline-flex; align-items: center;
}
.notif-btn-p {
background: var(--color-teal-900); color: #fff; border: none;
font-weight: 600;
}
.notif-btn-r {
background: #FCEBEB; color: #791F1F; border: none;
font-weight: 600;
}
.notif-btn-s {
background: #fff; color: #5f5e5a;
border: 0.5px solid #c8c4bc;
}
.notif-btn-p:hover { background: #0A5147; }
.notif-btn-r:hover { background: #F7DBDB; }
.notif-btn-s:hover { background: #f3f1ec; }
.notif-spinner {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--color-teal-50); border-top-color: var(--color-teal-700);
animation: notif-spin 0.9s linear infinite;
flex-shrink: 0;
}
@keyframes notif-spin { to { transform: rotate(360deg); } }
.notif-pbar {
height: 3px; border-radius: 2px;
background: #e8e5df; margin-top: 5px;
overflow: hidden;
}
.notif-pfill {
height: 100%; border-radius: 2px;
background: #1D9E75;
animation: notif-prog 2s ease-in-out infinite alternate;
}
@keyframes notif-prog {
from { width: 55%; }
to { width: 85%; }
}
/* Tablet (769–900px): compress topbar to prevent overflow */
@media (min-width: 769px) and (max-width: 900px) {
.member-ai-bar-inner { flex: 0 0 240px; }
.member-scope-btn { max-width: 120px; font-size: 13px; }
.topbar-add-btn { padding: 6px 12px; font-size: 11px; }
.topbar-add-btn-label { display: none; }
}
/* Build fu1 (AUDIT-008): removed all .member-mobile-ask CSS — the pill button
was deprecated in favor of the floating AI button (ws-fab). Element no longer
appears in any template. ~20 lines of dead CSS removed. */
@media (max-width: 768px) {
.member-ai-topbar {
padding: 8px 10px !important;
gap: 8px;
}
/* DO NOT add position: relative — it breaks the sticky behaviour and
content scrolls over the topbar. position:sticky already creates a
positioning context for the absolutely-positioned mobile ask pill. */
.member-scope-divider { display: none; }
.member-ai-bar-inner { display: none !important; }
.member-topbar-spacer { display: none !important; }
/* agt52: kill the topbar Add-health-data + on mobile — the same action
lives in the bottom nav as the ⊕ button (see partials/bottom_nav.html). */
.topbar-add-btn { display: none !important; }
/* agt52: AA brand logo, immediately after hamburger. Rendered on every
.member-ai-topbar template (home, member, workspace, activities,
activity_form, member_form, translate_prescription, closure_prompt_page). */
.member-brand-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.member-brand-logo img {
width: 36px; height: 36px;
border-radius: 8px;
display: block;
}
/* agt52: center the family/member scope button in the topbar and bump
its font. `margin: 0 auto` on a flex item eats all extra space equally
on both sides, which is what centers the pill between hamburger+logo
(left) and the bell (right). */
.member-scope-wrap {
margin-left: auto;
margin-right: auto;
}
.member-scope-btn {
font-size: 16px;
font-weight: 700;
padding: 8px 14px;
max-width: 220px;
letter-spacing: -0.01em;
}
.member-scope-btn i { font-size: 13px !important; }
.member-menu-btn { margin-right: 0; }
.ws-notif-btn { margin-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Horizontal scroll defenders — catch any wide child that escapes its parent
═══════════════════════════════════════════════════════════════════════════ */
.ws-shell, .ws-main, .ws-content, .ws-canvas, .home-canvas, #home-canvas {
overflow-x: hidden;
max-width: 100%;
}
/* Condition cards & metric chip rows — flex children need min-width:0 so
the parent doesn't get forced wider by intrinsic child sizes. */
.cond-metrics-row { max-width: 100%; }
.chp-cards-list, .chp-card { min-width: 0; max-width: 100%; }
/* Family chip strip on home — same pattern */
.home-fam-strip { max-width: 100%; }
/* ═══════════════════════════════════════════════════════════════════════════
Mobile-only tweaks for summary sections (cd: tighter mobile UI)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Active Health Conditions: full-width cards on mobile */
.chp-cond-grid { grid-template-columns: 1fr !important; }
/* Hide "X on treatment" badge in section header on mobile (clutter) */
/* Hide "X flagged" badge in Watching section header on mobile */
.sec-count { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Records tab — filter bar (cd: prevent iOS zoom, fix mobile usability)
═══════════════════════════════════════════════════════════════════════════ */
.rec-filter-input {
flex: 1; border: 0.5px solid var(--color-border-secondary);
border-radius: 7px; padding: 6px 10px;
font-size: 13px; font-family: var(--font-sans);
outline: none;
background: var(--color-background-primary);
color: var(--color-text-primary);
}
.rec-filter-btn {
font-size: 12px; font-weight: 500;
padding: 6px 10px; border-radius: 6px;
border: 0.5px solid var(--color-border-secondary);
background: var(--color-background-primary);
color: var(--color-text-secondary);
cursor: pointer; white-space: nowrap;
font-family: var(--font-sans);
}
.rec-filter-select { padding: 6px 8px; }
/* Mobile: bump to 16px to disable iOS auto-zoom on focus */
@media (max-width: 768px) {
.rec-filter-input,
.rec-filter-btn,
.rec-filter-select {
font-size: 16px !important;
}
.rec-filter-input { padding: 8px 12px; }
.rec-filter-btn { padding: 8px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
History Timeline v2 — unified component for Upload History + Member History
═══════════════════════════════════════════════════════════════════════════ */
/* Filter bar (only on Upload History) */
.htl-filterbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 16px;
}
.htl-filter-lbl {
font-size: 11px; color: var(--color-text-tertiary);
text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
}
.htl-fchip {
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px; padding: 5px 12px;
font-size: 12px; color: var(--color-text-secondary);
text-decoration: none; transition: background .12s, color .12s;
}
.htl-fchip:hover { background: var(--color-background-secondary); }
.htl-fchip.on {
background: var(--color-teal-900); color: #fff; border-color: var(--color-teal-900);
}
.htl-counter {
margin-left: auto; font-size: 12px;
color: var(--color-text-tertiary);
}
/* Timeline wrap — provides padding for the left spine column */
.htl-wrap { padding-left: 80px; position: relative; }
.htl-timeline { position: relative; }
.htl-timeline::before {
content: ''; position: absolute;
left: -18px; top: 14px; bottom: 8px;
width: 1.5px;
background: var(--color-border-secondary);
}
.htl-month {
font-size: 11px; color: var(--color-text-tertiary);
font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
margin: 18px 0 8px;
}
.htl-row { position: relative; margin-bottom: 7px; }
.htl-date {
position: absolute; left: -80px; top: 8px;
width: 56px; text-align: right;
}
.htl-d {
font-size: 22px; font-weight: 700;
color: var(--color-text-primary); line-height: 1;
font-variant-numeric: tabular-nums;
}
.htl-mo {
font-size: 12px; font-weight: 500;
color: var(--color-text-secondary);
text-transform: uppercase; letter-spacing: .06em;
margin-top: 4px;
}
.htl-yr {
font-size: 10px; color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums; margin-top: 2px;
}
.htl-dot {
position: absolute; left: -22px; top: 15px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--color-background-primary);
border: 1.5px solid var(--color-border-secondary);
z-index: 1;
}
.htl-dot.dot-lab { border-color: var(--color-teal-700); }
.htl-dot.dot-rx { border-color: #854F0B; }
.htl-dot.dot-scan { border-color: #534AB7; }
.htl-dot.dot-visit { border-color: #185FA5; }
.htl-dot.dot-sym { border-color: #A32D2D; }
.htl-dot.dot-vac { border-color: #5F5E5A; }
/* The card itself */
.htl-card {
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: 8px;
overflow: hidden;
transition: border-color .15s;
}
.htl-card:hover { border-color: var(--color-border-secondary); }
.htl-card-head {
padding: 10px 12px;
display: flex; align-items: flex-start; gap: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Type tag */
.htl-tag {
font-size: 10px; font-weight: 500;
padding: 2px 8px; border-radius: 3px;
text-transform: uppercase; letter-spacing: .04em;
flex-shrink: 0; margin-top: 2px;
font-family: var(--font-sans);
}
.htl-tag.tag-lab { background: var(--color-teal-50); color: var(--color-teal-900); }
.htl-tag.tag-rx { background: #FAEEDA; color: #854F0B; }
.htl-tag.tag-scan { background: #EEEDFE; color: #3C3489; }
.htl-tag.tag-visit { background: #EAF0FB; color: #185FA5; }
.htl-tag.tag-sym { background: #FCEBEB; color: #791F1F; }
.htl-tag.tag-vac { background: #F1EFE8; color: #444441; }
/* Info column */
.htl-info { flex: 1; min-width: 0; }
.htl-l1 {
font-size: 13px; font-weight: 500;
color: var(--color-text-primary);
line-height: 1.35;
}
.htl-l2 {
font-size: 12px; color: var(--color-text-tertiary);
margin-top: 3px; line-height: 1.4;
word-wrap: break-word; overflow-wrap: anywhere;
}
/* gu1: K8 — new row shape. Title gets its own full row (no truncation),
metadata below, date + View source drop to a foot line. */
.htl-title-full {
font-size: 14px; font-weight: 600;
color: var(--color-text-primary);
line-height: 1.35;
word-wrap: break-word; overflow-wrap: anywhere;
}
.htl-title-more {
font-size: 11px; font-weight: 500;
color: var(--color-text-tertiary);
margin-left: 4px;
}
.htl-meta {
font-size: 12px; color: var(--color-text-tertiary);
margin-top: 4px; line-height: 1.4;
word-wrap: break-word; overflow-wrap: anywhere;
}
.htl-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 8px; margin-top: 8px;
}
.htl-foot-date {
font-size: 11px; color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
}
/* gu1: shared "View source" button — same green treatment as records timeline (K7). */
.htl-view-source {
display: inline-flex; align-items: center; gap: 4px;
background: #1D9E75; color: #fff;
padding: 4px 10px; border-radius: 6px;
font-size: 11px; font-weight: 600;
text-decoration: none; white-space: nowrap;
box-shadow: 0 1px 2px rgba(29, 158, 117, 0.35);
}
.htl-view-source:hover { background: #178E68; color: #fff; }
.htl-view-source i { font-size: 12px; }
.htl-view-source-lg {
padding: 7px 14px; font-size: 12.5px; gap: 5px;
}
.htl-l3 {
display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px;
}
.htl-panel-chip {
font-size: 10px; padding: 2px 8px; border-radius: 3px;
background: var(--color-background-secondary);
color: var(--color-text-secondary);
font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
}
.htl-panel-chip.pn-cbc { background: #FCEBEB; color: #791F1F; }
.htl-panel-chip.pn-lft { background: #FAEEDA; color: #854F0B; }
.htl-panel-chip.pn-kft { background: #EEEDFE; color: #3C3489; }
.htl-panel-chip.pn-lipid { background: #FAEEDA; color: #854F0B; }
.htl-panel-chip.pn-thyroid { background: #EEEDFE; color: #3C3489; }
.htl-panel-chip.pn-hba1c { background: #FCEBEB; color: #791F1F; }
/* Right side — person pill + kebab */
.htl-right {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0; margin-top: 1px;
}
.htl-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 500;
padding: 3px 10px 3px 4px; border-radius: 12px;
white-space: nowrap;
}
.htl-pill-avt {
width: 18px; height: 18px; border-radius: 50%;
color: #fff; font-size: 9px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.htl-pill.p-coral { background: #FAECE7; color: #993C1D; }
.htl-pill.p-purple { background: #EEEDFE; color: #3C3489; }
.htl-pill.p-amber { background: #FAEEDA; color: #854F0B; }
.htl-pill.p-red { background: #FCEBEB; color: #A32D2D; }
.htl-pill.p-slate { background: #EAF0FB; color: #185FA5; }
.htl-pill.p-sage { background: #EAF3DE; color: #3B6D11; }
.htl-pill.p-custom { background: var(--color-background-secondary); color: var(--color-text-secondary); }
.htl-menu {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none;
color: var(--color-text-tertiary);
font-size: 14px; cursor: pointer;
border-radius: 5px;
font-family: var(--font-sans);
}
.htl-menu:hover { background: var(--color-background-secondary); }
/* Expansion body */
.htl-exp {
display: none;
padding: 0 12px 12px;
border-top: 0.5px solid var(--color-border-tertiary);
font-size: 12px;
flex-direction: column; gap: 10px;
}
.htl-card.open .htl-exp { display: flex; padding-top: 12px; }
.htl-card.open { border-color: var(--color-border-secondary); }
.htl-exp-row {
display: flex; gap: 14px; align-items: flex-start;
}
.htl-exp-lbl {
font-size: 10px; color: var(--color-text-tertiary);
text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
min-width: 80px; padding-top: 2px; flex-shrink: 0;
}
.htl-exp-val {
flex: 1; color: var(--color-text-primary); line-height: 1.55;
word-wrap: break-word; overflow-wrap: anywhere;
}
.htl-exp-mono {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-secondary);
}
/* Medications */
.htl-med {
font-size: 12px;
color: var(--color-text-primary);
line-height: 1.55;
padding: 2px 0;
}
.htl-med + .htl-med { margin-top: 4px; }
.htl-med-low {
color: #888780;
font-style: italic;
}
.htl-conf-tag {
font-size: 9px; font-weight: 500;
background: #FAEEDA; color: #854F0B;
padding: 1px 6px; border-radius: 3px;
margin-left: 6px; font-style: normal;
text-transform: uppercase; letter-spacing: .04em;
}
/* Value chips inside expansion */
.htl-exp-chips {
display: flex; gap: 5px; flex-wrap: wrap;
}
.htl-val-chip {
font-size: 11px; padding: 2px 7px; border-radius: 3px;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.htl-val-chip.vc-bad { background: #FCEBEB; color: #791F1F; }
.htl-val-chip.vc-warn { background: #FAEEDA; color: #854F0B; }
.htl-val-chip.vc-good { background: var(--color-teal-50); color: var(--color-teal-900); }
.htl-val-chip.vc-neutral { background: var(--color-background-secondary); color: var(--color-text-secondary); }
/* Action buttons */
.htl-exp-actions {
display: flex; gap: 6px; padding-top: 4px;
flex-wrap: wrap;
}
.htl-act-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 12px; border-radius: 6px;
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-tertiary);
font-size: 13px; color: var(--color-text-primary);
cursor: pointer; font-family: var(--font-sans);
text-decoration: none;
transition: background .12s, border-color .12s;
}
/* gd Item 3: teal modifier for Compare button — distinguishes it from View original */
.htl-act-btn.htl-act-btn-teal {
background: var(--color-teal-900);
border-color: var(--color-teal-900);
color: #fff;
}
.htl-act-btn.htl-act-btn-teal:hover {
background: #0A4D43;
border-color: #0A4D43;
}
.htl-act-btn.htl-act-btn-teal .ti {
color: #fff;
}
.htl-act-btn i { font-size: 13px; }
.htl-act-btn:hover { background: var(--color-background-secondary); border-color: var(--color-border-secondary); }
.htl-act-btn.htl-primary {
background: var(--color-teal-900); color: #fff; border-color: var(--color-teal-900);
}
.htl-act-btn.htl-primary:hover { background: #04342C; border-color: #04342C; }
.htl-act-btn.htl-danger { color: #791F1F; }
.htl-act-btn.htl-danger:hover { background: #FCEBEB; border-color: #F09595; }
/* Empty state */
.htl-empty {
text-align: center; padding: 40px 20px;
color: var(--color-text-tertiary);
}
.htl-empty i { font-size: 32px; margin-bottom: 10px; display: block; }
.htl-empty-title { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 4px; }
.htl-empty-sub { font-size: 12px; margin: 0; }
/* Failed jobs section — collapsed by default */
.htl-failed {
margin-top: 24px;
background: #FCEBEB;
border: 0.5px solid #F09595;
border-radius: 8px;
}
.htl-failed-hdr {
padding: 10px 14px;
font-size: 12px; font-weight: 500;
color: #791F1F;
cursor: pointer;
display: flex; align-items: center; gap: 8px;
list-style: none;
}
.htl-failed-hdr::-webkit-details-marker { display: none; }
.htl-failed-body { padding: 0 12px 12px; }
.htl-failed-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
border-top: 0.5px solid #F09595;
font-size: 12px;
}
.htl-failed-meta { flex: 1; min-width: 0; }
.htl-failed-name { font-weight: 500; color: var(--color-text-primary); }
.htl-failed-sub { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
/* ─── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.htl-wrap { padding-left: 0; }
.htl-timeline::before { display: none; }
.htl-date { display: none; }
.htl-dot { display: none; }
.htl-card-head {
padding: 9px 11px;
gap: 7px;
flex-wrap: wrap;
}
/* Build hi4: bump tag for legibility — 9 px under-served the 40-70 yr
audience. Stays small enough to feel like a label, not a button. */
.htl-tag { font-size: 10px; padding: 3px 8px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.htl-l1 {
font-size: 12px;
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htl-l2 {
font-size: 10px;
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Build hi4: panel chips were hidden on mobile to "stay compact" but that
stripped lab cards of the one-glance information that makes them
useful (Lipid · CBC · Diabetes etc.). Re-enable with tighter spacing
and a smaller chip size so the row still feels light. */
.htl-l3 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.htl-l3 .htl-panel-chip { font-size: 10px; padding: 1px 6px; }
.htl-info { flex: 1 1 100%; order: 2; min-width: 0; }
.htl-tag { order: 1; }
.htl-right { order: 1; margin-left: auto; }
.htl-pill {
font-size: 10px; padding: 2px 7px 2px 3px;
border-radius: 11px;
}
.htl-pill-avt { width: 15px; height: 15px; font-size: 8px; }
.htl-pill-name { display: none; } /* avatar dot only on mobile */
.htl-exp-row {
flex-direction: column; gap: 4px;
}
.htl-exp-lbl { padding-top: 0; }
.htl-act-btn { font-size: 12px; padding: 8px 12px; }
.htl-filterbar {
gap: 5px; margin-bottom: 12px;
}
.htl-filter-lbl { display: none; }
.htl-fchip { font-size: 11px; padding: 4px 10px; }
.htl-counter { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ch+: Flagged-only slider switch (next to search bar, Records tab only)
═══════════════════════════════════════════════════════════════════════════ */
.flagged-switch-wrap {
display: none; /* hidden by default; .show added by JS when Records tab active */
align-items: center; gap: 7px;
flex-shrink: 0;
cursor: pointer;
user-select: none;
}
.flagged-switch-wrap.show { display: inline-flex; }
.flagged-switch-lbl {
font-size: 12px; font-weight: 500;
color: var(--color-text-secondary);
white-space: nowrap;
}
.flagged-switch {
position: relative;
width: 36px; height: 20px;
border-radius: 10px;
background: #C8C4B8;
border: none; padding: 0;
cursor: pointer;
transition: background .18s;
flex-shrink: 0;
}
.flagged-switch:hover { background: #B5B0A2; }
.flagged-switch.on { background: var(--color-teal-900); }
.flagged-switch.on:hover { background: #04342C; }
.flagged-switch-knob {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform .18s;
}
.flagged-switch.on .flagged-switch-knob {
transform: translateX(16px);
}
@media (max-width: 768px) {
.flagged-switch-lbl { display: none; } /* switch-only on mobile */
}
/* Generic search-hidden marker — works for any card/row */
.search-hidden { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════════
ch+: Desktop sidebar collapse to icons-only
When .ws-shell has .sidebar-collapsed:
- Sidebar shrinks 220px → 56px showing just member avatar dots
- Right "Needs attention" rail expands 260px → 320px
- Member names, section labels, brand text hide; icons stay
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
/* Sidebar collapse */
.ws-shell.sidebar-collapsed .ws-rail {
width: 56px;
transition: width .22s ease;
}
.ws-shell:not(.sidebar-collapsed) .ws-rail {
transition: width .22s ease;
}
/* agt107 (K3): keep the gutter token in step with the collapse, so the
composer dock follows the sidebar instead of stranding a 186px dead gap
(242 hardcoded − 56 actual) on its left edge. */
.ws-shell.sidebar-collapsed { --ws-gutter-left: 56px; }
/* agt107 (K3): the right rail now holds a CONSTANT width across the
collapse. It used to drop 360 → 320px here, under a comment that still
described the old "expands 260 → 320" behaviour from when the base was
260 — so collapsing the sidebar actually SHRANK the rail, and the panel
jumped by 40px. Two consequences, both of them Kiran's complaint: the
right panel moved when it had no reason to, and the dock's stale
right:320px lined up only in the collapsed state. Freed sidebar space
now goes to the canvas, where the content is. */
.ws-shell .ws-attention {
transition: width .22s ease;
}
/* Hide the things that don't fit in 56px */
.ws-shell.sidebar-collapsed .ws-rail-brand span,
.ws-shell.sidebar-collapsed .ws-rail-fam,
.ws-shell.sidebar-collapsed .ws-rail-sec,
.ws-shell.sidebar-collapsed .ws-rail-m-name,
.ws-shell.sidebar-collapsed .ws-rail-flag,
.ws-shell.sidebar-collapsed .ws-rail-bottom {
display: none;
}
/* ch+: kill the text-node leak in workspace nav links
("Family home", "Medical activities", "Ask Arogya AI", "Upload history" are
raw text nodes next to the icon — display:none on the parent would hide
the whole item, so we zero the font-size and restore it on the icon). */
.ws-shell.sidebar-collapsed .ws-rail-item {
font-size: 0;
padding: 9px 0;
margin: 1px 6px;
width: calc(100% - 12px);
justify-content: center;
gap: 0;
}
.ws-shell.sidebar-collapsed .ws-rail-item i {
font-size: 18px;
width: auto;
}
/* Tighten padding so avatars sit cleanly centered */
.ws-shell.sidebar-collapsed .ws-rail-top {
padding: 18px 6px 8px;
}
.ws-shell.sidebar-collapsed .ws-rail-brand {
justify-content: center;
margin-bottom: 10px;
font-size: 22px;
}
.ws-shell.sidebar-collapsed .ws-rail-nav {
padding-top: 4px;
}
.ws-shell.sidebar-collapsed .ws-rail-member {
justify-content: center;
padding: 6px 4px;
margin: 2px 4px;
border-radius: 8px;
gap: 0;
}
/* Active member highlight extends across the narrow rail */
.ws-shell.sidebar-collapsed .ws-rail-member.active {
background: rgba(255, 255, 255, 0.10);
}
/* Slightly larger avatar in collapsed mode — it's the only thing shown */
.ws-shell.sidebar-collapsed .ws-rail-m-av {
width: 32px; height: 32px;
font-size: 13px;
}
}
/* On mobile, .sidebar-collapsed is a no-op — drawer behaviour overrides it */
@media (max-width: 768px) {
.ws-shell.sidebar-collapsed .ws-rail {
width: 280px; /* normal drawer width */
}
}
/* ───────────────────────────────────────────────────────────────────
v4.3 IA additions (build er)
- Noto Sans per-script font @import
- :lang() selectors for correct line-height per script
- Global .form-label rule
- Responsive sidebar hide on mobile
─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600&family=Noto+Sans+Tamil:wght@400;500;600&family=Noto+Sans+Telugu:wght@400;500;600&family=Noto+Sans+Bengali:wght@400;500;600&family=Noto+Sans+Gujarati:wght@400;500;600&family=Noto+Sans+Kannada:wght@400;500;600&family=Noto+Sans+Malayalam:wght@400;500;600&display=swap');
:lang(hi), :lang(mr) { font-family: 'Noto Sans Devanagari', var(--font-sans); line-height: 1.85; }
:lang(ta) { font-family: 'Noto Sans Tamil', var(--font-sans); line-height: 1.90; }
:lang(te) { font-family: 'Noto Sans Telugu', var(--font-sans); line-height: 1.85; }
:lang(bn) { font-family: 'Noto Sans Bengali', var(--font-sans); line-height: 1.80; }
:lang(gu) { font-family: 'Noto Sans Gujarati', var(--font-sans); line-height: 1.85; }
:lang(kn) { font-family: 'Noto Sans Kannada', var(--font-sans); line-height: 1.85; }
:lang(ml) { font-family: 'Noto Sans Malayalam', var(--font-sans); line-height: 1.90; }
/* Global form label — v4.3 hierarchy (13px / 600 / brand colour) */
.form-label,
form label,
.field-label {
font-size: var(--form-label-size);
font-weight: var(--form-label-weight);
color: var(--form-label-color);
letter-spacing: 0.1px;
margin-bottom: 8px;
display: block;
}
.form-label .req,
.form-label .required,
form label .req,
form label .required { color: #DC2626; }
.form-label .opt,
form label .opt {
color: #9CA3AF;
font-weight: 400;
font-size: 11px;
}
/* Responsive sidebar — mobile hide of the workspace rail is already
handled by the existing @media (max-width: 768px) block above
(`.ws-rail { position: fixed; transform: translateX(-100%); ... }`
plus `.ws-shell.drawer-open .ws-rail { transform: translateX(0) }`).
No additional rule needed here. */
/* ───────────────────────────────────────────────────────────────────
v4.3 IA — topbar partial, FAB (build er)
Note: desktop sidebar collapse is already handled by the existing
`.ws-shell.sidebar-collapsed .ws-rail` CSS block (workspace.css ~L1894+)
and `wsToggleDrawer()` JS in workspace.html. wsToggleSidebar() in
nav.js is a thin alias to that existing function.
─────────────────────────────────────────────────────────────────── */
/* Collapsible sidebar — handled by existing .ws-shell.sidebar-collapsed rules. */
/* New topbar partial (.ws-topbar) — fresh shell, brand-green chrome.
Currently only used by templates that opt in via {% include "partials/topbar.html" %}.
Existing pages keep using .member-ai-topbar. */
.ws-topbar {
height: var(--topbar-height);
background: var(--color-brand);
display: flex;
align-items: center;
padding: 0 14px;
gap: 10px;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
position: sticky;
top: 0;
z-index: 30;
}
.ws-topbar-hamburger,
.ws-topbar-back {
width: 34px; height: 34px;
border: none; background: transparent;
border-radius: 7px;
color: rgba(255,255,255,0.85);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ws-topbar-hamburger:hover,
.ws-topbar-back:hover { background: rgba(255,255,255,0.1); }
.ws-topbar-hamburger i,
.ws-topbar-back i { font-size: 18px; }
.ws-topbar-titleblock { line-height: 1.15; }
.ws-topbar-title {
font-size: 14px; font-weight: 500; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-topbar-subtitle {
font-size: 11px; color: rgba(255,255,255,0.7);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-topbar-context-pill {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
padding: 5px 10px 5px 6px;
cursor: pointer;
flex-shrink: 0;
}
.ws-topbar-context-pill:hover { background: rgba(255,255,255,0.18); }
.ws-topbar-context-av {
width: 22px; height: 22px; border-radius: 50%;
background: #D97706;
font-size: 10px; font-weight: 700; color: #fff;
display: flex; align-items: center; justify-content: center;
}
.ws-topbar-context-name {
font-size: 13px; font-weight: 500; color: #fff;
white-space: nowrap;
}
.ws-topbar-context-caret { font-size: 13px; color: rgba(255,255,255,0.6); }
.ws-topbar-ai-search {
flex: 1; max-width: 540px;
display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
padding: 6px 10px;
}
.ws-topbar-ai-search i { font-size: 15px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.ws-topbar-ai-search input {
flex: 1; background: transparent; border: none; outline: none;
font-family: inherit; font-size: 13px; color: #fff;
min-width: 0;
}
.ws-topbar-ai-search input::placeholder { color: rgba(255,255,255,0.5); }
.ws-topbar-spacer { flex: 1; }
.ws-topbar-doctor-cta {
background: var(--color-amber-action);
color: #1B1C1A;
border: none;
border-radius: 8px;
padding: 6px 11px;
font-size: 12px; font-weight: 600;
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.ws-topbar-doctor-cta i { font-size: 14px; }
.ws-topbar-acct-chip {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center;
text-decoration: none;
flex-shrink: 0;
}
.ws-topbar-acct-chip:hover { background: rgba(255,255,255,0.22); }
.ws-topbar-acct-initial {
font-size: 11px; font-weight: 700; color: #fff;
}
@media (max-width: 768px) {
.ws-topbar { padding: 0 10px; gap: 6px; }
.ws-topbar-ai-search { display: none; } /* mobile uses FAB instead */
.ws-topbar-title { font-size: 13px; }
}
/* Floating Ask Arogya AI button (.ws-fab) — corner button on every
authenticated page except /ask. */
.ws-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: var(--fab-size);
height: var(--fab-size);
border-radius: 50%;
background: var(--color-brand);
color: #fff;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow: 0 4px 14px rgba(var(--color-brand-rgb), 0.28);
z-index: 60; /* above bottom nav (z:30), below modals */
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ws-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--color-brand-rgb), 0.35); }
.ws-fab:active { transform: translateY(0); }
.ws-fab i { font-size: 24px; color: #fff; }
/* Mobile: sit above the bottom nav */
@media (max-width: 768px) {
.ws-fab {
bottom: var(--fab-offset-bottom);
right: 16px;
width: 52px;
height: 52px;
}
.ws-fab i { font-size: 22px; }
}
/* ───────────────────────────────────────────────────────────────────
v4.3 Watching strip — slim tiles (build er)
Lives at the top of the Records tab. Horizontal-scroll list of
flagged metrics. Tap a tile to open the trend chart.
─────────────────────────────────────────────────────────────────── */
.wt-strip {
margin: 4px 0 14px;
}
.wt-strip-hdr {
display: flex;
align-items: center;
gap: 6px;
margin: 0 2px 8px;
font-family: var(--font-sans);
}
.wt-strip-hdr i { font-size: 14px; color: var(--color-brand); }
.wt-strip-title {
font-size: 12px;
font-weight: 500;
color: var(--color-text-primary);
}
.wt-strip-count {
font-size: 10px;
color: var(--color-text-tertiary);
}
.wt-strip-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 2px 2px 6px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.wt-strip-scroll::-webkit-scrollbar { height: 4px; }
.wt-strip-scroll::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: 4px;
}
.wt-tile {
flex: 0 0 78px;
background: var(--color-background-primary);
border: 0.5px solid var(--color-border-tertiary);
border-left: 3px solid var(--color-text-tertiary); /* overridden inline */
border-radius: 8px;
padding: 7px 8px;
text-align: left;
cursor: pointer;
font-family: var(--font-sans);
display: flex;
flex-direction: column;
gap: 2px;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wt-tile:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.wt-tile:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 1px;
}
.wt-tile-name {
font-size: 10px;
font-weight: 500;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wt-tile-vrow {
display: flex;
align-items: baseline;
gap: 3px;
margin-top: 1px;
}
.wt-tile-value {
font-size: 16px;
font-weight: 500;
color: var(--color-text-primary);
line-height: 1;
}
.wt-tile-unit {
font-size: 9px;
color: var(--color-text-secondary);
}
.wt-tile-range {
font-size: 9px;
color: var(--color-text-tertiary);
margin-top: 2px;
}
/* ───────────────────────────────────────────────────────────────────
v4.3 Add Sheet bottom sheet (build er)
Opens from ⊕ centre button. 3 cards: Upload / Activity / Quick note.
─────────────────────────────────────────────────────────────────── */
.add-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 12px;
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
text-decoration: none;
color: inherit;
transition: border-color 0.1s ease, transform 0.06s ease;
}
.add-card:hover {
border-color: var(--color-border-secondary);
transform: translateY(-1px);
}
.add-card:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 1px;
}
.add-card-icon {
width: 38px; height: 38px;
border-radius: 9px;
background: rgba(var(--color-brand-rgb), 0.08);
color: var(--color-brand);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.add-card-icon i { font-size: 18px; }
.add-card-text { flex: 1; min-width: 0; }
.add-card-title {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
line-height: 1.2;
}
.add-card-sub {
font-size: 11px;
color: var(--color-text-secondary);
margin-top: 2px;
line-height: 1.3;
}
.add-card-chev {
font-size: 14px;
color: var(--color-text-tertiary);
flex-shrink: 0;
}
/* ═════════════════════════════════════════════════════════════════════════
* Build `es` — Records Hub + Doctor Directory styles
* ═════════════════════════════════════════════════════════════════════════ */
/* Records Hub landing — 6 lens cards */
.records-hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 640px) {
.records-hub-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.records-hub-grid { grid-template-columns: repeat(6, 1fr); }
}
.lens-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 18px 12px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lens-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.lens-card-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: #E6F1FB;
color: #185FA5;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 10px;
}
.lens-card-label {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.lens-card-count {
font-size: 11px;
color: var(--color-text-tertiary);
margin-top: 2px;
}
.lens-card-count-muted { opacity: 0.6; }
/* Series cards in Conditions lens.
Build hi2: .series-card used to be `display:flex; align-items:center`, which
meant the expandable .series-card-body rendered as a sibling flex item
beside the header instead of stacking under it — the body was squeezed into
whatever cross-axis sliver remained on the right, and "No episodes yet…"
wrapped every 4-5 characters. Outer card is now a block; the header keeps
its own internal flex layout. */
.series-card {
display: block;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 10px;
margin-bottom: 8px;
}
/* Status pills (used by series, episodes) */
.status-pill {
font-size: 10px;
font-weight: 500;
border-radius: 8px;
padding: 2px 8px;
white-space: nowrap;
}
.status-active { background: #E6F1FB; color: #0C447C; }
.status-closed { background: #F3F4F6; color: #4B5563; }
.status-merged { background: #F0E7FF; color: #5B21B6; }
.status-deleted { background: #FEE2E2; color: #991B1B; }
.status-orphaned { background: #FEF3C7; color: #92400E; display: inline-flex; align-items: center; gap: 3px; }
/* Series ⋮ kebab menu */
.series-kebab { position: relative; }
.series-kebab-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 6px;
color: var(--color-text-tertiary);
display: flex;
align-items: center;
justify-content: center;
}
.series-kebab-btn:hover { background: #F3F4F6; color: var(--color-text-primary); }
.series-kebab-btn .ti { font-size: 18px; }
.series-kebab-menu {
position: absolute;
right: 0;
top: 100%;
margin-top: 4px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
min-width: 180px;
z-index: 20;
overflow: hidden;
}
.series-kebab-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
text-align: left;
color: var(--color-text-primary);
}
.series-kebab-item:hover { background: #F9FAFB; }
.series-kebab-item .ti { font-size: 14px; color: var(--color-text-tertiary); }
.series-kebab-item-danger { color: #B91C1C; }
.series-kebab-item-danger .ti { color: #B91C1C; }
/* Body system tiles */
.body-system-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 480px) { .body-system-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .body-system-grid { grid-template-columns: repeat(4, 1fr); } }
.body-system-tile {
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 10px;
padding: 14px 10px;
text-align: center;
text-decoration: none;
color: inherit;
position: relative;
transition: transform 0.12s ease;
}
.body-system-tile:hover { transform: translateY(-1px); }
.body-system-tile-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #E6F1FB;
color: #185FA5;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 0 auto 8px;
}
.body-system-tile-empty .body-system-tile-icon { background: #F3F4F6; color: #9CA3AF; }
.body-system-tile-name {
font-size: 11px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.2;
}
.body-system-tile-stats {
font-size: 9px;
color: var(--color-text-tertiary);
margin-top: 4px;
}
.body-system-tile-flag {
position: absolute;
top: 6px;
right: 6px;
background: #C2410C;
color: #fff;
font-size: 8px;
padding: 1px 6px;
border-radius: 6px;
font-weight: 500;
}
/* Episode card (Episodes lens) */
.episode-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 8px;
margin-bottom: 6px;
text-decoration: none;
color: inherit;
}
/* Incident row (Episode Detail) */
.incident-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 8px;
margin-bottom: 6px;
}
.incident-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #F3F4F6;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: 0 0 auto;
}
.incident-delete-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--color-text-quaternary);
border-radius: 4px;
}
.incident-delete-btn:hover { color: #B91C1C; background: #FEE2E2; }
/* Timeline */
.timeline-event {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.timeline-event-dot {
width: 28px;
height: 28px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex: 0 0 auto;
}
/* Filter chips (Doctors list, etc.) */
.filter-chip {
font-size: 12px;
padding: 6px 12px;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 16px;
background: #fff;
color: var(--color-text-primary);
text-decoration: none;
white-space: nowrap;
}
.filter-chip.active {
background: var(--color-teal-800);
color: #fff;
border-color: var(--color-teal-800);
}
/* Doctor card */
.doctor-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 10px;
margin-bottom: 8px;
text-decoration: none;
color: inherit;
}
.doctor-card-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #E6F1FB;
color: #185FA5;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex: 0 0 auto;
}
/* Medication row */
.medication-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 8px;
margin-bottom: 6px;
}
.medication-row-history { background: #FAFAFA; opacity: 0.92; }
.medication-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #FEF3C7;
color: #92400E;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: 0 0 auto;
}
/* Buttons used across new pages */
.es-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
border: 0.5px solid transparent;
cursor: pointer;
text-decoration: none;
}
.es-btn-primary { background: var(--color-teal-800); color: #fff; }
.es-btn-primary:hover { background: #06402F; }
.es-btn-secondary { background: #fff; color: var(--color-text-primary); border-color: var(--color-border-tertiary); }
.es-btn-secondary:hover { background: #F9FAFB; }
.es-btn-danger-outline { background: #fff; color: #B91C1C; border-color: #FCA5A5; }
.es-btn-danger-outline:hover { background: #FEE2E2; }
/* Confirmation modal */
.es-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.es-modal-box {
background: #fff;
border-radius: 12px;
padding: 20px;
max-width: 420px;
margin: 0 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
/* ═══════════════════════════════════════════════════════════════════════════
Build ex — Insurance + Post-ingestion sheet + Comparison sheet
═══════════════════════════════════════════════════════════════════════════ */
/* ── Insurance Home ─────────────────────────────────────────────────────── */
.add-policy-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; border-radius: 16px;
background: rgba(255,255,255,0.18); color: #fff;
font-size: 12px; font-weight: 500;
text-decoration: none;
transition: background .15s;
}
.add-policy-btn:hover { background: rgba(255,255,255,0.28); }
.ins-summary {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: #DBE2DE;
padding: 0; margin: 0 0 0 0;
border-bottom: 1px solid #DBE2DE;
}
.ins-sum-stat {
background: #fff; padding: 20px;
}
.ins-sum-lbl {
font-size: 11px; color: #707975;
text-transform: uppercase; letter-spacing: .04em;
font-weight: 500; margin-bottom: 6px;
}
.ins-sum-val {
font-size: 22px; color: #1B2520; font-weight: 700;
letter-spacing: -.01em; line-height: 1.1;
}
.ins-sum-sub {
font-size: 11px; color: #707975; margin-top: 4px;
}
.ins-renewal-strip {
display: flex; align-items: center; gap: 10px;
background: #FFF6E6; border: 1px solid #FAE0AC;
border-radius: 10px; padding: 12px 14px;
margin: 16px 0 12px;
text-decoration: none; color: #5A3D0A;
font-size: 12.5px;
}
.ins-renewal-strip .ti { font-size: 16px; flex: 0 0 auto; }
.ins-renewal-strip .text { flex: 1; min-width: 0; }
.ins-renewal-strip .text strong { font-weight: 600; }
.ins-renewal-strip .act {
font-size: 12px; color: var(--color-teal-900); font-weight: 600; flex: 0 0 auto;
}
.ins-coverage-cta {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 14px; margin: 12px 0;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.ins-coverage-cta:hover {
border-color: var(--color-teal-900); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb),.06);
}
.ins-coverage-cta-ic {
width: 40px; height: 40px; border-radius: 50%;
background: #E8F0EE; color: var(--color-teal-900);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex: 0 0 auto;
}
.ins-coverage-cta-text { flex: 1; min-width: 0; }
.ins-coverage-cta-text h3 {
font-size: 13.5px; color: #1B2520; font-weight: 600;
margin: 0 0 2px;
}
.ins-coverage-cta-text p {
font-size: 11.5px; color: #707975; margin: 0;
}
.ins-coverage-cta .ins-arrow {
color: #707975; font-size: 14px;
}
.ins-section-header {
font-size: 12px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 16px 0 8px;
}
.ins-policy-card {
display: block; background: #fff;
border: 1px solid #DBE2DE; border-radius: 12px;
padding: 14px; margin-bottom: 10px;
text-decoration: none; color: inherit;
transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ins-policy-card:hover {
border-color: var(--color-teal-900); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb),.08);
}
.ins-policy-card:active { transform: translateY(1px); }
.ins-policy-head {
display: flex; align-items: flex-start; gap: 10px;
}
.ins-insurer-mark {
width: 38px; height: 38px; border-radius: 9px;
background: var(--color-teal-900); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
flex: 0 0 auto;
}
.ins-policy-meta { flex: 1; min-width: 0; }
.ins-policy-name {
font-size: 14px; color: #1B2520; font-weight: 600;
margin: 0 0 1px; line-height: 1.25;
}
.ins-policy-insurer {
font-size: 11.5px; color: #707975; margin: 0 0 2px;
}
.ins-policy-id {
font-size: 11px; color: #94A0A8; margin: 0;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.ins-health-badge {
font-size: 10.5px; padding: 3px 8px; border-radius: 10px;
font-weight: 600; flex: 0 0 auto;
text-transform: uppercase; letter-spacing: .02em;
}
.ins-badge-good { background: #E0EEDE; color: #2E6B26; }
.ins-badge-gaps { background: #FFF6E6; color: #854F0B; }
.ins-badge-lapsed { background: #F0EEEA; color: #707975; }
.ins-policy-stats {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
margin-top: 12px;
padding-top: 10px; border-top: 1px solid #F0EEEA;
}
.ins-pstat { font-size: 11px; }
.ins-pstat-lbl {
color: #707975; margin-bottom: 2px;
}
.ins-pstat-val {
color: #1B2520; font-weight: 600; font-size: 13px;
}
.ins-pstat-val.ins-regular { font-weight: 500; font-size: 12px; }
.ins-lapsed-help {
display: flex; gap: 8px; align-items: flex-start;
font-size: 11.5px; color: #707975; margin-bottom: 8px;
padding: 8px 10px; background: #F8F6F1; border-radius: 6px;
}
.ins-lapsed-help .ti { font-size: 14px; color: #94A0A8; flex: 0 0 auto; margin-top: 1px; }
.ins-lapsed-card {
background: #F8F6F1; border: 1px solid #E5E1D8;
border-radius: 10px; padding: 12px;
margin-bottom: 8px; opacity: .88;
}
.ins-lapsed-head { display: flex; align-items: flex-start; gap: 10px; }
.ins-lapsed-mark {
width: 32px; height: 32px; border-radius: 8px;
background: #94A0A8; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.ins-lapsed-meta { flex: 1; min-width: 0; }
.ins-lapsed-name { font-size: 13px; color: #1B2520; font-weight: 600; margin: 0; }
.ins-lapsed-insurer { font-size: 11px; color: #707975; margin: 2px 0 0; }
.ins-lapsed-status {
font-size: 10px; padding: 2px 7px; border-radius: 10px;
background: #707975; color: #fff; font-weight: 600;
text-transform: uppercase; flex: 0 0 auto;
}
.ins-lapsed-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 10px 0 8px;
}
.ins-lapsed-actions { display: flex; gap: 6px; }
.ins-lapsed-btn {
flex: 1; padding: 6px 10px; border-radius: 6px;
background: #fff; border: 1px solid #DBE2DE;
font-size: 11.5px; color: #1B2520; font-weight: 500;
text-align: center; text-decoration: none;
transition: background .15s;
}
.ins-lapsed-btn:hover { background: #F0EEEA; }
.ins-empty {
text-align: center; padding: 48px 24px;
background: #fff; border: 1px dashed #DBE2DE; border-radius: 12px;
margin: 24px 0;
}
.ins-empty-ic {
width: 56px; height: 56px; border-radius: 50%;
background: #E8F0EE; color: var(--color-teal-900);
display: inline-flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 12px;
}
.ins-empty h2 {
font-size: 16px; color: #1B2520; margin: 0 0 6px;
}
.ins-empty p {
font-size: 12.5px; color: #707975;
margin: 0 0 16px; line-height: 1.5;
}
.ins-btn-primary {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 8px;
background: var(--color-teal-900); color: #fff;
font-size: 13px; font-weight: 500;
text-decoration: none; border: none; cursor: pointer;
font-family: inherit;
}
.ins-btn-primary:hover { background: #0A4D43; }
.ins-btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 8px;
background: #fff; color: #1B2520;
font-size: 13px; font-weight: 500;
text-decoration: none; border: 1px solid #DBE2DE; cursor: pointer;
font-family: inherit;
}
.ins-btn-ghost:hover { background: #F0EEEA; }
/* ── Policy Detail ──────────────────────────────────────────────────────── */
.ins-detail-back {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: background .15s;
}
.ins-detail-back:hover { background: rgba(255,255,255,0.15); }
.ins-detail-menu {
background: transparent; border: none; color: rgba(255,255,255,0.9);
width: 32px; height: 32px; border-radius: 50%;
cursor: pointer; font-size: 18px;
display: inline-flex; align-items: center; justify-content: center;
}
.ins-detail-menu:hover { background: rgba(255,255,255,0.15); }
.ins-actions-menu {
position: absolute; top: 38px; right: 0;
background: #fff; border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
min-width: 200px; padding: 4px 0;
display: none; z-index: 50;
}
.ins-actions-menu.open { display: block; }
.ins-actions-menu a,
.ins-actions-menu button {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; width: 100%;
background: transparent; border: none; cursor: pointer;
font-size: 13px; color: #1B2520;
text-decoration: none; font-family: inherit;
text-align: left;
}
.ins-actions-menu a:hover,
.ins-actions-menu button:hover { background: #F0EEEA; }
.ins-actions-menu .ins-danger { color: #A32D2D; }
.ins-actions-menu form { margin: 0; }
.ins-hero-card {
background: #fff; padding: 20px;
border-bottom: 1px solid #DBE2DE;
}
.ins-hero-head {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 16px;
}
.ins-hero-meta { flex: 1; min-width: 0; }
.ins-hero-name {
font-size: 17px; color: #1B2520; font-weight: 700;
margin: 0 0 2px; line-height: 1.2;
}
.ins-hero-insurer {
font-size: 12.5px; color: #4a5664; margin: 0;
}
.ins-hero-id {
font-size: 11.5px; color: #94A0A8;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
margin: 4px 0 0;
}
.ins-hero-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.ins-hs { font-size: 11px; }
.ins-hs-val {
font-size: 17px; color: var(--color-teal-900); font-weight: 700;
margin: 2px 0; letter-spacing: -.01em;
}
.ins-hs-sub { font-size: 10.5px; color: #707975; }
.ins-doc-bar {
margin-top: 16px;
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 12px;
}
.ins-doc-row { display: flex; align-items: center; gap: 10px; }
.ins-doc-thumb {
width: 36px; height: 36px; border-radius: 6px;
background: linear-gradient(135deg, #094D43 0%, #0A6655 100%);
flex: 0 0 auto;
}
.ins-doc-info { flex: 1; min-width: 0; }
.ins-doc-info p { margin: 0; font-size: 12.5px; color: #1B2520; }
.ins-doc-info p:first-child { font-weight: 600; }
.ins-doc-info p + p { font-size: 11px; color: #707975; margin-top: 2px; }
.ins-sh {
font-size: 11px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 18px 0 8px;
}
.ins-section-card {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 4px 14px;
}
.ins-section-card.ins-muted { color: #707975; padding: 14px; }
.ins-member-chip-row {
display: flex; flex-wrap: wrap; gap: 6px;
}
.ins-member-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid #DBE2DE;
border-radius: 18px; padding: 5px 12px 5px 5px;
font-size: 12px; color: #1B2520;
}
.ins-av {
width: 22px; height: 22px; border-radius: 50%;
background: var(--color-teal-900); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600;
}
.ins-row {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 10px 0; border-bottom: 1px solid #F0EEEA;
gap: 12px;
}
.ins-row:last-child { border-bottom: none; }
.ins-row-lbl { font-size: 12px; color: #707975; flex: 0 0 auto; }
.ins-row-val {
font-size: 12.5px; color: #1B2520; font-weight: 500;
text-align: right;
}
.ins-waiting-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 0; border-bottom: 1px solid #F0EEEA;
}
.ins-waiting-row:last-child { border-bottom: none; }
.ins-wait-icon {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex: 0 0 auto;
}
.ins-wait-cleared { background: #E0EEDE; color: #2E6B26; }
.ins-wait-active { background: #FFF6E6; color: #854F0B; }
.ins-wait-excluded { background: #FEE2E2; color: #A32D2D; }
.ins-wait-meta { flex: 1; min-width: 0; }
.ins-wait-name {
font-size: 12.5px; color: #1B2520; font-weight: 500; margin: 0;
}
.ins-wait-detail { font-size: 11px; color: #707975; margin: 2px 0 0; }
.ins-wait-status {
font-size: 11px; padding: 2px 8px; border-radius: 10px;
font-weight: 600; flex: 0 0 auto;
}
.ins-wait-status-cleared { background: #E0EEDE; color: #2E6B26; }
.ins-wait-status-active { background: #FFF6E6; color: #854F0B; }
.ins-wait-status-excluded { background: #FEE2E2; color: #A32D2D; }
.ins-network-card {
display: flex; align-items: center; gap: 12px; padding: 14px;
}
.ins-network-card .ti { font-size: 22px; color: var(--color-teal-900); flex: 0 0 auto; }
.ins-nc-name { font-size: 13px; color: #1B2520; font-weight: 600; margin: 0; }
.ins-nc-sub { font-size: 11px; color: #707975; margin: 2px 0 0; }
.ins-excl-row {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px 0; border-bottom: 1px solid #F0EEEA;
font-size: 12.5px; color: #1B2520;
}
.ins-excl-row:last-child { border-bottom: none; }
.ins-excl-row .ins-muted { color: #94A0A8; }
.ins-notes-card { padding: 14px; font-size: 12.5px; color: #1B2520; line-height: 1.5; white-space: pre-wrap; }
.ins-muted { color: #707975; }
/* ── Insurance form ─────────────────────────────────────────────────────── */
.ins-form-error {
background: #FEE2E2; color: #7F1D1D;
border: 1px solid #FCA5A5; border-radius: 8px;
padding: 10px 14px; margin-bottom: 16px;
font-size: 13px;
}
.ins-form-section {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 16px; margin-bottom: 16px;
}
.ins-form-section-title {
font-size: 11px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 12px;
}
.ins-form-help {
font-size: 11.5px; color: #707975; margin: -8px 0 12px;
}
.ins-form-field {
display: block; margin-bottom: 12px;
}
.ins-form-field:last-child { margin-bottom: 0; }
.ins-form-field > span {
display: block; font-size: 11.5px; color: #4a5664;
font-weight: 500; margin-bottom: 5px;
}
.ins-form-field > span em {
color: #A32D2D; font-style: normal; margin-left: 2px;
}
.ins-form-field input,
.ins-form-field select,
.ins-form-field textarea {
width: 100%; box-sizing: border-box;
padding: 8px 12px; border-radius: 7px;
border: 1px solid #DBE2DE; background: #FCFBF8;
font-size: 13px; color: #1B2520; font-family: inherit;
}
.ins-form-field input:focus,
.ins-form-field select:focus,
.ins-form-field textarea:focus {
outline: none; border-color: var(--color-teal-900);
box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb),.1);
}
.ins-form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ins-form-members {
display: flex; flex-direction: column; gap: 6px;
}
.ins-member-checkbox {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 8px;
border: 1px solid #DBE2DE; background: #FCFBF8;
cursor: pointer; font-size: 13px; color: #1B2520;
}
.ins-member-checkbox:hover { background: #F0EEEA; }
.ins-member-checkbox input[type="checkbox"] {
width: auto; margin: 0; flex: 0 0 auto;
}
.ins-mc-avatar {
width: 24px; height: 24px; border-radius: 50%;
background: var(--color-teal-900); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
}
.ins-mc-name { flex: 1; }
.ins-form-actions {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 20px;
}
/* ═══════════════════════════════════════════════════════════════════════════
Post-ingestion sheet (.pis-*)
═══════════════════════════════════════════════════════════════════════════ */
body.pis-locked { overflow: hidden; }
.pis-sheet {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: flex-end; justify-content: center;
}
.pis-scrim {
position: absolute; inset: 0;
background: rgba(0,0,0,.4);
animation: pis-fade-in .25s ease;
}
.pis-panel {
position: relative;
background: #fff;
border-radius: 16px 16px 0 0;
width: 100%; max-width: 640px;
max-height: 92vh;
display: flex; flex-direction: column;
transform: translateY(100%);
transition: transform .25s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 -8px 28px rgba(0,0,0,.18);
}
.pis-panel.pis-open { transform: translateY(0); }
@keyframes pis-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.pis-handle {
width: 36px; height: 4px; border-radius: 2px;
background: #DBE2DE; margin: 8px auto 0;
}
.pis-head {
display: flex; align-items: center; gap: 12px;
padding: 12px 20px 16px;
border-bottom: 1px solid #F0EEEA;
}
.pis-head-ic {
width: 36px; height: 36px; border-radius: 50%;
background: #E0EEDE; color: #2E6B26;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex: 0 0 auto;
}
.pis-head-tx { flex: 1; min-width: 0; }
.pis-head-tx h2 {
font-size: 15px; color: #1B2520; margin: 0; font-weight: 700;
}
.pis-head-tx p { font-size: 12px; color: #707975; margin: 1px 0 0; }
.pis-close {
width: 32px; height: 32px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
font-size: 18px; color: #707975;
display: flex; align-items: center; justify-content: center;
}
.pis-close:hover { background: #F0EEEA; color: #1B2520; }
.pis-body {
overflow-y: auto;
padding: 16px 20px;
flex: 1;
}
.pis-doc-strip {
display: flex; align-items: center; gap: 10px;
padding: 10px; background: #F8F6F1;
border-radius: 9px; margin-bottom: 14px;
}
.pis-doc-thumb {
width: 36px; height: 36px; border-radius: 7px;
background: linear-gradient(135deg, #094D43 0%, #0A6655 100%);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 16px; flex: 0 0 auto;
}
.pis-doc-info { flex: 1; min-width: 0; }
.pis-doc-info p { margin: 0; font-size: 12px; color: #1B2520; line-height: 1.3; }
.pis-doc-info p:first-child { font-weight: 600; }
.pis-doc-info p + p { font-size: 11px; color: #707975; margin-top: 2px; }
.pis-file-type-card {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 12px; margin-bottom: 16px;
}
.pis-ft-label {
font-size: 11px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 8px;
}
.pis-ft-row { display: flex; align-items: center; gap: 10px; }
.pis-ft-icon {
width: 38px; height: 38px; border-radius: 8px;
background: #E8F0EE; color: var(--color-teal-900);
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex: 0 0 auto;
}
.pis-ft-meta { flex: 1; min-width: 0; }
.pis-ft-type { font-size: 13.5px; color: #1B2520; font-weight: 600; margin: 0; }
.pis-ft-detect { font-size: 11px; color: #707975; margin: 2px 0 0; line-height: 1.35; }
.pis-ft-change {
background: transparent; border: 1px solid #DBE2DE;
border-radius: 6px; padding: 5px 10px;
font-size: 11.5px; color: var(--color-teal-900); font-weight: 500;
cursor: pointer; font-family: inherit; flex: 0 0 auto;
}
.pis-ft-change:hover { background: #F0EEEA; }
.pis-sec { margin-bottom: 16px; }
.pis-sh {
font-size: 11px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 8px;
}
.pis-fields {
display: flex; flex-direction: column;
background: #fff; border: 1px solid #DBE2DE; border-radius: 9px;
overflow: hidden;
}
.pis-field {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #F0EEEA;
gap: 10px;
}
.pis-field:last-child { border-bottom: none; }
.pis-field-lbl { font-size: 11.5px; color: #707975; flex: 0 0 auto; }
.pis-field-val {
font-size: 12.5px; color: #1B2520; font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; padding: 4px 8px; border-radius: 5px;
transition: background .15s;
text-align: right;
}
.pis-field-val:hover { background: #F0EEEA; }
.pis-field-val .ti { font-size: 12px; color: #94A0A8; }
.pis-panels-list {
display: flex; flex-direction: column; gap: 8px;
}
.pis-panel-row {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px; background: #fff;
border: 1px solid #DBE2DE; border-radius: 9px;
}
.pis-panel-tick {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex: 0 0 auto;
}
.pis-tick-ok { background: #E0EEDE; color: #2E6B26; }
.pis-tick-flagged { background: #FFF6E6; color: #854F0B; }
.pis-tick-critical { background: #FEE2E2; color: #A32D2D; }
.pis-panel-info { flex: 1; min-width: 0; }
.pis-panel-name { font-size: 13px; color: #1B2520; font-weight: 600; margin: 0; }
.pis-panel-count { font-size: 11px; color: #707975; margin: 2px 0 0; }
.pis-panel-flag {
font-size: 10.5px; padding: 3px 8px; border-radius: 10px;
font-weight: 600; flex: 0 0 auto;
}
.pis-flag-ok { background: #E0EEDE; color: #2E6B26; }
.pis-flag-flagged { background: #FFF6E6; color: #854F0B; }
.pis-flag-critical { background: #FEE2E2; color: #A32D2D; }
.pis-trend-list {
display: flex; flex-direction: column; gap: 6px;
}
.pis-trend-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px; background: #fff;
border: 1px solid #DBE2DE; border-radius: 9px;
cursor: pointer; font-family: inherit;
font-size: 13px; color: #1B2520; text-align: left;
transition: border-color .15s, background .15s;
}
.pis-trend-link:hover { border-color: var(--color-teal-900); background: #F0EEEA; }
.pis-trend-link > .ti:first-child {
color: var(--color-teal-900); font-size: 16px; flex: 0 0 auto;
}
.pis-trend-link > span { flex: 1; min-width: 0; }
.pis-trend-link > .ti:last-child { color: #94A0A8; font-size: 14px; }
.pis-doctor-card {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 12px;
}
.pis-doc-head-row { display: flex; align-items: center; gap: 10px; }
.pis-doc-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: #E8F0EE; color: var(--color-teal-900);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex: 0 0 auto;
}
.pis-doc-name { font-size: 13.5px; color: #1B2520; font-weight: 600; margin: 0; }
.pis-doc-spec { font-size: 11.5px; color: #707975; margin: 2px 0 0; }
.pis-doc-edit {
font-size: 11.5px; color: var(--color-teal-900); font-weight: 500;
cursor: pointer; padding: 4px 10px;
border-radius: 5px; background: #F0EEEA; flex: 0 0 auto;
}
.pis-doc-edit:hover { background: #DBE2DE; }
.pis-doc-details-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 12px; padding-top: 10px; border-top: 1px solid #F0EEEA;
}
.pis-doc-dr-lbl { display: block; font-size: 10.5px; color: #707975; margin-bottom: 2px; }
.pis-doc-dr-val { font-size: 12.5px; color: #1B2520; font-weight: 500; }
.pis-med-list { display: flex; flex-direction: column; gap: 8px; }
.pis-med-row {
display: flex; gap: 10px; padding: 11px 12px;
background: #fff; border: 1px solid #DBE2DE; border-radius: 9px;
}
.pis-med-ic {
width: 28px; height: 28px; border-radius: 6px;
background: #FFF6E6; color: #854F0B;
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex: 0 0 auto;
}
.pis-med-meta { flex: 1; min-width: 0; }
.pis-med-name { font-size: 13px; color: #1B2520; font-weight: 600; margin: 0; }
.pis-med-rx { font-size: 11.5px; color: #707975; margin: 2px 0 0; }
.pis-med-inst { font-size: 11px; color: #94A0A8; margin: 4px 0 0; line-height: 1.4; }
.pis-section-card {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
padding: 4px 12px;
}
.pis-finding-row {
display: flex; gap: 10px; padding: 10px 0;
border-bottom: 1px solid #F0EEEA;
}
.pis-finding-row:last-child { border-bottom: none; }
.pis-finding-kind {
font-size: 11px; color: #707975; flex: 0 0 100px;
text-transform: uppercase; letter-spacing: .03em;
}
.pis-finding-text { font-size: 12.5px; color: #1B2520; flex: 1; }
.pis-foot {
display: flex; gap: 10px; padding: 14px 20px;
border-top: 1px solid #F0EEEA;
background: #fff;
flex: 0 0 auto;
}
.pis-btn-primary {
flex: 1; padding: 11px; border-radius: 9px;
background: var(--color-teal-900); color: #fff;
border: none; cursor: pointer;
font-size: 13.5px; font-weight: 600; font-family: inherit;
transition: background .15s;
}
.pis-btn-primary:hover { background: #0A4D43; }
.pis-btn-ghost {
flex: 0 0 120px; padding: 11px; border-radius: 9px;
background: #fff; color: #1B2520;
border: 1px solid #DBE2DE; cursor: pointer;
font-size: 13.5px; font-weight: 500; font-family: inherit;
}
.pis-btn-ghost:hover { background: #F0EEEA; }
/* ── agt63: Review block — panels extracted + three action buttons ─────
Rendered by post_ingestion_sheet.html between the file-type card and
the attribution surfaces. Sits above the deeper attribution / attachment
surfaces so the person sees what was found before deciding what to do. */
.agt63-review {
margin: 14px 0;
padding: 14px 14px 12px;
background: #F8FAF9;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 12px;
}
.agt63-r-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
gap: 8px; flex-wrap: wrap;
}
.agt63-r-title {
font-size: 14px; font-weight: 600; color: var(--color-text-primary);
}
.agt63-r-count {
font-size: 12px; color: var(--color-text-tertiary);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.agt63-r-count b { color: #854F0B; font-weight: 600; }
.agt63-p-list {
list-style: none; margin: 0 0 14px; padding: 0;
border-top: 0.5px solid var(--color-border-tertiary);
}
.agt63-p-row {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 2px; gap: 10px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.agt63-p-name {
font-size: 13.5px; color: var(--color-text-primary); line-height: 1.25;
}
.agt63-p-count {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px; color: var(--color-text-tertiary);
white-space: nowrap;
}
.agt63-actions {
display: flex; flex-direction: column; gap: 8px;
}
.agt63-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 48px; padding: 12px 16px; border-radius: 10px;
font-size: 14.5px; font-weight: 600; line-height: 1.2;
text-decoration: none; text-align: center;
font-family: inherit; cursor: pointer;
border: 1.5px solid transparent;
transition: transform .05s ease;
}
.agt63-btn:active { transform: translateY(1px); }
.agt63-btn-primary {
background: var(--color-teal-900); color: #fff;
border-color: var(--color-teal-900);
box-shadow: 0 1px 0 0 #052823;
}
.agt63-btn-primary:hover { background: #0A4D43; }
.agt63-btn-secondary {
background: #fff; color: var(--color-teal-900);
border-color: var(--color-teal-900);
}
.agt63-btn-secondary:hover { background: var(--color-teal-50); }
.agt63-btn-tertiary {
background: #fff; color: var(--color-text-secondary);
border-color: var(--color-border-tertiary);
min-height: 42px; font-size: 13px; font-weight: 500;
}
.agt63-btn-tertiary:hover { background: #F0EEEA; }
.agt63-btn-tertiary .ti { font-size: 14px; }
/* agt65 — disabled hint shown when an extraction has no assigned person */
.agt63-btn-disabled {
background: #F0EEEA; color: var(--color-text-tertiary);
border-color: var(--color-border-tertiary);
font-size: 13px; font-weight: 500; cursor: default;
text-align: center;
}
.agt63-btn-disabled:active { transform: none; }
/* ── agt63: pinned "In context" doc strip on /ask?doc= ─────────
Sits above the message list; stays visible for the whole conversation
because the LLM re-injects doc context on every turn (see chat_service.chat). */
.chat-doc-strip {
margin: 10px 12px 4px;
background: var(--color-teal-900);
color: #fff;
border-radius: 12px;
padding: 12px 14px;
}
.chat-doc-strip-inner {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: start;
}
.chat-doc-strip-icon {
width: 32px; height: 32px; border-radius: 8px;
background: rgba(255,255,255,0.16);
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.chat-doc-strip-icon .ti { font-size: 16px; }
.chat-doc-strip-lbl {
font-size: 10.5px; text-transform: uppercase;
letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 4px;
}
.chat-doc-strip-body { min-width: 0; }
.chat-doc-strip-name {
font-size: 15px; font-weight: 500; line-height: 1.25;
}
.chat-doc-strip-meta {
font-size: 11.5px; opacity: 0.78; margin-top: 3px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.chat-doc-strip-meta b { color: #FFCC80; font-weight: 600; }
.chat-doc-strip-file {
font-size: 10.5px; opacity: 0.62; margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-doc-strip-close {
color: rgba(255,255,255,0.7); text-decoration: none;
padding: 4px;
}
.chat-doc-strip-close:hover { color: #fff; }
/* ── Build hl (SI1): "Shared from {app}" hint above the body ──────────── */
.pis-source-hint {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px 0;
font-size: 11px;
color: var(--color-text-tertiary);
line-height: 1.4;
}
.pis-source-hint i { font-size: 13px; flex-shrink: 0; }
.pis-source-hint b { font-weight: 600; color: var(--color-text-secondary); }
/* ── Build hk: Inline picker (tier 2/3) + new-person block ─────────────── */
.pis-picker-block {
margin: 12px 0 14px;
padding: 12px 12px 8px;
background: #FFF8E1;
border: 0.5px solid #F5D976;
border-radius: 10px;
}
.pis-picker-q {
font-size: 13px; font-weight: 600;
color: #8A6D00;
margin-bottom: 9px;
display: flex; align-items: flex-start; gap: 6px;
line-height: 1.4;
}
.pis-picker-q i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.pis-picker-q b { font-weight: 700; color: #1B2520; }
.pis-picker-opts { display: flex; flex-direction: column; gap: 6px; }
.pis-picker-opt {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 9px;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
transition: background .12s, border-color .12s;
}
.pis-picker-opt:hover { background: #FBFAF6; }
.pis-picker-opt--sel {
border: 1.5px solid var(--color-teal-900);
background: var(--color-teal-50);
}
.pis-picker-av {
width: 28px; height: 28px;
border-radius: 50%;
background: #FAEEDA; color: #854F0B;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
flex-shrink: 0;
}
.pis-picker-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pis-picker-name { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.pis-picker-sub { font-size: 11px; color: var(--color-text-tertiary); }
.pis-picker-tick { color: var(--color-teal-900); font-size: 18px; opacity: 0; flex-shrink: 0; }
.pis-picker-opt--sel .pis-picker-tick { opacity: 1; }
/* New-person block — same surface, slightly different palette to read as
higher-priority "decision needed" than the picker. */
.pis-new-person-block {
margin: 12px 0 14px;
padding: 12px;
background: #FCEBEB;
border: 0.5px solid #F09595;
border-radius: 10px;
}
.pis-newp-q {
font-size: 13px; font-weight: 600;
color: #791F1F;
margin-bottom: 10px;
line-height: 1.4;
}
.pis-newp-q b { font-weight: 700; color: #1B2520; }
.pis-newp-options { display: flex; flex-direction: column; gap: 6px; }
.pis-newp-opt {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 9px;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
transition: background .12s, border-color .12s;
}
.pis-newp-opt:hover { background: #FBFAF6; }
.pis-newp-opt > i { color: #1B2520; font-size: 18px; flex-shrink: 0; }
.pis-newp-opt--primary { border: 1.5px solid #791F1F; }
.pis-newp-opt--primary > i { color: #791F1F; }
.pis-newp-opt--discard > i { color: var(--color-text-tertiary); }
.pis-newp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pis-newp-name { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.pis-newp-sub { font-size: 11px; color: var(--color-text-tertiary); }
.pis-newp-existing-list {
display: flex; flex-direction: column; gap: 4px;
padding: 6px 0 0 30px;
}
/* ── Build gw: Attached to (series-attachment chips + picker) ───────────── */
.pis-attach-block {
margin: 16px 0 14px;
padding: 14px;
background: #F8FAF9;
border-radius: 10px;
border: 0.5px solid var(--color-border-tertiary);
}
.pis-attach-lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
font-weight: 600;
margin: 0 0 10px;
}
.pis-attach-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pis-attach-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 4px 0 12px;
background: #fff;
border: 1px solid var(--color-border-tertiary);
border-radius: 16px;
font-size: 13px;
line-height: 1;
transition: opacity 0.2s ease;
}
.pis-chip-icon {
font-size: 13px;
color: var(--color-text-tertiary);
}
.pis-chip-name {
color: var(--color-text-primary);
font-weight: 500;
}
.pis-chip-med {
color: var(--color-text-tertiary);
font-size: 11px;
font-weight: 400;
margin-left: 2px;
}
.pis-chip-tag {
background: #FEF3C7;
color: #B45309;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 8px;
line-height: 1;
}
.pis-chip-tag-user {
background: #DCFCE7;
color: #15803D;
}
.pis-chip-detach {
width: 26px; height: 26px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
margin-left: 2px;
}
.pis-chip-detach:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--color-text-primary);
}
.pis-chip-detach .ti { font-size: 14px; }
.pis-attach-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border: 1px dashed var(--color-border-tertiary);
border-radius: 16px;
background: transparent;
color: var(--color-text-secondary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pis-attach-trigger:hover {
background: #fff;
border-color: var(--color-text-tertiary);
border-style: solid;
color: var(--color-text-primary);
}
.pis-attach-plus {
font-size: 16px;
line-height: 1;
font-weight: 500;
}
.pis-attach-picker {
margin-top: 12px;
background: #fff;
border: 1px solid var(--color-border-tertiary);
border-radius: 10px;
overflow: hidden;
}
.pis-attach-picker[hidden] { display: none; }
.pis-attach-picker-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--color-border-tertiary);
color: var(--color-text-tertiary);
}
.pis-attach-picker-input-row .ti { font-size: 14px; }
.pis-attach-picker-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background: transparent;
color: var(--color-text-primary);
font-family: inherit;
padding: 0;
}
.pis-attach-picker-list {
max-height: 260px;
overflow-y: auto;
}
.pis-attach-picker-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: none;
border-bottom: 1px solid #F8FAF9;
background: #fff;
font-size: 14px;
font-family: inherit;
width: 100%;
text-align: left;
cursor: pointer;
}
.pis-attach-picker-row:hover { background: #F8FAF9; }
.pis-attach-picker-row:last-child { border-bottom: none; }
.pis-attach-picker-name { flex: 1; }
.pis-attach-picker-lay {
color: var(--color-text-primary);
font-weight: 500;
display: block;
}
.pis-attach-picker-med {
color: var(--color-text-tertiary);
font-size: 12px;
display: block;
}
.pis-attach-picker-pending {
background: #FEF3C7;
color: #B45309;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 8px;
line-height: 1;
}
.pis-attach-picker-row.is-hidden { display: none; }
.pis-loading {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
background: #1B2520; color: #fff; padding: 10px 18px; border-radius: 22px;
font-size: 13px; z-index: 9100;
}
/* Picker overlays (file type + member) */
.pis-picker-overlay {
position: fixed; inset: 0; z-index: 9500;
background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.pis-picker-card {
background: #fff; border-radius: 12px;
padding: 16px; width: 100%; max-width: 380px;
box-shadow: 0 12px 32px rgba(0,0,0,.22);
max-height: 80vh; display: flex; flex-direction: column;
}
.pis-picker-title {
font-size: 14px; color: #1B2520; font-weight: 600; margin: 0 0 4px;
}
.pis-picker-help {
font-size: 11.5px; color: #707975; margin: 0 0 12px; line-height: 1.4;
}
.pis-picker-list {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 12px; overflow-y: auto;
}
.pis-picker-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 8px;
background: #fff; border: 1px solid transparent;
font-size: 13px; color: #1B2520;
cursor: pointer; font-family: inherit; text-align: left;
width: 100%;
}
.pis-picker-row:hover { background: #F0EEEA; }
.pis-picker-active { background: #E8F0EE; border-color: var(--color-teal-900); font-weight: 600; }
.pis-picker-av {
width: 26px; height: 26px; border-radius: 50%;
background: var(--color-teal-900); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; flex: 0 0 auto;
}
.pis-picker-name { flex: 1; }
.pis-picker-row .ti { color: var(--color-teal-900); }
.pis-picker-cancel {
padding: 10px; border-radius: 8px;
background: #fff; border: 1px solid #DBE2DE;
cursor: pointer; font-size: 13px; color: #1B2520; font-family: inherit;
}
/* ═══════════════════════════════════════════════════════════════════════════
Comparison sheet (.cmp-*)
═══════════════════════════════════════════════════════════════════════════ */
.cmp-sheet {
position: fixed; inset: 0; z-index: 9200;
display: flex; align-items: flex-end; justify-content: center;
}
.cmp-scrim {
position: absolute; inset: 0;
background: rgba(0,0,0,.4);
animation: pis-fade-in .25s ease;
}
.cmp-panel {
position: relative;
background: #fff;
border-radius: 16px 16px 0 0;
width: 100%; max-width: 560px;
max-height: 92vh;
display: flex; flex-direction: column;
transform: translateY(100%);
transition: transform .25s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 -8px 28px rgba(0,0,0,.18);
}
.cmp-panel.cmp-open { transform: translateY(0); }
.cmp-handle {
width: 36px; height: 4px; border-radius: 2px;
background: #DBE2DE; margin: 8px auto 0;
}
.cmp-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 20px;
}
.cmp-head-tx { flex: 1; min-width: 0; }
.cmp-head-tx h2 {
font-size: 15px; color: #1B2520; font-weight: 700; margin: 0;
}
.cmp-sub { font-size: 11.5px; color: #707975; }
.cmp-close {
width: 32px; height: 32px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
font-size: 18px; color: #707975;
display: flex; align-items: center; justify-content: center;
}
.cmp-close:hover { background: #F0EEEA; color: #1B2520; }
.cmp-range-chips {
display: flex; gap: 6px; padding: 0 20px 12px;
border-bottom: 1px solid #F0EEEA;
}
.cmp-range-chip {
padding: 6px 14px; border-radius: 14px;
background: #fff; border: 1px solid #DBE2DE;
font-size: 12px; color: #1B2520; cursor: pointer;
font-family: inherit; font-weight: 500;
transition: all .15s;
}
.cmp-range-chip:hover { border-color: var(--color-teal-900); }
.cmp-range-chip.active {
background: var(--color-teal-900); border-color: var(--color-teal-900); color: #fff;
}
.cmp-body {
overflow-y: auto; padding: 16px 20px;
flex: 1;
}
.cmp-empty {
text-align: center; padding: 48px 24px;
color: #707975;
}
.cmp-empty .ti { font-size: 36px; margin-bottom: 12px; }
.cmp-empty p { font-size: 13px; }
.cmp-chart-card {
background: #fff; border: 1px solid #DBE2DE; border-radius: 11px;
padding: 14px;
margin-bottom: 16px;
}
.cmp-chart-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 12px;
}
.cmp-stat-val {
font-size: 22px; color: var(--color-teal-900); font-weight: 700;
letter-spacing: -.01em; line-height: 1.1;
}
.cmp-stat-unit { font-size: 12.5px; color: #707975; font-weight: 500; margin-left: 4px; }
.cmp-stat-lbl { font-size: 11px; color: #707975; margin-top: 2px; }
.cmp-chart-meta { text-align: right; }
.cmp-trend {
font-size: 12px; font-weight: 600;
display: inline-block; padding: 3px 8px;
border-radius: 10px;
}
.cmp-trend-down { background: #E0EEDE; color: #2E6B26; }
.cmp-trend-up { background: #FFF6E6; color: #854F0B; }
.cmp-trend-flat { background: #F0EEEA; color: #707975; }
.cmp-span { font-size: 10.5px; color: #707975; margin-top: 4px; }
.cmp-chart-svg {
width: 100%; height: 150px; display: block;
}
.cmp-section { margin-top: 8px; }
.cmp-sh-title {
font-size: 11px; color: #707975; font-weight: 500;
text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 8px;
}
.cmp-reading-list {
background: #fff; border: 1px solid #DBE2DE; border-radius: 10px;
overflow: hidden;
}
.cmp-reading-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-bottom: 1px solid #F0EEEA;
}
.cmp-reading-row:last-child { border-bottom: none; }
.cmp-reading-date { font-size: 11.5px; color: #707975; flex: 0 0 90px; }
.cmp-reading-value { font-size: 13px; color: #1B2520; font-weight: 600; flex: 1; }
.cmp-reading-flag {
font-size: 10.5px; padding: 2px 7px; border-radius: 10px;
font-weight: 600; flex: 0 0 auto;
}
.cmp-flag-normal { background: #E0EEDE; color: #2E6B26; }
.cmp-flag-high { background: #FFF6E6; color: #854F0B; }
.cmp-flag-low { background: #E6F0FF; color: #1E3A8A; }
.cmp-flag-critical { background: #FEE2E2; color: #A32D2D; }
.cmp-loading {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
background: #1B2520; color: #fff; padding: 10px 18px; border-radius: 22px;
font-size: 13px; z-index: 9300;
}
/* ══════════════════════════════════════════════════════════════════════════
* Build fb — Records Hub lens cards (replaces the 2×3 icon grid)
* ══════════════════════════════════════════════════════════════════════════ */
.hub-lens-card {
display: block;
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
padding: 14px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color 0.15s;
}
.hub-lens-card:hover { border-color: var(--color-teal-900); }
.hub-lens-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.hub-lens-title { font-size: 15px; font-weight: 500; color: var(--color-text-primary); }
.hub-lens-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 3px; }
.hub-lens-count {
font-size: 13px; font-weight: 600; color: var(--color-teal-900);
background: rgba(var(--color-brand-rgb),0.07); border-radius: 999px;
padding: 2px 10px; flex-shrink: 0; margin-left: 12px;
}
.hub-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-pill {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
font-weight: 500; white-space: nowrap;
}
.hub-pill-series-green {
background: rgba(var(--color-brand-rgb),0.07); border: 1px solid rgba(var(--color-brand-rgb),0.25); color: var(--color-teal-900);
}
.hub-pill-series-amber {
background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.30); color: #854F0B;
}
.hub-pill-body {
background: rgba(var(--color-brand-rgb),0.06); border: 1px solid rgba(var(--color-brand-rgb),0.20); color: var(--color-teal-900);
}
.hub-pill-more {
background: transparent; border: 1px solid var(--color-border-tertiary); color: var(--color-text-tertiary);
}
.hub-pill-ep-open {
background: #FAEEDA; border: 1px solid rgba(217,119,6,0.30); color: #854F0B;
}
.hub-pill-ep-closed {
background: #F5F3EF; border: 1px solid var(--color-border-tertiary); color: #404945;
}
.hub-pill-med {
background: var(--color-teal-50); border: 1px solid rgba(var(--color-brand-rgb),0.20); color: var(--color-teal-900);
}
.hub-pill-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #D97706; margin-right: 4px; vertical-align: 1px;
}
/* ══════════════════════════════════════════════════════════════════════════
* Build fb — Health Snapshot profile cards + vital tiles
* ══════════════════════════════════════════════════════════════════════════ */
.snap-card {
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
}
.vital-tile {
padding: 8px 10px;
border-radius: 8px;
border: 0.5px solid var(--color-border-tertiary);
}
.vital-good { background: #F0FDF4; border-color: rgba(22,163,74,0.2); }
.vital-good div:nth-child(2) { color: #15803D; }
.vital-watch { background: #FFFBEB; border-color: rgba(217,119,6,0.25); }
.vital-watch div:nth-child(2) { color: #B45309; }
.vital-alert { background: #FEF2F2; border-color: rgba(220,38,38,0.25); }
.vital-alert div:nth-child(2) { color: #DC2626; }
/* ══════════════════════════════════════════════════════════════════════════
* Build fc — Add Member 4-step wizard components
* ══════════════════════════════════════════════════════════════════════════ */
.wiz-field { margin-bottom: 16px; }
.wiz-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }
.wiz-input {
width: 100%; padding: 10px 12px; border-radius: 10px;
border: 0.5px solid var(--color-border-tertiary); background: #fff;
font-size: 14px; font-family: inherit; color: var(--color-text-primary);
outline: none;
/* K1 fix (12 Jul 2026) — width:100% alone doesn't cap a native control's
own intrinsic content width (WKWebView's in
particular renders wide day/month/year spinner segments that don't
shrink below their platform minimum). min-width:0 stops that intrinsic
size from overriding the flex-item's allocated width, so the DOB/Age/Sex
row (member_form.html) actually respects its flex:2/1/1 split instead of
overflowing/overlapping past the screen edge on narrow iPhones.
max-width:100% is a hard ceiling as a second line of defence. */
min-width: 0;
max-width: 100%;
}
.wiz-input:focus { border-color: var(--color-teal-900); }
.wiz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip {
padding: 8px 14px; border-radius: 10px; font-size: 13px;
border: 0.5px solid var(--color-border-tertiary); background: #fff;
color: var(--color-text-primary); cursor: pointer; font-family: inherit;
transition: all 0.15s;
}
.wiz-chip:hover { border-color: var(--color-teal-900); }
.wiz-chip-active, .wiz-chip.wiz-chip-active {
background: var(--color-teal-900); color: #fff; border-color: var(--color-teal-900);
}
.wiz-type-btn {
flex: 1; display: flex; align-items: center; gap: 10px;
padding: 14px; border-radius: 12px; border: 0.5px solid var(--color-border-tertiary);
background: #fff; cursor: pointer; font-family: inherit; text-align: left;
color: var(--color-text-primary);
}
.wiz-type-active, .wiz-type-btn.wiz-type-active {
background: var(--color-teal-900); color: #fff; border-color: var(--color-teal-900);
}
.wiz-btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 24px; border-radius: 10px; border: none;
background: var(--color-teal-900); color: #fff; font-size: 14px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.wiz-btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 24px; border-radius: 10px;
border: 0.5px solid var(--color-border-tertiary); background: #fff;
color: var(--color-text-primary); font-size: 14px; font-weight: 500;
cursor: pointer; font-family: inherit;
}
/* ══════════════════════════════════════════════════════════════════════════
* Build fd — Series accordion (expandable condition cards)
* ══════════════════════════════════════════════════════════════════════════ */
.series-card-header { display: flex; align-items: center; padding: 14px; gap: 8px; }
.series-card-body { display: none; border-top: 0.5px solid var(--color-border-tertiary); }
.series-expanded .series-card-body { display: block; }
.series-expanded .series-chevron { transform: rotate(180deg); }
/* ══════════════════════════════════════════════════════════════════════════
* BUILD fk — Visual polish for v4.3 mockups (p13/p16/p30/p31/p33)
* Added: AI Inferences rich cards, Medications cards, Add Sheet 2×2 grid,
* Private dark banner + Personal notes, Profile 4-method share footer
* ══════════════════════════════════════════════════════════════════════════ */
/* ── AI Inferences rich cards (p31) ─────────────────────────────────── */
.ai-inf { margin: 0 0 16px; padding: 0 12px; }
.ai-inf-disclaimer {
display: flex; gap: 8px; align-items: flex-start;
padding: 11px 14px; margin-bottom: 12px;
background: rgba(var(--color-brand-rgb),0.06);
border: 1px solid rgba(var(--color-brand-rgb),0.12);
border-radius: 10px;
}
.ai-inf-disclaimer i { font-size: 14px; color: var(--color-teal-900); flex-shrink: 0; margin-top: 1px; }
.ai-inf-disclaimer p { font-size: 11px; color: var(--color-teal-900); line-height: 1.5; margin: 0; }
.ai-inf-disclaimer strong { font-weight: 600; }
.ai-inf-sh {
font-size: 12px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px;
margin: 14px 0 8px; display: flex; align-items: center; gap: 8px;
}
.ai-inf-sh:first-of-type { margin-top: 0; }
.ai-inf-count {
font-size: 10px; background: #F0EEEA; color: #707975;
padding: 2px 7px; border-radius: 999px; font-weight: 500;
}
.ai-inf-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.ai-inf-card-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.ai-inf-card-icon {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.ai-inf-card-icon i { font-size: 18px; }
.ai-inf-icon-attention { background: #FCEBEB; }
.ai-inf-icon-attention i { color: #DC2626; }
.ai-inf-icon-good { background: rgba(15,110,86,0.10); }
.ai-inf-icon-good i { color: var(--color-teal-700); }
.ai-inf-icon-pattern { background: #E6F1FB; }
.ai-inf-icon-pattern i { color: #0C447C; }
.ai-inf-icon-rec { background: rgba(60,52,137,0.08); }
.ai-inf-icon-rec i { color: #3C3489; }
.ai-inf-card-meta { flex: 1; min-width: 0; }
.ai-inf-card-title {
font-size: 14px; font-weight: 500; color: var(--color-text-primary, #1B1C1A);
line-height: 1.3; margin: 0;
}
.ai-inf-card-member {
font-size: 11px; color: var(--color-text-tertiary, #707975);
margin: 3px 0 0; display: flex; align-items: center; gap: 4px;
}
.ai-inf-av {
width: 14px; height: 14px; border-radius: 50%; color: #fff;
font-size: 8px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center;
}
.ai-inf-card-body {
font-size: 12px; color: var(--color-text-secondary, #404945);
line-height: 1.55; margin: 0 0 10px;
}
.ai-inf-card-body strong { font-weight: 500; color: var(--color-text-primary, #1B1C1A); }
.ai-inf-card-evidence {
background: #FBF9F5; border-radius: 8px; padding: 10px 12px;
display: flex; gap: 10px; align-items: center;
}
.ai-inf-card-evidence i { font-size: 14px; color: var(--color-text-tertiary, #707975); flex-shrink: 0; }
.ai-inf-card-evidence p { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 0; line-height: 1.4; }
/* Build fv (AUDIT-007): per-card action CTAs. Two pills max per card.
"See trend" only on metric-backed cards; "Ask Arogya AI" on every card. */
.ai-inf-card-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 10px;
}
.ai-inf-cta {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 500;
padding: 6px 12px; border-radius: 999px;
background: #FBF9F5;
color: var(--color-teal-900);
border: 1px solid var(--color-border-tertiary, #E2E8F0);
text-decoration: none;
cursor: pointer;
transition: background 0.12s;
}
.ai-inf-cta:hover { background: #F0EEEA; }
.ai-inf-cta:active { background: #E6E4DF; }
.ai-inf-cta i { font-size: 13px; color: var(--color-teal-900); }
.ai-inf-cta i.ti-arrow-right { font-size: 11px; opacity: 0.5; }
/* ── Medications rich cards (p13) ───────────────────────────────────── */
.med-section-h {
font-size: 12px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 10px;
}
.med-add-btn {
font-size: 11px; color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
border-radius: 999px; padding: 5px 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
text-decoration: none; flex-shrink: 0;
}
.med-add-btn i { font-size: 13px; }
.med-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 14px; margin-bottom: 9px;
}
.med-card-head { display: flex; gap: 12px; align-items: flex-start; }
.med-card-icon {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.med-card-icon i { font-size: 20px; }
.med-tint-brand { background: rgba(var(--color-brand-rgb),0.08); }
.med-tint-brand i { color: var(--color-teal-900); }
.med-tint-amber { background: rgba(217,119,6,0.08); }
.med-tint-amber i { color: #854F0B; }
.med-tint-purple { background: rgba(60,52,137,0.08); }
.med-tint-purple i { color: #3C3489; }
.med-tint-blue { background: #E6F1FB; }
.med-tint-blue i { color: #0C447C; }
.med-tint-default { background: rgba(var(--color-brand-rgb),0.08); }
.med-tint-default i { color: var(--color-teal-900); }
.med-card-body { flex: 1; min-width: 0; }
.med-card-name { font-size: 15px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0; }
.med-card-dose { font-size: 12px; color: var(--color-text-secondary, #404945); margin: 3px 0 0; }
.med-card-since { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 2px 0 0; }
.med-card-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.med-badge { font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 500; }
.med-badge-active { background: rgba(15,110,86,0.1); color: var(--color-teal-700); }
.med-badge-series { background: rgba(var(--color-brand-rgb),0.06); border: 1px solid rgba(var(--color-brand-rgb),0.15); color: var(--color-teal-900); }
.med-badge-refill { background: #FAEEDA; border: 1px solid rgba(217,119,6,0.25); color: #854F0B; }
.med-card-foot {
border-top: 1px solid #F0EEEA; margin-top: 12px; padding-top: 10px;
display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.med-card-foot-label { font-size: 11px; color: var(--color-text-tertiary, #707975); flex: 1; min-width: 0; }
.med-card-foot-action {
font-size: 11px; color: var(--color-teal-900); font-weight: 500;
text-decoration: none; flex-shrink: 0;
}
.med-add-card {
background: #F5F3EF; border: 1px dashed #BFC9C4; border-radius: 14px;
padding: 18px; text-align: center; margin-bottom: 9px; cursor: pointer;
}
.med-add-card > i { font-size: 28px; color: #9CA3AF; display: block; margin-bottom: 8px; }
.med-add-card-title { font-size: 13px; font-weight: 500; color: #404945; margin: 0 0 4px; }
.med-add-card-sub { font-size: 12px; color: #9CA3AF; line-height: 1.4; margin: 0; }
.med-add-methods { display: flex; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.med-add-method {
font-size: 12px; padding: 7px 16px; border-radius: 999px; font-weight: 500;
display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
background: transparent; color: var(--color-teal-900); border: 1px solid var(--color-teal-900);
}
.med-add-method-primary { background: var(--color-teal-900); color: #fff; border: none; }
.med-add-method i { font-size: 14px; }
.med-history-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; opacity: 0.72;
}
.med-history-head {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-bottom: 8px; font-size: 11px; color: var(--color-text-tertiary, #707975);
}
.med-history-doctor i { font-size: 11px; }
.med-history-sep { color: var(--color-text-quaternary, #BFC9C4); }
.med-history-date { margin-left: auto; }
.med-history-row {
display: flex; gap: 10px; align-items: flex-start; padding: 6px 0;
border-top: 0.5px solid #F0EEEA;
}
.med-history-row:first-of-type { border-top: none; padding-top: 4px; }
.med-history-row-icon {
width: 28px; height: 28px; border-radius: 7px;
background: #F5F3EF; display: flex; align-items: center; justify-content: center;
}
.med-history-row-icon i { font-size: 14px; color: #9CA3AF; }
.med-history-row-name { font-size: 12px; color: #707975; margin: 0; font-weight: 500; }
.med-history-row-freq { font-size: 11px; color: #9CA3AF; margin: 1px 0 0; }
/* ── Add Sheet 2×2 grid (p16) ─────────────────────────────────────── */
.add-sheet-panel {
background: #FBF9F5; width: 100%; max-width: 460px;
border-radius: 28px 28px 0 0; padding: 0 0 22px;
box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
max-height: 86vh; overflow: hidden;
display: flex; flex-direction: column;
}
.add-sheet-handle-row { display: flex; justify-content: center; padding: 10px 0 6px; }
.add-sheet-handle { width: 36px; height: 4px; background: #D5D0C7; border-radius: 999px; }
.add-sheet-head {
padding: 4px 20px 14px; display: flex;
justify-content: space-between; align-items: center;
}
.add-sheet-title { font-size: 18px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); }
.add-sheet-subtitle { font-size: 12px; color: var(--color-text-tertiary, #707975); margin-top: 2px; }
.add-sheet-close {
width: 32px; height: 32px; border-radius: 50%; background: #F0EEEA;
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #707975;
}
.add-sheet-close i { font-size: 16px; }
.add-sheet-body { padding: 4px 20px 16px; overflow-y: auto; display: flex; flex-direction: column; }
.add-sheet-context {
background: rgba(var(--color-brand-rgb),0.06); border-radius: 10px; padding: 10px 12px;
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.add-sheet-context i { font-size: 16px; color: var(--color-teal-900); }
.add-sheet-context-text { flex: 1; font-size: 12px; color: var(--color-text-primary, #1B1C1A); }
.add-sheet-context-text strong { font-weight: 500; }
.add-sheet-context-change { font-size: 11px; color: var(--color-teal-900); font-weight: 500; text-decoration: none; flex-shrink: 0; }
.add-sheet-primary {
background: var(--color-teal-900); border-radius: 16px; padding: 18px;
display: flex; align-items: center; gap: 14px;
cursor: pointer; margin-bottom: 10px; border: none; width: 100%;
text-align: left; font-family: inherit;
}
.add-sheet-primary-icon {
width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.add-sheet-primary-icon i { font-size: 26px; color: #fff; }
.add-sheet-primary-text { flex: 1; color: #fff; }
.add-sheet-primary-text h3 { font-size: 16px; font-weight: 500; margin: 0 0 2px; }
.add-sheet-primary-text p { font-size: 12px; color: rgba(255,255,255,0.75); margin: 0; }
.add-sheet-primary-arrow { color: rgba(255,255,255,0.6); font-size: 18px; flex-shrink: 0; }
.add-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.add-sheet-tile {
background: #FBF9F5; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 14px; cursor: pointer;
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
transition: border-color 0.15s; text-decoration: none;
text-align: left; font-family: inherit;
}
.add-sheet-tile:hover { border-color: var(--color-teal-900); }
.add-sheet-tile-icon {
width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--color-brand-rgb),0.08);
display: flex; align-items: center; justify-content: center;
}
.add-sheet-tile-icon i { font-size: 20px; color: var(--color-teal-900); }
.add-sheet-tile h4 { font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0; }
.add-sheet-tile p { font-size: 11px; color: var(--color-text-tertiary, #707975); line-height: 1.35; margin: 0; }
.add-sheet-divider {
font-size: 11px; font-weight: 500; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.5px;
margin: 18px 0 10px;
}
.add-sheet-row {
background: #FBF9F5; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 11px 14px;
display: flex; align-items: center; gap: 11px; cursor: pointer;
margin-bottom: 6px; text-decoration: none; font-family: inherit;
}
.add-sheet-row-icon {
width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--color-brand-rgb),0.06);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.add-sheet-row-icon i { font-size: 16px; color: var(--color-teal-900); }
.add-sheet-row-label { flex: 1; font-size: 13px; color: var(--color-text-primary, #1B1C1A); }
.add-sheet-row-chev { font-size: 14px; color: #BFC9C4; }
/* ── Private dark banner + Personal notes (p33) ────────────────────── */
.priv-banner-dark {
background: #2C2C2A; margin: 0 0 12px;
border-radius: 0 0 14px 14px;
padding: 14px 16px 16px;
}
.priv-banner-dark-inner {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px; padding: 11px 13px;
display: flex; gap: 11px; align-items: flex-start;
}
.priv-banner-dark-lock {
width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.priv-banner-dark-lock i { font-size: 14px; color: #EF9F27; }
.priv-banner-dark-title { font-size: 12px; font-weight: 500; color: #fff; margin: 0 0 2px; }
.priv-banner-dark-sub { font-size: 11px; color: rgba(255,255,255,0.75); line-height: 1.5; margin: 0; }
.priv-notes { padding: 0 14px; margin-bottom: 18px; }
.priv-notes-head {
display: flex; justify-content: space-between; align-items: center;
margin: 4px 0 10px;
}
.priv-notes-h {
font-size: 12px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px;
}
.priv-notes-count {
font-size: 10px; background: #F0EEEA; color: #707975;
padding: 2px 7px; border-radius: 999px; font-weight: 500;
}
.priv-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 14px; margin-bottom: 10px; position: relative;
}
.priv-card::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
background: #2C2C2A; border-radius: 14px 0 0 14px;
}
.priv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.priv-card-type {
font-size: 10px; padding: 3px 8px; border-radius: 999px;
background: #F0EEEA; color: #707975; font-weight: 500;
}
.priv-card-type-note { background: rgba(60,52,137,0.08); color: #3C3489; }
.priv-card-type-observation { background: rgba(var(--color-brand-rgb),0.08); color: var(--color-teal-900); }
.priv-card-type-draft { background: #FAEEDA; color: #854F0B; }
.priv-card-date { font-size: 11px; color: #9CA3AF; flex: 1; }
.priv-card-act {
width: 26px; height: 26px; border-radius: 6px; border: none;
background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: #707975;
}
.priv-card-act i { font-size: 15px; }
.priv-card-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0 0 5px; }
.priv-card-body { font-size: 12px; color: var(--color-text-secondary, #404945); line-height: 1.55; margin: 0; }
.priv-card-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.priv-card-tag {
font-size: 10px; padding: 2px 7px; border-radius: 4px;
background: #F5F3EF; border: 1px solid var(--color-border-tertiary, #E2E8F0);
color: var(--color-text-secondary, #404945); font-weight: 500;
}
.priv-add {
background: #FBF9F5; border: 1px dashed #BFC9C4; border-radius: 14px;
padding: 18px; text-align: center; cursor: pointer; margin-bottom: 10px;
width: 100%; font-family: inherit;
}
.priv-add > i { font-size: 22px; color: #707975; display: block; }
.priv-add-title { font-size: 13px; font-weight: 500; color: #404945; margin: 6px 0 0; }
.priv-add-sub { font-size: 11px; color: #9CA3AF; }
.priv-trackers-h {
font-size: 12px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px;
padding: 0 14px; margin: 8px 0 10px;
}
/* ── Profile 4-method share footer (p30) ────────────────────────────── */
.profile-share-card {
background: rgba(var(--color-brand-rgb),0.06); border: 1px solid rgba(var(--color-brand-rgb),0.15);
border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.profile-share-last {
font-size: 11px; color: var(--color-teal-900); margin: 0 0 10px; line-height: 1.5;
}
.profile-share-last i { font-size: 13px; vertical-align: -2px; margin-right: 4px; }
.profile-share-last strong { font-weight: 500; }
.profile-share-last-empty { color: #404945; }
.profile-share-actions { display: flex; gap: 6px; }
.profile-share-btn {
flex: 1; padding: 9px 4px; border-radius: 8px;
background: #fff; border: 1px solid rgba(var(--color-brand-rgb),0.2);
color: var(--color-teal-900); font-size: 11px; font-weight: 500; cursor: pointer;
font-family: inherit; text-decoration: none;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.profile-share-btn:hover { background: rgba(var(--color-brand-rgb),0.04); }
.profile-share-btn i { font-size: 16px; }
/* ══════════════════════════════════════════════════════════════════════════
* BUILD fl — Closure Prompts (FR-CL-01/02/03) — mockup arogya_sheet_closure_prompt
* ══════════════════════════════════════════════════════════════════════════ */
.cp-overlay {
position: fixed; inset: 0; background: rgba(20,20,18,0.55);
z-index: 910; display: none; align-items: flex-end; justify-content: center;
}
.cp-overlay.open { display: flex; }
.cp-sheet {
background: #fff; width: 100%; max-width: 460px;
border-radius: 28px 28px 0 0; padding: 0 0 18px;
box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
max-height: 88vh; overflow: hidden;
display: flex; flex-direction: column; position: relative;
}
.cp-handle-row { display: flex; justify-content: center; padding: 10px 0 6px; }
.cp-handle { width: 36px; height: 4px; background: #D5D0C7; border-radius: 999px; }
.cp-close {
position: absolute; top: 14px; right: 14px;
width: 30px; height: 30px; border-radius: 50%; background: #F0EEEA;
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #707975;
}
.cp-body { padding: 4px 20px 16px; overflow-y: auto; flex: 1; }
.cp-incident {
display: flex; align-items: center; gap: 11px;
padding: 10px 12px; background: #FBF9F5; border-radius: 10px; margin-bottom: 14px;
}
.cp-incident-icon {
width: 32px; height: 32px; border-radius: 9px; background: rgba(217,119,6,0.12);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cp-incident-icon i { font-size: 16px; color: #854F0B; }
.cp-incident-meta { flex: 1; min-width: 0; }
.cp-incident-name { font-size: 13px; font-weight: 500; color: #1B1C1A; margin: 0; }
.cp-incident-detail { font-size: 11px; color: #707975; margin: 1px 0 0; }
.cp-incident-day {
font-size: 10px; padding: 3px 8px; border-radius: 999px;
background: rgba(217,119,6,0.12); color: #854F0B; font-weight: 600;
flex-shrink: 0;
}
.cp-greeting { font-size: 12px; color: #707975; margin: 0 0 3px; }
.cp-question { font-size: 16px; font-weight: 500; color: #1B1C1A; line-height: 1.35; margin: 0 0 14px; }
.cp-status-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.cp-status-opt {
padding: 11px 4px; border-radius: 10px;
border: 1.5px solid var(--color-border-tertiary, #E2E8F0); background: #fff;
cursor: pointer; text-align: center; transition: all 0.15s; font-family: inherit;
}
.cp-status-opt:hover { background: rgba(var(--color-brand-rgb),0.04); }
.cp-status-opt .em { font-size: 20px; display: block; line-height: 1; margin-bottom: 4px; }
.cp-status-opt .lbl { font-size: 11px; font-weight: 500; color: #1B1C1A; }
.cp-status-opt.selected { border-color: var(--color-teal-700); background: rgba(15,110,86,0.06); }
.cp-status-opt.selected .lbl { color: var(--color-teal-700); }
.cp-when-block {
background: rgba(15,110,86,0.05); border: 1px solid rgba(15,110,86,0.2);
border-radius: 10px; padding: 12px; margin-bottom: 16px; display: none;
}
.cp-when-block.show { display: block; }
.cp-when-title { font-size: 12px; font-weight: 500; color: var(--color-teal-700); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.cp-when-title i { font-size: 14px; }
.cp-when-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cp-when-opt {
padding: 8px; border-radius: 8px; border: 1px solid rgba(15,110,86,0.2);
background: #fff; font-size: 12px; color: #1B1C1A; cursor: pointer;
text-align: center; font-family: inherit; font-weight: 500;
}
.cp-when-opt:hover { border-color: var(--color-teal-700); }
.cp-when-opt.selected { background: var(--color-teal-700); color: #fff; border-color: var(--color-teal-700); }
.cp-when-help {
font-size: 10px; color: #404945; margin: 8px 0 0;
line-height: 1.5; font-style: italic;
}
.cp-add-section { margin-bottom: 14px; }
.cp-add-sh {
font-size: 11px; font-weight: 500; color: #707975;
text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px;
}
.cp-add-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cp-add-btn {
padding: 11px 6px; border-radius: 10px;
border: 1px dashed #BFC9C4; background: #FBF9F5; cursor: pointer;
text-align: center; font-family: inherit; text-decoration: none;
}
.cp-add-btn:hover { border-color: var(--color-teal-900); background: rgba(var(--color-brand-rgb),0.04); }
.cp-add-btn i { font-size: 18px; color: #707975; display: block; margin-bottom: 4px; }
.cp-add-btn span { font-size: 10px; color: #404945; font-weight: 500; line-height: 1.2; display: block; }
.cp-why-helps {
background: rgba(60,52,137,0.05); border-radius: 10px; padding: 10px 12px;
margin-bottom: 12px; display: flex; gap: 9px; align-items: flex-start;
}
.cp-why-helps > i { font-size: 14px; color: #3C3489; flex-shrink: 0; margin-top: 1px; }
.cp-why-title { font-size: 11px; font-weight: 500; color: #3C3489; margin: 0 0 4px; }
.cp-why-items { font-size: 11px; color: #404945; line-height: 1.5; margin: 0; padding: 0; list-style: none; }
.cp-why-items li { padding-left: 11px; position: relative; }
.cp-why-items li::before { content: '•'; position: absolute; left: 2px; color: #3C3489; }
.cp-why-items em { color: #3C3489; font-style: italic; }
.cp-footer {
display: flex; gap: 8px; padding-top: 10px;
border-top: 1px solid #F0EEEA; margin-top: 6px;
}
.cp-snooze {
background: transparent; border: none; color: #707975;
padding: 11px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.cp-submit {
flex: 1; padding: 11px; border-radius: 999px; background: var(--color-teal-900);
color: #fff; border: none; font-size: 13px; font-weight: 500;
cursor: pointer; font-family: inherit;
}
.cp-submit:disabled { opacity: 0.5; cursor: not-allowed; }
/* Command Centre — pending closure prompts (build fl) */
.cc-closure-prompts { margin: 0 0 14px; padding: 0 14px; }
.cc-cp-h { font-size: 12px; font-weight: 500; color: #854F0B; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px; }
.cc-cp-card {
background: #fff; border: 1px solid rgba(217,119,6,0.25);
border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
display: flex; align-items: center; gap: 11px; cursor: pointer;
text-decoration: none;
}
.cc-cp-card-icon {
width: 32px; height: 32px; border-radius: 9px; background: rgba(217,119,6,0.12);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-cp-card-icon i { font-size: 16px; color: #854F0B; }
.cc-cp-card-meta { flex: 1; min-width: 0; }
.cc-cp-card-title { font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0; }
.cc-cp-card-sub { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 2px 0 0; }
.cc-cp-card-arrow { color: #BFC9C4; font-size: 16px; flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════════════════════
* BUILD fm — Insurance Coverage Analysis (F-FM-01..12)
* Mockup: design/mockups/arogya_mockup_insurance_analysis.html
* ══════════════════════════════════════════════════════════════════════════ */
/* Top-bar Re-analyse button */
.ia-refresh-btn {
font-size: 11px; color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
border-radius: 999px; padding: 5px 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
font-family: inherit;
}
.ia-refresh-btn:hover { background: rgba(255,255,255,0.22); }
.ia-refresh-btn i { font-size: 13px; }
/* Hero policy card */
.ia-hero { padding: 12px 14px 0; }
.ia-hero-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 14px;
display: flex; align-items: center; gap: 13px; margin-bottom: 10px;
}
.ia-hero-mark {
width: 44px; height: 44px; border-radius: 11px;
background: rgba(var(--color-brand-rgb),0.08); color: var(--color-teal-900);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.ia-hero-meta { flex: 1; min-width: 0; }
.ia-hero-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0 0 3px; line-height: 1.3; }
.ia-hero-sub { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 0; line-height: 1.4; }
.ia-renewal-pill {
font-size: 10px; padding: 2px 6px; border-radius: 999px;
background: rgba(217,119,6,0.12); color: #854F0B; font-weight: 500;
}
/* Score strip */
.ia-score-strip {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.ia-score-cell { text-align: center; }
.ia-score-num { font-size: 24px; font-weight: 600; line-height: 1; margin-bottom: 3px; }
.ia-score-covered { color: var(--color-teal-700); }
.ia-score-partial { color: #854F0B; }
.ia-score-not { color: #DC2626; }
.ia-score-lbl { font-size: 10px; color: var(--color-text-tertiary, #707975); text-transform: uppercase; letter-spacing: 0.3px; }
/* PED bar */
.ia-ped-bar {
background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.2);
border-radius: 10px; padding: 10px 13px;
display: flex; align-items: center; gap: 9px;
font-size: 11px; color: #854F0B; margin-bottom: 14px;
}
.ia-ped-bar i { font-size: 14px; }
.ia-ped-bar strong { font-weight: 500; }
/* Member sections */
.ia-member-section { padding: 0 14px 6px; margin-bottom: 18px; }
.ia-member-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 0 14px; border-bottom: 1px solid #F0EEEA; margin-bottom: 12px;
}
.ia-member-avatar {
width: 32px; height: 32px; border-radius: 50%; background: var(--color-teal-900);
color: #fff; font-size: 12px; font-weight: 500;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ia-member-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0; }
.ia-member-age { font-size: 11px; color: var(--color-text-tertiary, #707975); font-weight: 400; }
.ia-member-sub { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 2px 0 0; }
/* Section headers */
.ia-sh {
font-size: 12px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px;
margin: 14px 0 8px;
display: flex; align-items: center; gap: 6px;
}
.ia-sh i { font-size: 13px; }
/* Condition / medication / age row */
.ia-cond-row {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 12px 13px; margin-bottom: 8px;
border-left: 3px solid #E2E8F0;
}
.ia-cond-row.ia-verdict-covered { border-left-color: var(--color-teal-700); }
.ia-cond-row.ia-verdict-partial { border-left-color: #854F0B; }
.ia-cond-row.ia-verdict-waiting { border-left-color: #0C447C; }
.ia-cond-row.ia-verdict-not_covered { border-left-color: #DC2626; }
.ia-cond-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.ia-cond-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); }
.ia-cond-note { font-size: 11px; color: var(--color-text-secondary, #404945); line-height: 1.5; margin: 0; }
.ia-cond-note strong { font-weight: 500; }
.ia-cond-clause {
font-size: 10px; color: #3C3489; text-decoration: none;
display: inline-flex; align-items: center; gap: 3px;
margin-top: 6px;
}
/* Verdict pill */
.ia-verdict { font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 500; flex-shrink: 0; }
.ia-verdict-pill-covered { background: rgba(15,110,86,0.1); color: var(--color-teal-700); }
.ia-verdict-pill-partial { background: rgba(217,119,6,0.1); color: #854F0B; }
.ia-verdict-pill-waiting { background: rgba(12,68,124,0.1); color: #0C447C; }
.ia-verdict-pill-not_covered { background: rgba(220,38,38,0.1); color: #DC2626; }
/* Age-relevant block */
.ia-age-block {
background: rgba(60,52,137,0.04); border: 1px solid rgba(60,52,137,0.12);
border-radius: 12px; padding: 12px; margin-bottom: 12px;
}
.ia-age-explain {
display: flex; gap: 8px; align-items: flex-start;
font-size: 11px; color: #3C3489; line-height: 1.5;
padding-bottom: 10px; border-bottom: 1px solid rgba(60,52,137,0.15);
margin-bottom: 10px;
}
.ia-age-explain i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.ia-age-row {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 10px; padding: 11px 12px; margin-bottom: 8px;
border-left: 3px solid #E2E8F0;
}
.ia-age-row.ia-verdict-covered { border-left-color: var(--color-teal-700); }
.ia-age-row.ia-verdict-partial { border-left-color: #854F0B; }
.ia-age-row.ia-verdict-waiting { border-left-color: #0C447C; }
.ia-age-row.ia-verdict-not_covered { border-left-color: #DC2626; }
.ia-age-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.ia-age-row-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); }
.ia-age-prev { font-size: 11px; color: var(--color-text-secondary, #404945); line-height: 1.5; margin: 0 0 6px; }
.ia-age-rel { font-size: 11px; color: var(--color-text-secondary, #404945); line-height: 1.5; margin: 0 0 6px; }
.ia-age-rel strong { font-weight: 500; color: #3C3489; }
.ia-age-checks {
font-size: 11px; color: var(--color-text-tertiary, #707975);
margin: 6px 0;
}
.ia-age-checks summary { cursor: pointer; color: #3C3489; padding: 4px 0; }
.ia-age-checks ul { padding-left: 20px; margin: 4px 0 6px; line-height: 1.5; }
.ia-age-checks li { font-size: 11px; }
.ia-age-ayush {
font-size: 11px; color: var(--color-teal-700); line-height: 1.5; margin: 6px 0;
background: rgba(15,110,86,0.06); padding: 6px 9px; border-radius: 6px;
display: flex; gap: 6px; align-items: flex-start;
}
.ia-age-ayush i { font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.ia-age-source { font-size: 10px; color: var(--color-text-quaternary, #9CA3AF); margin: 6px 0 0; }
.ia-age-source a { color: #3C3489; text-decoration: none; }
.ia-age-source a:hover { text-decoration: underline; }
/* Recommendations */
.ia-recs { padding: 0 14px; margin-bottom: 20px; }
.ia-rec-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 13px;
display: flex; gap: 12px; margin-bottom: 8px;
}
.ia-rec-num {
width: 28px; height: 28px; border-radius: 50%; background: var(--color-teal-900);
color: #fff; font-weight: 500; font-size: 13px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ia-rec-text { flex: 1; }
.ia-rec-title { font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0 0 4px; }
.ia-rec-detail { font-size: 12px; color: var(--color-text-secondary, #404945); line-height: 1.55; margin: 0; }
.ia-rec-members { font-size: 10px; color: var(--color-text-tertiary, #707975); margin: 6px 0 0; font-style: italic; }
/* Compare CTA */
.ia-compare-cta { padding: 0 14px; margin-bottom: 16px; }
.ia-compare-link {
display: flex; align-items: center; gap: 9px;
background: rgba(60,52,137,0.06); border-radius: 10px;
padding: 11px 14px; font-size: 13px; color: #3C3489;
font-weight: 500; text-decoration: none;
}
.ia-compare-link:hover { background: rgba(60,52,137,0.1); }
.ia-compare-link i { font-size: 15px; }
/* Disclaimer */
.ia-disclaimer {
margin: 14px;
background: #FBF9F5; border-radius: 10px; padding: 10px 13px;
display: flex; gap: 9px; align-items: flex-start;
font-size: 11px; color: var(--color-text-tertiary, #707975); line-height: 1.5;
}
.ia-disclaimer i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
/* Compare view */
.ia-cmp-intro { font-size: 13px; color: var(--color-text-secondary, #404945); margin: 0 0 16px; line-height: 1.5; }
.ia-cmp-policies {
display: grid; grid-auto-columns: minmax(140px, 1fr); grid-auto-flow: column;
gap: 8px; margin-bottom: 12px; overflow-x: auto;
}
.ia-cmp-policy-cell {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 10px; padding: 11px; text-align: center;
}
.ia-cmp-policy-cell-head { background: transparent; border: none; padding: 11px 0; font-size: 11px; color: var(--color-text-tertiary, #707975); text-align: left; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.ia-cmp-policy-mark { width: 32px; height: 32px; border-radius: 8px; background: rgba(var(--color-brand-rgb),0.08); color: var(--color-teal-900); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; margin-bottom: 5px; }
.ia-cmp-policy-name { font-size: 11px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); line-height: 1.3; margin: 0; }
.ia-cmp-policy-si { font-size: 10px; color: var(--color-text-tertiary, #707975); margin-top: 2px; }
.ia-cmp-policy-score { font-size: 10px; color: var(--color-text-secondary, #404945); margin-top: 4px; display: flex; justify-content: center; gap: 6px; }
.ia-cmp-policy-link { font-size: 10px; color: var(--color-teal-900); text-decoration: none; display: block; margin-top: 6px; }
.ia-cmp-row { display: grid; grid-auto-columns: minmax(140px, 1fr); grid-auto-flow: column; gap: 8px; margin-bottom: 6px; align-items: center; }
.ia-cmp-cond-cell { font-size: 12px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); padding: 8px 0; }
.ia-cmp-verdict-cell { background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0); border-radius: 8px; padding: 8px; text-align: center; }
/* Build fx (AUDIT-021): "What we'd suggest" block on /insurance/compare.
Per AD-103 only renders when compare_policies returns ≥1 suggestion. */
.ia-cmp-suggest { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-border-tertiary, #E2E8F0); }
.ia-cmp-suggest-title {
font-size: 12px; font-weight: 600; color: var(--color-text-primary, #1B1C1A);
text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px;
display: flex; align-items: center; gap: 6px;
}
.ia-cmp-suggest-title i { font-size: 14px; color: #B45309; }
.ia-cmp-suggest-card {
background: #fff; border: 0.5px solid var(--color-border-tertiary, #E2E8F0);
border-left: 3px solid #B45309;
border-radius: 8px; padding: 12px 14px; margin-bottom: 8px;
}
.ia-cmp-suggest-strongest { border-left-color: #3B6D11; }
.ia-cmp-suggest-gap { border-left-color: #C2410C; }
.ia-cmp-suggest-dominated { border-left-color: #6B7280; }
.ia-cmp-suggest-card-title { font-size: 12px; font-weight: 600; margin: 0 0 4px; color: var(--color-text-primary, #1B1C1A); }
.ia-cmp-suggest-card-body { font-size: 12px; line-height: 1.5; margin: 0; color: var(--color-text-secondary, #404945); }
/* Family Home command-centre insurance section */
.cc-insurance { margin: 0 0 14px; padding: 0 14px; }
.cc-ia-h { font-size: 12px; font-weight: 500; color: #3C3489; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px; }
.cc-ia-card {
background: #fff; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
display: flex; align-items: center; gap: 11px; cursor: pointer;
text-decoration: none;
}
.cc-ia-renewal { border-color: rgba(217,119,6,0.25); }
.cc-ia-coverage_gap { border-color: rgba(60,52,137,0.25); }
.cc-ia-card-icon {
width: 32px; height: 32px; border-radius: 9px;
background: rgba(60,52,137,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-ia-renewal .cc-ia-card-icon { background: rgba(217,119,6,0.12); }
.cc-ia-renewal .cc-ia-card-icon i { color: #854F0B; }
.cc-ia-card-icon i { font-size: 16px; color: #3C3489; }
.cc-ia-card-meta { flex: 1; min-width: 0; }
.cc-ia-card-title { font-size: 13px; font-weight: 500; color: var(--color-text-primary, #1B1C1A); margin: 0; }
.cc-ia-card-sub { font-size: 11px; color: var(--color-text-tertiary, #707975); margin: 2px 0 0; }
.cc-ia-card-arrow { color: #BFC9C4; font-size: 16px; flex-shrink: 0; }
/* Policy card "View coverage analysis" CTA row */
.ins-policy-cta-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; margin: 10px -14px -14px;
border-top: 1px solid #F0EEEA;
background: rgba(var(--color-brand-rgb),0.04);
border-radius: 0 0 14px 14px;
font-size: 12px; font-weight: 500; color: var(--color-teal-900);
cursor: pointer;
}
.ins-policy-cta-row i:first-child { font-size: 14px; }
.ins-policy-cta-row:hover { background: rgba(var(--color-brand-rgb),0.07); }
/* ══════════════════════════════════════════════════════════════════════════
* BUILD fo — Single-Metric Trending sheet (F-FO-01 through F-FO-14)
* Mockup: design/mockups/arogya_sheet_comparison.html (misleading filename,
* but it IS the single-metric trending mockup)
* ══════════════════════════════════════════════════════════════════════════ */
/* Overlay & sheet shell */
.mt-overlay {
position: fixed; inset: 0; background: rgba(20,20,18,0.55);
z-index: 920; display: flex; align-items: flex-end; justify-content: center;
}
.mt-sheet {
background: #fff; width: 100%; max-width: 460px;
border-radius: 28px 28px 0 0; padding: 0 0 8px;
box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
max-height: 92vh; overflow: hidden;
display: flex; flex-direction: column;
}
@media (min-width: 768px) {
.mt-sheet { border-radius: 16px; margin-bottom: 16px; }
}
.mt-handle-row { display: flex; justify-content: center; padding: 10px 0 4px; }
.mt-handle { width: 36px; height: 4px; background: #D5D0C7; border-radius: 999px; }
.mt-head {
padding: 8px 20px 14px; display: flex; align-items: center; gap: 10px;
}
.mt-head h2 {
flex: 1; font-size: 17px; font-weight: 500;
color: var(--color-text-primary, #1B1C1A); line-height: 1.3; margin: 0;
}
.mt-sub {
display: block; font-size: 12px; color: var(--color-text-tertiary, #707975);
font-weight: 400; margin-top: 2px;
}
.mt-close {
width: 32px; height: 32px; border-radius: 50%; background: #F0EEEA;
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #707975; flex-shrink: 0;
}
.mt-close i { font-size: 16px; }
/* Range chips */
.mt-range-chips { display: flex; gap: 6px; padding: 0 20px 12px; }
.mt-range-chip {
font-size: 11px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--color-border-tertiary, #E2E8F0); background: #fff;
color: var(--color-text-primary, #1B1C1A); cursor: pointer;
font-weight: 500; font-family: inherit;
}
.mt-range-chip:hover { background: rgba(var(--color-brand-rgb),0.04); }
.mt-range-chip-active { background: var(--color-teal-900); color: #fff; border-color: var(--color-teal-900); }
/* Body (scrollable) */
.mt-body { padding: 0 20px 16px; overflow-y: auto; flex: 1; }
/* Chart card */
.mt-chart-card {
background: #FBF9F5; border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.mt-chart-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.mt-chart-stat .mt-stat-val-wrap { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.mt-stat-val { font-size: 28px; font-weight: 500; color: var(--color-teal-700); line-height: 1; }
.mt-stat-unit { font-size: 14px; color: var(--color-text-tertiary, #707975); }
.mt-stat-date { font-size: 11px; color: var(--color-text-tertiary, #707975); margin-top: 4px; }
.mt-chart-meta { text-align: right; }
.mt-trend-summary { font-size: 12px; color: var(--color-teal-700); font-weight: 500; }
.mt-span { font-size: 11px; color: var(--color-text-tertiary, #707975); margin-top: 2px; }
.mt-svg-wrap { width: 100%; }
.mt-svg { width: 100%; height: 140px; display: block; }
/* Section headers inside sheet body */
.mt-section { margin-bottom: 14px; }
.mt-sh {
font-size: 11px; font-weight: 500; color: var(--color-text-tertiary, #707975);
text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px;
}
/* All-readings table */
.mt-readings-list { display: flex; flex-direction: column; gap: 6px; }
.mt-reading-row {
display: grid;
grid-template-columns: 64px 70px 1fr 46px;
align-items: center; gap: 8px;
padding: 9px 11px; background: #fff;
border: 1px solid var(--color-border-tertiary, #E2E8F0);
border-radius: 10px;
}
.mt-reading-date { font-size: 11px; color: var(--color-text-tertiary, #707975); }
.mt-reading-val { font-size: 14px; font-weight: 500; }
.mt-reading-unit { font-size: 11px; font-weight: 400; color: var(--color-text-tertiary, #707975); }
.mt-reading-bar-wrap {
height: 6px; background: #F0EEEA; border-radius: 999px; overflow: hidden;
}
.mt-reading-bar { height: 100%; border-radius: 999px; transition: width 0.3s; }
.mt-reading-source { font-size: 10px; color: var(--color-text-quaternary, #9CA3AF); text-align: right; }
.mt-empty {
font-size: 12px; color: var(--color-text-tertiary, #707975);
font-style: italic; padding: 14px 6px; text-align: center;
}
/* Insight card */
.mt-insight-card {
background: rgba(60,52,137,0.06); border: 1px solid rgba(60,52,137,0.15);
border-radius: 12px; padding: 12px 14px;
display: flex; gap: 9px; align-items: flex-start;
}
.mt-insight-card > i { font-size: 16px; color: #3C3489; flex-shrink: 0; margin-top: 1px; }
.mt-insight { font-size: 12px; color: var(--color-text-primary, #1B1C1A); line-height: 1.55; margin: 0; }
.mt-insight strong { font-weight: 500; }
/* Clinical context (collapsible) */
.mt-clinical { background: #FBF9F5; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.mt-clinical summary {
font-size: 12px; color: var(--color-teal-900); font-weight: 500; cursor: pointer;
list-style: none; display: flex; align-items: center; gap: 7px;
padding: 4px 0;
}
.mt-clinical summary::-webkit-details-marker { display: none; }
.mt-clinical summary i { font-size: 13px; }
.mt-clinical-body { padding: 10px 0 4px; }
.mt-clinical-p { font-size: 12px; color: var(--color-text-secondary, #404945); line-height: 1.6; margin: 0 0 8px; }
.mt-clinical-india { background: #fff; padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--color-teal-900); }
.mt-clinical-doctor { background: rgba(217,119,6,0.06); padding: 8px 10px; border-radius: 8px; border-left: 3px solid #D97706; }
/* Footer */
.mt-footer {
display: flex; gap: 8px; padding: 12px 20px;
border-top: 1px solid #F0EEEA;
background: #fff;
}
.mt-btn {
flex: 1; padding: 10px 14px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.mt-btn i { font-size: 14px; }
.mt-btn-out { background: #fff; border: 1px solid var(--color-border-secondary, #C9C5BC); color: var(--color-text-primary, #1B1C1A); }
.mt-btn-out:hover { background: #FBF9F5; }
.mt-btn-pri { background: var(--color-teal-900); border: none; color: #fff; }
.mt-btn-pri:hover { background: #0a4942; }
/* ═══════════════════════════════════════════════════════════════════════════
Build gt — Conditions confirmation flow + lay-name chip styling
- Attention banner (.cond-attn-*)
- Pending review page (.cond-disclaimer, .cond-card, .cond-btn-*)
- Empty state (.cond-empty-*)
- Lay-name medical subtitle on series chips (.hub-pill-medical)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Attention banner (family-home + member-home summary tab) ── */
.cond-attn-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #FAEEDA;
border: 0.5px solid #EF9F27;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: background 0.15s ease, transform 0.05s ease;
}
.cond-attn-banner:hover { background: #F9E8C8; }
.cond-attn-banner:active { transform: scale(0.995); }
.cond-attn-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #EF9F27;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.cond-attn-icon i { font-size: 17px; }
.cond-attn-body { flex: 1; min-width: 0; }
.cond-attn-title {
font-size: 14px;
font-weight: 500;
color: #633806;
margin: 0;
line-height: 1.3;
}
.cond-attn-sub {
font-size: 12px;
color: #854F0B;
margin: 2px 0 0;
line-height: 1.4;
}
.cond-attn-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
background: #EF9F27;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
/* ── Pending review page canvas ── */
.cond-pending-canvas {
max-width: 680px;
margin: 0 auto;
padding: 16px 14px 80px;
}
/* ── Disclaimer header (the prominent "AI-generated, may be wrong" notice) ── */
.cond-disclaimer {
display: flex;
gap: 14px;
padding: 18px 18px;
background: #FFF8EC;
border: 0.5px solid #F4D89B;
border-left: 4px solid #EF9F27;
border-radius: 14px;
margin-bottom: 18px;
}
.cond-disclaimer-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #EF9F27;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.cond-disclaimer-icon i { font-size: 18px; }
.cond-disclaimer-body { flex: 1; min-width: 0; }
.cond-disclaimer-title {
font-size: 15px;
font-weight: 500;
color: #633806;
margin: 0 0 6px;
line-height: 1.35;
}
.cond-disclaimer-sub {
font-size: 13px;
color: #854F0B;
margin: 0;
line-height: 1.55;
}
/* ── Progress label ── */
.cond-progress {
padding: 0 4px 12px;
}
.cond-progress-label {
font-size: 12px;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
/* ── Card — one per pending series ── */
.cond-card {
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
padding: 18px 18px;
margin-bottom: 14px;
}
/* gv — head becomes a flex row so the certainty badge can sit top-right
without pushing the title around. .cond-card-head-text takes remaining
width; .cond-cert-badge is flex-shrink-0. */
.cond-card-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.cond-card-head-text { flex: 1 1 auto; min-width: 0; }
.cond-card-lay {
font-size: 18px;
font-weight: 500;
color: var(--color-text-primary);
margin: 0 0 2px;
line-height: 1.3;
}
.cond-card-medical {
font-size: 12px;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.4;
}
/* gv — certainty badge. Only suspected (amber) and history (grey) render;
confirmed is the unsurprising default and gets no badge to keep noise low. */
.cond-cert-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
border-radius: 11px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.cond-cert-suspected {
background: #FEF3C7;
color: #B45309;
}
.cond-cert-history {
background: #F1F5F9;
color: #475569;
}
/* gv — verbatim phrase the AI matched on. Italic frame ("Arogya saw …"),
regular-weight verbatim text so the eye lands on it; faint amber wash to
make it feel like a quote, not a body sentence. */
.cond-card-matched {
font-size: 12px;
color: var(--color-text-secondary);
font-style: italic;
margin: 8px 0 0;
line-height: 1.5;
}
.cond-card-matched-phrase {
font-style: normal;
color: var(--color-text-primary);
background: rgba(180, 83, 9, 0.08);
padding: 0 4px;
border-radius: 3px;
}
.cond-card-desc {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.55;
margin: 0 0 14px;
padding-bottom: 14px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
/* ── Source document block ── */
.cond-card-source { margin-bottom: 16px; }
.cond-card-source-lbl {
font-size: 11px;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 6px;
font-weight: 500;
}
.cond-card-source-row {
background: #F5F3EF;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
}
.cond-card-source-detail {
font-size: 11px;
color: var(--color-text-tertiary);
margin: 6px 0 0;
line-height: 1.4;
}
/* ── Action buttons ── */
.cond-card-actions {
display: flex;
gap: 8px;
}
.cond-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
transition: background 0.15s ease, transform 0.05s ease;
font-family: inherit;
}
.cond-btn i { font-size: 14px; }
.cond-btn:active { transform: scale(0.98); }
.cond-btn-confirm { background: #1D9E75; color: #fff; }
.cond-btn-confirm:hover { background: var(--color-teal-700); }
.cond-btn-reject {
background: #fff;
color: #A32D2D;
border: 0.5px solid #F09595;
}
.cond-btn-reject:hover { background: #FCEBEB; }
.cond-btn-snooze {
width: 100%;
margin-top: 8px;
padding: 9px 14px;
background: transparent;
color: var(--color-text-secondary);
border: none;
font-size: 12px;
cursor: pointer;
font-family: inherit;
border-radius: 8px;
}
.cond-btn-snooze:hover { background: #F5F3EF; }
/* ── Empty state ── */
.cond-empty {
text-align: center;
padding: 60px 24px;
}
.cond-empty-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-teal-50);
color: var(--color-teal-700);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.cond-empty-icon i { font-size: 26px; }
.cond-empty-title {
font-size: 16px;
font-weight: 500;
color: var(--color-text-primary);
margin: 0 0 6px;
}
.cond-empty-sub {
font-size: 13px;
color: var(--color-text-secondary);
margin: 0 0 20px;
line-height: 1.5;
}
.cond-empty-cta {
display: inline-block;
padding: 10px 18px;
background: var(--color-teal-900);
color: #fff;
border-radius: 10px;
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.cond-empty-cta:hover { background: #0a4942; }
/* ── Inline medical name inside lay-name chip ── */
.hub-pill-medical {
font-size: 10px;
opacity: 0.7;
font-weight: 400;
margin-left: 2px;
}
/* ── Mobile narrow-screen tweaks ── */
@media (max-width: 480px) {
.cond-attn-banner { padding: 12px 14px; gap: 10px; }
.cond-attn-cta { padding: 7px 10px; font-size: 11px; }
.cond-disclaimer { padding: 14px; gap: 12px; }
.cond-disclaimer-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.cond-disclaimer-icon i { font-size: 16px; }
.cond-card { padding: 16px; }
.cond-card-lay { font-size: 17px; }
.cond-card-actions { flex-direction: column; gap: 8px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Build gu — user-add condition flow
- hub_inline lens-card "+ Add" button + footer CTA
- conditions.html page header "+ Add condition" button + toast banner
- picker page (web/conditions/picker.html)
- confirm page (web/conditions/add_confirm.html)
═══════════════════════════════════════════════════════════════════════ */
/* ── Records hub inline: "+ Add" button on Health Series lens ── */
.hub-lens-card-wrap { display: block; }
.hub-lens-add-btn {
position: absolute;
top: 12px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--color-teal-900);
background: var(--color-teal-50);
border: 0.5px solid var(--color-teal-200);
padding: 6px 11px;
border-radius: 999px;
text-decoration: none;
min-height: 30px;
line-height: 1;
z-index: 2;
}
.hub-lens-add-btn:hover {
background: var(--color-teal-200);
border-color: #6FCAB0;
}
.hub-lens-add-btn i { font-size: 13px; }
/* "+ Add condition manually" footer CTA below all lens cards */
.hub-add-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: #FFF;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
text-decoration: none;
color: inherit;
margin-top: 4px;
flex-wrap: wrap;
}
.hub-add-cta:hover { background: #FAFAF8; }
.hub-add-cta-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #FFF;
background: var(--color-teal-700);
padding: 9px 16px;
border-radius: 8px;
white-space: nowrap;
}
.hub-add-cta-btn i { font-size: 15px; }
.hub-add-cta-hint {
font-size: 12px;
color: var(--color-text-tertiary);
flex: 1;
min-width: 180px;
line-height: 1.4;
}
/* "+ Add condition" button on the conditions list page header */
.gu-page-add-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
padding: 7px 13px;
background: var(--color-teal-700);
color: #FFF;
border-radius: 8px;
text-decoration: none;
min-height: 32px;
}
.gu-page-add-btn:hover { background: var(--color-teal-900); }
.gu-page-add-btn i { font-size: 14px; }
/* Toast banner shown after redirect-with-?added=… */
.gu-add-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(20px);
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-teal-900);
color: #FFF;
padding: 11px 18px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 6px 24px rgba(var(--color-brand-rgb), 0.35);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 9999;
}
.gu-add-toast i { font-size: 15px; color: var(--color-teal-200); }
.gu-add-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Picker page (web/conditions/picker.html) ─────────────────────────── */
.gu-picker-canvas {
display: flex;
justify-content: center;
padding: 24px 16px 48px;
background: #F0EEEA;
min-height: 100%;
}
.gu-picker {
width: 100%;
max-width: 720px;
background: #FFF;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
.gu-picker-head {
padding: 16px 20px 10px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.gu-picker-title {
font-size: 17px;
font-weight: 600;
color: var(--color-teal-900);
}
.gu-picker-sub {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 3px;
}
.gu-picker-search {
position: relative;
padding: 12px 20px 10px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.gu-picker-search i.ti-search {
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-tertiary);
font-size: 16px;
pointer-events: none;
}
.gu-picker-search input {
width: 100%;
height: 42px;
border: 1px solid var(--color-border-tertiary);
border-radius: 10px;
padding: 0 14px 0 38px;
font-size: 15px;
font-family: inherit;
background: #FAFAF8;
outline: none;
color: var(--color-text-primary);
}
.gu-picker-search input:focus {
border-color: var(--color-teal-700);
background: #FFF;
}
.gu-picker-hint {
font-size: 11.5px;
color: var(--color-text-tertiary);
margin-top: 5px;
padding-left: 2px;
}
.gu-picker-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 20px;
border-bottom: 0.5px solid var(--color-border-tertiary);
background: #FAFAF8;
}
.gu-cat-chip {
font-size: 13px;
padding: 5px 12px;
border-radius: 999px;
background: #FFF;
border: 0.5px solid var(--color-border-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
font-weight: 500;
min-height: 28px;
display: inline-flex;
align-items: center;
}
.gu-cat-chip:hover { background: #F0F9F4; border-color: var(--color-teal-200); }
.gu-cat-chip.on {
background: var(--color-teal-900);
color: #FFF;
border-color: var(--color-teal-900);
}
.gu-picker-body {
flex: 1;
overflow-y: auto;
max-height: 56vh;
padding: 8px 0;
}
.gu-grp-hdr {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-tertiary);
padding: 10px 20px 6px;
}
.gu-result {
display: grid;
grid-template-columns: 250px 1fr 18px;
gap: 14px;
align-items: flex-start;
padding: 12px 20px;
cursor: pointer;
border-left: 3px solid transparent;
text-decoration: none;
color: inherit;
transition: background 0.1s ease, border-left-color 0.1s ease;
}
.gu-result:hover {
background: #FAFAF8;
border-left-color: var(--color-teal-200);
}
.gu-result.kbd-active {
background: var(--color-teal-50);
border-left-color: var(--color-teal-700);
}
.gu-result-main { min-width: 0; }
.gu-result-lay {
font-size: 15.5px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.35;
}
.gu-result-lay mark {
background: #FFE8A8;
color: inherit;
padding: 0;
font-style: normal;
font-weight: 600;
}
.gu-result-med {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 2px;
line-height: 1.35;
}
.gu-result-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
flex-wrap: wrap;
}
.gu-result-icd {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 11.5px;
color: var(--color-text-tertiary);
background: #F0EEEA;
padding: 2px 7px;
border-radius: 3px;
}
.gu-result-cat {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: #534AB7;
background: #EEEDFE;
padding: 2px 8px;
border-radius: 3px;
}
.gu-result-desc {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.5;
padding-top: 2px;
}
.gu-result-chev {
align-self: center;
color: var(--color-text-tertiary);
font-size: 16px;
}
.gu-empty {
padding: 32px 20px;
text-align: center;
}
.gu-empty-icon {
font-size: 32px;
color: var(--color-text-quaternary);
margin-bottom: 10px;
}
.gu-empty-icon i { font-size: 32px; }
.gu-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.gu-empty-sub {
font-size: 13px;
color: var(--color-text-tertiary);
}
.gu-picker-foot {
padding: 11px 20px;
border-top: 0.5px solid var(--color-border-tertiary);
background: #FAFAF8;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: var(--color-text-tertiary);
flex-wrap: wrap;
}
.gu-foot-kbd-hint { white-space: nowrap; }
.kbd {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 11px;
background: #FFF;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 3px;
padding: 1px 6px;
color: var(--color-text-secondary);
}
/* ── Confirm page (web/conditions/add_confirm.html) ───────────────────── */
.gu-confirm-canvas {
display: flex;
justify-content: center;
padding: 24px 16px 48px;
background: #F0EEEA;
min-height: 100%;
}
.gu-confirm {
width: 100%;
max-width: 720px;
background: #FFF;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
.gu-confirm-head {
padding: 16px 20px 10px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.gu-confirm-title { font-size: 17px; font-weight: 600; color: var(--color-teal-900); }
.gu-confirm-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
.gu-confirm-body { padding: 18px 22px; }
.gu-confirm-card {
background: var(--color-teal-50);
border: 0.5px solid var(--color-teal-200);
border-radius: 10px;
padding: 13px 15px;
margin-bottom: 18px;
}
.gu-cc-lay-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.gu-cc-lay { font-size: 17px; font-weight: 600; color: var(--color-teal-900); }
.gu-cc-med { font-size: 13px; color: var(--color-text-secondary); font-style: italic; }
.gu-cc-icd {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 11.5px;
color: var(--color-text-tertiary);
background: #FFF;
padding: 2px 7px;
border-radius: 3px;
}
.gu-confirm-card .gu-cc-desc {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 7px;
line-height: 1.5;
}
.gu-already {
background: #FAEEDA;
border: 0.5px solid rgba(217, 119, 6, 0.3);
border-radius: 8px;
padding: 10px 13px;
margin-bottom: 14px;
font-size: 13px;
color: #854F0B;
display: flex;
gap: 9px;
align-items: flex-start;
line-height: 1.5;
}
.gu-already i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gu-already a {
color: #854F0B;
text-decoration: underline;
font-weight: 600;
}
.gu-field { margin-bottom: 14px; }
.gu-field-lbl {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.gu-opt {
font-size: 11px;
font-weight: 500;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gu-onset-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 10px;
}
.gu-onset-chip {
position: relative;
padding: 11px 12px;
border: 1px solid var(--color-border-tertiary);
border-radius: 10px;
background: #FFF;
cursor: pointer;
text-align: center;
min-height: 52px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
transition: all 0.15s;
}
.gu-onset-chip input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
.gu-onset-chip:hover {
border-color: var(--color-teal-700);
background: #F0F9F4;
}
.gu-onset-chip:has(input:checked) {
background: var(--color-teal-700);
color: #FFF;
border-color: var(--color-teal-700);
box-shadow: 0 2px 8px rgba(15, 110, 86, 0.25);
}
.gu-onset-chip-lbl { font-size: 14px; font-weight: 600; line-height: 1.2; }
.gu-onset-chip-sub { font-size: 11.5px; font-weight: 400; color: var(--color-text-tertiary); line-height: 1.2; }
.gu-onset-chip:has(input:checked) .gu-onset-chip-sub { color: rgba(255, 255, 255, 0.85); }
.gu-onset-year-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 16px;
flex-wrap: wrap;
}
.gu-onset-year-row input {
width: 100px;
height: 38px;
border: 1px solid var(--color-border-tertiary);
border-radius: 8px;
padding: 0 12px;
font-size: 14.5px;
font-family: inherit;
background: #FFF;
outline: none;
color: var(--color-text-primary);
}
.gu-onset-year-row input:focus { border-color: var(--color-teal-700); }
.gu-optional-hint {
font-size: 12px;
color: var(--color-text-tertiary);
font-style: italic;
}
.gu-compact-row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 4px;
}
.gu-compact-row .gu-field { margin-bottom: 0; }
.gu-compact-row select,
.gu-compact-row input[type="text"] {
width: 100%;
height: 38px;
border: 1px solid var(--color-border-tertiary);
border-radius: 8px;
padding: 0 12px;
font-size: 14px;
font-family: inherit;
background: #FFF;
outline: none;
color: var(--color-text-primary);
}
.gu-compact-row select { padding-right: 30px; }
.gu-compact-row select:focus,
.gu-compact-row input[type="text"]:focus { border-color: var(--color-teal-700); }
.gu-confirm-foot {
padding: 14px 22px;
border-top: 0.5px solid var(--color-border-tertiary);
background: #FAFAF8;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.gu-confirm-disclaimer {
font-size: 12px;
color: var(--color-text-tertiary);
line-height: 1.5;
max-width: 340px;
}
.gu-confirm-actions { display: flex; gap: 8px; }
.gu-btn {
font-size: 13.5px;
font-weight: 600;
padding: 9px 16px;
border-radius: 8px;
border: 0.5px solid transparent;
cursor: pointer;
font-family: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 38px;
}
.gu-btn-primary { background: var(--color-teal-700); color: #FFF; border-color: var(--color-teal-700); }
.gu-btn-primary:hover { background: var(--color-teal-900); border-color: var(--color-teal-900); }
.gu-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.gu-btn-ghost:hover { background: #F0EEEA; }
/* ── Mobile / narrow viewport tweaks for gu picker + confirm ── */
@media (max-width: 640px) {
.gu-picker, .gu-confirm { border-radius: 10px; }
.gu-picker-canvas, .gu-confirm-canvas { padding: 12px 8px 36px; }
.gu-result {
grid-template-columns: 1fr 16px;
gap: 10px;
padding: 12px 16px;
}
.gu-result-desc {
grid-column: 1 / -1;
padding-top: 4px;
}
.gu-onset-chips { grid-template-columns: repeat(2, 1fr); }
.gu-compact-row { grid-template-columns: 1fr; gap: 10px; }
.hub-add-cta-btn { width: 100%; justify-content: center; }
.gu-confirm-foot { flex-direction: column; align-items: stretch; }
.gu-confirm-actions { justify-content: flex-end; }
}
/* ──────────────────────────────────────────────────────────────────────────
Build gz — series detail page (/member/{id}/series/{series_id})
First-class home for a single tracked health condition.
────────────────────────────────────────────────────────────────────────── */
.sd-canvas { padding: 14px 14px 80px; max-width: 760px; margin: 0 auto; }
/* Breadcrumb */
.sd-crumb {
font-size: 12px;
color: var(--color-text-tertiary);
margin: 4px 0 16px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sd-crumb a { color: var(--color-teal-900); text-decoration: none; font-weight: 500; }
.sd-crumb a:hover { text-decoration: underline; }
.sd-crumb-sep { color: var(--color-text-quaternary); opacity: 0.7; }
.sd-crumb-current { color: var(--color-text-primary); font-weight: 500; }
/* Hero block */
.sd-hero {
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 14px;
padding: 18px;
margin-bottom: 14px;
display: flex; gap: 14px; align-items: flex-start;
}
.sd-hero-icon {
width: 44px; height: 44px; border-radius: 10px;
background: rgba(var(--color-brand-rgb),0.08);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sd-hero-icon .ti { font-size: 22px; color: var(--color-teal-900); }
.sd-hero-text { flex: 1; min-width: 0; }
.sd-hero-lay {
font-size: 22px; font-weight: 600; line-height: 1.2;
color: var(--color-text-primary);
margin: 0;
}
.sd-hero-med {
font-size: 13px; color: var(--color-text-secondary);
margin: 5px 0 0; line-height: 1.4;
}
.sd-hero-icd {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-tertiary);
background: #F8FAF9;
padding: 2px 6px;
border-radius: 4px;
margin-left: 4px;
}
.sd-hero-desc {
font-size: 13px; color: var(--color-text-secondary);
line-height: 1.55;
margin: 12px 0 0;
}
/* Status / certainty pills */
.sd-pill-row {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 12px;
}
.sd-pill {
display: inline-flex; align-items: center;
height: 22px; padding: 0 9px;
border-radius: 11px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
line-height: 1;
}
.sd-pill-active { background: #DCFCE7; color: #15803D; }
.sd-pill-monitoring { background: #FEF3C7; color: #B45309; }
.sd-pill-critical { background: #FEE2E2; color: #B91C1C; }
.sd-pill-closed { background: #F1F5F9; color: #475569; }
.sd-pill-suspected { background: #FEF3C7; color: #B45309; }
.sd-pill-history { background: #F1F5F9; color: #475569; }
/* Meta row (Since · key metric) */
.sd-meta-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 12px;
font-size: 12px;
color: var(--color-text-tertiary);
}
.sd-meta-lbl { color: var(--color-text-quaternary); }
.sd-meta-val { color: var(--color-text-primary); font-weight: 500; }
.sd-meta-sep { opacity: 0.5; }
.sd-meta-key {
display: inline-flex; align-items: baseline; gap: 4px;
color: var(--color-text-secondary);
}
.sd-meta-key-v { color: #B45309; font-weight: 600; font-size: 14px; }
.sd-meta-key-u { color: #B45309; font-size: 10px; opacity: 0.85; }
.sd-meta-key-name { color: var(--color-text-secondary); }
.sd-meta-key-age { color: var(--color-text-quaternary); font-size: 11px; }
/* Action row — Edit + ⋮ kebab only */
.sd-actions {
display: flex; gap: 8px; align-items: center;
margin: 0 0 18px;
position: relative;
}
.sd-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 7px 14px;
border-radius: 8px;
font-size: 13px; font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
background: transparent;
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-primary);
}
.sd-btn:hover { background: #F8FAF9; }
.sd-btn-ghost {
background: #fff;
color: var(--color-text-primary);
}
.sd-btn-icon {
width: 36px; padding: 0; justify-content: center;
}
.sd-kebab-menu {
position: absolute; right: 0; top: 44px;
background: #fff;
border: 1px solid var(--color-border-tertiary);
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
min-width: 200px;
z-index: 50;
overflow: hidden;
}
.sd-kebab-menu[hidden] { display: none; }
.sd-kebab-item {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 11px 14px;
border: none;
background: #fff;
color: var(--color-text-primary);
font-size: 13.5px;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.sd-kebab-item:hover { background: #F8FAF9; }
.sd-kebab-item .ti { font-size: 15px; color: var(--color-text-tertiary); }
.sd-kebab-item-danger { color: #B91C1C; }
.sd-kebab-item-danger .ti { color: #B91C1C; }
/* Section heading */
.sd-sec-h {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
font-weight: 600;
margin: 24px 0 10px;
}
/* Episode card (active) */
.sd-ep-card {
background: #F8FAF9;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
display: flex; align-items: center; gap: 12px;
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.sd-ep-card:hover { background: #F0F4F2; }
.sd-ep-card-closed { opacity: 0.75; }
.sd-ep-dot {
width: 9px; height: 9px; border-radius: 50%;
background: #D97706; flex-shrink: 0;
}
.sd-ep-dot-closed { background: #9CA3AF; }
.sd-ep-text { flex: 1; min-width: 0; }
.sd-ep-title {
font-size: 14px; font-weight: 500;
color: var(--color-text-primary);
margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-ep-meta {
font-size: 11px; color: var(--color-text-tertiary);
margin: 2px 0 0;
}
.sd-ep-chev .ti {
font-size: 16px; color: var(--color-text-quaternary);
}
/* Document row (unioned) */
.sd-doc-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.sd-doc-row:last-child { border-bottom: none; }
.sd-doc-icon {
width: 32px; height: 32px; border-radius: 8px;
background: #F8FAF9;
display: flex; align-items: center; justify-content: center;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.sd-doc-icon .ti { font-size: 16px; }
.sd-doc-text { flex: 1; min-width: 0; }
.sd-doc-title {
font-size: 13px; font-weight: 500;
color: var(--color-text-primary);
margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-doc-meta {
font-size: 11px; color: var(--color-text-tertiary);
margin: 2px 0 0;
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.sd-doc-tag {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
}
.sd-doc-tag-via { background: #F8FAF9; color: var(--color-text-secondary); }
.sd-doc-tag-direct { background: #FEF3C7; color: #B45309; }
.sd-doc-open {
color: var(--color-text-quaternary);
font-size: 14px;
padding: 6px;
text-decoration: none;
}
.sd-doc-open:hover { color: var(--color-teal-900); }
/* Show resolved (collapsed by default) */
.sd-resolved {
margin-top: 22px;
border-top: 0.5px solid var(--color-border-tertiary);
padding-top: 14px;
}
.sd-resolved summary {
color: var(--color-text-tertiary);
font-size: 12px;
cursor: pointer;
padding: 6px 0;
}
.sd-resolved summary:hover { color: var(--color-teal-900); }
.sd-resolved[open] summary { margin-bottom: 8px; color: var(--color-text-primary); }
.sd-resolved summary::-webkit-details-marker { display: none; }
.sd-empty {
text-align: center;
font-size: 13px;
color: var(--color-text-tertiary);
padding: 40px 20px;
line-height: 1.55;
}
/* ── Multi-metric trend card (used inside .sd-canvas) ──────────────── */
.mtc {
background: #fff;
border: 0.5px solid var(--color-border-tertiary);
border-radius: 10px;
padding: 14px 14px 10px;
margin-bottom: 12px;
}
.mtc-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 4px;
}
.mtc-name-block { flex: 1; min-width: 0; }
.mtc-name {
font-size: 12px;
color: var(--color-text-tertiary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.mtc-current {
margin: 4px 0 0;
display: inline-flex; align-items: baseline; gap: 4px;
}
.mtc-val { font-size: 22px; font-weight: 600; line-height: 1; }
.mtc-unit { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; }
.mtc-cta {
font-size: 12px; color: var(--color-teal-900);
text-decoration: none; font-weight: 500;
flex-shrink: 0; white-space: nowrap;
cursor: pointer;
}
.mtc-cta:hover { text-decoration: underline; }
.mtc-meta {
font-size: 11px; color: var(--color-text-tertiary);
margin: 0 0 10px;
}
.mtc-chart {
width: 100%; height: 120px;
display: block;
border-radius: 6px;
background: #FBFCFB;
}
/* gz — episode-detail "Also attached to this condition" enrichment */
.epd-also {
margin-top: 24px;
padding-top: 18px;
border-top: 0.5px solid var(--color-border-tertiary);
}
.epd-also-h {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
font-weight: 600;
margin: 0 0 4px;
}
.epd-also-sub {
font-size: 12px;
color: var(--color-text-tertiary);
margin: 0 0 12px;
font-style: italic;
}
.epd-also-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: var(--color-teal-900);
text-decoration: none; font-weight: 500;
margin-top: 10px;
}
.epd-also-link:hover { text-decoration: underline; }
/* ── Series-card title click → series detail (gz) ──────────────────── */
.series-card-title-link {
text-decoration: none;
color: inherit;
display: block;
flex: 1; min-width: 0;
}
.series-card-title-link:hover .series-card-lay,
.series-card-title-link:hover { color: var(--color-teal-900); }
/* gz mobile reflow */
@media (max-width: 640px) {
.sd-canvas { padding: 10px; }
.sd-hero { padding: 14px; }
.sd-hero-lay { font-size: 19px; }
.mtc-val { font-size: 20px; }
.mtc-chart { height: 100px; }
}
/* ─────────────────────────────────────────────────────────────────────────
Build hg — Chunk 3 / Sharing
Invite card on Family Home (and Settings → Family). Tap → /api/invites/create
then opens WhatsApp with the personalised message pre-typed.
───────────────────────────────────────────────────────────────────────── */
.hg-inv-card {
background: linear-gradient(135deg, #e8f5ef 0%, #ffffff 100%);
border: 1px dashed #5DCAA5;
border-radius: 12px;
padding: 16px 14px;
margin: 14px 0 4px;
text-align: center;
max-width: 380px;
}
.hg-inv-icon { font-size: 24px; margin-bottom: 6px; line-height: 1; }
.hg-inv-title { font-size: 14px; font-weight: 500; color: var(--color-teal-900); margin: 0 0 4px; }
.hg-inv-sub { font-size: 12px; color: var(--color-text-secondary, #5f5e5a); margin: 0 0 12px; line-height: 1.45; }
.hg-inv-wa {
width: 100%; min-height: 44px; padding: 11px 14px;
background: #25D366; color: #fff;
border: none; border-radius: 9px;
font-size: 14px; font-weight: 500;
display: flex; align-items: center; justify-content: center; gap: 7px;
cursor: pointer;
}
.hg-inv-wa:hover { background: #1FB855; }
.hg-inv-wa:disabled { cursor: default; }
.hg-inv-wa-ic { font-size: 15px; }
.hg-inv-more {
width: 100%; padding: 9px;
margin-top: 6px;
background: transparent; color: #1D9E75;
border: 0.5px solid var(--color-teal-200); border-radius: 9px;
font-size: 12px; font-weight: 500;
cursor: pointer;
}
.hg-inv-more:hover { background: #e8f5ef; }
/* ─────────────────────────────────────────────────────────────────────────
Build hh — Chunk 3 / Voice — modal + sheet primitives
Shared by voice_preprompt.html, voice_denied.html, and the Layer-5 voice
settings + voice-download sheets. Recording overlay (Layer 3) has its own
styles further below.
───────────────────────────────────────────────────────────────────────── */
.hh-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none;
}
.hh-modal.is-open { pointer-events: auto; }
.hh-modal[hidden] { display: none !important; }
.hh-modal-scrim {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.42);
opacity: 0;
transition: opacity 220ms ease;
}
.hh-modal.is-open .hh-modal-scrim { opacity: 1; }
.hh-sheet {
position: relative;
width: 100%; max-width: 460px;
background: #fff;
border-radius: 16px 16px 0 0;
padding: 22px 20px 18px;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
transform: translateY(100%);
transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.hh-modal.is-open .hh-sheet { transform: translateY(0); }
.hh-sheet-icon {
width: 56px; height: 56px; border-radius: 14px;
background: #e8f5ef; color: var(--color-teal-900);
display: flex; align-items: center; justify-content: center;
font-size: 26px;
margin: 0 auto 14px;
}
.hh-sheet-icon--muted { background: #f0eee6; color: #7a7770; opacity: 0.85; }
.hh-sheet-title {
font-size: 17px; font-weight: 500; text-align: center;
margin: 0 0 6px; color: #1a1a1a;
}
.hh-sheet-sub {
font-size: 15px; color: #5f5e5a; text-align: center;
line-height: 1.55; margin: 0 0 16px;
}
.hh-reasons {
list-style: none; padding: 12px 14px; margin: 0 0 18px;
background: #f7f5ee; border-radius: 9px;
}
.hh-reasons li {
display: flex; gap: 8px; padding: 4px 0;
font-size: 14px; color: #1a1a1a; line-height: 1.5;
}
.hh-reasons .ic { color: #1D9E75; font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
.hh-reasons strong { font-weight: 500; }
.hh-reasons .dim { color: #5f5e5a; }
.hh-cta-primary {
width: 100%; min-height: 44px; padding: 13px;
background: var(--color-teal-900); color: #fff;
border: none; border-radius: 11px;
font-size: 15px; font-weight: 500;
margin-bottom: 8px;
cursor: pointer;
}
.hh-cta-primary:hover { background: #062920; }
.hh-cta-primary:active { transform: scale(0.985); }
.hh-cta-secondary {
width: 100%; min-height: 44px; padding: 10px;
background: transparent; color: #5f5e5a;
border: none; font-size: 13px;
cursor: pointer;
}
.hh-cta-secondary:hover { color: #1a1a1a; }
.hh-tip {
background: #e8f5ef;
border: 0.5px solid var(--color-teal-200);
border-radius: 9px;
padding: 11px 13px;
font-size: 13px;
color: #5f5e5a;
line-height: 1.55;
margin-top: 8px;
}
.hh-tip strong { color: var(--color-teal-900); font-weight: 500; }
.hh-tip ol { margin: 6px 0 0; padding-left: 18px; }
.hh-tip li { margin-bottom: 2px; }
/* ─────────────────────────────────────────────────────────────────────────
Build hh — Chunk 3 / Voice — recording overlay
Full-screen teal overlay shown while the user holds the mic button.
Z-index above modal sheets so recording covers any open sheet.
───────────────────────────────────────────────────────────────────────── */
.hh-rec {
position: fixed; inset: 0; z-index: 1100;
display: flex; flex-direction: column; align-items: center;
padding: 60px 24px 30px;
color: #fff;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease;
}
.hh-rec.is-open { pointer-events: auto; opacity: 1; }
.hh-rec[hidden] { display: none !important; }
.hh-rec-bg {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, var(--color-teal-900) 0%, var(--color-teal-700) 100%);
}
.hh-rec-status {
font-size: 16px; font-weight: 500; opacity: 0.95;
margin-bottom: 8px;
display: flex; align-items: center; gap: 8px;
}
.hh-rec-pulse {
width: 9px; height: 9px; border-radius: 50%;
background: #C04A4A;
animation: hh-rec-pulse 1.2s infinite;
}
@keyframes hh-rec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.hh-rec-lang { font-size: 13px; opacity: 0.7; margin-bottom: 28px; }
.hh-rec-waveform {
display: flex; align-items: center; gap: 4px;
height: 80px; margin-bottom: 22px;
}
.hh-rec-bar {
width: 5px; background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
animation: hh-rec-wave 0.7s infinite ease-in-out;
}
.hh-rec-bar:nth-child(1) { height: 14px; animation-delay: 0.0s; }
.hh-rec-bar:nth-child(2) { height: 38px; animation-delay: 0.1s; }
.hh-rec-bar:nth-child(3) { height: 58px; animation-delay: 0.2s; }
.hh-rec-bar:nth-child(4) { height: 72px; animation-delay: 0.3s; }
.hh-rec-bar:nth-child(5) { height: 50px; animation-delay: 0.4s; }
.hh-rec-bar:nth-child(6) { height: 30px; animation-delay: 0.5s; }
.hh-rec-bar:nth-child(7) { height: 62px; animation-delay: 0.6s; }
.hh-rec-bar:nth-child(8) { height: 44px; animation-delay: 0.7s; }
.hh-rec-bar:nth-child(9) { height: 22px; animation-delay: 0.8s; }
@keyframes hh-rec-wave {
0%, 100% { transform: scaleY(0.35); }
50% { transform: scaleY(1); }
}
.hh-rec-live-text {
background: rgba(255, 255, 255, 0.10);
border: 0.5px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 12px 14px;
width: 100%; max-width: 460px;
min-height: 80px;
font-size: 16px; line-height: 1.55;
margin-bottom: auto;
}
.hh-rec-live-text .hh-rec-placeholder { opacity: 0.5; font-style: italic; }
.hh-rec-live-text .hh-rec-final { opacity: 1; }
.hh-rec-live-text .hh-rec-partial { opacity: 0.65; }
.hh-rec-mic-area {
margin-top: auto; text-align: center; padding-top: 14px;
}
.hh-rec-mic-big {
width: 76px; height: 76px; border-radius: 50%;
background: #fff; color: var(--color-teal-900);
display: inline-flex; align-items: center; justify-content: center;
font-size: 32px;
margin-bottom: 10px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15),
0 0 0 16px rgba(255, 255, 255, 0.07);
transition: transform 140ms ease;
}
.hh-rec.is-cancel-armed .hh-rec-mic-big {
background: #C04A4A; color: #fff;
transform: scale(0.92);
box-shadow: 0 0 0 8px rgba(192, 74, 74, 0.18),
0 0 0 16px rgba(192, 74, 74, 0.08);
}
.hh-rec-mic-hint { font-size: 13px; opacity: 0.92; }
.hh-rec-cancel-arm {
font-size: 12px; opacity: 0.65; margin-top: 6px;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.4);
transition: opacity 140ms ease;
}
.hh-rec.is-cancel-armed .hh-rec-cancel-arm {
opacity: 1; color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.8);
}
.hh-rec.is-cancel-armed .hh-rec-mic-hint { opacity: 0.55; }
/* Build hh3 — three-state overlay (prep / listening / review) */
.hh-rec-header { width: 100%; text-align: center; margin-bottom: 14px; }
.hh-rec-prep, .hh-rec-listening-foot, .hh-rec-review-foot { display: none; }
.hh-rec.state-prep .hh-rec-prep { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 28px 0 auto; }
.hh-rec.state-listening .hh-rec-waveform { display: flex; }
.hh-rec.state-listening .hh-rec-listening-foot { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; padding-top: 14px; }
.hh-rec.state-review .hh-rec-waveform { display: none; }
.hh-rec.state-review .hh-rec-listening-foot { display: none; }
.hh-rec.state-review .hh-rec-review-foot { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: auto; padding-top: 14px; }
/* Prep-only: hide waveform + listening-foot too. */
.hh-rec.state-prep .hh-rec-waveform { display: none; }
.hh-rec.state-prep .hh-rec-listening-foot { display: none; }
.hh-rec.state-prep .hh-rec-live-text { display: none; }
/* Spinner */
.hh-rec-spinner {
width: 56px; height: 56px;
border: 4px solid rgba(255,255,255,0.15);
border-top-color: #fff;
border-radius: 50%;
animation: hh-rec-spin 0.85s linear infinite;
}
@keyframes hh-rec-spin { to { transform: rotate(360deg); } }
.hh-rec-prep-hint { font-size: 14px; opacity: 0.85; text-align: center; max-width: 280px; line-height: 1.45; }
/* Listening foot: large mic visual + Stop button */
.hh-rec-mic-big-wrap { margin-bottom: 10px; }
.hh-rec-stop-btn {
min-width: 200px; min-height: 50px;
padding: 12px 28px;
background: #fff; color: var(--color-teal-900);
border: none; border-radius: 28px;
font-size: 16px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
margin-top: 14px;
}
.hh-rec-stop-btn:active { transform: scale(0.97); }
/* Review foot: Send / Re-record / Cancel */
.hh-rec-review-label { font-size: 13px; opacity: 0.85; text-align: center; margin: 0 0 4px; }
.hh-rec-review-row { display: flex; gap: 10px; width: 100%; }
.hh-rec-cancel-btn, .hh-rec-rerecord-btn, .hh-rec-send-btn {
min-height: 50px; padding: 12px 14px;
border: none; border-radius: 12px;
font-size: 15px; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.hh-rec-cancel-btn { background: rgba(255,255,255,0.10); color: #fff; flex: 0 0 90px; border: 0.5px solid rgba(255,255,255,0.25); }
.hh-rec-rerecord-btn { background: rgba(255,255,255,0.10); color: #fff; flex: 1; border: 0.5px solid rgba(255,255,255,0.25); }
.hh-rec-send-btn { background: #fff; color: var(--color-teal-900); flex: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.hh-rec-cancel-btn:active, .hh-rec-rerecord-btn:active, .hh-rec-send-btn:active { transform: scale(0.97); }
/* Bigger transcript text in review for readability. */
.hh-rec.state-review .hh-rec-live-text { font-size: 18px; padding: 16px 18px; min-height: 100px; }
/* Mic button — bumped to meet 44px touch target on home / member / chat
(per memory[typography_legibility]). Existing .mic-btn keeps its
templated look; this just enforces the minimum hit area. */
.mic-btn { min-width: 44px; min-height: 44px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mic-btn.is-recording { background: var(--color-teal-900); color: #E89B3E; border-color: var(--color-teal-900); }
/* Build hh fix-up: the pre-existing .member-mic-btn (home + member AI bars)
was too small to tap reliably and sat flush against .member-search-send.
Bump to 44px touch target + spacing + a clearer affordance so users on the
40-70 demographic (typography_legibility memory) can hit it without
accidentally tapping the send button. */
.member-mic-btn {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: #e8f5ef;
border: 0.5px solid var(--color-teal-200);
color: var(--color-teal-900);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 10px;
cursor: pointer;
font-size: 18px;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.member-mic-btn:active { background: var(--color-teal-900); color: #E89B3E; transform: scale(0.96); }
.member-mic-btn.is-recording { background: var(--color-teal-900); color: #E89B3E; border-color: var(--color-teal-900); }
.member-mic-btn i { font-size: 18px; }
/* Ensure the send button doesn't crowd the mic. */
.member-search-send { min-height: 44px; flex-shrink: 0; }
/* Layer 5 — voice settings sheet + voice-download sheet shared styles */
.hh-voice-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 240px; overflow-y: auto; }
.hh-voice-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 8px;
border-bottom: 0.5px solid #e5e3d8;
cursor: pointer;
min-height: 44px;
}
.hh-voice-row:last-child { border-bottom: none; }
.hh-voice-radio {
width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid #ddd9d0;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: border-color 120ms ease;
}
.hh-voice-row.is-picked .hh-voice-radio { border-color: #1D9E75; }
.hh-voice-row.is-picked .hh-voice-radio::after {
content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1D9E75;
}
.hh-voice-meta { flex: 1; min-width: 0; }
.hh-voice-name { display: block; font-size: 14px; font-weight: 500; color: #1a1a1a; line-height: 1.3; }
.hh-voice-lang { display: block; font-size: 11px; color: #888780; margin-top: 2px; }
.hh-voice-empty { padding: 18px 8px; font-size: 13px; color: #888780; text-align: center; }
.hh-speed { padding: 6px 0 4px; }
.hh-speed-label { font-size: 11px; color: #888780; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin: 0 0 8px; }
.hh-speed-row { display: flex; gap: 6px; background: #f7f5ee; border-radius: 11px; padding: 4px; }
.hh-speed-opt {
flex: 1; min-height: 36px; padding: 8px 6px;
background: transparent; color: #5f5e5a;
border: none; border-radius: 8px;
font-size: 13px; font-weight: 500;
cursor: pointer;
}
.hh-speed-opt.is-active { background: #fff; color: var(--color-teal-900); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.hh-dl-size {
background: #e8f5ef;
border: 0.5px solid var(--color-teal-200);
border-radius: 9px;
padding: 11px 13px;
display: flex; gap: 10px; align-items: center;
font-size: 13px;
margin-bottom: 16px;
}
.hh-dl-size-lab { color: #888780; flex: 1; font-size: 12px; }
.hh-dl-size-val { color: var(--color-teal-900); font-weight: 500; }
/* ═══ ig24.3 — chat multimodal composer + user-bubble image grid ═══════════
Scoped by unique class names so nothing else on the page is affected.
Matches ig24.1 mockup (docs/mockups/ig24_chat_multimodal/chat_multimodal.html).
*/
/* Attached-photo chip strip above the textarea. Horizontally scrollable. */
.chat-attach-strip {
display: flex;
gap: 6px;
padding: 8px 4px 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.chat-attach-strip::-webkit-scrollbar { display: none; }
.chat-attach-strip[hidden] { display: none; }
.chat-attach-chip {
position: relative;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 10px;
background: #DDD5C4;
overflow: hidden;
}
.chat-attach-chip img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chat-attach-rm {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: 0;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Inline error / warning banner above the textarea. */
.chat-attach-banner {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
margin: 4px 4px 0;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
}
.chat-attach-banner[hidden] { display: none; }
.chat-attach-banner.warn {
background: #FFF3E0;
color: #7A4A05;
border: 1px solid #F0C67B;
}
.chat-attach-banner.error {
background: #FCEDED;
color: #A32D2D;
border: 1px solid #E7A9A9;
}
.chat-attach-banner-ico { font-size: 16px; line-height: 1; }
.chat-attach-banner-body { flex: 1; }
.chat-attach-banner-title { font-weight: 600; font-size: 13px; }
.chat-attach-banner-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.chat-attach-banner-act {
background: none;
border: 0;
color: #185FA5;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
/* Inline image grid inside a user bubble. Layouts: 1 · 2 · 3 (hero+2) · 4. */
.chat-img-grid {
display: grid;
gap: 4px;
margin-bottom: 6px;
border-radius: 10px;
overflow: hidden;
max-width: 320px;
}
.chat-img-grid.g1 { grid-template-columns: 1fr; }
.chat-img-grid.g2 { grid-template-columns: 1fr 1fr; }
.chat-img-grid.g3 { grid-template-columns: 1fr 1fr; }
.chat-img-grid.g3 .im1 { grid-column: 1 / -1; }
.chat-img-grid.g4 { grid-template-columns: 1fr 1fr; }
.chat-img-tile {
position: relative;
background: #DDD5C4;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.chat-img-grid.g1 .chat-img-tile { aspect-ratio: 4 / 3; }
.chat-img-grid.g3 .chat-img-tile.im1 { aspect-ratio: 16 / 9; }
.chat-img-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chat-img-more {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Separate text container inside a bubble that may also hold an image grid.
Only added when there IS caption text; no extra whitespace on photo-only turns. */
.chat-bubble-txt { }
/* "Saved to Records → View" chip that follows a user bubble with a
successful Drive write. Amber-copy variant when the write failed. */
.chat-saved-chip {
align-self: flex-end;
font-size: 11px;
color: var(--color-text-tertiary, #888780);
margin: -6px 4px 8px;
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
.chat-saved-chip-txt { }
.chat-saved-chip-link {
color: #185FA5;
font-weight: 600;
text-decoration: none;
}
.chat-saved-chip-link:hover { text-decoration: underline; }
.chat-saved-chip-err .chat-saved-chip-txt { color: #7A4A05; }
/* =========================================================================
Interview Engine — question card (ie2)
Mockup: docs/mockups/interview_engine/foundational.html
Colours: --ie-teal primary; --ie-violet for sensitivity ≥2 cards.
========================================================================= */
:root {
--ie-teal: var(--color-teal-800);
--ie-teal-bg: #E6F0EC;
--ie-teal-line: #A8CFBF;
--ie-violet: #5B3B94;
--ie-violet-bg: #EFE9F9;
}
.qcard {
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
border-left: 4px solid var(--ie-teal);
padding: 14px 14px 12px;
margin: 0 0 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.qcard-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 4px;
}
.qcard-hdr .chapter {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ie-teal);
}
.qcard-hdr .prog-mini {
font-size: 11.5px;
color: #8A8780;
font-weight: 500;
}
/* K5 fix (12 Jul 2026) — 44px touch target (project convention for the
40-70 age range) even though the visible glyph is small; padding does
the work rather than font-size, so it doesn't look oversized next to
the % label it sits beside. */
.qcard-hdr .qcard-dismiss {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -12px -8px -12px 0;
background: none;
border: none;
font-size: 20px;
line-height: 1;
color: #8A8780;
cursor: pointer;
}
.qcard-hdr .qcard-dismiss:hover { color: #4a5664; }
.qcard .qbar {
height: 3px;
background: #E6E2D8;
border-radius: 2px;
overflow: hidden;
margin: 6px 0 12px;
}
.qcard .qbar-fill {
height: 100%;
background: var(--ie-teal);
border-radius: 2px;
}
.qcard .qprompt {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
margin: 2px 0 10px;
color: #1B1C1A;
}
/* ie30 · chip grid is now fluid — auto-fits to the card width and
grows vertically to accommodate long labels. Rigid 4-col grid was
overflowing on 380px viewports for multi-word chips like
"Painkillers (ibuprofen, aspirin)". */
.qcard .qchips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 6px;
margin: 6px 0 4px;
}
.qcard .qchips.two-col {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.qcard .qchip {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 10px;
border-radius: 10px;
background: #F7F5EF;
border: 0.5px solid rgba(0,0,0,0.14);
font-size: 14.5px;
font-weight: 600;
color: #1B1C1A;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
user-select: none;
/* Allow labels like "Painkillers (ibuprofen, aspirin)" to wrap onto
multiple lines inside the chip without spilling out. */
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.25;
text-align: center;
min-width: 0;
}
/* K7/K13 fix (12 Jul 2026) — this rule used to apply unconditionally, so on
iOS WKWebView (touch-only, no real cursor) a tap could leave a chip stuck
showing this "hover" colour with no way to un-hover (WebKit's well-known
sticky-tap-hover quirk on touch devices — a tap can trigger :hover with no
corresponding "pointer left" event to ever clear it). Reported as answer
chips appearing pre-selected on a fresh page load with no tap at all.
`hover: hover` is only true on devices with a real, continuous pointer
(mouse/trackpad) — gating the rule behind it means touch-only devices
never match :hover at all, eliminating the class of bug outright rather
than chasing the exact WebKit timing that produces it. Desktop/pointer
users are unaffected. */
@media (hover: hover) and (pointer: fine) {
.qcard .qchip:hover {
background: var(--ie-teal-bg);
border-color: var(--ie-teal);
color: var(--ie-teal);
}
}
.qcard .qchip.wide {
grid-column: 1 / -1;
font-weight: 500;
color: #5C5A56;
}
/* Stepper variant */
.qcard .stepper {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 12px 0 8px;
padding: 12px 0;
background: #F7F5EF;
border-radius: 12px;
}
.qcard .stepper .sbtn {
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 0.5px solid rgba(0,0,0,0.14);
font-size: 22px;
font-weight: 600;
color: var(--ie-teal);
cursor: pointer;
}
.qcard .stepper .sval {
font-size: 28px;
font-weight: 700;
min-width: 80px;
text-align: center;
}
.qcard .stepper .sunit {
font-size: 15px;
color: #5C5A56;
font-weight: 500;
margin-left: 4px;
}
/* Number input variant */
.qcard .qnum {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #F7F5EF;
border-radius: 10px;
margin: 8px 0 4px;
}
.qcard .qnum input {
flex: 1;
min-height: 44px;
border: 0.5px solid rgba(0,0,0,0.14);
border-radius: 8px;
padding: 8px 10px;
font-size: 17px;
background: #fff;
}
.qcard .qnum-unit {
font-size: 15px;
color: #5C5A56;
font-weight: 500;
}
/* Fuzzy date variant */
.qcard .fdate {
margin: 10px 0 8px;
background: #F7F5EF;
border-radius: 12px;
padding: 12px;
}
.qcard .fdate-label {
font-size: 12px;
color: #8A8780;
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.qcard .fdate-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.qcard .fdate-chip {
padding: 8px 12px;
border-radius: 8px;
background: #fff;
border: 0.5px solid rgba(0,0,0,0.14);
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: #5C5A56;
}
.qcard .fdate-chip.active {
background: var(--ie-teal);
color: #fff;
border-color: var(--ie-teal);
}
.qcard .fdate-year {
margin-top: 10px;
font-size: 14px;
color: #5C5A56;
}
.qcard .fdate-hint { margin-top: 4px; font-size: 12px; color: #8A8780; }
/* Text fallback */
.qcard .qtext textarea {
width: 100%;
min-height: 60px;
border: 0.5px solid rgba(0,0,0,0.14);
border-radius: 8px;
padding: 10px 12px;
font-size: 15px;
font-family: inherit;
background: #F7F5EF;
resize: vertical;
}
/* Footer — mic + skip */
.qcard .qfoot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 0.5px solid rgba(0,0,0,0.08);
}
/* ie39 · .qfoot .mic styles removed. Footer now has only Skip. */
.qcard .qfoot .qfoot-spacer { flex: 1; }
.qcard .qfoot .skip {
font-size: 13px;
color: #8A8780;
cursor: pointer;
font-weight: 500;
padding: 6px 12px;
min-height: 44px;
display: inline-flex;
align-items: center;
background: transparent;
border: 0;
border-radius: 8px;
font-family: inherit;
}
.qcard .qfoot .skip:hover { color: #1B1C1A; background: rgba(0,0,0,0.05); }
/* Sensitive variant — violet accents */
.qcard.sensitive { border-left-color: var(--ie-violet); }
.qcard.sensitive .qcard-hdr .chapter { color: var(--ie-violet); }
.qcard.sensitive .qbar-fill { background: var(--ie-violet); }
/* K7/K13 fix — same sticky-tap-hover reasoning as the base .qchip:hover
rule above; this is the sensitivity>=2 (violet) variant of the same bug. */
@media (hover: hover) and (pointer: fine) {
.qcard.sensitive .qchip:hover {
background: var(--ie-violet-bg);
border-color: var(--ie-violet);
color: var(--ie-violet);
}
}
/* ie39 · sensitive-variant mic tints removed with the mic button. */
.qcard .privacy-note {
font-size: 11.5px;
color: #8A8780;
margin-top: 6px;
padding: 6px 8px;
background: #F7F5EF;
border-radius: 6px;
line-height: 1.4;
}
.qcard.sensitive .privacy-note::before { content: "🔒 "; margin-right: 2px; }
/* Contextual variant (ie9) — brown accent for extraction-anchored questions */
.qcard.contextual {
border-left-color: #5C3A1E;
background: linear-gradient(180deg, #FBF7F1 0%, #FFFFFF 60%);
}
.qcard.contextual .qcard-hdr .chapter { color: #5C3A1E; }
.qcard.contextual .qbar-fill { background: #5C3A1E; }
.qcard.contextual .qchip:hover {
background: #F3E9DC;
border-color: #5C3A1E;
color: #5C3A1E;
}
/* ie39 · contextual-variant mic tints removed with the mic button. */
/* ═══════════════════════════════════════════════════════════════════
ie33 · Health History section on /member/{sid}?tab=profile
═══════════════════════════════════════════════════════════════════ */
.pv-card-sub {
font-size: 11px;
font-weight: 500;
color: #8A8780;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-left: 6px;
}
.pv-hf-cat { margin: 12px 0 4px; padding: 0; }
.pv-hf-cat:first-child { margin-top: 0; }
.pv-hf-cat-lbl {
font-size: 11px;
font-weight: 700;
color: #8A8780;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 0 6px;
}
.pv-hf-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 0;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
min-height: 44px;
}
.pv-hf-row:last-child { border-bottom: 0; }
.pv-hf-body { flex: 1; min-width: 0; }
.pv-hf-label {
font-size: 14.5px;
font-weight: 600;
color: #1B1C1A;
line-height: 1.3;
}
.pv-hf-detail {
font-size: 12.5px;
color: #5C5A56;
margin-top: 2px;
line-height: 1.4;
}
.pv-hf-priv, .pv-hf-hidden {
font-size: 12px;
margin-left: 4px;
opacity: 0.7;
}
/* ie38 · Source-file link under an extraction-derived fact.
Interview-derived facts get the small caption variant instead. */
.pv-hf-source {
display: inline-block;
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--ie-teal, var(--color-teal-800));
text-decoration: none;
letter-spacing: 0.02em;
}
.pv-hf-source:hover { text-decoration: underline; color: #0A6D5A; }
.pv-hf-source.pv-hf-source-caption {
color: #8A8780;
font-weight: 500;
font-style: italic;
font-size: 11px;
}
.pv-hf-source.pv-hf-source-caption:hover {
text-decoration: none; color: #8A8780;
}
.pv-hf-more {
background: none;
border: 0;
font-size: 18px;
color: #8A8780;
cursor: pointer;
padding: 4px 6px;
line-height: 1;
min-height: 36px;
min-width: 32px;
border-radius: 8px;
}
.pv-hf-more:hover { color: #1B1C1A; background: rgba(0,0,0,0.05); }
.pv-hf-menu {
position: absolute;
top: 40px;
right: 4px;
background: #fff;
border: 0.5px solid rgba(0,0,0,0.14);
border-radius: 10px;
padding: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,0.14);
z-index: 20;
min-width: 220px;
}
.pv-hf-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
font-size: 13px;
color: #1B1C1A;
cursor: pointer;
border-radius: 7px;
background: transparent;
border: 0;
width: 100%;
text-align: left;
font-family: inherit;
min-height: 40px;
}
.pv-hf-menu-item:hover { background: #F7F5EF; }
.pv-hf-menu-item.destructive { color: #A32D2D; }
.pv-hf-menu-sep {
height: 0.5px;
background: rgba(0,0,0,0.08);
margin: 4px 0;
}
.pv-hf-menu-note {
padding: 6px 12px 4px;
font-size: 11px;
color: #8A8780;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
Watching Indicator panel (ie32) — persistent per-member tracking
═══════════════════════════════════════════════════════════════════ */
.wi-panel {
padding: 0 4px;
margin: 0 0 16px;
}
.wi-panel-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px 8px;
}
.wi-panel-title {
font-size: 11.5px;
font-weight: 700;
color: var(--ie-teal, var(--color-teal-800));
text-transform: uppercase;
letter-spacing: 0.08em;
}
.wi-panel-tail {
font-size: 12px;
color: #8A8780;
text-decoration: none;
font-weight: 500;
}
.wi-panel-tail:hover { color: #1B1C1A; }
.wi-card {
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
margin: 0 4px 12px;
padding: 14px 14px 12px;
border-left: 4px solid var(--ie-teal, var(--color-teal-800));
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
position: relative;
}
.wi-card.wi-severity-watch { border-left-color: #F57C00; }
.wi-card.wi-severity-condition { border-left-color: #B45309; }
.wi-card.wi-severity-severe { border-left-color: #A32D2D; }
.wi-card.wi-retired {
opacity: 0.75;
border-left-color: #8A8780;
background: #FBFAF6;
}
.wi-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 6px;
}
.wi-hdr-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.wi-icon {
font-size: 20px;
line-height: 1;
width: 28px;
text-align: center;
flex-shrink: 0;
}
.wi-title {
font-size: 15px;
font-weight: 700;
color: #1B1C1A;
line-height: 1.25;
letter-spacing: -0.01em;
}
.wi-title small {
color: #8A8780;
font-weight: 500;
font-size: 11.5px;
display: block;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 1px;
}
.wi-more {
background: none;
border: 0;
font-size: 20px;
color: #8A8780;
cursor: pointer;
padding: 4px 6px;
line-height: 1;
min-height: 32px;
min-width: 32px;
flex-shrink: 0;
border-radius: 8px;
}
.wi-more:hover { color: #1B1C1A; background: rgba(0,0,0,0.05); }
.wi-why {
font-size: 12.5px;
color: #5C5A56;
margin: 6px 0 12px;
line-height: 1.5;
padding-bottom: 10px;
border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.wi-metric {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
margin: 0 0 4px;
}
.wi-val {
font-size: 24px;
font-weight: 800;
color: #1B1C1A;
letter-spacing: -0.02em;
line-height: 1;
}
.wi-val .wi-unit {
font-size: 14px;
font-weight: 500;
color: #5C5A56;
margin-left: 3px;
}
.wi-val-normal { color: #0F7A5A; }
.wi-val-watch { color: #7A4A05; }
.wi-val-condition { color: #B45309; }
.wi-val-severe { color: #A32D2D; }
.wi-lbl {
font-size: 11px;
font-weight: 600;
color: #8A8780;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 3px;
}
.wi-trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
background: #F1EEE7;
color: #5C5A56;
}
.wi-trend-empty {
background: transparent;
color: #8A8780;
font-size: 11.5px;
font-weight: 500;
}
.wi-target {
font-size: 11.5px;
color: #8A8780;
margin: -2px 0 8px;
}
.wi-medlist {
margin: 8px 0 12px;
font-size: 12.5px;
color: #1B1C1A;
}
.wi-medlist-lbl {
font-size: 10.5px;
font-weight: 700;
color: #8A8780;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.wi-med {
padding: 4px 0;
display: flex;
justify-content: space-between;
border-bottom: 0.5px dotted rgba(0,0,0,0.08);
}
.wi-med:last-child { border-bottom: 0; }
.wi-med-name { font-weight: 600; }
.wi-med-schedule { color: #8A8780; font-size: 11.5px; }
.wi-next {
background: var(--ie-teal-bg, #E6F0EC);
border: 0.5px solid rgba(168, 207, 191, 0.6);
padding: 9px 12px;
border-radius: 10px;
margin: 10px 0;
font-size: 13px;
line-height: 1.45;
color: var(--ie-teal, var(--color-teal-800));
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.wi-severity-severe .wi-next {
background: #F9E4E4;
border-color: #E4A4A4;
color: #A32D2D;
}
.wi-cal { font-size: 15px; }
.wi-lifestyle {
font-size: 12.5px;
color: #5C5A56;
margin: 8px 0 12px;
line-height: 1.55;
padding: 8px 10px;
background: #FCFBF7;
border-radius: 8px;
border-left: 2px solid rgba(0,0,0,0.14);
}
.wi-lifestyle-lbl {
font-size: 10.5px;
font-weight: 700;
color: #8A8780;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 3px;
display: block;
}
.wi-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
padding-top: 10px;
border-top: 0.5px solid rgba(0,0,0,0.08);
}
.wi-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
border: 0.5px solid rgba(168, 207, 191, 0.6);
background: var(--ie-teal-bg, #E6F0EC);
color: var(--ie-teal, var(--color-teal-800));
min-height: 36px;
text-decoration: none;
font-family: inherit;
}
.wi-action.primary {
background: var(--ie-teal, var(--color-teal-800));
color: #fff;
border-color: var(--ie-teal, var(--color-teal-800));
}
.wi-action.primary:hover { background: #0A6D5A; }
.wi-action:hover { background: #d4e5df; }
/* ⋯ menu sheet */
.wi-menu-sheet {
position: absolute;
top: 44px;
right: 14px;
background: #fff;
border: 0.5px solid rgba(0,0,0,0.14);
border-radius: 10px;
padding: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,0.14);
z-index: 20;
min-width: 220px;
}
.wi-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
font-size: 13px;
color: #1B1C1A;
cursor: pointer;
border-radius: 7px;
background: transparent;
border: 0;
width: 100%;
text-align: left;
font-family: inherit;
min-height: 40px;
}
.wi-menu-item:hover { background: #F7F5EF; }
.wi-menu-item.destructive { color: #A32D2D; }
.wi-menu-item .mi-icon { font-size: 15px; width: 20px; text-align: center; }
.wi-menu-sep {
height: 0.5px;
background: rgba(0,0,0,0.08);
margin: 4px 0;
}
.wi-menu-note {
padding: 6px 12px 4px;
font-size: 11px;
color: #8A8780;
line-height: 1.5;
}
/* ie39 · Listen (TTS) button styles removed. Web Speech Synthesis was
unreliable on Samsung Android; the header right slot now only carries
the progress percentage. */
.qcard-hdr .qcard-hdr-right {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Stepper Save button + tappable value display (ie17/18) */
.qcard .stepper .sval {
cursor: pointer;
border-radius: 6px;
padding: 2px 6px;
transition: background .12s;
}
.qcard .stepper .sval:hover,
.qcard .stepper .sval:focus {
background: rgba(0,0,0,0.05);
outline: none;
}
/* Shared Save button style — used by stepper / number / text / fuzzy_date (ie18) */
.qcard .ie-save {
display: block;
width: 100%;
margin: 10px 0 0;
padding: 12px 14px;
min-height: 48px;
border: 0;
border-radius: 10px;
background: var(--ie-teal);
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 3px 10px rgba(8,80,65,0.20);
}
.qcard .ie-save:hover { background: #0A6D5A; }
.qcard.contextual .ie-save { background: #5C3A1E; }
.qcard.contextual .ie-save:hover { background: #4a2f18; }
.qcard.sensitive .ie-save { background: var(--ie-violet); }
.qcard.sensitive .ie-save:hover { background: #4a2f7a; }
/* Bug D fix (12 Jul 2026) — the multi-select "Continue" button starts
disabled (nothing selected yet); .ie-save had no :disabled styling at
all before this, so it rendered fully "live"-looking (same solid
colour, same shadow) even though tapping it did nothing. */
.qcard .ie-save:disabled {
background: #C9C6BC;
color: #8A8780;
box-shadow: none;
cursor: default;
}
/* Bug D fix — real, explicit "selected" state for multi-select chips (touch
AND pointer devices both need this — unlike the K7/K13 :hover fix above,
this is driven by an actual class toggle on tap/click, not CSS :hover, so
it works correctly everywhere and never gets "stuck" like the hover bug
did). */
.qcard .qchips[data-multi-select="1"] .qchip.qchip-selected {
background: var(--ie-teal-bg);
border-color: var(--ie-teal);
color: var(--ie-teal);
font-weight: 600;
}
.qcard.sensitive .qchips[data-multi-select="1"] .qchip.qchip-selected {
background: var(--ie-violet-bg);
border-color: var(--ie-violet);
color: var(--ie-violet);
}
/* Fuzzy date inputs (ie18) */
.qcard .fdate-inputs {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.qcard .fdate-input-row {
flex: 1 1 90px;
display: flex;
flex-direction: column;
gap: 4px;
}
.qcard .fdate-input-row > span {
font-size: 11.5px;
font-weight: 700;
color: #8A8780;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.qcard .fdate-input-row input {
min-height: 44px;
padding: 8px 10px;
border: 0.5px solid rgba(0,0,0,0.14);
border-radius: 8px;
background: #fff;
font-size: 16px;
font-weight: 600;
}
.qcard .fdate-input-row[hidden] { display: none; }
/* ie39 · mic-listening pulse removed with the mic button. */
/* ie30 · skeleton card shown between question N and N+1 while the
server call is in flight. Kiran called out the pre-ie30 gray-out
as jarring; this replaces it with a pulsing loader that reads as
"your tap registered, next question loading". */
.qcard.qcard-skeleton {
padding: 14px 14px 20px;
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-left: 3px solid rgba(8, 80, 65, 0.35);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
animation: iv-skel-pulse 1.4s ease-in-out infinite;
}
.qcard.qcard-skeleton .qsk-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.qcard.qcard-skeleton .qsk-chip {
width: 130px; height: 12px;
background: linear-gradient(90deg, #E6E2D8 0%, #EFEBE1 50%, #E6E2D8 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: iv-skel-shimmer 1.4s ease-in-out infinite;
}
.qcard.qcard-skeleton .qsk-dot {
width: 32px; height: 12px;
background: #EFEBE1;
border-radius: 6px;
}
.qcard.qcard-skeleton .qsk-bar {
height: 3px;
background: #EFEBE1;
border-radius: 2px;
margin: 4px 0 14px;
overflow: hidden;
position: relative;
}
.qcard.qcard-skeleton .qsk-bar::before {
content: "";
position: absolute;
top: 0; left: -30%;
width: 30%; height: 100%;
background: var(--ie-teal, var(--color-teal-800));
border-radius: 2px;
animation: iv-skel-slide 1.2s ease-in-out infinite;
}
.qcard.qcard-skeleton .qsk-prompt-1,
.qcard.qcard-skeleton .qsk-prompt-2 {
height: 14px;
background: linear-gradient(90deg, #E6E2D8 0%, #EFEBE1 50%, #E6E2D8 100%);
background-size: 200% 100%;
border-radius: 4px;
margin-bottom: 8px;
animation: iv-skel-shimmer 1.4s ease-in-out infinite;
}
.qcard.qcard-skeleton .qsk-prompt-1 { width: 78%; }
.qcard.qcard-skeleton .qsk-prompt-2 { width: 52%; margin-bottom: 16px; }
.qcard.qcard-skeleton .qsk-loading {
font-size: 12px;
color: #8A8780;
text-align: center;
padding: 8px 0 4px;
font-weight: 500;
letter-spacing: 0.02em;
}
@keyframes iv-skel-pulse { 50% { opacity: 0.85; } }
@keyframes iv-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
@keyframes iv-skel-slide {
0% { left: -30%; }
100% { left: 100%; }
}
/* Answer-in-flight state + inline ack (ie16) */
.qcard.iv-busy { transition: opacity .15s ease; }
.qcard .qack {
margin-top: 10px;
padding: 8px 10px;
background: var(--ie-teal-bg);
color: var(--ie-teal);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
animation: iv-ack-fade 1.5s ease forwards;
}
@keyframes iv-ack-fade {
0% { opacity: 0; transform: translateY(-4px); }
15% { opacity: 1; transform: translateY(0); }
85% { opacity: 1; }
100% { opacity: 0; }
}
/* /home Interview Engine surface (ie15) */
.home-iv-panel .iv-about-chip {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ie-teal);
background: var(--ie-teal-bg);
padding: 3px 10px;
border-radius: 999px;
margin: 8px 0 4px;
}
.home-iv-panel .iv-feed-about {
font-size: 11.5px;
font-weight: 600;
color: var(--ie-teal);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.home-iv-panel .iv-feed-dismiss {
width: 28px; height: 28px;
border-radius: 50%;
border: 0;
background: transparent;
color: #8A8780;
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.home-iv-panel .iv-feed-dismiss:hover {
background: rgba(0,0,0,0.06);
color: #1B1C1A;
}
.home-iv-panel .home-iv-cards .qcard {
margin-bottom: 10px;
}
/* ie22 — LLM clarifier bubble. Violet accent to distinguish from bank
cards (which are teal / brown / violet-sensitive). */
.iv-clarifier {
position: relative;
background: #F7F5EF;
border: 0.5px solid rgba(0,0,0,0.14);
border-left: 3px solid var(--ie-violet);
border-radius: 12px;
padding: 12px 40px 12px 14px;
margin: 0 0 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.iv-clar-badge {
display: inline-block;
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ie-violet);
background: var(--ie-violet-bg);
padding: 2px 7px;
border-radius: 3px;
margin-bottom: 4px;
}
.iv-clar-text {
font-size: 14.5px;
color: #1B1C1A;
line-height: 1.4;
font-weight: 600;
margin-bottom: 8px;
}
.iv-clar-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.iv-clar-chip {
min-height: 40px;
padding: 8px 14px;
border: 0.5px solid rgba(0,0,0,0.14);
background: #fff;
border-radius: 8px;
font-size: 13.5px;
font-weight: 600;
color: #1B1C1A;
cursor: pointer;
font-family: inherit;
}
.iv-clar-chip:hover {
background: var(--ie-violet-bg);
border-color: var(--ie-violet);
color: var(--ie-violet);
}
.iv-clar-dismiss {
position: absolute;
top: 8px;
right: 8px;
width: 28px; height: 28px;
border: 0;
background: transparent;
color: #8A8780;
font-size: 18px;
cursor: pointer;
border-radius: 50%;
}
.iv-clar-dismiss:hover {
background: rgba(0,0,0,0.06);
color: #1B1C1A;
}
/* Chapter-complete banner (ie11) */
.iv-chapter-done {
background: linear-gradient(135deg, #0F7A5A 0%, #0A6D5A 100%);
color: #fff;
border-radius: 14px;
padding: 12px 14px;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 4px 14px rgba(15, 122, 90, 0.25);
}
.iv-cd-icon {
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
}
.iv-cd-body { flex: 1; min-width: 0; }
.iv-cd-title {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.iv-cd-sub {
font-size: 12.5px;
opacity: 0.9;
margin-top: 2px;
}
/* =========================================================================
Interview Engine — chat-mode panel (ie6)
Mounts at the top of the chat canvas when /ask?iv=1&sid= is entered.
========================================================================= */
.iv-chat-panel {
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 16px;
margin: 0 0 14px;
box-shadow: 0 6px 18px rgba(8,80,65,0.10);
overflow: hidden;
}
.iv-chat-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
background: linear-gradient(160deg,#F6FBF8 0%,#FFFFFF 100%);
}
.iv-chat-hdr-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--ie-teal-bg);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.iv-chat-hdr-body { flex: 1; min-width: 0; }
.iv-chat-hdr-title {
font-size: 15px; font-weight: 700; color: var(--ie-teal);
}
.iv-chat-hdr-sub {
font-size: 12.5px; color: #5C5A56; margin-top: 1px;
}
.iv-chat-body {
padding: 12px 14px 14px;
}
.iv-chat-body .qcard { margin-bottom: 0; } /* one card, no extra bottom gap */
.iv-chat-empty {
font-size: 14px;
color: #5C5A56;
padding: 20px 6px;
text-align: center;
}
/* =========================================================================
Interview Engine — completeness meter (ie7)
Mockup #3 (foundational.html). Hero band on member page; family board
directly below. Non-gamified, informational only.
========================================================================= */
.comp-hero {
background: linear-gradient(160deg, var(--ie-teal) 0%, #0A6D5A 100%);
color: #fff;
border-radius: 16px;
padding: 18px 16px 16px;
margin: 0 0 12px;
box-shadow: 0 6px 18px rgba(8,80,65,0.25);
}
.comp-hero .lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.75;
font-weight: 700;
}
.comp-hero .who {
font-size: 16px;
font-weight: 600;
margin-top: 2px;
opacity: 0.95;
}
.comp-hero .num {
font-size: 52px;
font-weight: 800;
line-height: 1;
margin-top: 8px;
letter-spacing: -0.03em;
}
.comp-hero .num small {
font-size: 20px;
font-weight: 600;
opacity: 0.85;
margin-left: 2px;
}
.comp-hero .desc {
font-size: 13px;
margin-top: 6px;
opacity: 0.9;
line-height: 1.4;
}
.comp-hero .dots {
display: flex;
gap: 5px;
margin-top: 14px;
}
.comp-hero .dot {
flex: 1;
height: 6px;
background: rgba(255,255,255,0.2);
border-radius: 3px;
}
.comp-hero .dot.filled { background: rgba(255,255,255,0.95); }
.comp-hero .dot.partial { background: rgba(255,255,255,0.60); }
.comp-family {
background: #fff;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
padding: 14px;
margin: 0 0 12px;
}
.comp-family .fam-hdr {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
}
.comp-family .fam-hdr .title {
font-size: 14px;
font-weight: 700;
color: #1B1C1A;
}
.comp-family .fam-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
/* ie25 — row is an now; keep the block layout, kill the link chrome. */
text-decoration: none;
color: inherit;
padding: 6px 8px;
margin-left: -8px;
margin-right: -8px;
border-radius: 8px;
min-height: 44px;
transition: background .12s;
}
.comp-family .fam-row:last-child { margin-bottom: 0; }
.comp-family a.fam-row:hover { background: rgba(0,0,0,0.04); }
.comp-family a.fam-row:active { background: rgba(0,0,0,0.07); }
.comp-family a.fam-row:focus-visible {
outline: 2px solid var(--ie-teal);
outline-offset: 2px;
}
.comp-family .fav {
width: 34px; height: 34px;
border-radius: 50%;
background: #DDD5C4;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #5C5A56;
flex-shrink: 0;
}
.comp-family .fbody { flex: 1; min-width: 0; }
.comp-family .fname {
font-size: 14px; font-weight: 600; color: #1B1C1A;
}
.comp-family .fname .relation {
font-weight: 400; color: #8A8780; font-size: 12px; margin-left: 4px;
}
.comp-family .fbar {
height: 5px;
background: #F0EDE4;
border-radius: 2.5px;
overflow: hidden;
margin-top: 5px;
}
.comp-family .fbar-fill {
height: 100%;
background: var(--ie-teal);
border-radius: 2.5px;
}
.comp-family .fbar-fill.low { background: #F57C00; }
.comp-family .fbar-fill.high { background: #0F7A5A; }
.comp-family .fpct {
font-size: 15px; font-weight: 700; color: #1B1C1A;
min-width: 44px; text-align: right;
}
.comp-family .fpct.low { color: #7A4A05; }
.comp-family .fpct.high { color: #0F7A5A; }
/* =========================================================================
Interview Engine — feed-effect cards (ie8)
Materialised from answers whose bank question declares feed_effects.
Teal accent stripe echoes the mockup's "new post-answer" cards.
========================================================================= */
.iv-feed {
margin: 0 0 12px;
}
.iv-feed-hdr {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 4px;
margin-bottom: 6px;
}
.iv-feed-lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8A8780;
}
.iv-feed-count {
font-size: 12px;
font-weight: 700;
color: var(--ie-teal);
}
.iv-feed-card {
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 12px;
border-left: 3px solid var(--ie-teal);
padding: 12px 14px;
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.iv-feed-card:last-child { margin-bottom: 0; }
.iv-feed-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--ie-teal-bg);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.iv-feed-body { flex: 1; min-width: 0; }
.iv-feed-title {
font-size: 14.5px;
font-weight: 600;
color: #1B1C1A;
line-height: 1.3;
}
.iv-feed-sub {
font-size: 12.5px;
color: #5C5A56;
margin-top: 2px;
line-height: 1.4;
}
/* ═════════════════════════════════════════════════════════════
ie34 · Chapter unlock nudge + dedicated chapter surface.
Amber card matches the mockup — appears once when an unlockable
chapter first meets its trigger. Dismisses to remove_dom.
═════════════════════════════════════════════════════════════ */
.chap-unlock {
background: linear-gradient(135deg, #FFF7E8 0%, #FEEEE4 100%);
border: 0.5px solid #F0C67B;
border-radius: 14px;
margin: 12px 16px 12px;
padding: 14px 16px 12px;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.chap-unlock::before {
content: "✨";
position: absolute;
top: 12px;
right: 12px;
font-size: 18px;
opacity: 0.7;
}
.chap-unlock-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #7A4A05;
background: #fff;
padding: 3px 8px;
border-radius: 4px;
border: 0.5px solid #F0C67B;
margin-bottom: 8px;
}
.chap-unlock-title {
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
color: #1B1C1A;
letter-spacing: -0.01em;
}
.chap-unlock-body {
margin: 0 0 12px;
font-size: 13.5px;
color: #5C5A56;
line-height: 1.5;
}
.chap-unlock-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chap-btn {
padding: 10px 16px;
font-size: 13.5px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
border: 0;
font-family: inherit;
min-height: 44px;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.chap-btn.primary {
background: var(--color-teal-800);
color: #fff;
}
.chap-btn.primary:hover {
background: #0A6D5A;
}
.chap-btn.subtle {
background: #fff;
color: #5C5A56;
border: 0.5px solid rgba(0, 0, 0, 0.14);
}
.chap-btn.subtle:hover {
color: #1B1C1A;
border-color: #8A8780;
}
/* Dedicated chapter surface at /member/{sid}/chapter/{cid} */
.chap-page {
max-width: 640px;
margin: 0 auto;
padding: 16px 12px 96px;
color: #1B1C1A;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
}
.chap-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 4px 14px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
margin-bottom: 14px;
}
.chap-back {
font-size: 22px;
color: var(--color-teal-800);
text-decoration: none;
padding: 4px 8px;
border-radius: 8px;
min-width: 32px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chap-back:hover { background: #E6F0EC; }
.chap-topbar-title { flex: 1; min-width: 0; }
.chap-topbar-member {
font-size: 13px;
color: #8A8780;
font-weight: 500;
}
.chap-topbar-crumb {
font-size: 17px;
font-weight: 700;
color: #1B1C1A;
margin-top: 1px;
}
.chap-topbar-prog {
font-size: 13px;
color: #5C5A56;
font-weight: 600;
white-space: nowrap;
}
.chap-intro {
background: #F7F5EF;
border-radius: 10px;
padding: 12px 14px;
font-size: 13.5px;
color: #5C5A56;
line-height: 1.55;
margin-bottom: 14px;
}
.chap-surface {
background: #fff;
border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
padding: 4px 14px 6px;
}
.chap-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
min-height: 60px;
text-decoration: none;
color: inherit;
}
.chap-item:last-child { border-bottom: 0; }
.chap-item:hover { background: rgba(0, 0, 0, 0.02); }
.chap-item-done { opacity: 0.85; }
.chap-check {
width: 28px;
height: 28px;
border-radius: 50%;
background: #E8F4EF;
color: #0F7A5A;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
border: 0.5px solid #A8CFBF;
}
.chap-check.pending {
background: #F7F5EF;
color: #8A8780;
border-color: rgba(0, 0, 0, 0.14);
}
.chap-item-body { flex: 1; min-width: 0; }
.chap-item-title {
font-size: 15px;
font-weight: 600;
color: #1B1C1A;
line-height: 1.35;
}
.chap-item-sub {
font-size: 12.5px;
color: #8A8780;
margin-top: 2px;
}
.chap-item-arrow {
color: #8A8780;
font-size: 18px;
padding: 0 4px;
}
.chap-complete-note {
text-align: center;
color: #0F7A5A;
font-size: 13.5px;
font-weight: 600;
padding: 16px;
background: #E8F4EF;
border-radius: 10px;
margin-top: 14px;
}
/* ═════════════════════════════════════════════════════════════
ie36 · Adolescents (teen) palette variant.
Applied when the interview card carries data-bank-id="adolescents_v1".
Sky-blue primary, softer gradient, larger touch targets.
═════════════════════════════════════════════════════════════ */
.qcard.teen {
border-left: 4px solid #4C8CD1;
background: linear-gradient(180deg, #F2F7FC 0%, #FFFFFF 40%);
}
.qcard.teen .qcard-hdr .chapter { color: #4C8CD1; }
.qcard.teen .qcard-hdr .prog-mini { color: #5C5A56; }
.qcard.teen .qprompt {
font-size: 16px;
font-weight: 600;
color: #1B1C1A;
}
.qcard.teen .qchip {
background: #fff;
border: 0.5px solid #B8D2EC;
color: #1B1C1A;
font-size: 14.5px;
min-height: 48px;
}
.qcard.teen .qchip:hover,
.qcard.teen .qchip:focus {
background: #E1EEFA;
border-color: #4C8CD1;
color: #4C8CD1;
}
.qcard.teen .qbar-fill { background: #4C8CD1; }
.teen-privacy-strip {
background: linear-gradient(90deg, #E1EEFA 0%, #F2F7FC 100%);
border: 0.5px solid #B8D2EC;
border-radius: 10px;
margin: 12px 16px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #4C8CD1;
line-height: 1.45;
}
.teen-privacy-strip .lock { font-size: 16px; }
.teen-privacy-strip strong { color: #4C8CD1; font-weight: 700; }
.teen-privacy-strip.extra {
background: linear-gradient(90deg, #D9E7F5 0%, #E1EEFA 100%);
border-color: #4C8CD1;
}
.teen-consent-modal {
background: #fff;
border: 0.5px solid #B8D2EC;
border-radius: 14px;
margin: 16px;
padding: 18px 16px 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.teen-consent-modal .badge {
font-size: 11.5px;
font-weight: 700;
color: #4C8CD1;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.teen-consent-modal h3 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.teen-consent-modal p {
font-size: 13px;
color: #5C5A56;
margin: 0 0 12px;
line-height: 1.55;
}
.teen-consent-modal .fine {
font-size: 12px;
color: #8A8780;
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
padding-top: 10px;
margin-bottom: 12px;
}
.teen-consent-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.teen-consent-actions .chap-btn.primary {
background: #4C8CD1;
}
.teen-consent-actions .chap-btn.primary:hover {
background: #3A75B6;
}
/* ─────────────────────────────────────────────────────────────────────
agt60 (Arc 11) — Pregnancy Package tab: Tracker | Records sub-tabstrip
+ content. Ported from the approved mockup
(docs/mockups/agt60_pregnancy_tab/index.html — interactive toggle rev).
───────────────────────────────────────────────────────────────────── */
/* Sub-tabstrip — same grammar as .tab-pill/.tab-seg above, deliberately
(sub-tabs must read exactly as clearly as the primary tabs). Track
color + thinner height keep the two nav levels visually separable.
Generic — every future Package tab reuses this shape. */
.subtab-row {
display: flex; gap: 1px;
margin: 4px 14px 12px;
padding: 2px;
background: var(--color-teal-50);
border-radius: 8px;
}
.subtab {
flex: 1; justify-content: center; position: relative;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 6px;
font-size: 13px; font-weight: 500; color: #8a93a0;
white-space: nowrap; text-decoration: none;
min-height: 36px;
}
/* Invisible hit-area extension — visual box stays slim (36px) but the
actual tap target meets the >=44px standard for this app's 40-70
age demographic. */
.subtab::before {
content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0;
}
.subtab.on {
background: #fff; color: #1f2a36;
box-shadow: rgba(0,0,0,0.08) 0px 2px 6px, rgba(0,0,0,0.04) 0px 1px 2px;
}
.subtab .count-badge {
font-size: 11px; font-weight: 700;
background: #ECE7DA; color: #8A8780;
padding: 1px 7px; border-radius: 999px;
}
.subtab.on .count-badge { background: var(--color-teal-50); color: var(--color-brand); }
/* Locked primary tab-pill (agt60 introduces the first locked tab) */
.tab-pill.locked { color: #B0ADA5; }
.tab-pill.locked .lock-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--color-amber-500); margin-left: 2px;
}
/* Header status strip */
.preg-hdr {
background: var(--color-background-primary);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
padding: 14px 16px;
margin: 4px 14px 14px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.preg-hdr-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.preg-hdr-weeks { font-size: 22px; font-weight: 700; color: var(--color-brand); }
.preg-hdr-label { font-size: 13px; color: var(--color-text-tertiary); font-weight: 500; }
.preg-hdr-edd { font-size: 14px; color: var(--color-text-secondary); }
.preg-hdr-edd b { color: var(--color-text-primary); font-weight: 600; }
.preg-progress-track {
margin-top: 10px; height: 6px; border-radius: 3px;
background: #ECE7DA; overflow: hidden;
}
.preg-progress-fill { height: 100%; background: var(--color-brand); border-radius: 3px; }
.preg-progress-caption {
margin-top: 5px; font-size: 11.5px; color: var(--color-text-tertiary);
display: flex; justify-content: space-between;
}
/* What's-next hero card */
.next-hero {
border-radius: 14px; padding: 14px 16px; margin: 0 14px 16px;
border-left: 4px solid var(--color-red-800);
background: var(--color-red-50);
}
.next-hero.due-now { border-left-color: var(--color-brand); background: var(--color-teal-50); }
.next-hero-label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
font-weight: 700; color: var(--color-red-800); margin-bottom: 4px;
}
.next-hero.due-now .next-hero-label { color: var(--color-brand); }
.next-hero-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 3px; }
.next-hero-why { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.5; }
.next-hero-source {
margin-top: 8px; font-size: 11.5px; color: var(--color-text-tertiary);
font-style: italic;
}
/* Trimester section header */
.phase-hd {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
font-weight: 700; color: var(--color-text-tertiary);
margin: 18px 18px 8px;
}
/* Milestone card — mirrors .wi-card exactly (severity border-left convention) */
.milestone-card {
background: var(--color-background-primary);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
margin: 0 14px 10px;
padding: 12px 14px;
border-left: 4px solid var(--color-text-tertiary);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.milestone-card.status-due-now { border-left-color: var(--color-brand); }
.milestone-card.status-overdue { border-left-color: var(--color-red-800); }
.milestone-card.status-upcoming { border-left-color: var(--color-text-tertiary); opacity: 0.85; }
.milestone-card.status-unknown { border-left-color: #B0ADA5; opacity: 0.7; }
.milestone-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.milestone-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.milestone-badge {
flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 9px;
border-radius: 999px; white-space: nowrap;
}
.milestone-badge.due-now { background: var(--color-teal-50); color: var(--color-brand); }
.milestone-badge.overdue { background: var(--color-red-50); color: var(--color-red-800); }
.milestone-badge.upcoming { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }
.milestone-badge.unknown { background: #ECE7DA; color: var(--color-text-tertiary); }
.milestone-window { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.milestone-source { font-size: 11px; color: #B0ADA5; margin-top: 6px; font-style: italic; }
.milestone-upload-cta {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 8px; font-size: 12.5px; font-weight: 600;
color: var(--color-brand); text-decoration: none;
padding: 6px 10px; border-radius: 999px;
background: var(--color-teal-50); border: 1px solid var(--color-teal-200);
min-height: 32px;
}
/* Records sub-tab */
.docs-hd {
display: flex; align-items: center; justify-content: space-between;
margin: 6px 18px 12px;
}
.docs-hd-title { font-size: 13.5px; color: var(--color-text-secondary); }
.docs-hd-title b { color: var(--color-text-primary); }
.docs-upload-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--color-brand); color: white;
padding: 8px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; text-decoration: none;
min-height: 36px; white-space: nowrap;
margin-left: 18px;
}
.doc-cat-label {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700; color: var(--color-text-tertiary); margin: 14px 18px 6px;
}
.doc-cat {
background: var(--color-background-primary); border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px; padding: 4px 12px 8px; margin: 0 14px 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.doc-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 4px; border-radius: 6px; text-decoration: none; color: inherit;
min-height: 44px; border-bottom: 1px dashed var(--color-border-tertiary);
}
.doc-row:last-child { border-bottom: none; }
.doc-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.doc-date { font-size: 11px; color: var(--color-text-tertiary);
font-family: ui-monospace, monospace; min-width: 58px; }
.doc-name { font-size: 14px; color: var(--color-text-primary); flex: 1; font-weight: 500; }
.doc-type-tag { font-size: 10.5px; color: var(--color-text-tertiary);
background: #ECE7DA; padding: 2px 7px; border-radius: 999px; margin-right: 4px; }
.doc-go { color: var(--color-brand); font-size: 14px; }
/* No-dates state */
.no-dates-card {
background: var(--color-background-primary);
border: 1px dashed var(--color-border-secondary);
border-radius: 14px; padding: 16px; text-align: center; margin: 4px 14px 16px;
}
.no-dates-card .glyph { font-size: 28px; margin-bottom: 8px; }
.no-dates-card h3 { font-size: 15px; margin: 0 0 6px; }
.no-dates-card p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.5; }
.no-dates-card button {
background: var(--color-brand); color: white; border: none;
padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
min-height: 44px;
}
/* agt67 — "Mark as expecting" declare card (Summary tab) */
.preg-declare-card { background:#fff; border:0.5px solid var(--color-border-tertiary); border-radius:12px; overflow:hidden; }
.preg-declare-summary { display:grid; grid-template-columns:36px 1fr 16px; gap:12px; align-items:center;
padding:12px 14px; cursor:pointer; list-style:none; }
.preg-declare-summary::-webkit-details-marker { display:none; }
.preg-declare-ic { width:36px; height:36px; border-radius:9px; background:#E1F1EC; display:grid; place-items:center; font-size:18px; }
.preg-declare-title { font-size:14.5px; font-weight:600; color:var(--color-text-primary); }
.preg-declare-sub { font-size:12.5px; color:var(--color-text-tertiary); margin-top:2px; }
.preg-declare-chev { color:var(--color-text-tertiary); font-size:14px; }
details[open] > .preg-declare-summary .preg-declare-chev { transform:rotate(180deg); }
.preg-declare-form { padding:2px 14px 16px; }
.preg-declare-lbl { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); margin-bottom:6px; }
.preg-declare-date { border:1px solid var(--color-border-secondary); border-radius:9px; padding:11px 12px; font-size:14px; min-height:44px; width:100%; box-sizing:border-box; font-family:inherit; }
.preg-declare-note { font-size:12px; color:var(--color-text-tertiary); line-height:1.45; margin:10px 0 14px; }
.preg-declare-btn { background:#0F6E5C; color:#fff; border:none; padding:12px 18px; border-radius:10px; font-size:14.5px; font-weight:600; min-height:48px; width:100%; font-family:inherit; cursor:pointer; }
/* agt67 — quiet "Update pregnancy status…" resolve control (Tracker) */
.preg-resolve-wrap { border-top:1px dashed var(--color-border-tertiary); margin:16px 14px 8px; padding-top:12px; }
.preg-resolve-summary { list-style:none; cursor:pointer; font-size:13px; color:var(--color-text-tertiary); padding:6px 2px; }
.preg-resolve-summary::-webkit-details-marker { display:none; }
.preg-resolve-form { padding:8px 2px 4px; }
.preg-resolve-note { font-size:12.5px; color:var(--color-text-tertiary); margin-bottom:12px; line-height:1.45; }
.preg-resolve-opt { display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start;
border:1px solid var(--color-border-secondary); border-radius:10px; padding:12px; margin-bottom:8px; cursor:pointer; }
.preg-resolve-opt span { font-size:13px; color:var(--color-text-secondary); line-height:1.35; }
.preg-resolve-opt b { color:var(--color-text-primary); font-weight:600; }
.preg-resolve-opt input { margin-top:3px; }
.preg-resolve-lbl { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); margin:10px 0 6px; }
.preg-resolve-date { border:1px solid var(--color-border-secondary); border-radius:9px; padding:11px 12px; font-size:14px; min-height:44px; width:100%; box-sizing:border-box; font-family:inherit; }
.preg-resolve-btn { background:#0F6E5C; color:#fff; border:none; padding:12px 18px; border-radius:10px; font-size:14.5px; font-weight:600; min-height:48px; width:100%; margin-top:12px; font-family:inherit; cursor:pointer; }
/* Locked / greyed state (closes PKG-009). The mockup centered this
overlay inside a fixed-height 880px phone frame; the real page scrolls
naturally (no frame), so centering against the full blurred-content
height would place the card far below the fold. Instead the card is
position:sticky so it settles just under the sub-tabstrip and stays
in view as the blurred content scrolls underneath it. */
.locked-wrap { position: relative; }
.locked-blur {
filter: blur(3px); opacity: 0.55; pointer-events: none; user-select: none;
}
.locked-overlay {
position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
padding: 20px; pointer-events: none;
}
.locked-card {
position: sticky; top: 90px; pointer-events: auto;
background: var(--color-background-primary); border-radius: 16px; padding: 22px 20px;
text-align: center; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
max-width: 300px;
}
.locked-card .lock-icon {
width: 48px; height: 48px; border-radius: 50%;
background: #ECE7DA; color: var(--color-text-tertiary);
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin: 0 auto 12px;
}
.locked-card h3 { font-size: 16px; margin: 0 0 8px; }
.locked-card p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 16px; line-height: 1.5; }
.locked-card .unlock-btn {
display: inline-block; background: var(--color-brand); color: white;
padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
text-decoration: none; min-height: 44px; line-height: 22px;
}
.locked-card .unlock-caption {
margin-top: 10px; font-size: 11.5px; color: #B0ADA5;
}
/* ─────────────────────────────────────────────────────────────────────
agt61 + agt62 (Arc 11) — medication safety alert, postpartum header
variant, loss-mode card. Copy on all three is deliberately
non-clinical: no drug mechanism, no due-date countdown in loss mode,
no instruction to stop or change anything — Kiran's direction, agt60
B-AGT60-02 follow-up.
───────────────────────────────────────────────────────────────────── */
.terato-alert {
border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
border-left: 4px solid var(--color-red-800); background: var(--color-red-50);
}
.terato-alert-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; }
.terato-alert-why { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 6px; }
.terato-alert-source { font-size: 11.5px; color: var(--color-text-tertiary); font-style: italic; }
.preg-hdr.postpartum .preg-hdr-weeks { color: #534AB7; }
.loss-card {
background: var(--color-background-primary); border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 16px; padding: 24px 20px; text-align: center; margin: 8px 0 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.loss-card .glyph { font-size: 26px; margin-bottom: 10px; opacity: 0.7; }
.loss-card h3 { font-size: 16px; margin: 0 0 8px; color: var(--color-text-primary); }
.loss-card p {
font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.6;
margin: 0; max-width: 40ch; margin-left: auto; margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
agt73 — Complete-your-profile card, Interview compact card, Profile-incomplete
chip, sidebar dot. Mockup: docs/mockups/agt73_profile_completion/index.html
Rules the design enforces: no raw counts, nothing shows 0% (5% floor lives
server-side), quiet amber signal wherever member appears, one clear go-btn.
═══════════════════════════════════════════════════════════════════════════ */
/* ---- Shared go-btn (used by both CP-card and IV-card CTAs) ---- */
.go-btn {
background: #0E5C4E; /* teal-deep — matches --color-brand-deep family */
color: #fff;
padding: 11px 18px;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 6px rgba(14, 92, 78, 0.25);
text-decoration: none;
cursor: pointer;
border: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.go-btn::after { content: "→"; font-size: 15px; }
.go-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(14, 92, 78, 0.32); }
.go-btn:active { transform: translateY(0); }
/* ---- CP-card (profile incomplete) ---- */
.cp-card {
background: #E1F1EC; /* teal-soft — calm, brand-aligned */
border: 1px solid #128A72; /* teal edge */
border-radius: 14px;
padding: 16px 16px 18px;
margin: 12px 16px 16px; /* fits the summary_tab horizontal padding */
}
.cp-card .cp-title {
font-family: var(--font-heading, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
font-size: 17px; font-weight: 500;
color: var(--color-text-primary, #20261F);
margin: 0 0 6px; line-height: 1.25; letter-spacing: -0.005em;
}
.cp-card .cp-body {
color: var(--color-text-secondary, #4C5348);
font-size: 13.5px; line-height: 1.5; margin: 0 0 14px;
}
.cp-card .cp-pips { display: flex; gap: 7px; align-items: center; margin: 0 0 16px; flex-wrap: wrap; }
.cp-card .cp-pips .pip {
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid #128A72;
background: transparent;
flex-shrink: 0;
}
.cp-card .cp-pips .pip.on {
background: #128A72;
border-color: #128A72;
box-shadow: 0 0 0 2px #E1F1EC inset;
}
/* ---- IV-card (profile complete — compact 4-section rollup) ---- */
.iv-card {
background: var(--color-background, #fff);
border: 1px solid var(--color-border, #E4DED0);
border-left: 3px solid #128A72;
border-radius: 14px;
padding: 16px 16px 18px;
margin: 12px 16px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.iv-card .iv-title {
font-family: var(--font-heading, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
font-size: 17px; font-weight: 500;
color: var(--color-text-primary, #20261F);
margin: 0 0 6px; line-height: 1.25; letter-spacing: -0.005em;
}
.iv-card .iv-body {
color: var(--color-text-secondary, #4C5348);
font-size: 13.5px; line-height: 1.5; margin: 0 0 16px;
}
.iv-card .iv-rows { display: flex; flex-direction: column; gap: 11px; margin: 0 0 17px; }
.iv-card .iv-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.iv-card .iv-row-label {
flex: 1; color: var(--color-text-primary, #20261F); font-weight: 500; line-height: 1.15;
}
.iv-card .iv-row-bar {
flex: 0 0 92px; height: 6px;
background: var(--color-border, #E4DED0);
border-radius: 100px; overflow: hidden;
}
.iv-card .iv-row-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, #128A72, #0E5C4E);
border-radius: 100px;
min-width: 4px; /* the 5% floor stays visible */
}
.iv-card .iv-row-pct {
flex: 0 0 34px; text-align: right;
color: #0E5C4E; font-weight: 700; font-size: 13px;
}
/* ---- Profile-incomplete chip (used on home cards) ---- */
.incomplete-chip {
display: inline-flex; align-items: center; gap: 5px;
background: #F5E5DE; /* amber-soft */
color: #B8563A; /* amber */
font-size: 10.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 100px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.incomplete-chip::before {
content: "";
width: 5px; height: 5px; border-radius: 50%;
background: #B8563A;
flex-shrink: 0;
}
/* ---- Sidebar member row: tiny amber dot next to name when incomplete ---- */
.ws-rail-incomplete-dot {
display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
background: #E28966; /* amber (dark sidebar friendly) */
margin-left: 6px;
vertical-align: middle;
box-shadow: 0 0 0 2px rgba(226, 137, 102, 0.25);
}
/* ---- Mobile refinements: CP-card and IV-card use a smaller side margin ---- */
@media (max-width: 768px) {
.cp-card, .iv-card { margin-left: 12px; margin-right: 12px; padding: 14px 14px 16px; }
.cp-card .cp-title, .iv-card .iv-title { font-size: 16px; }
.iv-card .iv-row-bar { flex-basis: 78px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ii1 — Desktop-only canvas cap.
The mobile-first single-column layout was stretching to the full width of
the .ws-content on a laptop (~1220px without the right rail), leaving
60–70% dead space per row. Cap the canvas to a comfortable reading width
and centre it so the surrounding grey feels intentional, not accidental.
Mobile (Capacitor WebView + narrow browser windows) is untouched — the
media query fires only at 900px+, and below that the .ws-canvas keeps
max-width: 100%.
Placement: this MUST come after the "horizontal scroll defenders" block
above (which sets .ws-canvas { max-width: 100% } unconditionally), or a
later rule with the same specificity wins and this cap is dead.
Pages that opt in to the right rail (Home, /queue, /member/{sid}, /ask,
/account, /account+settings/*) sit inside a ~960px slot below the cap;
the cap is inert there — this rule is a no-op on those pages.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
.ws-canvas {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(24px, 3vw, 40px);
padding-right: clamp(24px, 3vw, 40px);
box-sizing: border-box;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ii3 — Desktop 2-column layouts for rail-less list pages.
Doctors / Records rows are edge-to-edge full-canvas rows with info on
the left and a small accessory (chevron / date / launch icon) on the
far right — hundreds of px of dead middle space per row on desktop.
Turn the flow into a 2-column auto-fill grid at desktop widths.
Mobile stays single-column.
═══════════════════════════════════════════════════════════════════════════ */
.doctor-card-grid { display: block; }
@media (min-width: 900px) {
.doctor-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
align-items: start;
}
/* Each card fills its grid cell; the card's internal flex layout still
handles avatar + info + chevron. Remove the row-level margin the
card carried in the mobile stack so the grid gap is the single
spacing authority. */
.doctor-card-grid > .doctor-card { margin: 0; }
}
/* Records list — same pattern: 2-col grid at desktop widths. */
.fr-doc-grid { display: block; }
@media (min-width: 900px) {
.fr-doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
align-items: start;
}
.fr-doc-grid > .fr-doc-row { margin: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
agt90 (F-335) — Upload manifest in the chat window.
Four-stage progress card + the plain-language reading bubble.
Type scale follows the 40-70 audience rule: 15px body, 13px captions,
44px minimum tap targets.
═══════════════════════════════════════════════════════════════════════════ */
.up-manifest {
align-self: flex-start;
width: 100%;
max-width: 560px;
background: #fff;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px;
border-bottom-left-radius: 4px;
overflow: hidden;
margin: 6px 0;
}
.up-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; min-height: 48px; }
.up-ic {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
background: #E9E6DE; color: #8A8780;
display: flex; align-items: center; justify-content: center;
font-size: 15px; margin-top: 1px;
}
.up-ic.is-ok { background: #E8F4EF; color: #0F7A5A; }
.up-ic.is-bad { background: #FCEDED; color: #A32D2D; }
.up-ic.is-warn { background: #FFF3E0; color: #7A4A05; }
.up-ic.is-info { background: #F0EAF9; color: #5B3E8E; }
.up-main { flex: 1; min-width: 0; }
.up-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: #1B1C1A; }
.up-name.is-pending { color: #8A8780; font-weight: 500; }
.up-meta { font-size: 13px; color: #5C5A56; margin-top: 2px; line-height: 1.4; }
/* Four-stage pip bar. One segment per stage: Saved · Checked · Read · Filed. */
.up-pips { display: flex; gap: 3px; margin-top: 7px; align-items: center; }
.up-pips i { height: 4px; flex: 1; border-radius: 2px; background: #E9E6DE; display: block; }
.up-pips i.done { background: #1D9E75; }
.up-pips i.live { background: #1D9E75; opacity: 0.45; animation: upPulse 1.4s ease-in-out infinite; }
.up-pips i.bad { background: #A32D2D; }
.up-pips i.hold { background: #F57C00; }
@keyframes upPulse { 0%,100% { opacity: 0.30 } 50% { opacity: 0.70 } }
.up-stagetxt { font-size: 13px; color: #5C5A56; margin-top: 6px; line-height: 1.4; }
.up-stagetxt b { color: #1B1C1A; font-weight: 600; }
.up-tick { color: #0F7A5A; font-weight: 700; }
.up-act {
display: inline-block; border: 1px solid rgba(0,0,0,0.14); background: #fff;
color: #1B1C1A; border-radius: 8px; padding: 11px 14px;
font-size: 13px; font-weight: 650; margin-top: 9px; margin-right: 6px;
min-height: 44px; line-height: 22px; cursor: pointer; text-decoration: none;
}
.up-act.is-danger { border-color: #E7A9A9; color: #A32D2D; }
.up-act.is-go { border-color: #1D9E75; background: #1D9E75; color: #fff; }
/* The reading — agt89's lay_summary rendered as its own card. */
.up-reading {
align-self: flex-start; width: 100%; max-width: 560px;
background: #fff; border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px; border-bottom-left-radius: 4px;
padding: 13px; margin: 6px 0;
}
.up-reading.is-flagged { border-color: #F0C67B; }
.up-rd-head { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; }
.up-rd-ic {
width: 32px; height: 32px; border-radius: 8px; background: #E6F2ED; color: #0F4C42;
display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.up-rd-t { font-size: 15px; font-weight: 650; line-height: 1.3; color: #1B1C1A; }
.up-rd-s { font-size: 13px; color: #5C5A56; margin-top: 1px; }
.up-rd-body { font-size: 15px; line-height: 1.55; color: #1B1C1A; }
.up-rd-foot {
margin-top: 11px; padding-top: 10px; border-top: 0.5px solid rgba(0,0,0,0.08);
display: flex; gap: 16px; flex-wrap: wrap;
}
.up-rd-foot a {
color: #185FA5; font-size: 13px; font-weight: 600; text-decoration: none;
min-height: 44px; display: inline-flex; align-items: center;
}
/* agt95 — in-chat "Who is this for?" attribution picker. The chat asks who a
document belongs to when it can't tell, instead of bouncing the question to
the home feed. ≥44px tap targets for the 40–70 audience. */
.ub-attr {
align-self: flex-start; width: 100%; max-width: 560px;
background: #fff; border: 1px solid var(--amber-line, #F0C67B);
border-radius: 14px; border-bottom-left-radius: 4px;
padding: 13px; margin: 6px 0;
}
.ub-attr.is-done { border-color: rgba(0,0,0,0.08); }
.ub-attr-q { font-size: 15px; font-weight: 650; line-height: 1.35; color: #1B1C1A; }
.ub-attr-hint { font-size: 13px; color: #5C5A56; margin-top: 4px; }
.ub-attr-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ub-attr-opt {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 22px;
padding: 8px 14px 8px 8px; min-height: 44px; cursor: pointer;
font-size: 15px; font-weight: 600; color: #1B1C1A;
}
.ub-attr-opt:active { background: #E9E6DE; }
.ub-attr-av {
width: 28px; height: 28px; border-radius: 50%;
background: #E6F2ED; color: #0F4C42;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.ub-attr-nm { padding-right: 4px; }
/* ═══════════════════════════════════════════════════════════════════════════
agt96 — the document blob. One self-contained card per document: its reading
and whatever it needs (attribution, a decision) live together. Replaces the
split up-manifest / up-reading / ub-attr cards. ≥44px tap targets (40–70 yr).
═══════════════════════════════════════════════════════════════════════════ */
.doc-blob {
align-self: flex-start; width: 100%; max-width: 560px;
background: #fff; border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 14px; border-bottom-left-radius: 4px; overflow: hidden; margin: 6px 0;
}
.doc-blob.is-warn { border-color: #F0C67B; }
.doc-blob.is-bad { border-color: #E7A9A9; }
.db-h { display: flex; gap: 10px; align-items: center; padding: 12px 13px 9px; }
.db-ic { width: 32px; height: 32px; border-radius: 8px; background: #E6F2ED; color: #0F4C42;
display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.db-ic.is-bad { background: #FCEDED; color: #A32D2D; }
.db-ic.is-warn { background: #FFF3E0; color: #7A4A05; }
.db-ic.is-info { background: #F0EAF9; color: #5B3E8E; }
.db-ic.is-ok { background: #E8F4EF; color: #0F7A5A; }
.db-t { font-size: 15px; font-weight: 650; line-height: 1.25; color: #1B1C1A; }
.db-s { font-size: 13px; color: #5C5A56; margin-top: 1px; }
.db-body { font-size: 15px; line-height: 1.5; padding: 0 13px 11px; color: #1B1C1A; }
.db-open { padding: 0 13px 11px; }
.db-open a { color: #185FA5; font-size: 13px; font-weight: 600; text-decoration: none;
min-height: 40px; display: inline-flex; align-items: center; margin-right: 14px; }
/* the action zone — the blob's footer, where the question/answer lives */
.db-zone { border-top: 0.5px solid rgba(0,0,0,0.08); padding: 11px 13px; background: #FCFBF8; }
.db-zone.is-warm { background: #FFF3E0; }
.db-zone.is-done { background: #E8F4EF; }
.db-q { font-size: 14px; font-weight: 650; color: #1B1C1A; line-height: 1.3; }
.db-qsub { font-size: 12.5px; color: #5C5A56; margin-top: 2px; }
.db-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.db-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff;
border: 1px solid rgba(0,0,0,0.14); border-radius: 20px; padding: 6px 13px 6px 6px;
min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; color: #1B1C1A; }
.db-chip:active { background: #E9E6DE; }
.db-chip .av { width: 26px; height: 26px; border-radius: 50%; background: #E6F2ED; color: #0F4C42;
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.db-chip.add { color: #185FA5; padding-left: 13px; }
.db-chip.sel { border-color: #1D9E75; background: #E8F4EF; }
.db-btns { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.db-b { border: 1px solid rgba(0,0,0,0.14); background: #fff; border-radius: 9px;
padding: 10px 14px; font-size: 13.5px; font-weight: 650; min-height: 44px; cursor: pointer; color: #1B1C1A; }
.db-b.pri { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.db-b.danger { border-color: #E7A9A9; color: #A32D2D; }
.db-b.go { border-color: #185FA5; color: #185FA5; }
.db-filed { font-size: 14px; font-weight: 650; color: #0F7A5A; display: flex; align-items: center; gap: 6px; }
.db-filed .chg { margin-left: auto; color: #185FA5; font-weight: 600; font-size: 13px; cursor: pointer;
min-height: 40px; display: inline-flex; align-items: center; }
/* agt99 — inline date/type fix in the blob header */
.db-fix { color: #185FA5; font-weight: 600; font-size: 12px; cursor: pointer; margin-left: 6px; }
.db-fixrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.db-fixin { border: 1px solid rgba(0,0,0,0.16); border-radius: 8px; padding: 7px 9px;
font-size: 13px; min-height: 38px; background: #fff; color: #1B1C1A; }
.db-fixin[type="text"] { flex: 1; min-width: 120px; }
/* agt100 — opt-in "Compare these together" chip under the batch manifest. */
.ub-compare { margin: 6px 0 10px 46px; }
.ub-cmpbtn {
display: inline-flex; align-items: center; gap: 7px;
min-height: 44px; padding: 9px 16px;
border: 1px solid rgba(24,95,165,0.35); border-radius: 22px;
background: #F1F6FC; color: #185FA5;
font-size: 14px; font-weight: 600; cursor: pointer;
}
.ub-cmpbtn:hover { background: #E4EFFB; }
.ub-cmpbtn:disabled { opacity: 0.75; cursor: default; }
.ub-cmpbtn .spin {
width: 14px; height: 14px; border-width: 2px; display: inline-block;
}
/* agt102 — "Not one document?" split affordance under a grouped reading. */
.db-grouped { font-size: 13px; color: #5C5F58; margin: 6px 0 2px; }
.db-split { color: #185FA5; font-weight: 600; cursor: pointer; }
.db-split:hover { text-decoration: underline; }