/* OpenHealth app components. Hand-written, and only for shapes the OpenJobs sheets do not already draw.
 * Every value is one of those sheets' own: the elevation scale (--e0 to --e4), the 12 and 14px radii,
 * the 12.5/13/14px type steps, the #f7f8fa reason box, the #fafbfc column head, the #f1f2f4 row rule.
 * SPEC.md maps each class to the OpenJobs rule it is copied from. */

.root{--oh-ring:#cfe8dc;--oh-tint:var(--blue-bg)}
.root a{text-decoration:none}
.root .oh-i{width:1em;height:1em;flex:none;display:block}
.root .p-main{max-width:none}

/* The query field. OpenJobs .find (the shell's search button) at the size of a page control. */
.root .oh-q{display:flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 14px;border-radius:12px;background:#fff;box-shadow:var(--e2);color:var(--muted);min-width:0}
.root .oh-q > svg{width:18px;height:18px;flex:none}
.root .oh-q input{flex:1;min-width:0;border:0;outline:0;font:400 15px var(--oj-sans),system-ui,sans-serif;color:var(--ink);background:none}
.root .oh-q:focus-within{box-shadow:0 0 0 1.5px var(--accent),0 0 0 4px var(--blue-bg)}
.root .oh-q .oh-where{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;background:#f4f5f7;box-shadow:var(--e0);font-size:13px;color:#3c4043;white-space:nowrap}
.root .oh-q .oh-where svg{color:var(--muted)}

/* Breadcrumb over a page title. */
.root .oh-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.root .oh-crumb a{color:var(--muted)}
.root .oh-crumb a:hover{color:var(--accent-ink)}
.root .oh-crumb svg{width:11px;height:11px;color:#b5b8bf}

/* THE RESULT CARD. OpenJobs board .card (white, radius 12, e1, gap 10) with its .why reason box. */
.root .oh-rc{background:#fff;border-radius:12px;padding:12px 14px;display:grid;gap:10px;box-shadow:var(--e1);min-width:0;align-content:start}
.root .oh-rc-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.root .oh-rc-t{font-weight:600;font-size:14px;line-height:1.35}
.root .oh-rc-s{font-size:12.5px;color:var(--muted);margin-top:1px}
.root .oh-rc-v{font-size:14px;line-height:1.5;color:var(--ink)}
.root .oh-rc-v b{font-weight:600}
.root .oh-rc-why{font-size:13px;line-height:1.45;background:#f7f8fa;border-radius:8px;padding:8px 10px;color:#3c4043;display:grid;gap:3px}
.root .oh-rc-m{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.root .oh-rc-f{display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap;border-top:1px dashed #e3e5e9;padding-top:9px;font-size:12.5px}
.root .oh-rc-f a{color:var(--accent-ink);display:inline-flex;gap:5px;align-items:center;font-weight:500}
.root .oh-rc-f a:hover{text-decoration:underline}
.root .oh-rc-f .oh-src{color:var(--muted)}
/* A result measured for someone else (the group, the hospital): the sunken ground of OpenJobs .allSearch. */
.root .oh-rc.oh-else{background:#f6f7f9;box-shadow:var(--e0)}
.root .oh-rc.oh-else .oh-rc-why{background:#fff;box-shadow:var(--e1)}
.root .oh-rc.oh-dim .oh-rc-v{color:#4b5058}

/* State marks. Available is OpenJobs Check 'ok' (Phosphor check-circle fill in the accent). Held is Check 'fix'
 * (the same icon in amber). The grey marks are OpenJobs .okm.blank with a glyph in place of the dash. */
.root .oh-ok{display:inline-flex;width:20px;height:1lh;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.root .oh-ok svg{width:20px;height:20px}
.root .oh-ok.held{color:#d97706}
.root .oh-st{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#f4f5f7;color:#6b7079;box-shadow:inset 0 0 0 1px rgba(17,24,39,.14);margin-top:-1px}
.root .oh-st svg{width:12px;height:12px}

/* Who a value was measured for. OpenJobs pages .tag with a glyph. Dashed when it is not the entity on screen. */
.root .oh-lv{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#f2f3f5;font-size:12px;color:#3c4043;box-shadow:inset 0 0 0 1px rgba(17,24,39,.05);white-space:nowrap}
.root .oh-lv svg{width:13px;height:13px;color:var(--muted)}
.root .oh-lv.me{background:var(--blue-bg);color:var(--accent-ink);box-shadow:inset 0 0 0 1px rgba(22,131,91,.18)}
.root .oh-lv.me svg{color:var(--accent)}
.root .oh-lv.ot{background:#fff;box-shadow:none;border:1px dashed #c9ccd3;padding:1px 7px}
.root .oh-tagrow{display:flex;gap:6px;flex-wrap:wrap}

/* Source monogram: OpenJobs pages .tile at its small size, in neutral ink. */
.root .oh-tile{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;flex:none;font:700 9.5px/1 var(--oj-sans),system-ui,sans-serif;letter-spacing:-.02em;background:#f2f3f5;color:#3c4043;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.06)}
.root .oh-tile.lg{width:34px;height:34px;border-radius:9px;font-size:12px}

/* Faces. OpenJobs .tile size, round, as OpenCal draws its DiceBear avatars. */
.root .oh-av{width:34px;height:34px;border-radius:50%;flex:none;background:#eef0f3;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.08);display:block}
.root .oh-av.lg{width:64px;height:64px}
.root .oh-av.sm{width:26px;height:26px}
.root .oh-fac{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:#f2f3f5;color:#4b5058;box-shadow:inset 0 0 0 1px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.06)}
.root .oh-fac svg{width:18px;height:18px}
.root .oh-fac.lg{width:64px;height:64px;border-radius:16px}
.root .oh-fac.lg svg{width:30px;height:30px}

/* The results table. OpenJobs .jobCols / .job with OpenHealth's columns. */
.root .oh-cols,.root .oh-row{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1fr) 28px;gap:14px;align-items:center;padding:0 18px}
.root .oh-cols{min-height:34px;padding-top:7px;padding-bottom:7px;line-height:1.3;font-size:12px;color:var(--muted);background:#fafbfc;border-bottom:1px solid #eef0f3}
.root .oh-row{min-height:64px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid #f1f2f4;color:inherit}
.root .oh-row:last-child{border-bottom:0}
.root .oh-row:hover{background:#f7fbf9}
.root .oh-row.sel{background:#f3faf6;box-shadow:inset 3px 0 0 var(--accent)}
.root .oh-who{display:flex;gap:12px;align-items:center;min-width:0}
.root .oh-who > div{min-width:0}
.root .oh-who b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.root .oh-who small{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.root .oh-val{display:grid;gap:1px;min-width:0;font-size:13px;line-height:1.4}
.root .oh-val b{font-weight:600;font-size:13.5px}
.root .oh-val small{font-size:12px;color:var(--muted)}
.root .oh-val .oh-none{color:#6b7079}
.root .oh-val .oh-lbl{display:none}
.root .oh-ex{font-size:11.5px;font-weight:500;color:#6b7079;background:#f2f3f5;border-radius:999px;padding:1px 7px;margin-left:6px;box-shadow:inset 0 0 0 1px rgba(17,24,39,.05);white-space:nowrap;vertical-align:1px}
.root .oh-cols.fac,.root .oh-row.fac{grid-template-columns:minmax(230px,1.25fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) 28px}
.root .oh-cols.meas,.root .oh-row.meas{grid-template-columns:minmax(220px,1.5fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
.root .oh-row.meas{min-height:56px}

/* Notices. OpenJobs .earn (tinted) and .keys (grey). */
.root .oh-note{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--blue-bg);color:#0f4a34;font-size:13px;line-height:1.45;box-shadow:inset 0 0 0 1px rgba(22,131,91,.18)}
.root .oh-note > svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent)}
.root .oh-note.n{background:#f4f5f7;color:#3c4043;box-shadow:var(--e0)}
.root .oh-note.n > svg{color:var(--muted)}
.root .oh-note b{font-weight:600}

/* Profile head inside a .p-surface. */
.root .oh-ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px}
.root .oh-ph h1{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.root .oh-ph p{color:var(--muted);margin-top:2px}
.root .oh-ph .oh-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Key and value grid: OpenJobs .formGrid without the Sent page's indent. */
.root .oh-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-top:1px solid #eef0f3;border-radius:0 0 14px 14px;overflow:hidden}
.root .oh-kv > div{padding:10px 18px;min-width:0;box-shadow:inset -1px 0 0 #eef0f3}
.root .oh-kv > div:last-child{box-shadow:none}
.root .oh-kv dt{font-size:12px;color:var(--muted)}
.root .oh-kv dd{font-size:13px;overflow-wrap:anywhere}

/* Section blocks and card grids. */
.root .oh-sec{display:grid;gap:12px;min-width:0}
.root .oh-sech{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:0 2px}
.root .oh-sech h2{font-size:15px;font-weight:500;display:flex;gap:8px;align-items:center}
.root .oh-sech h2 svg{width:17px;height:17px;color:var(--accent)}
.root .oh-sech p{color:var(--muted);font-size:13px;margin-top:2px;max-width:760px}
.root .oh-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.root .oh-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.root .oh-pad{padding:14px 18px;display:grid;gap:10px}
.root .oh-list{display:grid}
.root .oh-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid #f1f2f4;font-size:13px;color:inherit}
.root .oh-li:last-child{border-bottom:0}
.root a.oh-li:hover{background:#f7fbf9}
.root .oh-li b{font-weight:600}
.root .oh-li small{display:block;color:var(--muted);font-size:12.5px}
.root .oh-li .p-mono{text-align:right}
.root .oh-li > svg{width:16px;height:16px;color:var(--muted)}

/* Comparison grid: one column per entity, one row per measure. OpenJobs .formGrid cells. */
.root .oh-cmpw{overflow-x:auto;border-radius:14px}
.root .oh-cmp{display:grid;grid-template-columns:220px repeat(3,minmax(230px,1fr)) 180px;min-width:1100px}
.root .oh-cmp > div{padding:12px 14px;box-shadow:inset -1px -1px 0 #eef0f3;min-width:0;font-size:13px;line-height:1.45;background:#fff}
.root .oh-cmp .h{background:#fafbfc;display:flex;gap:10px;align-items:center;position:sticky;top:0}
.root .oh-cmp .h b{font-weight:600;font-size:14px;display:block}
.root .oh-cmp .h small{font-size:12px;color:var(--muted);display:block}
.root .oh-cmp .k{background:#fafbfc;color:#3c4043}
.root .oh-cmp .k b{display:block;font-weight:600;color:var(--ink);font-size:13px}
.root .oh-cmp .k small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.root .oh-cmp .grp{grid-column:1/-1;background:#f4f5f7;font-size:12.5px;font-weight:600;color:#3c4043;padding:8px 14px}
.root .oh-cmp .v b{font-weight:600;font-size:14px}
.root .oh-cmp .v small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.root .oh-cmp .add{display:grid;place-items:center;text-align:center;color:var(--muted);background:#f6f7f9}
.root .oh-cmp .nc{color:#6b7079}
.root .oh-cmp .rule{grid-column:1/-1;background:#fff;padding:8px 14px 10px;font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center}
.root .oh-cmp .rule svg{width:14px;height:14px;flex:none;color:var(--accent)}
.root .oh-cmp .rule.no svg{color:#6b7079}

/* The compare tray at the foot of the panel. OpenJobs .bar, 60px, every piece 36px tall. */
.root .oh-dock{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;height:60px;padding:0 20px;background:var(--card);box-shadow:0 -1px 0 rgba(17,24,39,.07),0 -6px 16px -8px rgba(17,24,39,.10);min-width:0}
.root .oh-dock > *{flex:none}
.root .oh-pick{display:flex;gap:8px;align-items:center;height:36px;padding:0 6px 0 4px;border-radius:9px;background:#fff;box-shadow:var(--e1);font-size:13px;white-space:nowrap}
.root .oh-pick .x{width:24px;height:24px;border-radius:6px;box-shadow:none}
.root .oh-pick .x svg{width:12px;height:12px}
.root .oh-dock .oh-slot{height:36px;display:flex;align-items:center;padding:0 12px;border-radius:9px;background:#f4f5f7;box-shadow:var(--e0);font-size:12.5px;color:var(--muted)}
.root .oh-dock .push{margin-left:auto}

/* Filter groups in the left rail: OpenJobs .search cards holding .cbx rows. */
.root .oh-fg{display:grid;gap:8px;padding:12px 14px;background:#fff;border-radius:12px;box-shadow:var(--e1)}
.root .oh-fg h3{font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.root .oh-fg h3 a{font-weight:500;font-size:12px;color:var(--accent-ink)}
.root .oh-fg .cbx{font-size:13px;justify-content:space-between;width:100%}
.root .oh-fg .cbx > span{display:inline-flex;gap:8px;align-items:center;min-width:0}
.root .oh-fg .cbx small{color:var(--muted);font:12px var(--oj-mono),ui-monospace,monospace}
.root .oh-fg .p-hint{line-height:1.4}

/* Evidence panel beside a table: dashboard C's review pane (.form, .url, .fields, .f). */
.root .oh-evi .f{grid-template-columns:150px 1fr}
.root .oh-evi .oh-evh{padding:14px;display:grid;gap:4px;border-bottom:1px solid var(--line)}
.root .oh-evi .oh-evh b{font-weight:600;font-size:15px}
.root .oh-evi .oh-evh small{color:var(--muted);font-size:12.5px}
.root .oh-evi .oh-evf{padding:12px 14px;display:flex;gap:8px;flex-wrap:wrap;background:#fafbfc;border-top:1px solid var(--line)}

/* Small dots for statuses. OpenJobs Sent .dot. */
.root .oh-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(17,24,39,.04);display:inline-block}
.root .oh-dot.ok{background:var(--accent)}.root .oh-dot.run{background:#9ca3af}.root .oh-dot.held{background:var(--amber)}.root .oh-dot.no{background:#d6d8dc}

/* The index page. */
.root .oh-idx{max-width:980px;margin:0 auto;padding:40px 24px 60px;display:grid;gap:18px}
.root .oh-idx h1{font-size:24px;font-weight:500;letter-spacing:-.015em;display:flex;gap:10px;align-items:center}
.root .oh-idx h1 img{width:30px;height:30px}

@media (max-width:1180px){
  .root .oh-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .root .oh-cols,.root .oh-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 28px}
  .root .oh-cols > :nth-child(2),.root .oh-row > :nth-child(2){display:none}
  .root .oh-cols.meas > :nth-child(2),.root .oh-row.meas > :nth-child(2){display:block}
  .root .oh-cols.meas,.root .oh-row.meas{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .root .oh-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .root .oh-kv > div{box-shadow:inset -1px -1px 0 #eef0f3}
}
@media (max-width:760px){
  .root .oh-g2,.root .oh-g3{grid-template-columns:minmax(0,1fr)}
  .root .oh-cols{display:none}
  .root .oh-row,.root .oh-row.fac,.root .oh-row.meas{grid-template-columns:minmax(0,1fr) 28px;gap:8px 10px;padding:12px 14px}
  .root .oh-row > *{grid-column:1}
  .root .oh-row > :nth-child(2){display:grid}
  .root .oh-row > :last-child:is(a,span.p-open){grid-column:2;grid-row:1}
  .root .oh-val{grid-template-columns:minmax(0,1fr);padding-left:46px}
  .root .oh-row.meas .oh-val{padding-left:0}
  .root .oh-val .oh-lbl{display:block;font-size:11.5px;color:var(--muted)}
  .root .oh-ph{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .root .oh-ph .oh-acts{grid-column:1/-1;justify-content:flex-start}
  .root .oh-ph h1{font-size:19px}
  .root .oh-av.lg,.root .oh-fac.lg{width:48px;height:48px}
  .root .oh-kv{grid-template-columns:minmax(0,1fr)}
  .root .oh-kv > div{padding:9px 14px}
  .root .oh-q{height:auto;min-height:46px;flex-wrap:wrap;padding:6px 8px 6px 12px}
  .root .oh-q .oh-where{order:3;flex:1 1 100%;justify-content:flex-start}
  .root .oh-dock{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .root .oh-dock .oh-pick .nm{display:none}
  .root .oh-dock .oh-slot,.root .oh-dock .oh-hide{display:none}
  .root .oh-dock .push{margin-left:auto}
  .root .oh-evi .f{grid-template-columns:1fr}
  .root .oh-li{padding:10px 14px}
  .root .oh-pad{padding:12px 14px}
}

/* A group label inside the sidebar list. The OpenSoftware rail's .grp ("Workflows"), in the white shell's muted ink. */
.root .s-list .oh-grp{font-size:12px;color:var(--muted);padding:12px 10px 4px;font-weight:500}
.root .s-list .oh-grp:first-child{padding-top:0}
.root .s-rail .oh-rsep{width:28px;height:1px;background:#d6d9df;margin:4px 0}

.s-shell .s-jumpWrap[hidden]{display:none}
.root .oh-cols small{display:block;font-size:11.5px;color:#8a8f98}
.root .oh-val .oh-clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.root .oh-who small .oh-ex{margin-left:6px}
.root .oh-g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.root .oh-g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .root .oh-g5{grid-template-columns:minmax(0,1fr)}
  .root .oh-li{grid-template-columns:auto minmax(0,1fr)}
  .root .oh-li > :last-child{grid-column:2;text-align:left}
  .root .oh-li .p-mono{white-space:normal;text-align:left}
  .root .oh-li > span:last-child:empty{display:none}
  .root .p-tab{white-space:normal}
  .root .oh-who b{white-space:normal}
}

.root .oh-who small{display:flex;align-items:center;min-width:0}
.root .oh-who small .oh-clip{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.root .oh-evh .oh-who small{display:block;white-space:normal}.root .oh-evh .oh-who b{white-space:normal}