/* HEALTH-02 / HEALTH-06 web screens (D-0156, D-0175). Loaded last on workspace.html and index.html. Reference: Figma ipLCG99s1wmtVyNtTqxrXF, page 3270:306 golden frames (Desktop 02 Today 3286:7393, 03 Today Dark 3286:7756, 01 Roster 3286:7036, 07 Clients 3286:8882, 08 Worker profile 3286:9067) and the components on page 3270:303. Values come only from the HEALTH-01 variables in design-system.css (Dawnby Light / Dawnby Dark, rem type, Larger Text). Text colours stay Dawnby Light (label/secondary #65667a), never the Apple default greys the desktop frames are bound to. Shared web components (reuse these in later batches): 1. hw-shell Liquid Glass sidebar = Dawnby/Desktop Sidebar 3282:2339 (instance 3282:2860) 2. hw-toolbar breadcrumb + glass buttons = Toolbar 3282:2990 (search 3282:2992 not built: no search feature exists) 3. hw-title Large Title + eyebrow = Desktop Large Title 3282:3003 4. hw-card inset grouped card = "inset grouped" lists, radius 18, padding 20, no shadow 5. hw-segmented segmented control = Dawnby/Desktop Segment (Segmented · Lifecycle 3282:6454) 6. hw-button filled pill 50 / capsule 44 (48 hit) = Button · Add client 3282:6450, Button · Filters 3282:6458 7. hw-status status words with a glyph = "Status colours · one meaning everywhere" (never colour alone) 8. hw-row list row, avatar 40, chevron = Row · June Abernathy 3282:6470 9. hw-tag glass-pill tag = "Includes sample entries" 3285:3851 The shell (1-2) applies to every workspace view; 3-9 apply only inside #main[data-health-view] (today, roster, clients, worker-profile). HEALTH-06 opts People & care and Team into those same roles through healthView(). HEALTH-08 opts the family home and My scheduled care into family-home and family-care. */ /* ---------- Dark mode bridge (D-0069, opt-in through HEALTH-01's data-dawnby-theme) ---------- The older stylesheets read --ink/--surface/--dawnby-ink... which HEALTH-01 left light. Re-point them to the Health roles on the app surface when dark is on, so the shell and the four views follow Dawnby Dark. */ :root[data-dawnby-theme="dark"] body[data-dawnby-surface="app"]{ --ink:var(--dawnby-label-primary);--text:var(--dawnby-label-primary);--muted:var(--dawnby-label-secondary); --brand:var(--dawnby-iris);--brand-soft:var(--dawnby-iris-soft);--paper:var(--dawnby-bg-grouped);--surface:var(--dawnby-bg-grouped-secondary); --line:var(--dawnby-separator);--green:var(--dawnby-status-success);--amber:var(--dawnby-status-warning);--red:var(--dawnby-danger-action); --dawnby-ink:var(--dawnby-label-primary);--dawnby-muted:var(--dawnby-label-secondary);--dawnby-surface:var(--dawnby-bg-grouped); --dawnby-line:var(--dawnby-separator);--dawnby-action:var(--dawnby-iris-fill);--dawnby-action-hover:#4f45c9;--dawnby-action-tint:var(--dawnby-iris-soft); --dawnby-control-border:var(--dawnby-label-tertiary);--dawnby-success:var(--dawnby-status-success);--dawnby-warning:var(--dawnby-status-warning); --dawnby-danger:var(--dawnby-danger-action);--dawnby-success-tint:#1c3328;--dawnby-warning-tint:#3a2f17;--dawnby-danger-tint:#3e1f27; color-scheme:dark; } @media (prefers-color-scheme:dark){ :root[data-dawnby-theme="system"] body[data-dawnby-surface="app"]{ --ink:var(--dawnby-label-primary);--text:var(--dawnby-label-primary);--muted:var(--dawnby-label-secondary); --brand:var(--dawnby-iris);--brand-soft:var(--dawnby-iris-soft);--paper:var(--dawnby-bg-grouped);--surface:var(--dawnby-bg-grouped-secondary); --line:var(--dawnby-separator);--green:var(--dawnby-status-success);--amber:var(--dawnby-status-warning);--red:var(--dawnby-danger-action); --dawnby-ink:var(--dawnby-label-primary);--dawnby-muted:var(--dawnby-label-secondary);--dawnby-surface:var(--dawnby-bg-grouped); --dawnby-line:var(--dawnby-separator);--dawnby-action:var(--dawnby-iris-fill);--dawnby-action-hover:#4f45c9;--dawnby-action-tint:var(--dawnby-iris-soft); --dawnby-control-border:var(--dawnby-label-tertiary);--dawnby-success:var(--dawnby-status-success);--dawnby-warning:var(--dawnby-status-warning); --dawnby-danger:var(--dawnby-danger-action);--dawnby-success-tint:#1c3328;--dawnby-warning-tint:#3a2f17;--dawnby-danger-tint:#3e1f27; color-scheme:dark; } } /* Today studio reads Health roles through these aliases, in both themes. Accent is the text iris (--dawnby-iris), not the fill (--dawnby-iris-fill). The dashboard sheets use the aliases, so they do not name Health variables. */ body[data-dashboard-studio]{ --studio-text:var(--dawnby-label-primary); --studio-muted:var(--dawnby-label-secondary); --studio-surface:var(--dawnby-bg-grouped-secondary); --studio-page:var(--dawnby-bg-grouped); --studio-accent:var(--dawnby-iris); --studio-line:var(--dawnby-separator); --studio-warning:var(--dawnby-status-warning); --studio-danger:var(--dawnby-danger-action); } /* ---------- Page ---------- */ body[data-dawnby-surface="app"]{background:var(--dawnby-bg-grouped);color:var(--dawnby-label-primary)} html:has(body[data-dawnby-surface="app"]){background:var(--dawnby-bg-grouped)} /* ---------- 1. hw-shell: Liquid Glass sidebar (desktop > 800 px) ---------- */ body[data-dawnby-surface="app"] .sidebar{ font-family:var(--dawnby-font-text); background:var(--dawnby-glass-fill); -webkit-backdrop-filter:blur(var(--dawnby-glass-blur-sidebar));backdrop-filter:blur(var(--dawnby-glass-blur-sidebar)); border:var(--dawnby-glass-stroke-width) solid var(--dawnby-glass-stroke);border-radius:var(--dawnby-radius-sidebar); box-shadow:var(--dawnby-elevation-glass-sidebar);padding:12px 8px 16px; } @media (min-width:801px){ body[data-dawnby-surface="app"]{--hw-sidebar:280px} body[data-dawnby-surface="app"] .sidebar{inset:16px auto 16px 16px;width:var(--hw-sidebar);height:auto} body[data-dawnby-surface="app"] .main-shell{margin-left:calc(var(--hw-sidebar) + 24px);width:calc(100% - var(--hw-sidebar) - 24px)} } @media (min-width:801px) and (max-width:1150px){body[data-dawnby-surface="app"]{--hw-sidebar:232px}} @media (max-width:800px){ body[data-dawnby-surface="app"] .sidebar{inset:8px auto 8px 8px;width:min(300px,calc(100vw - 16px));height:auto;transform:translateX(calc(-100% - 16px))} body[data-dawnby-surface="app"] .sidebar.open{transform:translateX(0)} } body[data-dawnby-surface="app"] .sidebar .brand{ display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px 16px 14px; font-family:var(--dawnby-font-brand);font-weight:700;font-size:1.25rem;line-height:1.2;letter-spacing:-0.045em;color:var(--dawnby-label-primary); } body[data-dawnby-surface="app"] .sidebar .brand .brand-image{width:28px;height:28px} body[data-dawnby-surface="app"] .sidebar .brand-caption{ font-family:var(--dawnby-font-text);font-weight:400;font-size:var(--dawnby-type-caption1-size);line-height:var(--dawnby-type-caption1-line); letter-spacing:0;color:var(--dawnby-label-secondary);margin-top:1px; } body[data-dawnby-surface="app"] .workspace-label{ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line); font-weight:600;color:var(--dawnby-label-secondary);padding:0 10px 6px;letter-spacing:0;text-transform:none; } body[data-dawnby-surface="app"] .sidebar nav{display:grid;gap:2px;align-content:start} body[data-dawnby-surface="app"] .nav-group{gap:2px} body[data-dawnby-surface="app"] .nav-group-label{ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line); font-weight:600;letter-spacing:0;text-transform:none;color:var(--dawnby-label-secondary);padding:10px 10px 4px; } body[data-dawnby-surface="app"] .nav-group>summary.nav-group-label{padding:0 10px;border-radius:22px;color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .nav-group>summary:hover{background:var(--dawnby-fill-on-card);color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .nav-group-total{font-family:var(--dawnby-font-figure);font-weight:700;color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .nav-group-body{padding-bottom:4px} body[data-dawnby-surface="app"] .nav-group-body .nav-item{padding-left:10px} body[data-dawnby-surface="app"] .nav-item{ display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px; min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere; min-height:var(--dawnby-control-touch);padding:0 10px;border-radius:22px;border:var(--dawnby-glass-stroke-width) solid transparent; font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line);letter-spacing:var(--dawnby-type-body-tracking); font-weight:400;color:var(--dawnby-label-primary);background:transparent;box-shadow:none; } body[data-dawnby-surface="app"] .sidebar #navigation{overflow-x:clip;overflow-y:auto} body[data-dawnby-surface="app"] :is(#navigation,.nav-more,.nav-more-body,.nav-group,.nav-group-body,.nav-group>summary){min-width:0;max-width:100%} body[data-dawnby-surface="app"] .nav-group>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:8px;overflow-wrap:anywhere} body[data-dawnby-surface="app"] .nav-item:hover{background:var(--dawnby-fill-on-card);color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .nav-item.active{ font-weight:600;color:var(--dawnby-label-primary);background:var(--dawnby-glass-pill);border-color:var(--dawnby-glass-stroke); -webkit-backdrop-filter:blur(var(--dawnby-glass-blur-pill));backdrop-filter:blur(var(--dawnby-glass-blur-pill));box-shadow:var(--dawnby-elevation-glass-sidebar); } /* Bare glyphs, iris as on the golden sidebar (no tile). */ body[data-dawnby-surface="app"] .nav-item .nav-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;color:var(--dawnby-iris);background:none;border:0;font-size:1rem} body[data-dawnby-surface="app"] .nav-item .nav-icon svg{width:24px;height:24px;stroke-width:1.74} body[data-dawnby-surface="app"] .nav-count{ margin-left:auto;font-family:var(--dawnby-font-figure);font-weight:700;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line); color:var(--dawnby-label-primary);background:var(--dawnby-glass-pill);border-radius:11px;padding:1px 8px;min-width:0; } body[data-dawnby-surface="app"] .nav-item.active .nav-count{color:var(--dawnby-label-primary);background:var(--dawnby-bg-grouped-secondary)} body[data-dawnby-surface="app"] .sidebar-bottom{padding-top:8px;border-top:0} body[data-dawnby-surface="app"] .provider-label{ display:flex;align-items:center;gap:10px;min-height:52px;padding:6px;margin-top:6px;border-top:0.5px solid var(--dawnby-separator); font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;color:var(--dawnby-label-primary); } body[data-dawnby-surface="app"] .provider-label>span:last-child>span{display:block;font-weight:400;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .provider-mark{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;flex:0 0 36px;background:var(--dawnby-glass-pill);color:var(--dawnby-label-primary);font-weight:600} body[data-dawnby-surface="app"] .mobile-backdrop{background:rgba(15,16,25,.32)} /* ---------- 2. hw-toolbar: breadcrumb and glass buttons ---------- */ body[data-dawnby-surface="app"] .topbar{ background:transparent;border:0;box-shadow:none;min-height:84px;height:auto;padding:16px 8px 16px 8px;gap:12px; font-family:var(--dawnby-font-text); } @media (min-width:801px){body[data-dawnby-surface="app"] .topbar{padding:16px 24px 16px 8px}} body[data-dawnby-surface="app"] .breadcrumb{ font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);letter-spacing:var(--dawnby-type-subheadline-tracking);color:var(--dawnby-label-secondary); } body[data-dawnby-surface="app"] .breadcrumb>span[aria-hidden]{padding:0 6px;color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] #breadcrumb-current{color:var(--dawnby-label-secondary);font-weight:400} body[data-dawnby-surface="app"] .topbar-right{gap:8px} body[data-dawnby-surface="app"] .topbar :is(.icon-button,.account-button){ width:var(--dawnby-control-touch);height:var(--dawnby-control-touch);border-radius:24px; background:var(--dawnby-glass-fill);border:var(--dawnby-glass-stroke-width) solid var(--dawnby-glass-stroke);color:var(--dawnby-iris); -webkit-backdrop-filter:blur(var(--dawnby-glass-blur-control));backdrop-filter:blur(var(--dawnby-glass-blur-control));box-shadow:var(--dawnby-elevation-glass-sidebar); } body[data-dawnby-surface="app"] .topbar .account-button{font-family:var(--dawnby-font-text);font-weight:600;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .topbar .icon-button svg{width:20px;height:20px} body[data-dawnby-surface="app"] .notices-bell-count{font-family:var(--dawnby-font-figure);font-weight:800} body[data-dawnby-surface="app"] .sample-data-label{ background:var(--dawnby-glass-pill);border:0;border-radius:11px;padding:3px 9px;color:var(--dawnby-label-primary); font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-caption1-size);line-height:var(--dawnby-type-caption1-line);font-weight:600; } body[data-dawnby-surface="app"] .connection-status{font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .topbar :is(.workspace-context-button,#workspace-enquiries-link){ min-height:var(--dawnby-control-touch);border-radius:24px;background:var(--dawnby-glass-fill);border:var(--dawnby-glass-stroke-width) solid var(--dawnby-glass-stroke); box-shadow:var(--dawnby-elevation-glass-sidebar);color:var(--dawnby-label-primary);font-weight:600;padding:0 16px; } body[data-dawnby-surface="app"] main{padding-top:4px} @media (min-width:801px){body[data-dawnby-surface="app"] main{padding:4px 24px 40px 12px}} /* Health wide workspace: fill the canvas, with 32px gutters from sidebar/right edge. Figma gutter; owner 5 Nov 14:11: no fixed cap, including 3440/3840px displays. */ @media (min-width:1440px){ body[data-dawnby-surface="app"] main{max-width:none;align-self:flex-start;width:100%;margin-inline:0;padding-left:24px;padding-right:32px;box-sizing:border-box} body[data-dawnby-surface="app"] .topbar{max-width:none;width:100%;margin-inline:0;padding-left:24px;padding-right:32px;box-sizing:border-box} } body[data-dawnby-surface="app"] .workspace-footer{ font-family:var(--dawnby-font-text);border-top:0.5px solid var(--dawnby-separator);color:var(--dawnby-label-secondary); font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line); } @media (min-width:801px){body[data-dawnby-surface="app"] .workspace-footer{margin:0 24px 0 12px}} body[data-dawnby-surface="app"] .workspace-footer-context>span:first-child{color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .workspace-footer a{color:var(--dawnby-iris);font-weight:600} /* ================= Views restyled to the golden frames ================= */ /* Type and colour inside the restyled views */ #main[data-health-view]{font-family:var(--dawnby-font-text);color:var(--dawnby-label-primary); font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);letter-spacing:var(--dawnby-type-subheadline-tracking)} #main[data-health-view] :is(h1,h2,h3,h4,p,dt,dd,th,td,li,label){font-family:var(--dawnby-font-text)} #main[data-health-view] :is(.small-note,.cell-secondary,.row-subtitle,.today-note,.page-description,.panel-header p){color:var(--dawnby-label-secondary)} /* ---------- 3. hw-title: Large Title with an iris eyebrow ---------- */ #main[data-health-view] .page-heading,#main[data-health-view] .person-head{align-items:flex-end;gap:12px 24px;margin-bottom:32px;padding:0 4px} #main[data-health-view] .eyebrow{ font-family:var(--dawnby-font-text);color:var(--dawnby-iris);text-transform:uppercase; font-size:var(--dawnby-type-eyebrow-size);line-height:var(--dawnby-type-eyebrow-line);letter-spacing:var(--dawnby-type-eyebrow-tracking);font-weight:600;margin:0 0 2px; } #main[data-health-view] :is(.page-heading h1,.today-head h1,.person-head h1){ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-large-title-size);line-height:var(--dawnby-type-large-title-line); letter-spacing:var(--dawnby-type-large-title-tracking);font-weight:700;color:var(--dawnby-label-primary);margin:0; } #main[data-health-view] :is(.page-heading .page-description,.today-head .page-description,.person-head-meta){ font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line);letter-spacing:var(--dawnby-type-body-tracking); color:var(--dawnby-label-secondary);margin:4px 0 0;max-width:70ch; } #main[data-health-view] .page-heading>.button-row,#main[data-health-view] .person-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ---------- 6. hw-button ---------- */ #main[data-health-view] .button{ min-height:var(--dawnby-control-touch);border-radius:var(--dawnby-radius-full);padding:0 18px; font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line); letter-spacing:var(--dawnby-type-subheadline-tracking);font-weight:600;box-shadow:none; } #main[data-health-view] .button.primary{background:var(--dawnby-iris-fill);border-color:var(--dawnby-iris-fill);color:var(--dawnby-label-on-accent)} #main[data-health-view] .button.primary:hover:not(:disabled){filter:brightness(0.92)} #main[data-health-view] .page-heading .button.primary,#main[data-health-view] .person-actions .button.primary{ min-height:var(--dawnby-control-button);padding:0 32px;font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);letter-spacing:var(--dawnby-type-headline-tracking); } #main[data-health-view] .button.secondary{background:transparent;border:1px solid var(--dawnby-control-border);color:var(--dawnby-label-primary)} #main[data-health-view] .button.secondary:hover:not(:disabled){background:var(--dawnby-fill-on-card)} #main[data-health-view] .button.ghost{background:transparent;border-color:transparent;color:var(--dawnby-iris);padding:0 12px} #main[data-health-view] .button.ghost:hover:not(:disabled){background:var(--dawnby-iris-soft)} #main[data-health-view] .button.danger{background:transparent;border:1px solid var(--dawnby-danger-action);color:var(--dawnby-danger-action)} #main[data-health-view] .button.danger:hover:not(:disabled){background:var(--dawnby-danger-tint)} /* ---------- 5. hw-segmented: filter tabs and profile tabs ---------- */ #main[data-health-view] .toolbar{gap:12px;margin-bottom:16px;align-items:center} #main[data-health-view] :is(.toolbar .tabs,.person-tabs){ display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border:0;border-radius:24px;background:var(--dawnby-glass-pill);box-shadow:none; } #main[data-health-view] :is(.toolbar .tab,.person-tab){ min-height:var(--dawnby-control-touch);padding:0 14px;border-radius:20px;border:0;background:transparent;box-shadow:none; font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:400;color:var(--dawnby-label-primary); } #main[data-health-view] :is(.toolbar .tab,.person-tab):hover{background:var(--dawnby-fill-on-card)} #main[data-health-view] :is(.toolbar .tab.active,.toolbar .tab[aria-selected="true"],.person-tab.is-active,.person-tab[aria-selected="true"]){ background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1); } #main[data-health-view] .person-tabs{margin:4px 0 24px} #main[data-health-view] .search-input{ min-height:var(--dawnby-control-touch);border-radius:24px;padding:0 16px;border:1px solid var(--dawnby-control-border); background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-body-size); } #main[data-health-view] .search-input::placeholder{color:var(--dawnby-label-secondary)} /* ---------- 4. hw-card: inset grouped cards, iris card headers ---------- */ #main[data-health-view] .panel{ background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);box-shadow:var(--dawnby-elevation-card);margin-bottom:24px; } #main[data-health-view] .panel-header{background:transparent;border-bottom:0.5px solid var(--dawnby-separator);padding:16px 20px;align-items:center;gap:8px 16px} #main[data-health-view] .panel-header h2{ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line); letter-spacing:var(--dawnby-type-subheadline-tracking);font-weight:600;color:var(--dawnby-iris);margin:0; } #main[data-health-view] .panel-header p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin-top:2px} #main[data-health-view] .panel-body{padding:20px} #main[data-health-view] .panel>:is(.small-note,p.row-subtitle,.notice,.form-section-heading,.plain-list){margin-left:20px;margin-right:20px} #main[data-health-view] .panel>.small-note:last-child,#main[data-health-view] .panel>p.row-subtitle:last-child{margin-bottom:16px} #main[data-health-view] .panel>p.row-subtitle{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin-top:8px} /* Tables inside cards: sticky glass column header, hairline rows */ #main[data-health-view] .table-wrap{border:0;border-radius:0;background:transparent} #main[data-health-view] .data-table{font-family:var(--dawnby-font-text);background:transparent} #main[data-health-view] .data-table thead th{ background:var(--dawnby-glass-fill);border-bottom:0.5px solid var(--dawnby-separator);color:var(--dawnby-label-secondary); font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;letter-spacing:var(--dawnby-type-footnote-tracking); text-transform:none;padding:9px 16px; } #main[data-health-view] .data-table td{ border-bottom:0.5px solid var(--dawnby-separator);padding:12px 16px;vertical-align:middle;background:transparent; font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-primary); } #main[data-health-view] .data-table td:first-child{font-weight:600;font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line);letter-spacing:var(--dawnby-type-body-tracking)} #main[data-health-view] .data-table .cell-secondary{display:block;font-weight:400;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);letter-spacing:var(--dawnby-type-footnote-tracking);margin-top:2px} #main[data-health-view] .data-table tbody tr:hover td{background:var(--dawnby-fill-on-card)} #main[data-health-view] .data-table .table-group-row th{ background:var(--dawnby-bg-grouped);color:var(--dawnby-label-primary);border-bottom:0.5px solid var(--dawnby-separator); font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;padding:8px 16px;text-transform:none;letter-spacing:0; } #main[data-health-view] .data-table td.actions{text-align:right} /* ---------- 7. hw-status: status words with a glyph (never colour alone; text label always present) ---------- */ #main[data-health-view] .badge{ display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:0;padding:0;min-height:0; font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;letter-spacing:var(--dawnby-type-footnote-tracking); } #main[data-health-view] .badge::before{ content:"";flex:0 0 14px;width:14px;height:14px;background:currentColor; -webkit-mask:var(--hw-status-glyph) center/contain no-repeat;mask:var(--hw-status-glyph) center/contain no-repeat; } #main[data-health-view] .badge.green{background:transparent;color:var(--dawnby-status-success);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='m5.4 8.2 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E")} #main[data-health-view] .badge.amber{background:transparent;color:var(--dawnby-status-warning);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E")} #main[data-health-view] .badge.red{background:transparent;color:var(--dawnby-status-critical);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.9v3.6M8 11v.01'/%3E%3C/svg%3E")} #main[data-health-view] .badge.blue{background:transparent;color:var(--dawnby-status-in-progress);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.8V8l2.2 1.4'/%3E%3C/svg%3E")} /* ---------- 9. hw-tag: programme and entry-source labels are tags, not statuses ---------- */ #main[data-health-view] :is(.record-card-head .badge,.badge.record-source-badge,[data-entry-source].badge,.person-head .badge){ color:var(--dawnby-label-primary);background:var(--dawnby-glass-pill);border-radius:11px;padding:2px 9px;font-size:var(--dawnby-type-caption1-size);line-height:var(--dawnby-type-caption1-line); } #main[data-health-view] :is(.record-card-head .badge,.badge.record-source-badge,[data-entry-source].badge,.person-head .badge)::before{content:none} /* Notices inside the restyled views: card plus a warning marker; body copy stays ink */ #main[data-health-view] .notice{border:0;border-radius:var(--dawnby-radius-card-desktop);background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);padding:16px 20px 16px 48px;position:relative} #main[data-health-view] .notice::before{content:"";position:absolute;left:20px;top:18px;width:16px;height:16px;background:var(--dawnby-iris); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.2v4M8 4.9v.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.2v4M8 4.9v.01'/%3E%3C/svg%3E") center/contain no-repeat} #main[data-health-view] .notice.warning::before{background:var(--dawnby-status-warning); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E")} #main[data-health-view] .notice :is(strong,p){color:var(--dawnby-label-primary)} #main[data-health-view] .notice strong{font-weight:600;font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view] .notice p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:2px 0 0} #main[data-health-view] .notice .button{margin-top:6px;margin-left:-12px} #main[data-health-view]>.notice,#main[data-health-view] #workspace-content>.notice{margin-bottom:24px} /* Empty states: quiet, no tile */ #main[data-health-view] .empty-state{padding:32px 20px;text-align:center} #main[data-health-view] .empty-state .empty-symbol{background:none;border:0;color:var(--dawnby-label-tertiary);font-size:1.5rem;width:auto;height:auto;margin:0 auto 6px} #main[data-health-view] .empty-state h3{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);font-weight:600;margin:0} #main[data-health-view] .empty-state p{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-secondary);margin:4px 0 8px} /* ---------- 8. hw-row and avatars ---------- */ #main[data-health-view] .avatar{width:40px;height:40px;border-radius:20px;background:var(--dawnby-glass-pill);color:var(--dawnby-label-primary); font-family:var(--dawnby-font-text);font-weight:600;font-size:var(--dawnby-type-subheadline-size);border:0} #main[data-health-view] .list-row{border-bottom:0.5px solid var(--dawnby-separator);padding:12px 20px;gap:12px;min-height:64px;align-items:center} #main[data-health-view] .list-row:last-child{border-bottom:0} #main[data-health-view] .row-title{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);letter-spacing:var(--dawnby-type-headline-tracking);font-weight:600;margin:0} #main[data-health-view] .row-subtitle{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);letter-spacing:var(--dawnby-type-footnote-tracking);margin:2px 0 0} /* Nunito for figures */ #main[data-health-view] :is(.metric-value,.today-need-count,.nav-count){font-family:var(--dawnby-font-figure)} /* ================= Today (Desktop 02 Today 3286:7393, Today Dark 3286:7756) ================= */ #main[data-health-view="today"] .home-dashboard{display:grid;grid-template-columns:minmax(0,1fr);gap:32px} #main[data-health-view="today"] .home-dashboard>*{margin:0} #main[data-health-view="today"] .today-head{padding:0 4px} #main[data-health-view="today"] .today-head .page-description{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);letter-spacing:var(--dawnby-type-subheadline-tracking)} #main[data-health-view="today"] :is(.today-section>h2,.home-section-heading h2){ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);letter-spacing:var(--dawnby-type-title2-tracking); font-weight:700;color:var(--dawnby-label-primary);margin:0 4px 8px; } #main[data-health-view="today"] .today-note,#main[data-health-view="today"] .home-section-heading p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:0 4px 8px} /* Needs you: one inset grouped card, rows with a bare figure, title, reason and an iris action */ #main[data-health-view="today"] .today-need-list{list-style:none;margin:0;padding:4px 0;background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);box-shadow:none;display:block} #main[data-health-view="today"] .today-need-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;position:relative} #main[data-health-view="today"] .today-need-row+.today-need-row::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="today"] .today-need-count{flex:0 0 28px;width:28px;height:auto;background:none;border:0;border-radius:0;color:var(--dawnby-iris);font-weight:800; font-size:var(--dawnby-type-title3-size);line-height:var(--dawnby-type-title3-line);text-align:center} #main[data-health-view="today"] .today-need-text{flex:1;min-width:0} #main[data-health-view="today"] .today-need-text h3{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);letter-spacing:var(--dawnby-type-subheadline-tracking);font-weight:600;margin:0} #main[data-health-view="today"] .today-need-text p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:2px 0 0} #main[data-health-view="today"] .today-need-row>:is(.button,a.button){flex:0 0 auto} #main[data-health-view="today"] .today-need-error .today-need-text h3{color:var(--dawnby-status-critical)} #main[data-health-view="today"] .today-clear{background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);padding:16px 20px} #main[data-health-view="today"] .today-clear h3{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;margin:0} #main[data-health-view="today"] .today-clear p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:2px 0 0} /* Today's schedule: card with visit tiles in a row (text status, no pastel fill) */ #main[data-health-view="today"] .today-section>.empty-state{background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop)} #main[data-health-view="today"] .today-strip{background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:12px;gap:8px} #main[data-health-view="today"] .today-visit{background:var(--dawnby-bg-grouped);border:0;border-left:3px solid var(--dawnby-iris);border-radius:var(--dawnby-radius-lg);box-shadow:none;padding:12px} #main[data-health-view="today"] .today-visit.is-unfilled{border-left-color:var(--dawnby-status-critical)} #main[data-health-view="today"] .today-visit h3{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;margin:2px 0 0} #main[data-health-view="today"] .today-visit p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:0} #main[data-health-view="today"] .today-visit .today-visit-time{color:var(--dawnby-label-primary)} #main[data-health-view="today"] .today-visit.is-unfilled .today-visit-worker{color:var(--dawnby-status-critical);font-weight:600} /* Key numbers: "The day so far" figures */ #main[data-health-view="today"] .today-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);overflow:hidden;box-shadow:none} #main[data-health-view="today"] .today-numbers .metric{background:transparent;border:0;border-radius:0;box-shadow:none;padding:16px 20px;min-height:0} #main[data-health-view="today"] .today-numbers .metric+.metric{border-left:0.5px solid var(--dawnby-separator)} #main[data-health-view="today"] .metric-label{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;color:var(--dawnby-iris);text-transform:none;letter-spacing:0} #main[data-health-view="today"] .metric-value{font-size:var(--dawnby-type-metric-value-size);line-height:var(--dawnby-type-metric-value-line);letter-spacing:var(--dawnby-type-metric-value-tracking);font-weight:800;color:var(--dawnby-label-primary);margin:6px 0 2px} #main[data-health-view="today"] .metric-caption{font-size:var(--dawnby-type-caption1-size);line-height:var(--dawnby-type-caption1-line);color:var(--dawnby-label-secondary)} /* Claim window card */ #main[data-health-view="today"] .claim-window-table .data-table td:first-child{font-weight:400;font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="today"] .claim-window-table .data-table td:not(:first-child){font-family:var(--dawnby-font-figure);font-weight:700} #main[data-health-view="today"] .panel>.notice{border-radius:0;background:var(--dawnby-iris-soft);margin:0} #main[data-health-view="today"] .panel>p.row-subtitle:first-of-type{margin-top:12px} /* Provider tools: grouped cards with bare iris glyphs */ #main[data-health-view="today"] .role-task-grid{gap:12px} #main[data-health-view="today"] .role-task-card{background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);box-shadow:none;padding:16px 20px;font-family:var(--dawnby-font-text);color:var(--dawnby-label-primary)} #main[data-health-view="today"] .role-task-card:hover{background:var(--dawnby-bg-grouped-secondary);box-shadow:inset 0 0 0 1px var(--dawnby-stroke-on-card)} #main[data-health-view="today"] .role-task-card :is(h3,strong){font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);font-weight:600;color:var(--dawnby-label-primary)} #main[data-health-view="today"] .role-task-card p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .role-task-card :is(.role-task-icon,[class*="icon"]){background:none;border:0;color:var(--dawnby-iris)} /* Upcoming care / Recent activity */ #main[data-health-view="today"] .home-body-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start} #main[data-health-view="today"] .home-body-grid>.panel{margin:0} #main[data-health-view="today"] .home-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px} #main[data-health-view="today"] .home-activity-dot{background:var(--dawnby-iris);width:6px;height:6px} #main[data-health-view="today"] .activity-time{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);text-align:right;max-width:12ch} @media (max-width:1100px){#main[data-health-view="today"] .home-body-grid{grid-template-columns:minmax(0,1fr)}} @media (max-width:640px){ #main[data-health-view="today"] .today-numbers{grid-template-columns:minmax(0,1fr)} #main[data-health-view="today"] .today-numbers .metric+.metric{border-left:0;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="today"] .today-need-row{flex-wrap:wrap} #main[data-health-view="today"] .today-need-row>:is(.button,a.button){margin-left:28px} } /* ================= Roster (Desktop 01 Roster 3286:7036) ================= */ #main[data-health-view="roster"] .print-request{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:-8px 4px 24px} #main[data-health-view="roster"] .print-request label{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);font-weight:400} #main[data-health-view="roster"] .print-request input{border-radius:24px;padding:0 16px;background:var(--dawnby-bg-grouped-secondary);font-family:var(--dawnby-font-text)} #main[data-health-view="roster"] .print-request .cell-secondary{flex-basis:100%;font-size:var(--dawnby-type-footnote-size)} #main[data-health-view="roster"] .roster-table td.roster-status{min-width:180px} #main[data-health-view="roster"] .roster-table td.roster-status>*{display:flex} #main[data-health-view="roster"] .roster-table td.roster-status .cell-secondary{margin-top:4px} #main[data-health-view="roster"] .roster-table th:nth-child(4){border-left:0} #main[data-health-view="roster"] .roster-table td.roster-status{border-left:0} #main[data-health-view="roster"] .plain-list{list-style:none;padding:0} #main[data-health-view="roster"] .plain-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:52px;border-bottom:0.5px solid var(--dawnby-separator);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view="roster"] .plain-list li:last-child{border-bottom:0} #main[data-health-view="roster"] .form-section-heading{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);font-weight:600;margin-top:12px} #main[data-health-view="roster"] .panel>.small-note{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin-top:12px} /* ================= Clients (Desktop 07 Clients 3286:8882): the people cards become one inset grouped list ================= */ #main[data-health-view="clients"] .record-cards{display:block;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:4px 0;overflow:hidden} #main[data-health-view="clients"] .record-card{ display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(0,1.2fr) minmax(170px,.9fr) auto;align-items:center;gap:4px 16px; background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 16px;min-height:64px;position:relative;margin:0; } #main[data-health-view="clients"] .record-card+.record-card::before{content:"";position:absolute;top:0;left:68px;right:0;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="clients"] .record-card:hover{background:var(--dawnby-fill-on-card)} #main[data-health-view="clients"] .record-card-head{display:flex;align-items:center;gap:12px;margin:0;min-width:0} #main[data-health-view="clients"] .record-card-head h3{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);letter-spacing:var(--dawnby-type-headline-tracking);font-weight:600;margin:0 0 2px} #main[data-health-view="clients"] .record-card-head .badge{margin:2px 4px 0 0} #main[data-health-view="clients"] .record-card>p{margin:0;font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-primary)} #main[data-health-view="clients"] .card-info{display:grid;gap:2px;margin:0;padding:0;border:0} #main[data-health-view="clients"] .card-info>div{display:flex;justify-content:space-between;gap:8px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);padding:0;border:0} #main[data-health-view="clients"] .card-info span{color:var(--dawnby-label-secondary)} #main[data-health-view="clients"] .card-info strong{font-weight:600;color:var(--dawnby-label-primary)} #main[data-health-view="clients"] .card-footer{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;justify-content:flex-end} #main[data-health-view="clients"] .card-footer .small-note:empty{display:none} #main[data-health-view="clients"] .card-footer .button.ghost::after{content:"";width:8px;height:8px;margin-left:8px;border-right:1.75px solid currentColor;border-top:1.75px solid currentColor;transform:rotate(45deg);display:inline-block} @media (max-width:980px){ #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) auto} #main[data-health-view="clients"] .record-card>p,#main[data-health-view="clients"] .card-info{grid-column:1/2;padding-left:52px} #main[data-health-view="clients"] .card-footer{grid-column:2/3;grid-row:1/4} } @media (max-width:560px){ #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr)} #main[data-health-view="clients"] .card-footer{grid-column:1/2;grid-row:auto;justify-content:flex-start;padding-left:40px} } /* ================= Worker profile (Desktop 08 Worker profile 3286:9067) ================= */ #main[data-health-view="worker-profile"] .person-back{margin:0 0 8px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;background:transparent;border:0;box-shadow:none;padding:0 4px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-head .avatar{width:80px;height:80px;border-radius:40px;font-size:var(--dawnby-type-title2-size)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-head-copy .eyebrow{margin-bottom:2px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-actions{max-width:640px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-panel{background:transparent;border:0;box-shadow:none;padding:0} #main[data-health-view="worker-profile"] .hw-worker-columns{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(320px,1fr);gap:24px;align-items:start} #main[data-health-view="worker-profile"] .hw-worker-columns>div{min-width:0} @media(max-width:1100px){#main[data-health-view="worker-profile"] .hw-worker-columns{grid-template-columns:minmax(0,1fr)}} :root[data-dawnby-text="larger"] #main[data-health-view="worker-profile"] .hw-worker-columns{grid-template-columns:minmax(0,1fr)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-panel>:is(.profile-section,.panel,.notice){margin:0 0 24px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section{background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-card-desktop);padding:16px 20px 20px;margin:0 0 24px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section:first-of-type{padding-top:16px;margin-top:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .form-section-heading{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;color:var(--dawnby-iris);margin:0 0 12px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-panel>.form-section-heading{margin:8px 4px 4px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-panel>.small-note{margin:0 4px 8px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-grid{gap:0;border-top:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-item{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:0.5px solid var(--dawnby-separator);border-top:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-item:last-child{border-bottom:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-item dt{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-secondary);font-weight:400;text-transform:none;letter-spacing:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-item dd{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;color:var(--dawnby-label-primary);margin:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section .small-note{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section .empty-state{padding:16px 0} @media (max-width:640px){#main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-item{grid-template-columns:minmax(0,1fr);gap:2px}} /* ---------- Phone-width office (D-0099 item 1): same information architecture, compact ---------- */ @media (max-width:800px){ #main[data-health-view] :is(.page-heading h1,.today-head h1,.person-head h1){font-size:var(--dawnby-type-title1-size);line-height:var(--dawnby-type-title1-line);letter-spacing:var(--dawnby-type-title1-tracking)} #main[data-health-view] .page-heading,#main[data-health-view] .person-head{margin-bottom:20px} #main[data-health-view] .page-heading .button.primary{flex:1 1 100%} #main[data-health-view] .panel,#main[data-health-view] .profile-section,#main[data-health-view] .record-cards,#main[data-health-view="today"] :is(.today-need-list,.today-numbers,.today-clear){border-radius:var(--dawnby-radius-lg)} #main[data-health-view] .toolbar{flex-wrap:wrap} #main[data-health-view] .toolbar .search-input{flex:1 1 100%} body[data-dawnby-surface="app"] .topbar{min-height:64px;padding:8px 0} } /* Larger Text: rows and headers stack instead of clipping */ :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) auto} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card>p,:root[data-dawnby-text="larger"] #main[data-health-view="clients"] .card-info{grid-column:1/2;padding-left:52px} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .card-footer{grid-column:2/3;grid-row:1/4} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-numbers{grid-template-columns:minmax(0,1fr)} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-numbers .metric+.metric{border-left:0;border-top:0.5px solid var(--dawnby-separator)} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .home-body-grid{grid-template-columns:minmax(0,1fr)} :root[data-dawnby-text="larger"] body[data-dawnby-surface="app"] .nav-item{min-height:56px} /* Focus stays visible on glass and cards */ body[data-dawnby-surface="app"] :is(.nav-item,.topbar .icon-button,.topbar .account-button,#main[data-health-view] .button,#main[data-health-view] .tab,#main[data-health-view] .person-tab):focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} @media (prefers-reduced-motion:reduce){body[data-dawnby-surface="app"] .sidebar{transition:none}} @media print{body[data-dawnby-surface="app"] .sidebar{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}} /* ---------- Round-2 fixes from the rendered comparison ---------- */ #main[data-health-view] .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;min-height:0} #main[data-health-view] .empty-state>*{max-width:52ch;margin-left:auto;margin-right:auto} #main[data-health-view] .data-table :is(th,td){box-shadow:none;border-left:0;border-right:0} #main[data-health-view] .data-table tbody th:not([scope="rowgroup"]){background:transparent;font-weight:400;color:var(--dawnby-label-primary);border-bottom:0.5px solid var(--dawnby-separator); font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);padding:12px 16px;text-align:left} #main[data-health-view] .data-table thead th{position:static} /* Roster cells keep the compact 12 px sides that N6 (workspace-review-2-roster-ui-controls) guards. */ #main[data-health-view="roster"] .data-table.roster-table :is(thead th,tbody td,tbody th){padding-left:12px;padding-right:12px} #main[data-health-view="roster"] .roster-table td.roster-status{min-width:150px} #main[data-health-view="roster"] .plain-list li{padding:6px 0;margin:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section .form-actions{position:static;inset:auto;background:transparent;border:0;box-shadow:none;margin:12px 0 0;padding:0;justify-content:flex-start;width:auto} #main[data-health-view="today"] .activity-time{max-width:18ch} #main[data-health-view="roster"] .roster-table{--roster-manage-width:8.25rem} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .detail-grid{grid-template-columns:minmax(0,1fr)} #main[data-health-view="roster"] .roster-table :is(td.roster-status,thead th:nth-child(4)){background:var(--dawnby-bg-grouped-secondary)} #main[data-health-view] .data-table thead th{background:var(--dawnby-bg-grouped-secondary)} @media (max-width:1150px){ #main[data-health-view] .data-table td.actions,#main[data-health-view] .data-table thead th:last-child:empty{background:var(--dawnby-bg-grouped-secondary);box-shadow:-0.5px 0 0 var(--dawnby-separator)} #main[data-health-view="roster"] .roster-table :is(td.roster-status,thead th:nth-child(4)){box-shadow:-0.5px 0 0 var(--dawnby-separator)} } #main[data-health-view] :is(.row-title,.record-card-head h3,.today-need-text h3,.today-visit h3,.data-table td,.detail-item dd){color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .sample-data-label{white-space:nowrap} @media (max-width:480px){body[data-dawnby-surface="app"] .sample-data-label{white-space:normal;max-width:8.5rem;text-align:center}} body[data-dawnby-surface="app"] .nav-item{min-width:0;max-width:100%;text-align:left} #main[data-health-view="clients"] .card-info :is(span,strong){font-size:inherit;line-height:inherit} /* Access check and "Workspace unavailable" (the error state of every restyled view): same title, notice and button. */ #main[data-health-view] .notice.error{background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);padding-left:48px} #main[data-health-view] .notice.error::before{background:var(--dawnby-status-critical); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.9v3.6M8 11v.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.9v3.6M8 11v.01'/%3E%3C/svg%3E")} #main[data-health-view] .notice.error :is(p,strong){color:var(--dawnby-label-primary)} /* Loading surface ("Opening your workspace") */ body[data-dawnby-surface="app"] .loading-surface{font-family:var(--dawnby-font-text)} body[data-dawnby-surface="app"] .loading-surface h1{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);font-weight:700;color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .loading-surface p{color:var(--dawnby-label-secondary)} /* "Other" statuses (draft, checked, new...) read as information, not progress: info glyph */ #main[data-health-view] .badge.blue{--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.2v4M8 4.9v.01'/%3E%3C/svg%3E")} @media (max-width:800px){ #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-actions{justify-content:flex-start;max-width:none} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-head .avatar{width:56px;height:56px;border-radius:28px;font-size:var(--dawnby-type-headline-size)} } /* ===================== Round 3: the golden LAYOUT (owner correction, 4 Nov 18:30) ===================== */ /* Sidebar: nine flat items first (no group label), remaining tools in collapsible groups below */ body[data-dawnby-surface="app"] .nav-primary{display:grid;gap:2px;margin-bottom:8px} body[data-dawnby-surface="app"] .sidebar{position:fixed} @media (max-width:800px){body[data-dawnby-surface="app"] .sidebar .workspace-label{position:static;text-align:left;max-width:none;padding:0 16px 6px}} /* Toolbar search (people) */ body[data-dawnby-surface="app"] .workspace-search{display:flex;align-items:center;gap:8px;height:var(--dawnby-control-touch);width:min(300px,32vw);padding:0 14px 0 16px;border-radius:24px; background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-iris);box-shadow:var(--dawnby-elevation-glass-sidebar);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .workspace-search[hidden]{display:none} body[data-dawnby-surface="app"] .workspace-search svg{width:16px;height:16px;flex:0 0 16px} body[data-dawnby-surface="app"] .workspace-search input{flex:1;min-width:0;border:0!important;background:transparent;box-shadow:none;outline:0;min-height:var(--dawnby-control-touch);padding:0; font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .workspace-search:focus-within{outline:2px solid var(--dawnby-iris);outline-offset:2px} body[data-dawnby-surface="app"] .workspace-search kbd{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary)} @media (max-width:800px){body[data-dawnby-surface="app"] .workspace-search{order:-1;width:100%}body[data-dawnby-surface="app"] .workspace-search kbd{display:none}} /* Shared section header and card */ #main[data-health-view] .hw-section-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 4px 10px;min-height:28px} #main[data-health-view] .hw-section-head h2{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);letter-spacing:var(--dawnby-type-title2-tracking);font-weight:700;color:var(--dawnby-label-primary);margin:0} #main[data-health-view] .hw-count{background:var(--dawnby-glass-pill);border-radius:11px;padding:2px 8px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-section-note{margin-left:auto;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-section-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #main[data-health-view] .hw-card{background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:16px 20px;box-shadow:none} #main[data-health-view] .hw-card+.hw-card{margin-top:12px} #main[data-health-view] .hw-card-title{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--dawnby-iris);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600} #main[data-health-view] .hw-card-title svg{width:16px;height:16px;flex:0 0 16px} #main[data-health-view] .hw-card-meta{margin-left:auto;color:var(--dawnby-label-secondary);font-weight:400} #main[data-health-view] .hw-figure{margin:0;color:var(--dawnby-label-primary)} #main[data-health-view] .hw-figure strong{font-family:var(--dawnby-font-figure);font-weight:800;font-size:var(--dawnby-type-metric-value-size);line-height:var(--dawnby-type-metric-value-line);letter-spacing:var(--dawnby-type-metric-value-tracking)} #main[data-health-view] .hw-figure span{font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-figure-caption,#main[data-health-view] .hw-empty-line{margin:2px 0 12px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-subhead{margin:16px 0 6px;font-size:var(--dawnby-type-footnote-size);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-progress{height:8px;border-radius:4px;background:var(--dawnby-fill-on-card);overflow:hidden;margin:4px 0 12px} #main[data-health-view] .hw-progress span{display:block;height:100%;background:var(--dawnby-vivid-green);border-radius:4px} /* dots and status words (the word is always there; colour is a second cue) */ #main[data-health-view] .hw-dot{display:inline-block;width:8px;height:8px;border-radius:4px;flex:0 0 8px;background:var(--dawnby-label-tertiary)} #main[data-health-view] .hw-dot.success{background:var(--dawnby-vivid-green)} #main[data-health-view] .hw-dot.progress{background:var(--dawnby-vivid-blue)} #main[data-health-view] .hw-dot.warning{background:var(--dawnby-vivid-orange)} #main[data-health-view] .hw-dot.critical{background:var(--dawnby-vivid-red)} #main[data-health-view] .hw-status{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view] .hw-status::before{content:"";flex:0 0 14px;width:14px;height:14px;background:currentColor;-webkit-mask:var(--hw-status-glyph) center/contain no-repeat;mask:var(--hw-status-glyph) center/contain no-repeat; --hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.8V8l2.2 1.4'/%3E%3C/svg%3E")} #main[data-health-view] .hw-status.success{color:var(--dawnby-status-success)} #main[data-health-view] .hw-status.success::before{--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='m5.4 8.2 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E")} #main[data-health-view] .hw-status.progress{color:var(--dawnby-status-in-progress)} #main[data-health-view] .hw-status.warning{color:var(--dawnby-status-warning)} #main[data-health-view] .hw-status.warning::before{--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E")} #main[data-health-view] .hw-status.critical{color:var(--dawnby-status-critical)} #main[data-health-view] .hw-status.critical::before{--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='2.3'/%3E%3Cpath d='M1.8 13.2c.4-2.4 2.1-3.9 4.2-3.9s3.8 1.5 4.2 3.9M12.5 6v3.2M12.5 11.4v.01'/%3E%3C/svg%3E")} #main[data-health-view] .hw-row{display:flex;align-items:center;gap:12px} #main[data-health-view] .hw-row .avatar,#main[data-health-view] .hw-row-button .avatar{width:36px;height:36px;border-radius:18px;flex:0 0 36px} /* Today grid (golden 3286:7393) */ #main[data-health-view="today"] .hw-today{gap:28px} #main[data-health-view="today"] .hw-today-overview{display:grid;gap:28px;min-width:0} #main[data-health-view="today"] .today-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px} #main[data-health-view="today"] .today-head .eyebrow{margin-bottom:2px} #main[data-health-view="today"] .today-head .page-description{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);max-width:62ch} #main[data-health-view="today"] .today-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #main[data-health-view="today"] .today-head-actions .button.primary{min-height:var(--dawnby-control-button);min-width:min(240px,100%);padding:0 32px;font-size:var(--dawnby-type-headline-size)} #main[data-health-view="today"] .hw-grid{display:grid;gap:24px;align-items:start} #main[data-health-view="today"] .hw-grid-main,#main[data-health-view="today"] .hw-grid-mid{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)} #main[data-health-view="today"] .hw-grid-team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #main[data-health-view="today"] .hw-grid>.today-section:only-child{grid-column:1/-1} #main[data-health-view="today"] .today-section>h2{margin:0 4px 10px} #main[data-health-view="today"] .hw-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px} #main[data-health-view="today"] .hw-donut{width:64px;height:64px;transform:rotate(0deg)} #main[data-health-view="today"] .hw-donut circle{fill:none;stroke-width:6} #main[data-health-view="today"] .hw-donut-track{stroke:var(--dawnby-fill-on-card)} #main[data-health-view="today"] .hw-donut-arc.success{stroke:var(--dawnby-vivid-green)} #main[data-health-view="today"] .hw-donut-arc.progress{stroke:var(--dawnby-vivid-blue)} #main[data-health-view="today"] .hw-donut-arc.warning{stroke:var(--dawnby-vivid-orange)} #main[data-health-view="today"] .hw-donut-arc.critical{stroke:var(--dawnby-vivid-red)} #main[data-health-view="today"] .hw-donut-arc.neutral{stroke:var(--dawnby-label-tertiary)} #main[data-health-view="today"] .hw-legend{list-style:none;margin:0;padding:0} #main[data-health-view="today"] .hw-legend li{display:flex;align-items:center;gap:10px;min-height:40px;border-top:0.5px solid var(--dawnby-separator);font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="today"] .hw-legend li:first-child{border-top:0} #main[data-health-view="today"] .hw-legend strong{margin-left:auto;font-family:var(--dawnby-font-figure);font-weight:800} #main[data-health-view="today"] .hw-next .row-title{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view="today"] .hw-day-figures{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:14px} #main[data-health-view="today"] .hw-day-figures p{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;margin:0;font-size:var(--dawnby-type-caption1-size);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .hw-day-figures strong{grid-column:1/2;font-family:var(--dawnby-font-figure);font-weight:800;font-size:var(--dawnby-type-metric-value-size);line-height:var(--dawnby-type-metric-value-line);color:var(--dawnby-label-primary)} #main[data-health-view="today"] .hw-day-figures small{grid-column:2/3;align-self:end;font-size:var(--dawnby-type-footnote-size);font-weight:400;padding-bottom:4px} #main[data-health-view="today"] .hw-day-figures .hw-dot{grid-column:1/2} #main[data-health-view="today"] .hw-timeline{position:relative;height:8px;border-radius:4px;background:var(--dawnby-fill-on-card);margin:10px 0 6px} #main[data-health-view="today"] .hw-timeline-fill{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--dawnby-iris)} #main[data-health-view="today"] .hw-timeline-now{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:6px;background:var(--dawnby-vivid-orange);border:2px solid var(--dawnby-bg-grouped-secondary)} #main[data-health-view="today"] .hw-timeline-scale{display:flex;justify-content:space-between;font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-highlights .hw-card .today-note{margin:0 0 8px} #main[data-health-view="today"] .today-highlights .today-numbers{background:transparent;border-radius:0;border-top:0.5px solid var(--dawnby-separator);grid-template-columns:repeat(3,minmax(0,1fr))} #main[data-health-view="today"] .today-highlights .today-numbers .metric{padding:10px 8px 0 0} #main[data-health-view="today"] .today-highlights .today-numbers .metric+.metric{border-left:0;padding-left:8px} #main[data-health-view="today"] .today-highlights .metric-value{font-size:var(--dawnby-type-title3-size);line-height:var(--dawnby-type-title3-line);margin:2px 0} /* Today's schedule as the golden table */ #main[data-health-view="today"] .today-schedule .today-note{margin:-6px 4px 8px} #main[data-health-view="today"] .today-strip{display:block;padding:0 0 4px;overflow-x:auto;border-radius:var(--dawnby-radius-card-desktop);background:var(--dawnby-bg-grouped-secondary)} #main[data-health-view="today"] :is(.today-visit-head,.today-visit){display:grid;grid-template-columns:minmax(118px,.8fr) minmax(170px,1.6fr) minmax(150px,1.2fr) minmax(140px,1fr) auto;align-items:center;gap:12px;padding:0 16px;min-width:720px} #main[data-health-view="today"] .today-visit-head{height:36px;border-bottom:0.5px solid var(--dawnby-separator);font-size:var(--dawnby-type-footnote-size);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-visit{background:transparent;border:0;border-left:0;border-radius:0;box-shadow:none;min-height:56px;padding-top:6px;padding-bottom:6px;border-bottom:0.5px solid var(--dawnby-separator)} #main[data-health-view="today"] .today-visit:last-of-type{border-bottom:0} #main[data-health-view="today"] .today-visit .today-visit-time{font-weight:600;font-size:var(--dawnby-type-subheadline-size);color:var(--dawnby-label-primary)} #main[data-health-view="today"] .today-visit .today-visit-time span{display:block;font-weight:400;font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-visit-client h3{margin:0;font-size:var(--dawnby-type-subheadline-size);font-weight:600} #main[data-health-view="today"] .today-visit-client p{margin:0;font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-visit-who{display:flex;align-items:center;gap:8px;min-width:0} #main[data-health-view="today"] .today-visit-who .avatar{width:28px;height:28px;border-radius:14px;flex:0 0 28px;font-size:var(--dawnby-type-caption2-size)} #main[data-health-view="today"] .hw-avatar-empty{background:transparent;border:1px dashed var(--dawnby-label-tertiary)} #main[data-health-view="today"] .today-visit .today-visit-worker{margin:0;font-size:var(--dawnby-type-subheadline-size);color:var(--dawnby-label-primary);font-weight:400} #main[data-health-view="today"] .today-visit.is-unfilled .today-visit-worker{color:var(--dawnby-label-secondary);font-weight:400} #main[data-health-view="today"] .today-visit .button{min-height:var(--dawnby-control-touch);padding:0 14px;font-size:var(--dawnby-type-footnote-size)} #main[data-health-view="today"] .today-clear-row{padding:16px;margin:0;color:var(--dawnby-label-secondary)} /* Team today and birthdays */ #main[data-health-view="today"] .hw-avatars{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px} #main[data-health-view="today"] .hw-avatar-button{border:0;background:none;padding:0;min-width:48px;min-height:48px;display:grid;place-items:center;border-radius:24px;cursor:pointer} #main[data-health-view="today"] .hw-avatar-button .avatar{width:36px;height:36px;border-radius:18px} #main[data-health-view="today"] .hw-list{list-style:none;margin:0;padding:0} #main[data-health-view="today"] .hw-row-button{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;border:0;border-top:0.5px solid var(--dawnby-separator);background:none;padding:6px 0;text-align:left;color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text);cursor:pointer} #main[data-health-view="today"] .hw-row-button>span:nth-child(2){flex:1;min-width:0;display:grid} #main[data-health-view="today"] .hw-row-button .row-title{font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="today"] .today-more{display:grid;gap:20px;padding-top:12px;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="today"] .today-more>h2{font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);font-weight:700;margin:0 4px} #main[data-health-view="today"] .today-more>.panel{margin:0} @media (max-width:1100px){#main[data-health-view="today"] :is(.hw-grid-main,.hw-grid-mid,.hw-grid-team){grid-template-columns:minmax(0,1fr)}} /* Roster week (golden 3286:7036): tiles carry the time, the name and a status WORD when it is not routine */ #main[data-health-view="roster"] .hw-roster-week{margin:0 0 28px} #main[data-health-view="roster"] .hw-week-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px} #main[data-health-view="roster"] .hw-round{width:var(--dawnby-control-touch);height:var(--dawnby-control-touch);border-radius:24px;border:1px solid var(--dawnby-control-border);background:transparent;color:var(--dawnby-label-primary);font-size:1.25rem} #main[data-health-view] .hw-segmented{display:inline-flex;gap:2px;padding:4px;border-radius:24px;background:var(--dawnby-glass-pill)} #main[data-health-view] .hw-segmented button{min-height:var(--dawnby-control-touch);padding:0 14px;border:0;border-radius:20px;background:transparent;font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-primary);cursor:pointer} #main[data-health-view] .hw-segmented button[aria-pressed="true"]{background:var(--dawnby-bg-grouped-secondary);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1)} #main[data-health-view="roster"] .hw-summary-strip{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:14px 16px;margin:0 0 12px} #main[data-health-view="roster"] .hw-summary-strip p{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="roster"] .hw-summary-strip svg{width:16px;height:16px;color:var(--dawnby-iris)} #main[data-health-view="roster"] .hw-summary-strip span{color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-week{background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);overflow-x:auto} #main[data-health-view="roster"] .hw-week-row{display:grid;grid-template-columns:minmax(170px,200px) repeat(7,minmax(104px,1fr));min-width:900px;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="roster"] .hw-week-header{border-top:0} #main[data-health-view="roster"] .hw-week-who{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;font-size:var(--dawnby-type-subheadline-size);font-weight:600} #main[data-health-view="roster"] .hw-week-who>span:last-child{display:grid} #main[data-health-view="roster"] .hw-week-who .avatar{width:36px;height:36px;border-radius:18px;flex:0 0 36px} #main[data-health-view="roster"] .hw-avatar-open{background:transparent;border:1.5px dashed var(--dawnby-vivid-red)} #main[data-health-view="roster"] .hw-muted{color:var(--dawnby-label-secondary);font-weight:400} #main[data-health-view="roster"] .hw-week-day{padding:12px 8px;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-week-day strong{font-size:var(--dawnby-type-headline-size);color:var(--dawnby-label-primary);margin-left:2px} #main[data-health-view="roster"] .hw-week-day.is-today strong{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:13px;background:var(--dawnby-iris-fill);color:var(--dawnby-label-on-accent);font-size:var(--dawnby-type-footnote-size)} #main[data-health-view="roster"] :is(.hw-week-day,.hw-week-cell).is-today{background:var(--dawnby-fill-on-card)} #main[data-health-view="roster"] .hw-week-cell{display:grid;align-content:start;gap:6px;padding:8px 6px} #main[data-health-view="roster"] .hw-tile{display:grid;gap:1px;text-align:left;min-height:48px;padding:6px 8px;border-radius:var(--dawnby-radius-sm);border:0;border-left:3px solid var(--dawnby-iris);background:var(--dawnby-iris-soft);color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text);cursor:pointer} #main[data-health-view="roster"] .hw-tile-time{font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-tile-name{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600} #main[data-health-view="roster"] .hw-tile-state{font-size:var(--dawnby-type-caption1-size);font-weight:600} #main[data-health-view="roster"] .hw-tile.needsworker{background:var(--dawnby-danger-tint);border:1px dashed var(--dawnby-status-critical);border-left:3px solid var(--dawnby-status-critical)} #main[data-health-view="roster"] .hw-tile.needsworker .hw-tile-state{color:var(--dawnby-status-critical)} #main[data-health-view="roster"] .hw-tile.nostart{background:var(--dawnby-sun-soft);border-left-color:var(--dawnby-sun)} #main[data-health-view="roster"] .hw-tile.nostart .hw-tile-state{color:var(--dawnby-sun-text)} #main[data-health-view="roster"] .hw-tile.cancelled{background:var(--dawnby-fill-on-card);border-left-color:var(--dawnby-label-tertiary);color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-tile.draft .hw-tile-state{color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-tile:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} /* Clients (golden 3286:8882): list left, enquiries and exits right */ #main[data-health-view="clients"] .hw-people{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(300px,1fr);gap:24px;align-items:start} #main[data-health-view="clients"] .hw-people-side{margin-top:0!important} #main[data-health-view="clients"] .hw-people-side .panel{margin-bottom:24px} #main[data-health-view="clients"] .hw-table-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr) 48px;gap:12px;padding:9px 16px;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop) var(--dawnby-radius-card-desktop) 0 0;border-bottom:0.5px solid var(--dawnby-separator);font-size:var(--dawnby-type-footnote-size);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view="clients"] .hw-table-head+.record-cards{border-radius:0} #main[data-health-view="clients"] .record-cards{border-radius:0 0 var(--dawnby-radius-card-desktop) var(--dawnby-radius-card-desktop)} #main[data-health-view="clients"] .hw-table-foot{margin:0;padding:14px 16px;background:var(--dawnby-bg-grouped-secondary);border-top:0.5px solid var(--dawnby-separator);border-radius:0 0 var(--dawnby-radius-card-desktop) var(--dawnby-radius-card-desktop);font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} #main[data-health-view="clients"] .hw-table-head~.record-cards{border-radius:0} #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr) 48px;grid-template-areas:"head next status foot" "goal info info foot";gap:2px 12px} #main[data-health-view="clients"] .record-card-head{grid-area:head} #main[data-health-view="clients"] .record-card>.client-goal{grid-area:goal;padding-left:52px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="clients"] .record-card>.client-next{grid-area:next;margin:0;font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="clients"] .client-cell-label{display:none} #main[data-health-view="clients"] .record-card>.client-status{grid-area:status} #main[data-health-view="clients"] .record-card>.card-info{grid-area:info;padding-left:0;display:flex;gap:12px;flex-wrap:wrap} #main[data-health-view="clients"] .record-card>.card-info>div{gap:4px;justify-content:flex-start} #main[data-health-view="clients"] .record-card>.card-footer{grid-area:foot} #main[data-health-view="clients"] .card-footer .button.ghost{width:48px;padding:0;justify-content:center;font-size:0;color:var(--dawnby-label-tertiary)} #main[data-health-view="clients"] .card-footer .button.ghost::after{margin-left:0;width:9px;height:9px} @media (max-width:1100px){#main[data-health-view="clients"] .hw-people{grid-template-columns:minmax(0,1fr)}} @media (max-width:760px){ #main[data-health-view="clients"] .hw-table-head{display:none} #main[data-health-view="clients"] .record-cards{border-radius:var(--dawnby-radius-lg)} #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next foot" "status foot" "goal foot" "info foot"} #main[data-health-view="clients"] .record-card>:is(.client-next,.client-status,.card-info){padding-left:52px} #main[data-health-view="clients"] .client-cell-label{display:inline;color:var(--dawnby-label-secondary);margin-right:6px} } :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next foot" "status foot" "goal foot" "info foot"} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card>:is(.client-next,.client-status,.card-info,.client-goal){padding-left:52px;grid-column:auto} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .hw-table-head{display:none} :root[data-dawnby-text="larger"] #main[data-health-view="today"] :is(.hw-grid-main,.hw-grid-mid,.hw-grid-team){grid-template-columns:minmax(0,1fr)} #main[data-health-view="today"] .today-head-actions{flex-direction:row;flex-wrap:wrap;width:auto} #main[data-health-view="clients"] .record-card>.card-info{flex-wrap:nowrap;gap:16px;font-size:var(--dawnby-type-footnote-size)} #main[data-health-view="clients"] .record-card>.card-info>div{white-space:nowrap} #main[data-health-view="today"] .today-head>.today-head-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;width:auto} #main[data-health-view="today"] .today-head>.today-head-actions>*{flex:0 0 auto;width:auto} @media (max-width:640px){#main[data-health-view="today"] .today-head>.today-head-actions{flex-wrap:wrap;width:100%}#main[data-health-view="today"] .today-head>.today-head-actions .button.primary{flex:1 1 100%}} /* Phone width: each schedule row stacks (time and status, client, worker, then the action) instead of scrolling sideways */ @media (max-width:640px){ #main[data-health-view="today"] .today-visit-head{display:none} #main[data-health-view="today"] .today-visit{min-width:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time status" "client client" "who who" "open open";gap:6px 12px;padding:12px 16px} #main[data-health-view="today"] .today-visit>.today-visit-time{grid-area:time} #main[data-health-view="today"] .today-visit>.hw-status{grid-area:status;justify-self:end} #main[data-health-view="today"] .today-visit>.today-visit-client{grid-area:client} #main[data-health-view="today"] .today-visit>.today-visit-who{grid-area:who} #main[data-health-view="today"] .today-visit>.button{grid-area:open;justify-self:start} } :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit-head{display:none} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit{min-width:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time status" "client client" "who who" "open open";gap:6px 12px;padding:12px 16px} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit>.today-visit-time{grid-area:time} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit>.hw-status{grid-area:status;justify-self:end} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit>.today-visit-client{grid-area:client} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit>.today-visit-who{grid-area:who} :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit>.button{grid-area:open;justify-self:start} /* HEALTH-02-WEB-AUDIT: preserve the golden layout at narrow/Larger Text widths. Presentation only; action order, permissions, records and routes are unchanged. */ #main[data-health-view="today"] .today-head>div:first-child{flex:1 1 320px;min-width:0} #main[data-health-view="today"] .today-head>.today-head-actions{flex:0 1 auto;flex-wrap:wrap;max-width:100%;min-width:0} #main[data-health-view="today"] .today-head>.today-head-actions>*{max-width:100%} #main[data-health-view="today"] .today-head-actions .button.primary{min-width:var(--dawnby-control-touch)} #main[data-health-view="today"] #workspace-content>p>.button{max-width:100%;white-space:normal;text-align:center;padding-block:8px} #main[data-health-view="clients"] .record-card>.card-footer{padding:0;margin:0;min-width:0;justify-content:flex-end} #main[data-health-view="clients"] .record-card>.card-info{flex-wrap:wrap;min-width:0} #main[data-health-view="clients"] .record-card>.card-info>div{white-space:normal;flex-wrap:wrap;min-width:0;max-width:100%} #main[data-health-view="clients"] .card-info :is(span,strong){min-width:0;overflow-wrap:anywhere;text-align:left} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .client-cell-label{display:inline;color:var(--dawnby-label-secondary);margin-right:6px} body[data-dawnby-surface="app"] #workspace-search-input::placeholder{color:var(--dawnby-label-secondary);opacity:1} body[data-dawnby-surface="app"] .loading-surface p{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);letter-spacing:var(--dawnby-type-subheadline-tracking)} @media(max-width:640px){ #main[data-health-view="today"] .home-activity-row{display:grid;grid-template-columns:6px minmax(0,1fr);grid-template-areas:"dot content" ". time";gap:6px 12px;align-items:start} #main[data-health-view="today"] .home-activity-row .home-activity-dot{grid-area:dot;margin-top:.6em} #main[data-health-view="today"] .home-activity-row .list-row-main{grid-area:content} #main[data-health-view="today"] .home-activity-row .activity-time{grid-area:time;margin-left:0;max-width:none;text-align:left} body[data-dawnby-surface="app"] .topbar{padding-inline:16px} } @media(max-width:480px){body[data-dawnby-surface="app"] .sample-data-label{flex:1 1 min-content;max-width:none}} /* Cards fill their columns; only reading lines are bounded. Never stretch actions. */ #main[data-health-view] :is(.hw-card,.panel-body,.profile-section,.record-card,.today-need-text) p{max-width:75ch} #main[data-health-view] :is(.small-note,.today-note,.page-description){max-width:75ch} @media(min-width:2400px){ #main[data-health-view="today"] .hw-today-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start} #main[data-health-view="today"] .hw-today-overview:has(.today-live){grid-template-columns:repeat(3,minmax(0,1fr))} #main[data-health-view="today"] .hw-grid-main{display:contents} #main[data-health-view="today"] .hw-grid-main>.today-section:only-child{grid-column:auto} #main[data-health-view="today"] .hw-grid-mid{grid-template-columns:minmax(0,1fr)} #main[data-health-view="today"] :is(.hw-today-overview>*,.hw-grid>.today-section){min-width:0} } /* HEALTH-02-FIGMA-MATCH · compact transfer 3282:5005. Measured roles, not a new scale. Direct Visits/Find support and 48px controls intentionally exceed the static frame. */ body[data-dawnby-surface="app"] .sidebar .brand{position:relative;padding-bottom:4px} /* The compact home link draws 38 tall; a centred hit area keeps it at the 48 floor (D-0175) without moving the Figma layout. */ body[data-dawnby-surface="app"] .sidebar .brand::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:var(--dawnby-interaction-comfortable-touch-target);transform:translate(-50%,-50%)} body[data-dawnby-surface="app"] .sidebar .brand-caption{display:none} body[data-dawnby-surface="app"] .sidebar .workspace-label{display:block;position:static;max-width:none;text-align:left;padding:0 16px 16px 52px} body[data-dawnby-surface="app"] .nav-more>summary{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-width:0;max-width:100%;min-height:48px;padding:0 10px;cursor:pointer;list-style:none;border-radius:22px;font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line);white-space:normal;overflow-wrap:anywhere} body[data-dawnby-surface="app"] :is(.nav-more>summary,.nav-group>summary)::marker{content:none} body[data-dawnby-surface="app"] .nav-more>summary::-webkit-details-marker{display:none} body[data-dawnby-surface="app"] .nav-more>summary::after{content:"›";margin-left:0;justify-self:end;color:var(--dawnby-iris);font-size:min(1.4rem,22px);line-height:1;width:1em;text-align:center} body[data-dawnby-surface="app"] .nav-more[open]>summary::after{transform:rotate(90deg)} body[data-dawnby-surface="app"] .nav-more>summary:hover{background:var(--dawnby-fill-on-card)} body[data-dawnby-surface="app"] .nav-more>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} body[data-dawnby-surface="app"] .nav-more-body{padding:4px 0 8px 12px} body[data-dawnby-surface="app"] .workspace-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--dawnby-glass-pill);border-radius:14px;max-width:100%} body[data-dawnby-surface="app"] .workspace-status :is(.sample-data-label,.connection-status){padding:0;background:none;white-space:normal;font-size:var(--dawnby-type-caption1-size);line-height:var(--dawnby-type-caption1-line);font-weight:400} body[data-dawnby-surface="app"] .workspace-status .sample-data-label:not([hidden])::after{content:" ·"} body[data-dawnby-surface="app"] .workspace-status .connection-status>span{width:5px;height:5px;margin-right:4px} .profile-avatar-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:3px;flex:none;vertical-align:middle} .profile-avatar-wrap .avatar{flex:none} .profile-photo-note{display:block;max-width:9ch;text-align:center;font-size:var(--dawnby-type-caption2-size);line-height:var(--dawnby-type-caption2-line);font-weight:400;color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-head .page-description{font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line);max-width:75ch} #main[data-health-view="today"] .today-updated{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);margin:6px 0 0;max-width:75ch} #main[data-health-view="today"] .today-need-row{padding:12px 48px 12px 16px;flex-wrap:nowrap} #main[data-health-view="today"] .today-need-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;color:var(--dawnby-iris)} #main[data-health-view="today"] .today-need-icon svg{width:24px;height:24px} #main[data-health-view="today"] .today-need-text{flex:1;min-width:0} #main[data-health-view="today"] .today-need-text h3{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);font-weight:600} #main[data-health-view="today"] .today-need-count{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;flex:0 0 auto;width:auto;color:var(--dawnby-label-secondary)} #main[data-health-view] :is(.today-need-row,.today-visit){position:relative} #main[data-health-view] .button.hw-row-action{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:48px;margin:0;padding:0 16px;background:none;border:0;border-radius:8px;display:flex;justify-content:flex-end;color:var(--dawnby-label-secondary);box-shadow:none} #main[data-health-view] .button.hw-row-action:hover{background:var(--dawnby-fill-on-card)} #main[data-health-view] .button.hw-row-action:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:-3px} #main[data-health-view] .hw-chevron{font-size:1.5rem;line-height:1} #main[data-health-view] .hw-chevron:empty::after{content:"›"} #main[data-health-view] .hw-card{padding:20px} #main[data-health-view] .hw-card-title{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view] .hw-card-title svg{width:18px;height:18px;flex-basis:18px} #main[data-health-view] .hw-card-meta{font-size:var(--dawnby-type-footnote-size)} #main[data-health-view] .hw-figure strong,#main[data-health-view="today"] .hw-day-figures strong{font-size:var(--dawnby-type-detail-value-size);line-height:var(--dawnby-type-detail-value-line);letter-spacing:var(--dawnby-type-detail-value-tracking)} #main[data-health-view] .hw-figure span{font-family:var(--dawnby-font-figure);font-size:var(--dawnby-type-subheadline-size);font-weight:700} #main[data-health-view="today"] .hw-donut{width:96px;height:96px;flex:0 0 96px} #main[data-health-view="today"] .hw-legend li{min-height:48px} #main[data-health-view="today"] .hw-next{padding:16px} #main[data-health-view="today"] .hw-next .row-title{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line)} #main[data-health-view="today"] .hw-timeline{height:12px;border-radius:6px} #main[data-health-view="today"] :is(.today-visit-head,.today-visit){grid-template-columns:minmax(130px,.8fr) minmax(180px,1.8fr) minmax(160px,1.1fr) minmax(150px,1fr);padding-inline:16px 40px} #main[data-health-view="today"] .today-visit{min-height:64px;padding-block:10px} #main[data-health-view="today"] .today-visit-client h3{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line)} #main[data-health-view="today"] .today-visit-who .avatar{width:32px;height:32px} #main[data-health-view="today"] .today-more{gap:16px;border:0;padding-top:0} #main[data-health-view="today"] .today-more>h2{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-auxiliary{background:var(--dawnby-bg-grouped-secondary);border-radius:18px;overflow:hidden} #main[data-health-view="today"] .today-auxiliary>summary{min-height:48px;padding:12px 20px;cursor:pointer;color:var(--dawnby-iris);font-size:var(--dawnby-type-subheadline-size);font-weight:600} #main[data-health-view="today"] .today-auxiliary>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:-3px} #main[data-health-view="today"] .today-auxiliary>.panel{margin:0} #main[data-health-view="today"] .role-task-grid{display:flex;flex-wrap:wrap;gap:0;background:var(--dawnby-bg-grouped-secondary);border-radius:18px} #main[data-health-view="today"] .role-task-card{flex:1 1 220px;padding:12px 16px;border-radius:0;min-height:64px} #main[data-health-view="today"] .role-task-card p{margin-block:4px 0} @media(min-width:1101px) and (max-width:2399px){ #main[data-health-view="today"] :is(.hw-grid-main,.hw-grid-mid){grid-template-columns:minmax(0,1.93fr) minmax(0,1fr)} } @media(max-width:640px){ #main[data-health-view="today"] .today-need-row{padding-left:12px;gap:10px} #main[data-health-view="today"] .today-visit{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time status" "client client" "who who";padding:12px 40px 12px 16px} body[data-dawnby-surface="app"] .workspace-status{flex:0 1 auto} } :root[data-dawnby-text="larger"] #main[data-health-view="today"] .today-visit{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time status" "client client" "who who";padding-right:40px} /* Compact transfer follow-up: 3282:5703 / 6439 / 6614 / 6048. */ body[data-dawnby-surface="app"] .hw-provider-name{display:block;overflow-wrap:anywhere;color:var(--dawnby-label-primary)} body[data-dawnby-surface="app"] .workspace-label .sample-data-label{display:block;text-align:left;padding:2px 0 0;border-radius:0;background:none;font-weight:400;color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .workspace-label .sample-data-label[hidden]{display:none} #main[data-health-view="today"] .today-highlights .today-numbers{display:block;margin-top:12px} #main[data-health-view="today"] .today-highlights .today-numbers .metric{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border:0} #main[data-health-view="today"] .today-highlights .today-numbers .metric+.metric{border-top:0.5px solid var(--dawnby-separator);padding-left:0} #main[data-health-view="today"] .today-highlights .metric-label{grid-column:1;font-size:var(--dawnby-type-subheadline-size);font-weight:400;color:var(--dawnby-label-primary)} #main[data-health-view="today"] .today-highlights .metric-value{grid-column:2;grid-row:1/3;margin:0;align-self:center;font-size:var(--dawnby-type-title3-size);line-height:var(--dawnby-type-title3-line)} #main[data-health-view="today"] .today-highlights .metric-caption{grid-column:1} #main[data-health-view="roster"] .hw-week-who .row-title{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view="roster"] .hw-week-who .row-subtitle{font-weight:400} #main[data-health-view="roster"] .hw-tile-time{line-height:var(--dawnby-type-caption1-line)} #main[data-health-view="roster"] .hw-tile-state{line-height:var(--dawnby-type-caption1-line)} #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr) minmax(0,.75fr) 48px;grid-template-areas:"head next status foot";padding-block:10px;row-gap:0} #main[data-health-view="clients"] .hw-table-head{grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr) minmax(0,.75fr) 48px} #main[data-health-view="clients"] .client-record-details{min-width:0} #main[data-health-view="clients"] .client-record-details>summary{display:inline-flex;align-items:center;min-height:48px;cursor:pointer;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-iris)} #main[data-health-view="clients"] .client-record-details>summary::after{content:"›";margin-left:8px} #main[data-health-view="clients"] .client-record-details[open]>summary::after{transform:rotate(90deg)} #main[data-health-view="clients"] .client-record-details>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px;border-radius:4px} #main[data-health-view="clients"] .client-record-details .client-goal{margin:0 0 8px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="clients"] .client-record-details .card-info{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px} #main[data-health-view="clients"] .client-record-details .card-info>div{gap:6px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-head{align-items:center} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .worker-actions{margin-left:auto;position:relative;max-width:100%;align-self:center} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .worker-actions>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 18px;border:1px solid var(--dawnby-control-border);border-radius:24px;cursor:pointer;font-size:var(--dawnby-type-subheadline-size);font-weight:600} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .worker-actions>summary::after{content:"⌄";color:var(--dawnby-iris)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .worker-actions>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .worker-actions .person-actions{position:absolute;right:0;top:calc(100% + 8px);z-index:4;width:320px;max-width:calc(100vw - 40px);padding:12px;display:grid;grid-template-columns:minmax(0,1fr);background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-separator);border-radius:18px;box-shadow:var(--dawnby-elevation-glass-sidebar)} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-page .person-tabs{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:thin} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-tab{flex:0 0 auto} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section{background:transparent;padding:0} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section>.form-section-heading{font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);font-weight:700;color:var(--dawnby-label-primary);margin:0 4px 8px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section>:is(.person-rows,.empty-state,.detail-grid){background:var(--dawnby-bg-grouped-secondary);border-radius:18px;overflow:hidden} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section>.detail-grid{padding:4px 16px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section>.small-note{padding-inline:16px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section>.form-actions{padding-inline:16px} #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .profile-section .list-row{padding:12px 16px} #main[data-health-view="quality"] .page-heading .eyebrow{display:none} @media(max-width:760px){ #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next foot" "status foot"} #main[data-health-view="clients"] .client-record-details{padding-left:0} } :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next foot" "status foot"} #main[data-health-view="clients"] .client-status:has(.client-record-details[open]){grid-column:1/-1;grid-row:2;padding-left:52px} #main[data-health-view="clients"] .client-status:has(.client-record-details[open]) .client-goal{max-width:75ch} /* Figma shell: operational controls stay in the labelled sidebar disclosure. */ body[data-dawnby-surface="app"] .provider-label{position:relative;gap:12px} body[data-dawnby-surface="app"] .provider-label .account-button{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--dawnby-fill-on-card);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .hw-account-copy{min-width:0;font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} body[data-dawnby-surface="app"] .hw-account-copy>span{display:block;margin-top:4px;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .hw-session-menu>summary{display:flex;align-items:center;min-height:48px;padding:8px 16px;cursor:pointer;font-size:var(--dawnby-type-footnote-size);color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .hw-session-menu>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:-2px;border-radius:8px} body[data-dawnby-surface="app"] .hw-session-controls{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 8px;align-items:center} body[data-dawnby-surface="app"] .topbar-right{min-width:0;max-width:100%} body[data-dawnby-surface="app"] .workspace-footer{flex-wrap:wrap;min-width:0;gap:8px 20px} body[data-dawnby-surface="app"] .workspace-footer-context{max-width:100%;overflow-wrap:anywhere} #main[data-health-view="quality"] .page-heading .eyebrow{display:block} @media(max-width:640px){body[data-dawnby-surface="app"] .topbar{gap:8px}body[data-dawnby-surface="app"] .topbar-right{gap:4px;flex:1;justify-content:flex-end}} /* Clients 3282:6439: quiet table, existing intake/exit data, one sample label. */ .hw-page-sample{display:inline-block;vertical-align:middle;margin-left:12px;padding:4px 10px;border-radius:12px;background:var(--dawnby-fill-on-card);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:500;letter-spacing:normal} #main[data-health-view="clients"] .hw-people-side{margin-top:88px} #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) 96px;min-height:64px;padding-block:8px;position:relative} #main[data-health-view="clients"] .hw-table-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) 96px} #main[data-health-view="clients"] .record-card .card-footer{display:flex;align-items:center;gap:0} #main[data-health-view="clients"] .card-footer>.button{width:48px;min-width:48px;padding:0} #main[data-health-view="clients"] .client-record-details>summary{display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;list-style:none;font-size:1.2rem} #main[data-health-view="clients"] .client-record-details>summary::after{content:none} #main[data-health-view="clients"] .client-record-details>summary::-webkit-details-marker{display:none} #main[data-health-view="clients"] .client-details-body{position:absolute;inset-inline:16px;top:100%;z-index:3;padding:16px;background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-separator);border-radius:14px;box-shadow:var(--dawnby-elevation-glass-sidebar)} #main[data-health-view="clients"] .record-card-head .row-subtitle{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin:3px 0 0} #main[data-health-view="clients"] .profile-photo-note,#main[data-health-view="worker-list"] .profile-photo-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} #main[data-health-view="clients"] .client-status .hw-status{white-space:normal} @media(max-width:760px){#main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"head foot" "next next" "status status"}#main[data-health-view="clients"] .hw-people-side{margin-top:0}} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"head foot" "next next" "status status"} /* Five primary worker tabs; all other tested panels remain under More. */ #main:is([data-health-view="worker-profile"],[data-health-view="person-profile"]) .person-page .person-tabs{overflow:visible;flex-wrap:wrap;gap:4px} #main[data-health-view="worker-profile"] .worker-more-tabs{position:relative;min-width:80px} #main[data-health-view="worker-profile"] .worker-more-tabs>summary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;cursor:pointer;list-style:none;font-size:var(--dawnby-type-subheadline-size)} #main[data-health-view="worker-profile"] .worker-more-tabs>summary::after{content:"⌄";margin-left:8px} #main[data-health-view="worker-profile"] .worker-more-tabs>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:-2px;border-radius:8px} #main[data-health-view="worker-profile"] .worker-more-options{position:absolute;top:100%;right:0;z-index:5;width:250px;display:grid;background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-separator);box-shadow:var(--dawnby-elevation-glass-sidebar);padding:8px;border-radius:16px} #main[data-health-view="worker-profile"] .worker-more-tabs:not([open])>.worker-more-options{display:none} #main[data-health-view="worker-profile"] .worker-more-options .person-tab{text-align:left;border-radius:8px;white-space:normal} #main[data-health-view="worker-profile"] .person-credential .row-subtitle{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin-top:4px} #main[data-health-view="worker-profile"] .person-credential.is-expired{border-left:3px solid var(--dawnby-status-warning)} #main[data-health-view="worker-list"] .hw-workforce-registers{margin-top:24px} #main[data-health-view="worker-list"] .hw-workforce-registers>summary{display:flex;align-items:center;min-height:48px;padding:12px 16px;background:var(--dawnby-bg-grouped-secondary);border-radius:16px;cursor:pointer;font-size:var(--dawnby-type-headline-size)} #main[data-health-view="worker-list"] .hw-workforce-registers>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} #main[data-health-view="worker-list"] .profile-name-cell{display:flex;align-items:center;gap:12px} #main[data-health-view="worker-list"] .data-table td{padding-block:8px} #main[data-health-view="worker-list"] .data-table td:first-child{font-weight:600} #main[data-health-view="clients"] .hw-people-side>.panel>.panel-header{background:var(--dawnby-bg-grouped);border:0;padding:0 4px 8px} #main[data-health-view="clients"] .hw-people-side>.panel>.panel-header h2{font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);color:var(--dawnby-label-primary);font-weight:700} /* The client identity owns the flexible width; exception-only status remains quiet. */ #main[data-health-view="clients"] :is(.record-card,.hw-table-head){grid-template-columns:minmax(0,2.2fr) minmax(150px,1fr) minmax(100px,.65fr) 48px} #main[data-health-view="clients"] .client-record-details>summary{font-size:24px;justify-content:center} #main[data-health-view="clients"] .client-details-body .button{margin-top:12px} @media(max-width:1000px){#main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next next" "status status"}#main[data-health-view="clients"] .hw-table-head{display:none}} :root[data-dawnby-text="larger"] #main[data-health-view="clients"] .record-card{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"head foot" "next next" "status status"} /* Health Quality hub: fewer panels, direct links to the existing registers. */ .hw-quality-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;margin-bottom:28px} .hw-quality-needs{list-style:none;padding:0;margin:0} .hw-quality-needs li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0} .hw-quality-needs li+li{border-top:1px solid var(--dawnby-separator)} .hw-quality-needs p{margin:0}.hw-quality-needs .row-subtitle{margin-top:3px} .hw-quality-facts button{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;min-height:56px;gap:12px;border:0;background:none;color:var(--dawnby-label-primary);font:inherit} .hw-quality-facts strong{font-size:var(--dawnby-type-title2-size);font-variant-numeric:tabular-nums} .hw-register-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px} .hw-register{display:flex;align-items:center;gap:12px;padding:20px;min-height:96px;width:100%;text-align:left;background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);border:0;border-radius:var(--dawnby-radius-card-desktop);font:inherit;text-decoration:none} .hw-register>svg{width:24px;height:24px;flex-shrink:0;color:var(--dawnby-iris)} .hw-register>span:first-of-type{flex:1;min-width:0}.hw-register strong{display:block;font-weight:600}.hw-register span span{display:block;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin-top:4px} .hw-register:hover,.hw-quality-facts button:hover{background:var(--dawnby-fill-on-card)} .hw-register:focus-visible,.hw-quality-facts button:focus-visible{outline:3px solid var(--dawnby-iris);outline-offset:3px} @media(max-width:1000px){.hw-register-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.hw-quality-top,.hw-register-grid{grid-template-columns:minmax(0,1fr)}} :root[data-dawnby-text="larger"] .hw-quality-top,:root[data-dawnby-text="larger"] .hw-register-grid{grid-template-columns:minmax(0,1fr)} .hw-quality-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start} .hw-quality-top{display:flex;flex-direction:column;gap:28px;margin:0}.hw-quality-side{min-width:0} .hw-quality-side .hw-register-grid{display:block;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:0 16px} .hw-quality-side .hw-register{min-height:64px;padding:10px 4px;border-radius:0}.hw-quality-side .hw-register+.hw-register{border-top:1px solid var(--dawnby-separator)} .hw-quality-side .hw-card{padding:0 16px} .hw-highlight-rows{margin:16px 0 0}.hw-highlight-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-top:1px solid var(--dawnby-separator)} .hw-highlight-rows dt{font-size:var(--dawnby-type-subheadline-size)}.hw-highlight-rows dd{margin:0;font-size:var(--dawnby-type-title3-size);font-weight:600;font-variant-numeric:tabular-nums}.hw-highlight-rows .button{padding-left:0;text-align:left;white-space:normal} #main[data-health-view="today"] .today-visit{min-height:48px;padding-block:0} #main[data-health-view="today"] .today-visit-client h3{line-height:22px}#main[data-health-view="today"] .today-visit-client p{line-height:18px;margin:0} .hw-print-options{margin:16px 0}.hw-print-options>summary{min-height:48px;display:flex;align-items:center;color:var(--dawnby-iris);cursor:pointer} @media(max-width:1000px){.hw-quality-layout{grid-template-columns:minmax(0,1fr)}} :root[data-dawnby-text="larger"] .hw-quality-layout{grid-template-columns:minmax(0,1fr)} #main[data-health-view="today"] .today-numbers.hw-card{display:block;margin:0} .hw-metric-source{display:block;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} /* Figma 3282:6614: source-backed qualification rows, quiet header status. */ .hw-worker-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .hw-check-chip{min-height:48px;border:0;background:transparent;color:var(--dawnby-status-critical);font:inherit;font-size:var(--dawnby-type-footnote-size);font-weight:600;cursor:pointer;padding:8px 12px;border-radius:24px} .hw-check-chip:hover{background:var(--dawnby-fill-on-card)}.hw-check-chip:focus-visible{outline:3px solid var(--dawnby-iris);outline-offset:2px} .hw-evidence-note{padding:12px 16px;margin:0;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} .hw-qualification-rows .person-credential{align-items:flex-start;gap:16px;border-top:1px solid var(--dawnby-separator)} .hw-evidence-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 144px;max-width:100%} .hw-evidence-actions .button{width:144px;min-height:48px}.hw-evidence-status{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600;text-align:right} .hw-evidence-status.current{color:var(--dawnby-status-success)}.hw-evidence-status.expired{color:var(--dawnby-status-critical)}.hw-evidence-status.expiring{color:var(--dawnby-sun-text)} .hw-quality-highlights{display:grid;gap:16px}.hw-quality-highlights h3{font-size:var(--dawnby-type-headline-size);margin:0 0 8px} .hw-quality-highlight-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 0;border-top:1px solid var(--dawnby-separator)} .hw-quality-highlight-row>div{min-width:0}.hw-quality-highlight-row p{margin:0}.hw-quality-highlight-row .row-subtitle{margin-top:4px} @media(max-width:640px){.hw-qualification-rows .person-credential{flex-wrap:wrap}.hw-evidence-actions{flex-direction:row;flex:1 0 100%;justify-content:space-between;align-items:center}.hw-evidence-status{text-align:left}.hw-quality-needs li{flex-wrap:wrap}} :root[data-dawnby-text="larger"] .hw-qualification-rows .person-credential{flex-wrap:wrap} .hw-quality-needs .profile-avatar-wrap{flex-shrink:0}.hw-quality-need-copy{flex:1;min-width:0}.hw-due-chip{display:inline-flex;align-items:center;border-radius:12px;padding:4px 10px;background:var(--dawnby-fill-on-card);color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);white-space:nowrap} @media(max-width:640px){.hw-quality-need-copy{flex-basis:calc(100% - 56px)}.hw-quality-needs .hw-due-chip{margin-left:56px}} /* The full-row hit target must not inherit the old inline action's phone margin. */ #main[data-health-view="today"] .today-need-row>.button.hw-row-action{margin:0} /* Keep the real search field usable when phone text grows. */ @media(max-width:640px){ body[data-dawnby-surface="app"] .topbar{display:grid;grid-template-columns:48px minmax(0,1fr);height:auto;gap:8px} body[data-dawnby-surface="app"] .topbar .breadcrumb{min-width:0;margin-right:0;overflow-wrap:anywhere} body[data-dawnby-surface="app"] .topbar-right{grid-column:1/-1;display:flex;flex-wrap:nowrap;width:100%;gap:8px} body[data-dawnby-surface="app"] .workspace-search{flex:1;width:auto;min-width:0} body[data-dawnby-surface="app"] .topbar-right>.icon-button{flex:0 0 48px} } /* Figma 3282:5018 assets, unchanged 24px geometry. Tokens supply both themes. */ .hw-need-glyph{display:inline-block;flex:0 0 24px;width:24px;height:24px;background:var(--dawnby-label-secondary);mask:var(--hw-need-mask) center/24px 24px no-repeat} .hw-need-glyph[data-glyph="clock"]{--hw-need-mask:url('/brand-assets/health-needs/clock.svg')} .hw-need-glyph[data-glyph="people"]{--hw-need-mask:url('/brand-assets/health-needs/people.svg')} .hw-need-glyph[data-glyph="urgent"]{--hw-need-mask:url('/brand-assets/health-needs/urgent.svg')} .hw-need-glyph[data-glyph="chat"]{--hw-need-mask:url('/brand-assets/health-needs/chat.svg')} .hw-need-glyph[data-glyph="check"]{--hw-need-mask:url('/brand-assets/health-needs/check.svg')} [data-urgency="warning"] .hw-need-glyph{background:var(--dawnby-vivid-orange)} [data-urgency="danger"] .hw-need-glyph{background:var(--dawnby-vivid-red)} [data-urgency="warning"]>.hw-due-chip{color:var(--dawnby-sun-text);background:var(--dawnby-warning-tint)} [data-urgency="danger"]>.hw-due-chip{color:var(--dawnby-status-critical);background:var(--dawnby-danger-tint)} #main[data-health-view="today"] .today-need-text .today-need-count{display:inline;font:inherit;color:inherit;background:none;padding:0;min-width:0;border-radius:0} .hw-quality-needs .hw-need-glyph{align-self:center} @media(max-width:640px){ #main[data-health-view="today"] .today-need-row{flex-wrap:wrap;gap:8px} #main[data-health-view="today"] .today-need-text{flex-basis:calc(100% - 36px)} #main[data-health-view="today"] .today-need-row>.hw-due-chip{margin-left:36px} .hw-quality-need-copy{flex-basis:calc(100% - 92px)} .hw-quality-needs .hw-due-chip{margin-left:92px} } /* Today: immediate work, compact person rows and a keyboard/touch preview. */ .hw-schedule-filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px} .hw-schedule-filters button{min-height:48px;padding:8px 14px;border:1px solid transparent;border-radius:24px;background:var(--dawnby-fill-on-card);color:var(--dawnby-label-secondary);font:inherit;font-size:var(--dawnby-type-subheadline-size);cursor:pointer} .hw-schedule-filters button[aria-pressed="true"]{background:var(--dawnby-iris);color:var(--dawnby-on-action,#fff)} .hw-schedule-filters button:focus-visible,.hw-person-trigger:focus-visible,.today-finished>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} #main[data-health-view="today"] .today-visit{grid-template-columns:100px minmax(200px,1.2fr) minmax(180px,1fr) minmax(170px,1fr) 48px;gap:8px;padding:3px 12px;border-left:3px solid transparent;min-height:54px} #main[data-health-view="today"] .today-visit-head{grid-template-columns:100px minmax(200px,1.2fr) minmax(180px,1fr) minmax(170px,1fr) 48px;gap:8px;padding:10px 15px} #main[data-health-view="today"] .today-visit[data-visit-status="nostart"]{border-left-color:var(--dawnby-vivid-orange)} #main[data-health-view="today"] .today-visit[data-visit-status="needsworker"]{border-left-color:var(--dawnby-status-critical)} #main[data-health-view="today"] .today-visit-client>p{margin:0 0 4px 44px;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .today-visit-who{display:block} .hw-person-trigger{display:flex;align-items:center;gap:10px;text-align:left;min-height:48px;max-width:100%;padding:0;border:0;border-radius:8px;background:none;color:var(--dawnby-label-primary);font:inherit;font-size:var(--dawnby-type-subheadline-size);font-weight:600;cursor:pointer} .hw-person-trigger:hover>span:last-child{text-decoration:underline;text-underline-offset:4px} .hw-person-trigger .profile-photo-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .hw-person-trigger .avatar{width:34px;height:34px;min-width:34px} #main[data-health-view="today"] .button.hw-visit-open{grid-column:5;grid-row:1;position:static;width:48px;min-width:48px;height:48px;min-height:48px;margin:0;padding:0;font-size:0;background:none;border:0;box-shadow:none;color:var(--dawnby-label-secondary)} #main[data-health-view="today"] .button.hw-visit-open::after{content:'›';font-size:24px} #main[data-health-view="today"] .today-visit-state{display:flex;flex-direction:column;align-items:flex-start;gap:2px} #main[data-health-view="today"] .today-visit-state .hw-status{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin:0} #main[data-health-view="today"] .today-visit-state .button{padding:4px 0;min-height:48px;font-size:var(--dawnby-type-footnote-size);margin:0} .today-now{display:flex;gap:12px;align-items:center;margin:0;padding:10px 16px;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size)} .today-now::after{content:'';height:1px;background:var(--dawnby-separator);flex:1} .today-finished{border-top:1px solid var(--dawnby-separator)} .today-finished>summary{min-height:48px;display:flex;align-items:center;gap:5px;padding:8px 16px;cursor:pointer;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-subheadline-size);list-style:none} .today-finished>summary::-webkit-details-marker{display:none}.today-finished .hw-hide,.today-finished[open] .hw-show{display:none}.today-finished[open] .hw-hide{display:inline}.today-finished .hw-show,.today-finished .hw-hide{color:var(--dawnby-iris)} .hw-person-card{position:fixed;z-index:150;width:360px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:20px;border:1px solid var(--dawnby-separator);border-radius:18px;background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);box-shadow:var(--dawnby-elevation-glass-sidebar);font-family:var(--dawnby-font-text)} .hw-person-close{position:absolute;top:4px;right:4px;width:48px;height:48px;min-height:48px;background:none;border:0;color:var(--dawnby-label-secondary)} .hw-person-card-head{display:flex;gap:16px;align-items:center;padding-top:20px} .hw-person-card .avatar.hw-avatar-large{width:96px;height:96px;min-width:96px;font-size:28px} .hw-person-card h3{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);margin:0 0 6px} .hw-person-card p{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);margin:4px 0;color:var(--dawnby-label-secondary)} .hw-person-card-visit{margin:16px 0;padding-top:12px;border-top:1px solid var(--dawnby-separator)} .hw-person-card .hw-person-next{margin-bottom:12px}.hw-person-card .button{min-height:48px} @media(max-width:1100px){ #main[data-health-view="today"] .today-visit{grid-template-columns:88px minmax(0,1fr) 48px;gap:4px 8px} #main[data-health-view="today"] .today-visit-head{display:none} #main[data-health-view="today"] .today-visit-time{grid-column:1;grid-row:1;align-self:center} #main[data-health-view="today"] .today-visit-client{grid-column:2;grid-row:1} #main[data-health-view="today"] .today-visit-who{grid-column:2;grid-row:2} #main[data-health-view="today"] .today-visit-state{grid-column:2;grid-row:3;padding-bottom:8px} #main[data-health-view="today"] .button.hw-visit-open{grid-column:3;grid-row:1/4} } @media(max-width:640px){ #main[data-health-view="today"] .today-strip{display:block;min-width:0;overflow:visible} #main[data-health-view="today"] .today-visit{min-width:0;width:100%;grid-template-columns:minmax(0,1fr) 48px;padding:8px 12px} #main[data-health-view="today"] .today-visit-time{grid-column:1;grid-row:1;font-size:var(--dawnby-type-footnote-size);margin:0 0 4px} #main[data-health-view="today"] .today-visit-client{grid-column:1;grid-row:2} #main[data-health-view="today"] .today-visit-who{grid-column:1;grid-row:3} #main[data-health-view="today"] .today-visit-state{grid-column:1;grid-row:4;margin-left:44px} #main[data-health-view="today"] .button.hw-visit-open{grid-column:2;grid-row:1/5} } /* Twelve direct destinations including More fit a 900px window; targets remain 48px. */ @media(min-width:801px){ body[data-dawnby-surface="app"] .sidebar nav{padding:0;gap:0} body[data-dawnby-surface="app"] .nav-primary{gap:0;margin-bottom:0} body[data-dawnby-surface="app"] .sidebar .workspace-label{padding-bottom:8px} body[data-dawnby-surface="app"] .sidebar-bottom{padding-top:0} body[data-dawnby-surface="app"] .provider-label{padding:0;min-height:48px;margin-top:2px} } .hw-person-text{display:flex;flex-direction:column;gap:2px;min-width:0} .hw-person-subline{display:block;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:400;color:var(--dawnby-label-secondary)} /* Roster owner target 3282:8452: two summaries, compact week and real legend. */ #main[data-health-view="roster"] .hw-roster-summaries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0} .hw-roster-summary-card{padding:20px;border-radius:18px;background:var(--dawnby-bg-grouped-secondary);min-width:0} .hw-roster-summary-card .hw-card-heading{display:flex;align-items:center;gap:6px;color:var(--dawnby-iris)} .hw-roster-summary-card .hw-card-heading>svg{width:18px;height:18px;flex:0 0 18px} .hw-roster-summary-card .hw-card-heading h2{font-family:var(--dawnby-font-text);font-size:15px;line-height:20px;font-weight:600;margin:0;flex:1} .hw-roster-summary-card .hw-card-heading>span:last-child{font-size:13px;line-height:18px;color:var(--dawnby-label-secondary)} .hw-roster-metric{display:flex;align-items:baseline;gap:4px;margin:10px 0} .hw-roster-metric strong{font-family:var(--dawnby-font-rounded,'Nunito'),sans-serif;font-size:40px;line-height:48px;font-weight:800;letter-spacing:.37px;color:var(--dawnby-label-primary)} .hw-roster-metric>span{font-family:var(--dawnby-font-rounded,'Nunito'),sans-serif;font-size:15px;line-height:20px;font-weight:700;color:var(--dawnby-label-secondary)} .hw-roster-earliest{font-size:13px;line-height:18px;color:var(--dawnby-label-secondary);margin:10px 0} .hw-open-bars{display:flex;align-items:end;gap:6px;margin:10px 0} .hw-open-day{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:end;gap:6px;height:64px;font-size:12px;font-weight:600;color:var(--dawnby-label-secondary)} .hw-open-day.is-today{color:var(--dawnby-label-primary)} .hw-open-bar{width:18px;border-radius:5px;background:var(--dawnby-separator)} .hw-open-bar.has-visits{background:var(--dawnby-vivid-red)} .hw-roster-summary-card>.button{min-height:48px;padding:4px 0;margin:0;display:inline-flex;align-items:center;gap:8px} .hw-hours-bars{display:grid;gap:10px;margin-top:12px} .hw-worker-bar{display:grid;grid-template-columns:minmax(100px,1fr) minmax(50px,2fr) 48px;align-items:center;gap:12px;font-size:13px;line-height:20px} .hw-worker-bar>strong{font-weight:600;text-align:right} .hw-hours-track{height:12px;border-radius:8px;background:var(--dawnby-fill-on-card);overflow:hidden} .hw-hours-track>span{display:block;height:100%;border-radius:8px;background:var(--dawnby-iris)} #main[data-health-view="roster"] .hw-section-head{justify-content:flex-start;gap:8px} #main[data-health-view="roster"] .hw-week{border-bottom-left-radius:0;border-bottom-right-radius:0} #main[data-health-view="roster"] .hw-week-cell{padding:7px 4px;gap:6px} #main[data-health-view="roster"] .hw-week-who{padding:12px 16px} #main[data-health-view="roster"] .hw-tile{border-radius:8px} #main[data-health-view="roster"] .hw-tile:is(.nostart,.paused,.review){background:var(--dawnby-sun-soft);border-left-color:var(--dawnby-vivid-orange)} #main[data-health-view="roster"] .hw-tile:is(.nostart,.paused,.review) .hw-tile-state{color:var(--dawnby-sun-text)} #main[data-health-view="roster"] .hw-tile.overnight{background:var(--dawnby-iris-soft);border-left-color:var(--dawnby-iris)} #main[data-health-view="roster"] .hw-tile.draft{border:1px dashed var(--dawnby-iris);border-left-width:3px} #main[data-health-view="roster"] .hw-avatar-open{display:grid;place-items:center;width:36px;min-width:36px;height:36px;border:1px dashed var(--dawnby-vivid-red);border-radius:50%;color:var(--dawnby-vivid-red)} .hw-week-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--dawnby-bg-grouped-secondary);border-top:1px solid var(--dawnby-separator);border-radius:0 0 18px 18px;font-size:13px;color:var(--dawnby-label-secondary)} .hw-week-footer .button{min-height:48px;margin:0;padding:4px 8px} .hw-view-current{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 18px;border-radius:24px;background:var(--dawnby-bg-grouped-secondary);font-size:13px;font-weight:600} .hw-roster-options{display:flex;gap:10px;margin-left:auto;align-self:flex-start} .hw-roster-options>details{position:relative} .hw-roster-options summary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 18px;border-radius:24px;background:var(--dawnby-bg-grouped-secondary);font-size:14px;cursor:pointer;list-style:none} .hw-roster-options summary::-webkit-details-marker{display:none} .hw-roster-options summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} .hw-roster-options>details>:not(summary){position:absolute;right:0;top:54px;z-index:5;padding:16px;min-width:260px;max-width:calc(100vw - 32px);background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-separator);border-radius:18px;box-shadow:var(--dawnby-elevation-glass-sidebar);margin:0} .hw-roster-key ul{list-style:none;display:grid;gap:12px} .hw-roster-key li{display:flex;align-items:center;gap:10px;font-size:13px} .hw-key-swatch{width:24px;height:18px;border-radius:4px;border-left:3px solid var(--dawnby-iris);background:var(--dawnby-iris-soft)} .hw-key-swatch.needsworker{border:1px dashed var(--dawnby-status-critical);border-left-width:3px;background:var(--dawnby-danger-tint)} .hw-key-swatch:is(.nostart,.paused,.review){border-left-color:var(--dawnby-vivid-orange);background:var(--dawnby-sun-soft)} .hw-key-swatch.cancelled{border-left-color:var(--dawnby-label-tertiary);background:var(--dawnby-fill-on-card)} .hw-key-swatch.draft{border:1px dashed var(--dawnby-iris);border-left-width:3px} @media(max-width:800px){ #main[data-health-view="roster"] .hw-roster-summaries{grid-template-columns:minmax(0,1fr);gap:16px;margin:16px 0} .hw-roster-options{margin-left:0}.hw-week-footer{flex-wrap:wrap} .hw-roster-options>details>:not(summary){left:0;right:auto} } .hw-unassigned-person{display:flex;align-items:center;gap:10px}.hw-unassigned-person .hw-need-glyph{width:24px;height:24px} #main[data-health-view="roster"] .hw-avatar-open .hw-need-glyph{background:var(--dawnby-vivid-red)} #main[data-health-view="roster"] .hw-card-heading h2{color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-roster-options summary{color:var(--dawnby-label-primary);font-weight:600;opacity:1;border:1px solid var(--dawnby-glass-stroke);box-shadow:0 2px 5px rgb(0 0 0 / .04)} #main[data-health-view="roster"] .hw-view-current{border:4px solid var(--dawnby-fill-on-card);box-shadow:0 2px 5px rgb(0 0 0 / .04);padding:4px 16px} /* Owner 5 Nov: one shared identity preview and a compact, navigable roster. */ .avatar-fallback{display:block;width:100%;height:100%;flex:none} .profile-avatar .avatar-initials[hidden]{display:none} .hw-person-name-trigger{display:inline-flex;align-items:center;gap:8px;min-height:48px;max-width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;padding:0;cursor:pointer} .hw-person-avatar-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;cursor:pointer} .hw-person-name-trigger:focus-visible,.hw-person-avatar-trigger:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:3px;border-radius:8px} .hw-person-card{max-height:calc(100dvh - 24px);overflow-y:auto} .hw-person-card .hw-person-card-head+.hw-person-card-head{margin-top:16px} .hw-appearance{display:flex;flex-wrap:wrap;gap:12px;border:0;padding:16px} .hw-appearance label{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;border:1px solid var(--dawnby-separator);border-radius:24px;cursor:pointer} .hw-appearance input{accent-color:var(--dawnby-iris);width:20px;height:20px} .hw-roster-list,.hw-roster-more{margin-top:16px} .hw-roster-list>summary,.hw-roster-more>summary{min-height:48px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--dawnby-label-secondary);font-weight:600} .hw-roster-list>summary::before,.hw-roster-more>summary::before{content:'›'} .hw-roster-list[open]>summary::before,.hw-roster-more[open]>summary::before{content:'⌄'} .hw-roster-list>summary:focus-visible,.hw-roster-more>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} #main[data-health-view="roster"] .hw-week{max-height:74vh;overflow:auto;scroll-padding-top:92px} #main[data-health-view="roster"] .hw-week-header{position:sticky;top:0;z-index:3;background:var(--dawnby-bg-grouped-secondary)} #main[data-health-view="roster"] .hw-week-header .hw-week-day{display:flex;flex-wrap:wrap;align-content:center;gap:4px;padding-block:8px;min-height:82px} .hw-day-count{display:block;flex-basis:100%;font-size:var(--dawnby-type-caption1-size);color:var(--dawnby-label-secondary);font-weight:400} .hw-roster-now{display:block;flex-basis:100%;font-size:var(--dawnby-type-caption1-size);border-top:2px solid var(--dawnby-iris);color:var(--dawnby-iris);padding-top:2px} #main[data-health-view="roster"] .hw-tile-name{display:flex;align-items:center;gap:5px} #main[data-health-view="roster"] .hw-tile-name .profile-avatar{width:24px;height:24px;min-width:24px} #main[data-health-view="roster"] .hw-tile-name .profile-photo-note{display:none} #main[data-health-view="roster"] .hw-week-who .hw-person-name-trigger{min-height:48px} #main[data-health-view="roster"] .hw-week-who .row-subtitle{white-space:normal} #main[data-health-view="roster"] .hw-worker-bar{grid-template-columns:minmax(140px,1fr) minmax(40px,2fr) 42px} #main[data-health-view="roster"] .hw-worker-bar .profile-avatar{width:28px;height:28px} #main[data-health-view="roster"] .hw-worker-bar .hw-person-name-trigger{font-size:13px} @media(max-width:800px){#main[data-health-view="roster"] .hw-worker-bar{grid-template-columns:minmax(140px,1fr) minmax(30px,1fr) 36px}} /* The desktop page owns vertical scrolling; the grid only scrolls sideways on phones. */ #main[data-health-view="roster"] .hw-week{max-height:none} .hw-roster-person{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .hw-roster-person-copy{display:flex;flex-direction:column;gap:2px;min-width:0} .hw-roster-person-copy .row-title,.hw-roster-person-copy .row-subtitle{display:block;margin:0;line-height:18px} .hw-roster-person:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:3px;border-radius:8px} #main[data-health-view="roster"] .hw-tile-name{display:block;font-size:12px;line-height:16px;overflow-wrap:normal} #main[data-health-view="roster"] .hw-tile-name .profile-avatar-wrap{display:inline-flex;vertical-align:middle;margin-right:3px} #main[data-health-view="roster"] .hw-tile-name .profile-avatar{width:16px;height:16px;min-width:16px} @media(min-width:1200px){ #main[data-health-view="roster"] .hw-week{overflow:visible} #main[data-health-view="roster"] .hw-week-row{min-width:0;grid-template-columns:minmax(170px,200px) repeat(7,minmax(0,1fr))} #main[data-health-view="roster"] .hw-week-header{top:0} } /* HEALTH-02 member repair: retain the header's update line and the Figma highlight row layout. */ #main[data-health-view="today"] .today-updated{display:block} #main[data-health-view="today"] .today-highlights .hw-highlight-rows>.metric{display:flex;padding:0;gap:12px;border-top:1px solid var(--dawnby-separator)} #main[data-health-view="today"] .today-highlights .hw-highlight-rows .metric-value{font-weight:600} /* HEALTH-06 · existing Health grouped-list and profile composition. References: Clients 3282:6439, record composition 3282:6220, evidence 3282:6347, worker 3282:6614, Quality 3282:6048, message rows 3275:1449. Scoped opt-in: no second palette, shell, card component or workflow. */ #main:is([data-health-view="person-profile"],[data-health-view="care-plans"],[data-health-view="medication"],[data-health-view="care-management"],[data-health-view="care-pauses"],[data-health-view="chsp"],[data-health-view="profile-photos"],[data-health-view="coordination"],[data-health-view="groups"],[data-health-view="worker-documents"],[data-health-view="resources"]){ min-width:0;overflow-wrap:anywhere; } #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) :is(.panel,.split-grid,.panel-body,.field,.person-page,.person-panel){min-width:0;max-width:100%} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .split-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .table-wrap{max-width:100%;overflow-x:auto} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .panel>.field{padding:16px 20px;margin:0} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .panel>.form-grid{padding:16px 20px;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .field :is(input,select,textarea){min-width:0;max-width:100%;min-height:var(--dawnby-control-touch);font:inherit;color:var(--dawnby-label-primary);background:var(--dawnby-bg-grouped-secondary);border-color:var(--dawnby-control-border)} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .hw-person-name-trigger{max-width:100%;white-space:normal;text-align:left} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .hw-person-name-trigger>span:last-child{min-width:0;overflow-wrap:anywhere} #main[data-health-view="person-profile"] .person-head{align-items:center} #main[data-health-view="person-profile"] .person-head-copy{min-width:0;flex-basis:200px} #main[data-health-view="person-profile"] .person-actions{max-width:100%} #main[data-health-view="person-profile"] .person-tabs{width:100%;max-width:100%;overflow:visible;flex-wrap:wrap} #main[data-health-view="person-profile"] .person-tab{white-space:normal;flex:0 1 auto} #main[data-health-view="person-profile"] .profile-section{background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-card-desktop);padding:16px 20px 20px} #main[data-health-view="person-profile"] .profile-section>.form-section-heading{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-iris);margin:0 0 12px} #main[data-health-view="person-profile"] .profile-section>.detail-grid{padding:0;margin:0} #main[data-health-view="person-profile"] .profile-section>:is(.small-note,.form-actions){padding-inline:0} #main[data-health-view="person-profile"] .person-panel>.panel{overflow:hidden} #main[data-health-view="chsp"] .workflow-tab>span{font-family:var(--dawnby-font-figure);font-weight:800;font-variant-numeric:tabular-nums} #main[data-health-view="chsp"] .workflow-tab{overflow-wrap:normal;word-break:normal} #main[data-health-view="profile-photos"] .panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:0 20px 12px} #main[data-health-view="profile-photos"] .panel-header{grid-column:1/-1;padding-inline:0} #main[data-health-view="profile-photos"] .panel>.empty-state{grid-column:1/-1} #main[data-health-view="profile-photos"] .list-row{flex-wrap:wrap;padding:20px 0;gap:8px;align-content:start} #main[data-health-view="profile-photos"] .list-row-main{display:flex;align-items:center;gap:12px;flex-basis:100%;min-width:0} #main[data-health-view="profile-photos"] .list-row-main>div{min-width:0} #main[data-health-view="profile-photos"] .list-row .button{flex:0 1 auto} #main[data-health-view="coordination"] .list-row{align-items:flex-start;padding:16px 20px;gap:12px} #main[data-health-view="coordination"] .coordination-person{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:2px} #main[data-health-view="coordination"] .coordination-person-meta{margin:0;font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-secondary)} #main[data-health-view="coordination"] .row-subtitle{white-space:pre-wrap;font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line)} #main[data-health-view="coordination"] .coordination-sender{display:flex;align-items:center;gap:12px;min-width:0} #main[data-health-view="coordination"] .coordination-sender>div{min-width:0;overflow-wrap:anywhere} #main[data-health-view="coordination"] .coordination-sender-role{margin:2px 0 0;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="coordination"] .coordination-subject{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-secondary)} #main[data-health-view="coordination"] .activity-time{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} @media(max-width:800px){ #main[data-health-view="chsp"] .workflow-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .split-grid{grid-template-columns:minmax(0,1fr)} #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .panel>.form-grid{grid-template-columns:minmax(0,1fr)} #main[data-health-view="profile-photos"] .panel{grid-template-columns:minmax(0,1fr)} #main[data-health-view="person-profile"] .person-actions{justify-content:flex-start;flex-basis:100%} #main[data-health-view="person-profile"] .person-actions .button{flex:1 1 auto;max-width:100%;white-space:normal;padding:8px 16px} #main[data-health-view="person-profile"] .profile-section{padding:16px} #main[data-health-view="coordination"] .list-row{flex-wrap:wrap} #main[data-health-view="coordination"] .list-row-main{flex-basis:100%} #main[data-health-view="coordination"] .activity-time{flex-basis:100%;max-width:none;text-align:left} } :root[data-dawnby-text="larger"] #main[data-health-view]:not([data-health-view="today"]):not([data-health-view="roster"]):not([data-health-view="quality"]) .split-grid, :root[data-dawnby-text="larger"] #main[data-health-view="profile-photos"] .panel{grid-template-columns:minmax(0,1fr)} /* The enhanced picker keeps its native select only for form submission. Legacy .field select width must not stretch this clipped control off canvas. */ #main:is([data-health-view="care-management"],[data-health-view="care-pauses"],[data-health-view="chsp"]) .field .people-picker-native{width:1px;inline-size:1px;height:1px;block-size:1px;min-height:0;max-width:1px;padding:0;border:0} /* A lazy image must not paint an opaque empty circle over the illustration. */ #main[data-health-view] .profile-avatar .avatar-image{background:transparent} /* Profile titles are non-interactive navigation announcements. Retain focus for assistive technology without drawing a control outline around the heading. The existing :focus-visible rings remain on every interactive control. */ #main:is([data-health-view="person-profile"],[data-health-view="worker-profile"]) h1[tabindex="-1"]:focus{outline:none} #main[data-health-view="person-profile"] .client-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto} #main[data-health-view="groups"] .data-table td:nth-child(3){white-space:nowrap;overflow-wrap:normal} @media(max-width:800px){#main[data-health-view="person-profile"] .client-header-actions{flex-basis:100%;margin-left:0}} /* HEALTH-07a — existing billing projections in the shared Health cards. Figma 3282:6220 / 6439; semantic colours and typography come from HEALTH-01. */ .health-money-figure{font-family:var(--dawnby-font-figure);font-variant-numeric:tabular-nums;font-weight:700} #main[data-health-view="finance"] .metrics{gap:16px;margin:24px 0} #main[data-health-view="finance"] .metric{background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:18px;padding:20px} #main[data-health-view="finance"] .metric-value{font-family:var(--dawnby-font-figure);font-size:2.5rem;line-height:1.2;font-weight:800} #main[data-health-view="finance"] .metric-label{font-size:.9375rem;line-height:1.33;color:var(--dawnby-iris);text-transform:none;letter-spacing:0} #main[data-health-view="finance"] .metric-caption{font-size:.8125rem;line-height:1.4;color:var(--dawnby-label-secondary)} #main[data-health-view="finance"] .funding-breakdown{font-size:.9375rem;line-height:1.4} #main[data-health-view="finance"] .finance-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--dawnby-separator);margin:0 0 24px;background:transparent;padding:0} #main[data-health-view="finance"] .finance-tabs .tab{min-height:48px;border:0;border-radius:0;background:transparent;color:var(--dawnby-label-secondary);font-size:1.0625rem;padding:10px 16px} #main[data-health-view="finance"] .finance-tabs .tab.active{box-shadow:inset 0 -3px var(--dawnby-iris);color:var(--dawnby-iris);font-weight:600} #main[data-health-view="finance"] :is(.record-card,.funding-cards .record-card){background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:18px;padding:20px;box-shadow:none} #main[data-health-view="finance"] .funding-summary strong{font-family:var(--dawnby-font-figure);font-variant-numeric:tabular-nums} #main[data-health-view="finance"] :is(.record-card-head,.card-footer){gap:12px;align-items:center;flex-wrap:wrap} #main[data-health-view="finance"] .record-card-head>div{min-width:0} #main[data-health-view="finance"] :is(.record-card h3,.row-title){overflow-wrap:anywhere} #main[data-health-view="moneyOwed"] :is(.health-money-register,.segmented){background:var(--dawnby-bg-grouped-secondary);border-radius:18px;overflow:hidden;margin:16px 0} #main[data-health-view="moneyOwed"] .segmented{display:flex;flex-wrap:wrap;gap:8px;padding:8px} #main[data-health-view="moneyOwed"] .segmented .button{flex:1 1 auto;min-height:48px;white-space:normal} #main[data-health-view="statementProvision"] :is(.task-summary,.copy-library){background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);border:0;border-radius:18px} #main[data-health-view="statementProvision"] .task-summary-count{font-family:var(--dawnby-font-figure);color:var(--dawnby-iris);background:var(--dawnby-bg-grouped)} #main[data-health-view="statementProvision"] .task-summary p{color:var(--dawnby-label-secondary)} #main[data-health-view] .health-money-table .health-money-figure{font-family:var(--dawnby-font-figure);font-variant-numeric:tabular-nums;white-space:nowrap} #main[data-health-view] .health-money-table td{overflow-wrap:anywhere} #main[data-health-view] .health-money-table td .cell-secondary{font-family:var(--dawnby-font-text);font-weight:400} #sheet[data-health-money="true"]{font-family:var(--dawnby-font-text);background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary)} #sheet[data-health-money="true"] :is(h2,h3,h4,p,dt,dd,th,td,label){font-family:var(--dawnby-font-text)} #sheet[data-health-money="true"] :is(.small-note,.cell-secondary,dt){color:var(--dawnby-label-secondary)} #sheet[data-health-money="true"] .detail-grid{gap:16px;padding:20px;background:var(--dawnby-bg-grouped);border-radius:18px;border:0} #sheet[data-health-money="true"] .detail-item{min-width:0;overflow-wrap:anywhere} #sheet[data-health-money="true"] dd{font-size:1.0625rem;line-height:1.4} #sheet[data-health-money="true"] .health-money-figure{font-family:var(--dawnby-font-figure)} #sheet[data-health-money="true"] :is(button,.button,input,select,summary){min-height:48px} #sheet[data-health-money="true"] .button{border-radius:999px} #sheet[data-health-money="true"] .form-actions{position:static;bottom:auto} #sheet[data-health-money="true"] .sheet-body{scroll-padding-block:12px} #sheet[data-health-money="true"] .button.primary{background:var(--dawnby-iris-fill);border-color:var(--dawnby-iris-fill);color:var(--dawnby-label-on-accent)} #sheet[data-health-money="true"] .button.secondary{color:var(--dawnby-label-primary);background:transparent;border-color:var(--dawnby-control-border)} /* The standalone register retains its own route, security recheck and family view. */ body.health-client-money{display:block;margin:0;background:var(--dawnby-bg-grouped);color:var(--dawnby-label-primary);font:1.0625rem/1.45 var(--dawnby-font-text)} .health-client-money>header{background:var(--dawnby-bg-grouped-secondary);border-bottom:1px solid var(--dawnby-separator);padding:16px max(20px,calc((100vw - 1160px)/2));gap:24px;align-items:center} .health-client-money>header span{font-size:.8125rem;color:var(--dawnby-label-secondary)} .health-client-money #main{display:block;max-width:1160px;margin:auto;padding:32px 24px 80px;min-width:0} .health-client-money h1{font:700 2.125rem/1.2 var(--dawnby-font-text);letter-spacing:.025rem;margin:0 0 16px;overflow-wrap:anywhere} .health-client-money h2{font:700 1.375rem/1.27 var(--dawnby-font-text);letter-spacing:-.016rem} .health-client-money h3{font:600 1.0625rem/1.3 var(--dawnby-font-text)} .health-client-money p{font-size:1.0625rem;line-height:1.45;color:var(--dawnby-label-primary)} .health-client-money :is(section,article,form){background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:18px;padding:20px;margin:16px 0;color:var(--dawnby-label-primary)} .health-client-money #content>section{padding:0;background:transparent} .health-client-money #records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start} .health-client-money #records>.health-money-section{margin:0;min-width:0} .health-client-money #records>.health-money-section:only-child{grid-column:1/-1} .health-client-money .health-money-section>h2{color:var(--dawnby-iris);margin-top:0} .health-client-money article{border-top:1px solid var(--dawnby-separator);border-radius:0;padding:16px 0;margin:16px 0 0;overflow-wrap:anywhere} .health-client-money :is(input,select,textarea){background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);border-color:var(--dawnby-control-border);font:inherit;min-height:48px} .health-client-money :is(button,a){min-height:48px;min-width:48px} .health-client-money button{color:var(--dawnby-label-primary);background:transparent;border:1px solid var(--dawnby-control-border);border-radius:999px;padding:10px 18px;font:600 .9375rem/1.33 var(--dawnby-font-text)} .health-client-money button[type="submit"]{color:var(--dawnby-label-on-accent);background:var(--dawnby-iris-fill);border-color:var(--dawnby-iris-fill)} .health-client-money a{color:var(--dawnby-iris)} .health-client-money :is(small,dt,.muted){color:var(--dawnby-label-secondary);font-size:.8125rem;line-height:1.4} .health-client-money :is(.warning,#notice:not(:empty),#recovery:not(:empty)){background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);border:1px solid var(--dawnby-status-warning);border-radius:18px;padding:16px} .health-client-money .period-review{background:var(--dawnby-bg-grouped)} .health-client-money :focus-visible{outline:3px solid var(--dawnby-iris);outline-offset:3px} @media(max-width:700px){ #main[data-health-view] .health-money-table,#sheet[data-health-money="true"] .health-money-table{display:block;min-width:0;width:100%} .health-money-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .health-money-table tbody{display:block;width:100%} #main[data-health-view] .health-money-table .health-money-row,#sheet[data-health-money="true"] .health-money-row{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:16px;gap:12px;border-bottom:1px solid var(--dawnby-separator)} #main[data-health-view] .health-money-table .health-money-row>td,#sheet[data-health-money="true"] .health-money-row>td{display:block;grid-column:1/-1;padding:0;border:0;min-width:0;white-space:normal;text-align:left} .health-money-row>td[data-money-label]:not([data-money-label=""])::before{content:attr(data-money-label);display:block;font:500 .8125rem/1.4 var(--dawnby-font-text);color:var(--dawnby-label-secondary);margin-bottom:2px} #main[data-health-view] .health-money-table .health-money-row>td.health-money-status{grid-column:1;align-self:center} #main[data-health-view] .health-money-table .health-money-row>td.health-money-status+td{grid-column:2;align-self:center} #main[data-health-view] .health-money-table .health-money-status .badge{white-space:normal;max-width:100%;align-items:flex-start} #main[data-health-view] .health-money-table .health-money-status+td .button{white-space:normal;max-width:100%} #main[data-health-view="finance"] .metrics{grid-template-columns:repeat(2,minmax(0,1fr))} #sheet[data-health-money="true"] .detail-grid{grid-template-columns:minmax(0,1fr)} .health-client-money #main{padding:24px 16px 64px} .health-client-money #records{grid-template-columns:minmax(0,1fr);gap:16px} .health-client-money>header{display:block;padding:16px} .health-client-money>header span{margin-top:8px} .health-client-money .health-money-section{padding:16px} } @media(min-width:701px){#main[data-health-view="moneyOwed"] .health-money-table td{overflow-wrap:normal;min-width:120px}#main[data-health-view="moneyOwed"] .health-money-table td:nth-child(-n+3){min-width:170px}#main[data-health-view="moneyOwed"] .health-money-table td:last-child{min-width:220px}} /* HEALTH-07a review: report controls share their card header's inset. The focused server announcement belongs to the heading, with its outline inside that surface. */ #main[data-health-view="claimAgeing"] :is(.health-money-controls,.health-money-actions){padding:16px 20px;margin:0} #main[data-health-view="claimAgeing"] .health-money-status-note{padding:12px 16px;margin:16px 0 0;border-radius:12px;background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-secondary)} #main[data-health-view="claimAgeing"] .health-money-status-note:focus{outline-offset:-3px} /* HEALTH-08b office safety registers. Frame 3282:6347 for Work health and safety. Screening, Hours safety and Utilisation reuse that register (no dedicated frame). Office phone uses the workspace shell: no worker tab bar. */ #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .health-safety-hero{background:var(--dawnby-bg-grouped-secondary);border-radius:18px;padding:20px;margin:0 0 16px} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .metric-value{font-family:var(--dawnby-font-figure);font-variant-numeric:tabular-nums;font-weight:800;font-size:2.5rem;line-height:1.2;color:var(--dawnby-label-primary);margin:4px 0} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .metric-label{color:var(--dawnby-label-secondary);font-size:.9375rem;line-height:1.33;font-weight:600;text-transform:none;letter-spacing:0} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .metric-caption{color:var(--dawnby-label-secondary);font-size:.8125rem;line-height:1.4;margin:0} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .health-safety-figure{font-family:var(--dawnby-font-figure);font-variant-numeric:tabular-nums;font-weight:700} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) :is(.button,.workflow-tab,summary){min-height:48px} #main[data-health-view="whsHomeSafety"] .workflow-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;width:auto;max-width:100%;margin:0 0 16px;padding:4px;border:0;border-radius:24px;background:var(--dawnby-glass-pill);box-shadow:none} #main[data-health-view="whsHomeSafety"] .workflow-tab{flex:0 1 auto;min-height:48px;padding:0 14px;border:0;border-radius:20px;background:transparent;color:var(--dawnby-label-primary);box-shadow:none;font:400 var(--dawnby-type-footnote-size)/var(--dawnby-type-footnote-line) var(--dawnby-font-text)} #main[data-health-view="whsHomeSafety"] .workflow-tab.active{background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1)} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .badge.neutral{color:var(--dawnby-label-secondary);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3C/svg%3E")} #main[data-health-view="workerScreening"] details.panel>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;list-style:none} #main[data-health-view="workerScreening"] details.panel>summary::-webkit-details-marker{display:none} #main[data-health-view="workerScreening"] details.panel>summary h3{margin:0;min-width:0;flex:1 1 auto;color:var(--dawnby-label-primary);font-size:1.0625rem;line-height:1.3;font-weight:600} #main[data-health-view="workerScreening"] details.panel>summary .badge{flex:0 0 auto} #main[data-health-view="workerScreening"] .detail-item dt{font-size:.8125rem;line-height:1.3;color:var(--dawnby-label-secondary)} #main[data-health-view="workerScreening"] .detail-item dd{font-size:1rem;line-height:1.35;color:var(--dawnby-label-primary);overflow-wrap:break-word} #main[data-health-view="workerScreening"] details.panel>summary .profile-avatar-wrap{flex:none} #main[data-health-view="workerScreening"] details.panel>summary .avatar{width:40px;height:40px;flex:none} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) :is(.workflow-tab,.button,summary,a):focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} @media(min-width:801px){ #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"]) .health-safety-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);gap:24px;align-items:start} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"]) .health-safety-columns>.panel:first-child,#main[data-health-view="workerScreening"] .health-safety-main,#main[data-health-view="hour-safety"] [data-hour-safety-register]{grid-column:1} #main[data-health-view="utilisation"] .agreed-hours{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:16px 24px;align-items:start} #main[data-health-view="utilisation"] .health-safety-hero{grid-column:1/-1} #main[data-health-view="utilisation"] .hours-result{grid-column:1;grid-row:2/span 4} #main[data-health-view="utilisation"] :is(.hours-settings,.hours-filters,.agreed-hours>.small-note){grid-column:2} } @media(max-width:800px){ #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]){padding-left:16px;padding-right:16px;padding-bottom:112px} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .button.primary{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;width:auto} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .data-table{min-width:0} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .table-wrap{overflow:visible} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) :is(.data-table,.data-table tbody,.data-table tr,.data-table td){display:block;width:auto;min-width:0} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .data-table tbody tr{margin:0 16px 12px;padding:8px 0;border-radius:18px;background:var(--dawnby-bg-grouped)} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .data-table td{border:0;padding:8px 16px;text-align:left} #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"],[data-health-view="utilisation"]) .data-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 .8125rem/1.4 var(--dawnby-font-text);color:var(--dawnby-label-secondary)} #main[data-health-view="workerScreening"] .list-row{flex-wrap:wrap;align-items:flex-start} #main[data-health-view="workerScreening"] .list-row-main{flex:1 1 100%} #main[data-health-view="workerScreening"] .actions{white-space:normal;text-align:left;display:flex;flex-wrap:wrap;gap:8px} #main[data-health-view="workerScreening"] .detail-grid{grid-template-columns:minmax(0,1fr)} #main[data-health-view="workerScreening"] details.panel>summary{flex-wrap:wrap} #main[data-health-view="workerScreening"] details.panel>summary .badge{flex:1 1 100%;margin-left:52px} } :root[data-dawnby-text="larger"] #main:is([data-health-view="whsHomeSafety"],[data-health-view="workerScreening"],[data-health-view="hour-safety"]) .health-safety-columns,:root[data-dawnby-text="larger"] #main[data-health-view="utilisation"] .agreed-hours{grid-template-columns:minmax(0,1fr)} :root[data-dawnby-text="larger"] #main[data-health-view="utilisation"] :is(.hours-result,.hours-settings,.hours-filters,.agreed-hours>.small-note){grid-column:1;grid-row:auto} /* HEALTH-05R: the 390 roster is a day list of shift cards. The week grid stays for wide windows. */ #main[data-health-view="roster"] .hw-roster-phone{display:none} #main[data-health-view="roster"] .hw-day-strip{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:24px;background:var(--dawnby-glass-pill)} #main[data-health-view="roster"] .hw-day-chip{min-width:48px;min-height:48px;padding:8px 10px;border:0;border-radius:20px;background:transparent;color:var(--dawnby-label-primary);font:inherit;font-weight:600} #main[data-health-view="roster"] .hw-day-chip strong{font-family:var(--dawnby-font-figure);font-weight:800} #main[data-health-view="roster"] .hw-day-chip[aria-pressed="true"]{background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-chip:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} #main[data-health-view="roster"] .hw-day-head{margin:16px 0 4px} #main[data-health-view="roster"] .hw-day-head h2{margin:0;font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);letter-spacing:var(--dawnby-type-title2-tracking);font-weight:700;color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-hero{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;color:var(--dawnby-label-secondary)} #main[data-health-view="roster"] .hw-day-hero strong{font-family:var(--dawnby-font-figure);font-weight:800;font-size:var(--dawnby-type-metric-value-size);line-height:var(--dawnby-type-metric-value-line);letter-spacing:var(--dawnby-type-metric-value-tracking);color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-list{display:grid;gap:20px} #main[data-health-view="roster"] .hw-day-group{display:grid;gap:12px} #main[data-health-view="roster"] .hw-day-group-title{margin:4px 0 0;font-weight:700;color:var(--dawnby-label-primary);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view="roster"] .hw-day-group-count{margin:0;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} #main[data-health-view="roster"] .hw-day-card{position:relative;display:grid;gap:8px;padding:16px;border-radius:18px;background:var(--dawnby-bg-grouped-secondary)} #main[data-health-view="roster"] .hw-day-time-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px} #main[data-health-view="roster"] .hw-day-time{margin:0;font-family:var(--dawnby-font-figure);font-weight:800;font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-chevron{color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-title3-size);line-height:1;font-weight:600} #main[data-health-view="roster"] .hw-day-person{display:flex;align-items:center;gap:8px;min-height:48px;color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-person-copy{display:grid;min-width:0} #main[data-health-view="roster"] .hw-day-name{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600} #main[data-health-view="roster"] .hw-day-client .hw-day-name{font-size:var(--dawnby-type-headline-size);line-height:var(--dawnby-type-headline-line);font-weight:700} #main[data-health-view="roster"] .hw-day-role{color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);font-weight:600} #main[data-health-view="roster"] .hw-day-person .profile-avatar{width:36px;height:36px;min-width:36px} #main[data-health-view="roster"] .hw-day-empty{margin:0;padding:16px;border-radius:18px;background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary)} #main[data-health-view="roster"] .hw-day-conflict,#main[data-health-view="roster"] .hw-day-cover{display:flex;white-space:normal;max-width:100%} #main[data-health-view="roster"] .hw-day-actions{position:relative;z-index:2;display:flex;flex-wrap:nowrap;gap:8px;margin-top:4px} #main[data-health-view="roster"] .hw-day-actions .button{flex:1 1 0;min-width:0;min-height:48px;margin:0;padding:0 12px;white-space:normal;text-align:center} #main[data-health-view="roster"] .hw-day-open{position:absolute;inset:0;z-index:1;border:0;padding:0;margin:0;background:transparent;border-radius:18px;appearance:none} #main[data-health-view="roster"] .hw-day-open:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} @media (max-width:800px){ /* The fixed Add visit control is 50px tall and 16px off the bottom. Padding and scroll-padding keep a focused Assign or Offer control above that bar. */ #main[data-health-view="roster"]{padding-bottom:calc(128px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))} html:has(#main[data-health-view="roster"]){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))} #main[data-health-view="roster"] .page-heading .button.primary{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;width:auto;flex:none;margin:0} #main[data-health-view="roster"] .hw-roster-week{display:flex;flex-direction:column} #main[data-health-view="roster"] .hw-week-controls{order:1} #main[data-health-view="roster"] .hw-roster-phone{display:block;order:2;margin:16px 0 24px} #main[data-health-view="roster"] .hw-roster-summaries{order:3} #main[data-health-view="roster"] .hw-roster-week>:is(.hw-section-head,.hw-week,.hw-week-footer){display:none} } @media print{ #main[data-health-view="roster"] .hw-roster-phone{display:none} #main[data-health-view="roster"] .hw-roster-week>:is(.hw-section-head,.hw-week,.hw-week-footer){display:revert} } :root[data-dawnby-text="larger"] #main[data-health-view="roster"] .hw-day-strip{gap:8px} :root[data-dawnby-text="larger"] #main[data-health-view="roster"] .hw-day-card{padding:20px} :root[data-dawnby-text="larger"] #main[data-health-view="roster"] .hw-day-name,:root[data-dawnby-text="larger"] #main[data-health-view="roster"] .hw-day-group-title,:root[data-dawnby-text="larger"] #main[data-health-view="roster"] .hw-day-conflict{overflow-wrap:anywhere} /* HEALTH-07 · Worker web workspace. The worker's screens that have a Health frame (home 3275:1050 with the current visit of 3275:1476, visits 3275:1050/1130, coordination 3275:1449, workforce offers 3275:1378 and profile rows 3275:1388, settings 3275:1388) inside the Health desktop shell (3282:5005, dark 3282:5354). Shared Health tokens only; the generic #main[data-health-view] rules above give the type, panels, buttons and empty states. Phone width is the same screen composed for one hand: one focus first, cards and lists, the primary action at the bottom of its card, 48px targets. */ #main[data-health-view^="worker-"]{color:var(--dawnby-label-primary)} /* The frames carry a large title with no eyebrow; the worker's old "Dawnby workspace" eyebrow stays in the page text but is not shown. */ #main[data-health-view^="worker-"] .page-heading .eyebrow{display:none} #main[data-health-view="worker-home"] .home-worker{display:grid;gap:24px;min-width:0} #main[data-health-view="worker-home"] .hw-worker-head .page-heading{margin-bottom:0} /* The large title on the grouped page, with the date and the day's counts under it, as in the frame (no tinted card, no eyebrow). The older welcome card and two-column shortcut grid stay for screens outside this view. */ #main[data-health-view="worker-home"] .hw-worker-head{display:block;padding:0;background:none;border:0;border-radius:0} #main[data-health-view="worker-home"] .hw-worker-head .eyebrow:empty{display:none} #main[data-health-view="worker-home"] .hw-worker-places{display:block;margin:0} /* The current visit: one card, the person first, one filled "Continue visit". */ #main[data-health-view="worker-home"] .hw-worker-current{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;margin:0;padding:16px 20px;background:var(--dawnby-bg-grouped-secondary);border:0;border-radius:var(--dawnby-radius-lg,12px)} #main[data-health-view="worker-home"] .hw-worker-current h2{font-size:var(--dawnby-type-title3-size,1.25rem);line-height:var(--dawnby-type-title3-line,1.25);font-weight:600;margin:4px 0 2px} #main[data-health-view="worker-home"] .hw-worker-current p{margin:0;color:var(--dawnby-label-secondary)} #main[data-health-view="worker-home"] .hw-worker-current .button{min-height:48px} /* The worker's places: one grouped list of full-width rows. */ #main[data-health-view="worker-home"] .hw-worker-places{margin:0} #main[data-health-view="worker-home"] .hw-worker-place-list{list-style:none;margin:0;padding:0;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-lg,12px);overflow:hidden} #main[data-health-view="worker-home"] .hw-worker-place-list li+li{border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="worker-home"] .hw-worker-place-list .button{display:flex;width:100%;min-height:48px;justify-content:space-between;align-items:center;border:0;border-radius:0;background:transparent;color:var(--dawnby-label-primary);padding:0 20px;font-weight:500} #main[data-health-view="worker-home"] .hw-worker-place-list .button::after{content:"›";color:var(--dawnby-label-tertiary);font-size:1.25rem;line-height:1} #main[data-health-view="worker-home"] .hw-worker-place-list .button:hover:not(:disabled){background:var(--dawnby-fill-on-card)} /* Visit rows in the schedule panels: grouped rows, the person first, the action at the row end. */ #main[data-health-view^="worker-"] .home-care-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 20px} #main[data-health-view^="worker-"] .home-care-row+.home-care-row{border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view^="worker-"] .home-care-row .button{min-height:48px} @media(max-width:640px){ #main[data-health-view^="worker-"]{padding-inline:16px} /* One thumb: the current visit stacks and its single action spans the card at the bottom. */ #main[data-health-view="worker-home"] .hw-worker-current{grid-template-columns:auto minmax(0,1fr);padding:16px} #main[data-health-view="worker-home"] .hw-worker-current .button{grid-column:1/-1;width:100%} #main[data-health-view^="worker-"] .home-care-row{grid-template-columns:auto minmax(0,1fr);padding:12px 16px} #main[data-health-view^="worker-"] .home-care-row .button{grid-column:1/-1;width:100%} #main[data-health-view="worker-home"] .hw-worker-place-list .button{padding:0 16px} } /* HEALTH-07 lead check: one list style per page. The work tools are one grouped list in a single card, like the places above: glyph on the left, title and a short description, a chevron on the right, 48px rows. The client-money register is a row of the same list (added by render). */ #main[data-health-view="worker-home"] .role-task-hub .home-section-heading{margin:0 0 8px} #main[data-health-view="worker-home"] .role-task-hub .home-section-heading h2{font-size:var(--dawnby-type-title3-size,1.25rem);line-height:var(--dawnby-type-title3-line,1.25);font-weight:600;margin:0} #main[data-health-view="worker-home"] .role-task-hub .home-section-heading p{margin:2px 0 0;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="worker-home"] .role-task-grid{display:block;gap:0;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-lg,12px);overflow:hidden} #main[data-health-view="worker-home"] .role-task-card{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:10px 20px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--dawnby-label-primary);text-align:left;text-decoration:none;font:inherit} #main[data-health-view="worker-home"] .role-task-card+.role-task-card{border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="worker-home"] .role-task-card:hover{background:var(--dawnby-fill-on-card);box-shadow:none;transform:none} #main[data-health-view="worker-home"] .role-task-card .role-task-icon{display:grid;place-items:center;width:24px;height:24px;margin:0;padding:0;background:none;border:0;border-radius:0;color:var(--dawnby-iris)} #main[data-health-view="worker-home"] .role-task-card .role-task-icon svg{width:22px;height:22px} #main[data-health-view="worker-home"] .role-task-card strong{display:block;font-size:var(--dawnby-type-body-size,1.0625rem);line-height:var(--dawnby-type-body-line,1.3);font-weight:500;color:var(--dawnby-label-primary)} #main[data-health-view="worker-home"] .role-task-card small{display:block;margin:0;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="worker-home"] .role-task-card .role-task-arrow{display:none} #main[data-health-view="worker-home"] .role-task-card::after{content:"›";color:var(--dawnby-label-tertiary);font-size:1.25rem;line-height:1} /* The grid gap alone spaces the home's sections (a panel's own bottom margin doubled it), and both lists share the body size for row titles. */ #main[data-health-view="worker-home"] .home-worker>*{margin-block:0} #main[data-health-view="worker-home"] .hw-worker-place-list .button{font-size:var(--dawnby-type-body-size,1.0625rem);font-weight:500} /* "View all" sits at the card header's right, on the title's line, inside the card padding. */ #main[data-health-view^="worker-"] .panel-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start} #main[data-health-view^="worker-"] .panel-header>.button{grid-column:2;grid-row:1;min-height:48px;white-space:nowrap} #main[data-health-view^="worker-"] .panel-header>.button.ghost{margin:-12px -8px -12px 0;padding-inline:8px} #main[data-health-view^="worker-"] .panel-header>.button:not(.ghost){align-self:center} /* The other worker screens, same check: no control floats outside a card, and one list style per page. Visits: the print and email request is one card; at phone width its two actions are equal and at the bottom. */ #main[data-health-view="worker-visits"] .print-request{display:grid;grid-template-columns:repeat(2,minmax(0,240px)) auto auto;justify-content:start;align-items:end;gap:12px 16px;margin:0 0 24px;padding:16px 20px;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-lg,12px)} #main[data-health-view="worker-visits"] .print-request .field{min-width:0} #main[data-health-view="worker-visits"] .print-request label{font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary);font-weight:400} #main[data-health-view="worker-visits"] .print-request input{width:100%;min-height:48px} #main[data-health-view="worker-visits"] .print-request #schedule-print-help{grid-column:1/-1;order:1;contain:inline-size;margin:0;font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary)} #main[data-health-view="worker-visits"] .print-request>.button{min-height:48px} #main[data-health-view="worker-visits"] .print-request>.button.ghost{border:1px solid var(--dawnby-control-border);color:var(--dawnby-label-primary)} /* Workforce: the three requests sit together under the title; the two registers are one grouped list of disclosure rows. */ #main[data-health-view="worker-workforce"] .hw-workforce-registers{margin:0;background:var(--dawnby-bg-grouped-secondary);border-radius:var(--dawnby-radius-lg,12px)} #main[data-health-view="worker-workforce"] .panel+.hw-workforce-registers{margin-top:24px} #main[data-health-view="worker-workforce"] .hw-workforce-registers:has(+.hw-workforce-registers){border-bottom-left-radius:0;border-bottom-right-radius:0} #main[data-health-view="worker-workforce"] .hw-workforce-registers+.hw-workforce-registers{border-top:0.5px solid var(--dawnby-separator);border-top-left-radius:0;border-top-right-radius:0} #main[data-health-view="worker-workforce"] .hw-workforce-registers>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 20px;list-style:none;cursor:pointer;color:var(--dawnby-label-primary);font-size:var(--dawnby-type-body-size,1.0625rem);font-weight:500} #main[data-health-view="worker-workforce"] .hw-workforce-registers>summary::-webkit-details-marker{display:none} #main[data-health-view="worker-workforce"] .hw-workforce-registers>summary::after{content:"›";color:var(--dawnby-label-tertiary);font-size:1.25rem;line-height:1;transition:transform .15s} #main[data-health-view="worker-workforce"] .hw-workforce-registers[open]>summary::after{transform:rotate(90deg)} #main[data-health-view="worker-workforce"] .hw-workforce-registers>summary:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:-2px;border-radius:inherit} #main[data-health-view="worker-workforce"] .hw-workforce-registers[open]>:not(summary){padding:0 12px 12px} #main[data-health-view="worker-workforce"] .hw-workforce-registers .panel{background:var(--dawnby-bg-grouped);margin:0 0 12px} #main[data-health-view="worker-workforce"] .hw-workforce-registers .split-grid{gap:12px} /* Settings: one spacing between the cards (the two-card group added its own margin). */ #main[data-health-view="worker-settings"] .settings-grid{gap:24px;margin:0 0 24px} #main[data-health-view="worker-settings"] .settings-grid>.panel{margin:0} @media(max-width:640px){ #main[data-health-view="worker-home"] .role-task-card{padding:10px 16px} #main[data-health-view^="worker-"] .panel-header{padding:16px} /* A header action that is a full button goes under the title at full width; a text action stays at the right. */ #main[data-health-view^="worker-"] .panel-header>.button:not(.ghost){grid-column:1/-1;grid-row:auto;width:100%} /* The title shares its line with a text action; the description runs the full card width under both, so larger text never squeezes it into a narrow column (the wrapper has no role, so display:contents changes no semantics). */ #main[data-health-view^="worker-"] .panel-header:has(>.button)>div{display:contents} #main[data-health-view^="worker-"] .panel-header:has(>.button)>div>h2{grid-column:1;grid-row:1;align-self:center;min-width:0} #main[data-health-view^="worker-"] .panel-header:has(>.button)>div>p{grid-column:1/-1;grid-row:2;margin-top:0} #main[data-health-view^="worker-"] .panel-header>.button:not(.ghost){grid-row:3} #main[data-health-view^="worker-"] .panel-body>.button,#main[data-health-view^="worker-"] .page-heading .button-row .button{width:100%} #main[data-health-view^="worker-"] .page-heading .button-row{display:grid;grid-template-columns:1fr;gap:8px;width:100%} #main[data-health-view="worker-visits"] .print-request{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;padding:16px} /* Codex R1: one action per row, so larger text never clips a label. */ #main[data-health-view="worker-visits"] .print-request>.button{order:2;grid-column:1/-1;width:100%;white-space:normal} #main[data-health-view="worker-workforce"] .hw-workforce-registers>summary{padding:10px 16px} /* The worker's own profile row reads as a list row at phone width instead of a clipped four-column table. */ #main[data-health-view="worker-workforce"] .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Codex R1: the legacy table minimum width (540px) goes too; a phone never shows a desktop table. */ #main[data-health-view="worker-workforce"] .data-table,#main[data-health-view="worker-workforce"] .data-table tbody{display:block;width:100%;min-width:0} #main[data-health-view="worker-workforce"] .data-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 16px} #main[data-health-view="worker-workforce"] .data-table tr+tr{border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="worker-workforce"] .data-table td{display:block;padding:0;border:0;min-width:0;color:var(--dawnby-label-secondary)} #main[data-health-view="worker-workforce"] .data-table td:first-child{color:var(--dawnby-label-primary)} #main[data-health-view="worker-workforce"] .data-table td.actions{position:static;box-shadow:none;background:none;border:0} #main[data-health-view="worker-workforce"] .data-table td.actions .button{width:100%;margin-top:8px;min-height:48px} } /* HEALTH-12 · Register checks, two detail sheets and the people picker. No Health frame exists for these four. Register rows follow the Health list inset (12px 20px, same at 390 and 1440). The sheet rules are this page's chrome only: WS-09 still owns a shared sheet component, which is not built here. */ #main[data-health-view="register-checks"]{color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text)} #main[data-health-view="register-checks"] .health-12-register{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(280px,1fr);gap:24px;align-items:start} #main[data-health-view="register-checks"] .health-12-register-main,#main[data-health-view="register-checks"] .health-12-register-rail{min-width:0} #main[data-health-view="register-checks"] .health-12-summary{margin-bottom:24px} #main[data-health-view="register-checks"] .health-12-summary .hw-figure{margin:4px 0 0} #main[data-health-view="register-checks"] .hw-section-head h3{font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line);letter-spacing:var(--dawnby-type-title2-tracking);font-weight:700;color:var(--dawnby-label-primary);margin:0} @media (max-width:1100px){#main[data-health-view="register-checks"] .health-12-register{grid-template-columns:minmax(0,1fr)}} :root[data-dawnby-text="larger"] #main[data-health-view="register-checks"] .health-12-register{grid-template-columns:minmax(0,1fr)} @media (max-width:800px){ body[data-dawnby-surface="app"]:has(#main[data-health-view="register-checks"]) .breadcrumb{display:none} #main[data-health-view="register-checks"] .page-heading .eyebrow{display:none} } #main[data-health-view="register-checks"] .panel-header h3{ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line); letter-spacing:var(--dawnby-type-subheadline-tracking);font-weight:600;color:var(--dawnby-iris);margin:0; } #main[data-health-view="register-checks"] .panel-body{padding:0} #main[data-health-view="register-checks"] .panel-body>:is(.empty-note,.small-note,.form-actions){margin:0;padding:12px 20px} #main[data-health-view="register-checks"] .panel>.plain-list,#main[data-health-view="register-checks"] .panel-body>.plain-list{margin:0} #main[data-health-view="register-checks"] .list-row{padding:12px 20px;align-items:flex-start} #main[data-health-view="register-checks"] :is(.row-title,.row-subtitle){overflow-wrap:anywhere} #main[data-health-view="register-checks"] a{color:var(--dawnby-iris);font-weight:600} #main[data-health-view="register-checks"] .form-actions{display:flex;flex-wrap:wrap;gap:8px} #main[data-health-view="register-checks"] .form-actions .button{min-width:0;max-width:100%;white-space:normal;text-align:center;height:auto;min-height:48px} #main[data-health-view="register-checks"] .form-actions .button:not(.primary){background:transparent;border:1px solid var(--dawnby-control-border);color:var(--dawnby-label-primary)} #main[data-health-view="register-checks"] .badge{color:var(--dawnby-label-secondary);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.8V8l2.2 1.4'/%3E%3C/svg%3E")} #main[data-health-view="register-checks"] .badge.warning{color:var(--dawnby-status-warning);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E")} #main[data-health-view="register-checks"] .badge.danger{color:var(--dawnby-status-critical);--hw-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.9v3.6M8 11v.01'/%3E%3C/svg%3E")} @media(max-width:800px){ #main[data-health-view="register-checks"] .panel-body{padding:0} #main[data-health-view="register-checks"] .list-row{padding:12px 20px} #main[data-health-view="register-checks"] .panel-body>:is(.empty-note,.small-note,.form-actions){padding:12px 20px} #main[data-health-view="register-checks"] .form-actions{flex-direction:column;align-items:stretch} #main[data-health-view="register-checks"] .form-actions .button{width:100%} } #main[data-health-view="register-checks"] .health-12-summary .panel-body,#main[data-health-view="register-checks"] .health-12-register-rail>.panel>.panel-body{padding:16px 20px} /* These two sheets only. The shared sheet component remains WS-09. */ #sheet:has(.health-12-sheet){background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text)} #sheet:has(.health-12-sheet) .sheet-header{border-bottom:0.5px solid var(--dawnby-separator);padding:20px;min-width:0} #sheet:has(.health-12-sheet) .sheet-header>div{min-width:0;flex:1} #sheet:has(.health-12-sheet) #close-sheet{flex:0 0 auto} #sheet:has(.health-12-sheet) .sheet-header .eyebrow{ font-family:var(--dawnby-font-text);color:var(--dawnby-iris);text-transform:uppercase;font-weight:600; font-size:var(--dawnby-type-eyebrow-size);line-height:var(--dawnby-type-eyebrow-line);letter-spacing:var(--dawnby-type-eyebrow-tracking);margin:0 0 2px; } #sheet:has(.health-12-sheet) .sheet-header h2{ font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-title2-size);line-height:var(--dawnby-type-title2-line); letter-spacing:var(--dawnby-type-title2-tracking);font-weight:700;color:var(--dawnby-label-primary);margin:0;overflow-wrap:anywhere; } #sheet:has(.health-12-sheet) #close-sheet{min-width:48px;min-height:48px;color:var(--dawnby-label-primary)} #sheet:has(.health-12-sheet) .sheet-body{padding:20px} #sheet:has(.health-12-sheet) .small-note{color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} #sheet:has(.health-12-sheet) .detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:0;margin:0;min-width:0} #sheet:has(.health-12-sheet) .detail-item{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:0.5px solid var(--dawnby-separator);border-top:0;min-width:0} #sheet:has(.health-12-sheet) .detail-item:last-child{border-bottom:0} #sheet:has(.health-12-sheet) .detail-item dt{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);color:var(--dawnby-label-secondary);font-weight:400;text-transform:none;letter-spacing:0} #sheet:has(.health-12-sheet) .detail-item dd{font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line);font-weight:600;color:var(--dawnby-label-primary);margin:0;overflow-wrap:anywhere} #sheet:has(.health-12-sheet) .notice{border:0;border-radius:var(--dawnby-radius-card-desktop);background:var(--dawnby-bg-grouped);color:var(--dawnby-label-primary);padding:16px 20px 16px 48px;position:relative;margin:16px 0 0} #sheet:has(.health-12-sheet) .notice.warning::before{ content:"";position:absolute;left:20px;top:18px;width:16px;height:16px;background:var(--dawnby-status-warning); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5 1.6 12a1 1 0 0 0 .87 1.5h11.06a1 1 0 0 0 .87-1.5L8.87 2.5a1 1 0 0 0-1.74 0Z'/%3E%3Cpath d='M8 6.2v3M8 11.4v.01'/%3E%3C/svg%3E") center/contain no-repeat; } #sheet:has(.health-12-sheet) .form-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 20px} #sheet:has(.health-12-sheet) .button{min-height:48px;border-radius:var(--dawnby-radius-full);padding:0 18px;font-family:var(--dawnby-font-text);font-weight:600;box-shadow:none} #sheet:has(.health-12-sheet) .button.secondary,#sheet:has(.health-12-sheet) .form-actions .button:not(.primary){background:transparent;border:1px solid var(--dawnby-control-border);color:var(--dawnby-label-primary)} #sheet:has(.health-12-sheet) .button.primary{background:var(--dawnby-iris-fill);border-color:var(--dawnby-iris-fill);color:var(--dawnby-label-on-accent)} @media(max-width:800px){ #sheet:has(.health-12-sheet) .sheet-header,#sheet:has(.health-12-sheet) .sheet-body{padding:20px} #sheet:has(.health-12-sheet) .detail-item{grid-template-columns:minmax(0,1fr);gap:2px} #sheet:has(.health-12-sheet) .form-actions{flex-direction:column;align-items:stretch} #sheet:has(.health-12-sheet) .form-actions .button{width:100%} } :root[data-dawnby-text="larger"] #sheet:has(.health-12-sheet) .detail-item{grid-template-columns:minmax(0,1fr);gap:2px} /* People picker on the office surface. The 48px size stays in people-picker.css. */ body[data-dawnby-surface="app"] .people-picker-input{ min-block-size:48px;border-radius:var(--dawnby-radius-full);border:1px solid var(--dawnby-control-border); background:var(--dawnby-bg-grouped-secondary);color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text);font-size:var(--dawnby-type-body-size); } body[data-dawnby-surface="app"] .people-picker-input::placeholder{color:var(--dawnby-label-secondary)} body[data-dawnby-surface="app"] .people-picker-input:focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} body[data-dawnby-surface="app"] .people-picker-clear{min-block-size:48px;min-inline-size:48px;color:var(--dawnby-iris);font-family:var(--dawnby-font-text)} body[data-dawnby-surface="app"] .people-picker-popup{ background:var(--dawnby-bg-grouped-secondary);border:0.5px solid var(--dawnby-separator); border-radius:var(--dawnby-radius-card-desktop);box-shadow:var(--dawnby-elevation-card); } body[data-dawnby-surface="app"] :is(.people-picker-count,.people-picker-second,.people-picker-empty){color:var(--dawnby-label-secondary);font-family:var(--dawnby-font-text)} body[data-dawnby-surface="app"] .people-picker-name{color:var(--dawnby-label-primary);font-family:var(--dawnby-font-text)} body[data-dawnby-surface="app"] .people-picker-option{min-block-size:48px} body[data-dawnby-surface="app"] .people-picker-option.is-active{background:var(--dawnby-iris-soft)} body[data-dawnby-surface="app"] .people-picker-glyph-ground{fill:var(--dawnby-iris-soft)} body[data-dawnby-surface="app"] .people-picker-glyph-head,body[data-dawnby-surface="app"] .people-picker-glyph-body{fill:var(--dawnby-iris)} body[data-dawnby-surface="app"] .people-picker-option[aria-selected="true"] .people-picker-name{font-weight:600} /* HEALTH-08A (D-0175): the six Quality screens (Forms, Incidents, incident detail, Documents, Quality & continuity, Complaints report) share the Quality hub presentation (Quality 3282:6048, Health and safety 3282:6347). Styling only. */ body[data-dawnby-surface="app"] .detail-grid-single{grid-template-columns:minmax(0,1fr)} #main[data-health-view="quality"] .panel>:is(p:not(.small-note,.row-subtitle),ul:not(.plain-list),ol,.form-actions){margin:0;padding:12px 20px} #main[data-health-view="quality"] .panel>.small-note{margin-top:0;margin-bottom:12px} #main[data-health-view="quality"] .panel>.form-actions{justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-bottom:16px} #main[data-health-view="quality"] .panel>.notice{margin-top:12px;margin-bottom:12px} #main[data-health-view="quality"] .panel>:is(ul:not(.plain-list),ol){list-style:none;display:grid;gap:12px} #main[data-health-view="quality"] .panel>:is(ul:not(.plain-list),ol)>li .cell-secondary{display:block} /* HEALTH-08A R1 (owner rule: no desktop tables on phone): at phone width every Quality table becomes a card list. The first cell is the card title; the other fields are muted lines labelled with their column; a status keeps its glyph and word; the row's action sits on the card. Desktop keeps the table. workspace.js labels each cell (labelQualityCells). */ @media(max-width:640px){ #main[data-health-view="quality"] .table-wrap{overflow:visible;border:0} #main[data-health-view="quality"] table.data-table{display:block;width:100%;min-width:0} #main[data-health-view="quality"] table.data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #main[data-health-view="quality"] table.data-table tbody{display:block} #main[data-health-view="quality"] table.data-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 20px;border-top:0.5px solid var(--dawnby-separator)} #main[data-health-view="quality"] table.data-table tbody tr:first-child{border-top:0} #main[data-health-view="quality"] table.data-table td{display:block;padding:0;border:0;min-width:0;max-width:none;overflow-wrap:anywhere;color:var(--dawnby-label-secondary);font-size:var(--dawnby-type-subheadline-size);line-height:var(--dawnby-type-subheadline-line)} #main[data-health-view="quality"] table.data-table td:first-child{color:var(--dawnby-label-primary);font-weight:600;font-size:var(--dawnby-type-body-size);line-height:var(--dawnby-type-body-line)} #main[data-health-view="quality"] table.data-table td:empty{display:none} #main[data-health-view="quality"] table.data-table td:not(:first-child):not(.actions)[data-label]::before{content:attr(data-label) ": ";font-weight:600} #main[data-health-view="quality"] table.data-table td.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} #main[data-health-view="quality"] table.data-table td.actions :is(.button,button,a){min-height:48px} } @media(max-width:640px){#main[data-health-view="quality"] .page-heading :is(.button,button,a.button){white-space:normal;max-width:100%;min-width:0;text-align:center;overflow-wrap:anywhere}} /* HEALTH-08 · Family web care (frames 3275:1409 / golden 3286:6257 and 3275:1462). Styling hooks only. No new token set. The worker portrait stays first in the DOM so the existing photo check still reads that face. At 390 the visit copy is first and the primary action is last, full width, within thumb reach. */ #main:is([data-health-view="family-home"],[data-health-view="family-care"]){min-width:0} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-list{display:grid;min-width:0} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit{ display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "worker" "actions"; gap:12px 16px;align-items:stretch;padding:16px 20px;min-width:0;position:relative; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit+.hw-family-visit::before{ content:"";position:absolute;top:0;left:76px;right:0;border-top:0.5px solid var(--dawnby-separator); } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit-worker{grid-area:worker;min-width:0} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit-main{ grid-area:main;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit-main>div, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-person-text, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .row-title, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .row-subtitle{min-width:0;overflow-wrap:anywhere} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-actions{ grid-area:actions;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-next{box-shadow:inset 3px 0 0 var(--dawnby-iris)} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) :is(.hw-person-trigger,.hw-person-label){ display:flex;align-items:center;gap:10px;min-width:48px;max-width:100%; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) :is(.hw-family-actions .button,.hw-family-dock,.hw-family-raise .button){ min-height:var(--dawnby-control-touch); } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit .avatar{width:40px;height:40px;min-width:40px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) :is(.hw-person-trigger,.button,.hw-family-dock):focus-visible{ outline:2px solid var(--dawnby-iris);outline-offset:2px; } @media(max-width:800px){ #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit{ grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "worker" "actions";align-items:stretch;padding:16px; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit-main{flex-direction:column;align-items:flex-start;gap:8px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit+.hw-family-visit::before{left:16px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-actions{width:100%} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-actions .button{ flex:1 1 100%;width:100%;max-width:100%;min-height:var(--dawnby-control-touch);box-sizing:border-box;white-space:normal; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .panel:has(.hw-family-dock){display:flex;flex-direction:column} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .panel:has(.hw-family-dock)>.panel-header{display:contents} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .panel:has(.hw-family-dock)>.panel-header>div{order:1;padding:16px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .panel:has(.hw-family-dock)>.hw-family-list, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .panel:has(.hw-family-dock)>.empty-state{order:2} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-dock{ order:3;width:100%;max-width:100%;min-height:var(--dawnby-control-touch);margin:0 16px 16px;box-sizing:border-box; } #main[data-health-view="family-care"] .panel:has(.hw-family-raise){display:flex;flex-direction:column} #main[data-health-view="family-care"] .hw-family-list{order:1} #main[data-health-view="family-care"] .hw-family-raise{order:2;padding:0 16px 16px} #main[data-health-view="family-care"] .hw-family-raise .button{width:100%;max-width:100%;min-height:var(--dawnby-control-touch)} } :root[data-dawnby-text="larger"] #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit{ grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "worker" "actions";align-items:stretch; } :root[data-dawnby-text="larger"] #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-visit-main{flex-direction:column;align-items:flex-start;gap:8px} :root[data-dawnby-text="larger"] #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-actions .button{ flex:1 1 100%;width:100%;min-height:var(--dawnby-control-touch);white-space:normal; } #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .page-heading .button-row{align-self:center} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--dawnby-iris);font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line)} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-summary{border:0.5px solid var(--dawnby-separator);border-radius:var(--dawnby-radius-lg);background:var(--dawnby-bg-grouped);margin:0 0 16px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-status-glyph{color:var(--dawnby-iris)} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-main, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-rail{min-width:0} .hw-family-tabbar{display:none} @media(max-width:800px){ body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .breadcrumb{display:none} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .main-shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .workspace-footer{display:none} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) #main{flex:1 1 auto;min-height:0;overflow:auto;margin-bottom:76px} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .eyebrow{display:none} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-summary .hw-family-actions{display:none} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) #workspace-content, #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .home-dashboard{display:flex;flex-direction:column} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) :is(.page-heading,.split-grid,.hw-family-main){display:contents} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .page-heading>div{order:1} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-summary{order:2;width:100%} #main[data-health-view="family-home"] .home-dashboard>.home-access-summary{order:2} #main[data-health-view="family-home"] .home-dashboard>.metrics{order:3} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .page-heading .button-row{order:3;width:100%} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .page-heading .button-row .button{flex:1 1 100%;width:100%} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) :is(.hw-family-section,.hw-family-main>.panel,.hw-about,.home-dashboard>.panel){order:4} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .hw-family-rail{order:5} #main:is([data-health-view="family-home"],[data-health-view="family-care"]) .role-task-hub{order:6} .hw-family-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:8px;justify-content:center;order:7;margin:0;padding:8px;background:var(--dawnby-bg-elevated);border-top:0.5px solid var(--dawnby-separator)} .hw-family-tabbar button{min-height:var(--dawnby-control-touch);min-width:64px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--dawnby-label-primary)} .hw-family-tabbar button[aria-current="page"]{background:var(--dawnby-iris);color:#fff} } /* Detail and action sheets render outside #main, so these rules are not gated on it. */ .hw-family-detail{display:grid;gap:16px;font-family:var(--dawnby-font-text);color:var(--dawnby-label-primary)} .hw-family-detail :is(.hw-person-trigger,.hw-person-label){ display:flex;align-items:center;gap:12px;min-height:var(--dawnby-control-touch);min-width:48px;max-width:100%; border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer; } .hw-family-detail .hw-status{ display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600; font-size:var(--dawnby-type-footnote-size);line-height:var(--dawnby-type-footnote-line);color:var(--dawnby-label-secondary); } .hw-family-detail .hw-status.success{color:var(--dawnby-status-success)} .hw-family-detail .hw-status.warning{color:var(--dawnby-status-warning)} .hw-family-detail .hw-status.progress{color:var(--dawnby-status-in-progress)} .hw-family-detail .hw-status.critical{color:var(--dawnby-status-critical)} .hw-family-detail :focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .source-summary{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:var(--dawnby-control-touch); padding:12px 16px;border-radius:var(--dawnby-radius-lg);background:var(--dawnby-bg-grouped);color:var(--dawnby-label-primary); } body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .source-summary .avatar{width:40px;height:40px;min-width:40px} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .sheet :is(.button,select,textarea){min-height:var(--dawnby-control-touch)} body:has(#main:is([data-health-view="family-home"],[data-health-view="family-care"])) .sheet :focus-visible{outline:2px solid var(--dawnby-iris);outline-offset:2px} /* HEALTH-B9 Find support door. Light frames 5247:438 and 5247:479. Dark follows the Health tokens. Words stay as they are. Two columns only when the door column itself is at least 640px. At 200% type the zoomed column is about 390px, so the cards stack instead of sitting at about 330px each. */ #main .marketplace-entry-grid.health-find-door{font-family:var(--dawnby-font-text);grid-template-columns:1fr;gap:12px;min-width:0} @container health-door (min-width:640px){ #main .marketplace-entry-grid.health-find-door{grid-template-columns:1fr 1fr;gap:16px} #main .marketplace-entry-grid.health-find-door>.panel:last-child{grid-column:1 / -1} } #main .marketplace-entry-grid.health-find-door>.panel{background:var(--dawnby-bg-grouped-secondary);border:1px solid var(--dawnby-separator);border-radius:18px;box-shadow:none;min-width:0;overflow:visible} #main .marketplace-entry-grid.health-find-door .panel-body{padding:20px 20px 16px} #main .marketplace-entry-grid.health-find-door .eyebrow{font-family:var(--dawnby-font-text);font-size:1.0625rem;font-weight:650;letter-spacing:-0.02em;text-transform:none;color:var(--dawnby-label-primary);margin:0 0 4px} #main .marketplace-entry-grid.health-find-door .panel-body:has(.eyebrow) h2{font-size:0.9375rem;font-weight:600;letter-spacing:0;margin:0 0 8px} #main .marketplace-entry-grid.health-find-door h2,#main .marketplace-entry-grid.health-find-door .page-description{font-family:var(--dawnby-font-text);overflow-wrap:anywhere} #main .marketplace-entry-grid.health-find-door a.button{background:transparent;border-color:transparent;box-shadow:none;color:var(--dawnby-tint);min-height:48px;min-width:48px;max-width:100%;padding:12px 0;justify-content:flex-start;font-family:var(--dawnby-font-text);font-weight:600;white-space:normal;text-align:left;overflow-wrap:anywhere} #main .marketplace-entry-grid.health-find-door a.button:hover{background:transparent;border-color:transparent;color:var(--dawnby-tint);text-decoration:underline;text-underline-offset:4px} #main .marketplace-entry-grid.health-find-door a.button:focus-visible{outline:3px solid var(--dawnby-tint);outline-offset:3px} /* Door only. At 200% type the desktop shell's percentage width plus the sidebar margin overflows the viewport. A block remainder fits, and the column is the container the cards query. Other workspace views stay as they are. */ @media (min-width:801px){ body:has(#main .health-find-door) .app-shell{display:block;width:100%;max-width:100%;min-width:0} body:has(#main .health-find-door) .main-shell{display:flex;flex-direction:column;width:auto;max-width:none;min-width:0;flex:1 1 auto;margin-right:0;box-sizing:border-box;container:health-door / inline-size} body:has(#main .health-find-door) :is(.topbar,#main,.workspace-footer){min-width:0;max-width:100%} body:has(#main .health-find-door) :is(.topbar,.topbar-right,.workspace-footer){flex-wrap:wrap;height:auto;white-space:normal} body:has(#main .health-find-door) :is(.sample-data-label,.workspace-context-button span,.workspace-build-links>summary){white-space:normal} }