html, body {
padding: 0;
margin: 0; }
#ig-viewer {
position: relative;
height: 100%; }
#ig-viewer .ig-view-content {
overflow: hidden;
min-height: 100%;
position: relative;
height: auto !important;
margin-bottom: -155px;
padding-bottom: 155px; }
#ig-viewer .ig-view-content #ig-view-treetable {
min-height: 100%;
width: 70%;
margin: 0 auto; }
#ig-viewer .ig-view-content #ig-view-treetable .segment-default-header {
margin-bottom: 0;
padding-left: 10px; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid {
padding: 0;
width: 100%; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel {
width: 100%;
height: 100%;
position: relative;
display: table;
border-top: 1px solid #e6e6e6; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel {
width: 300px;
height: 100%;
float: left;
padding: 10px;
overflow: hidden;
position: relative; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel .treenode a {
color: black;
cursor: pointer;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel .ui-resizable-handle {
right: 0; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel table {
width: 100%; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel table td:first-child {
min-width: 170px;
max-width: 300px;
text-overflow: ellipsis;
overflow: hidden; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel {
width: 40%;
height: 100%;
float: right;
padding: 30px 45px;
position: relative;
border-left: 1px solid #e6e6e6; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel table {
width: 100%;
overflow: auto;
display: block; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel .preview-bar {
overflow: auto; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel.full-width {
width: auto;
overflow: hidden;
float: none; }
#ig-viewer .ig-view-footer {
background-color: #636363;
color: #E0E0E0;
height: 155px;
position: relative;
padding-top: 40px; }
.dynamic {
display: none;
background-color: transparent;
color: transparent;
padding: 5px;
text-align: center;
height: 30px;
}
.dynamic.versions-banner.not-latest {
background-color: #f0ad4e;
color: #fff;
}
.dynamic.versions-banner.latest {
background-color: #5cb85c;
color: #fff;
}
/* DigiDOT: responsive guide layout; preserve complete diagrams at any width. */
body { color: #24364a; font-family: Arial, Helvetica, sans-serif; }
#ig-viewer { height: auto; min-height: 100vh; }
#ig-viewer .ig-view-content {
overflow: visible; margin-bottom: 0; padding-bottom: 0; min-height: 75vh;
}
#ig-viewer .ig-view-content #ig-view-treetable {
width: calc(100% - 48px); max-width: 1660px; margin: 0 auto;
}
#ig-viewer .ig-view-content #ig-view-treetable .segment-default-header {
padding: 18px 0; margin: 0;
}
#ig-viewer .title { font-size: 28px; color: #173148; }
#ig-viewer .digidot-guide-header {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: 8px 24px;
}
#ig-viewer .digidot-project-return {
display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px;
border: 1px solid #d3dfe5; border-radius: 4px; background: transparent;
color: #425e70; font: 400 13px/1.5 Arial, Helvetica, sans-serif;
text-decoration: none; white-space: nowrap;
}
#ig-viewer .digidot-project-return:hover { background: #f0f4f7; color: #173148; }
#ig-viewer .digidot-project-return:focus-visible { outline: 3px solid #087e9d; outline-offset: 3px; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel {
display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; height: auto;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel {
float: none; width: auto !important; min-width: 0; height: auto; padding: 20px 12px 20px 0;
overflow: visible;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel table td:first-child {
min-width: 0; max-width: none; white-space: normal; overflow: visible;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel .treenode a {
white-space: normal; overflow: visible; color: #235879; line-height: 1.6;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel.full-width {
float: none; width: auto !important; min-width: 0; height: auto; padding: 24px 32px 40px;
overflow: visible; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere;
}
#preview-content h1 { font-size: 28px; margin-top: 0; }
#preview-content h2 { font-size: 23px; margin-top: 32px; }
#preview-content h3 { font-size: 19px; }
#preview-content img, #preview-content svg {
display: block; max-width: 100% !important; height: auto !important;
max-height: none !important; object-fit: contain;
}
#preview-content .digidot-diagram { width: 100%; max-width: 100%; min-width: 0; overflow: auto; border: 1px solid #d8e3e9; border-radius: 8px; background: white; }
#preview-content .digidot-diagram img, #preview-content .digidot-diagram svg { margin: 12px auto 0; }
#preview-content .digidot-diagram-image { display: block; position: relative; width: max-content; max-width: 100%; margin: 12px auto 0; }
#preview-content .digidot-diagram-image img { display: block; width: 100%; margin: 0; }
#preview-content .digidot-diagram-hotspot { position: absolute; display: block; border: 2px solid transparent; border-radius: 8px; box-sizing: border-box; }
#preview-content .digidot-diagram-hotspot:hover, #preview-content .digidot-diagram-hotspot:focus-visible { border-color: #126784; background: rgba(22, 103, 132, .09); outline: 2px solid #fff; outline-offset: -4px; }
#preview-content .digidot-diagram.zoomed .digidot-diagram-image { margin: 0; }
#preview-content .digidot-target-map { max-width: 100%; overflow-x: auto; margin: 18px 0 12px; border: 1px solid #d5e1e9; border-radius: 7px; background: #fff; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel table.digidot-target-matrix { display: table; width: 100%; min-width: 740px; overflow: visible; table-layout: fixed; margin: 0; border-collapse: collapse; font-size: 13px; }
#preview-content .digidot-target-matrix caption { padding: 11px 12px; color: #2d4f62; font-weight: 600; text-align: left; background: #f3f7f9; }
#preview-content .digidot-target-matrix th, #preview-content .digidot-target-matrix td { padding: 7px 9px; vertical-align: middle; text-align: center; border-bottom: 1px solid #e8eef2; }
#preview-content .digidot-target-matrix th:first-child { width: 30%; text-align: left; }
#preview-content .digidot-target-matrix thead th { background: #eaf2f6; overflow-wrap: anywhere; }
#preview-content .digidot-target-matrix tbody th[scope="row"] { background: #fff; font-weight: 500; }
#preview-content .digidot-target-matrix tbody tr:not(.digidot-target-group):hover th, #preview-content .digidot-target-matrix tbody tr:not(.digidot-target-group):hover td { background: #f5fafb; }
#preview-content .digidot-target-matrix .digidot-target-group th { padding: 8px 10px; background: #f1f5f7; color: #375368; font-size: 12px; font-weight: 700; text-align: left; }
#preview-content .digidot-target-matrix .digidot-target-hit { color: #197286; font-size: 14px; }
#preview-content .digidot-target-matrix .digidot-target-empty { color: #becbd2; }
#preview-content .digidot-diagram-link { margin: 10px 0 28px; font-size: 14px; }
#preview-content .digidot-diagram-link a {
display: inline-block; padding: 7px 12px; border: 1px solid #c9d8e3;
border-radius: 5px; background: #f2f7fa;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel table {
max-width: 100%; overflow-x: auto;
}
#preview-content pre { max-width: 100%; overflow-x: auto; }
#preview-content table { margin: 16px 0 24px; border-collapse: collapse; }
#preview-content th, #preview-content td { padding: 10px 12px; border-bottom: 1px solid #e1e8ee; vertical-align: top; }
#preview-content th { background: #eff5f8; color: #284b62; }
#preview-content td:first-child { min-width: 160px; }
#preview-content .digidot-diagram.zoomed { max-height: 75vh; }
#preview-content .digidot-diagram.zoomed img { margin: 0; }
#preview-content .digidot-diagram-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
#preview-content button { font: inherit; background: #f2f7fa; color: #17465e; border: 1px solid #a6becd; padding: 5px 13px; border-radius: 5px; cursor: pointer; }
#preview-content button:hover { background: #dfedf4; }
#preview-content .digidot-diagram-controls span { font-size: 13px; color: #526b7a; }
#preview-content .digidot-toc, #preview-content .digidot-example { padding: 12px 16px; background: #f5f8fa; border: 1px solid #d9e4eb; border-radius: 7px; margin: 16px 0; }
#preview-content summary { cursor: pointer; font-weight: 600; }
#preview-content .digidot-example pre { margin-top: 16px; }
#preview-content .digidot-search { padding: 18px; background: #eaf4f8; border-radius: 8px; margin: 24px 0; }
#preview-content .digidot-search label { display: block; margin-bottom: 8px; }
#preview-content .digidot-search input { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; border: 1px solid #8faeba; border-radius: 4px; }
#preview-content .digidot-search p { margin: 10px 0 0; }
#preview-content [hidden] { display: none !important; }
#preview-content h2, #preview-content h3 { scroll-margin-top: 20px; }
#preview-content p:first-of-type { line-height: 1.7; }
#preview-content a { color: #126784; }
#guide-panel .tree-panel a { color: #235879; line-height: 1.6; }
#guide-panel .tree-panel a[aria-current="page"] { font-weight: bold; color: #173148; }
#preview-content .digidot-map-details { margin: 22px 0; padding: 16px; border: 1px solid #d9e4eb; border-radius: 8px; }
#preview-content .digidot-link-explorer { margin: 18px 0 28px; padding: 22px; border: 1px solid #d5e0e8; border-radius: 10px; background: #f7fafc; }
#preview-content .digidot-link-explorer > label { display: block; margin-bottom: 7px; font-weight: 600; color: #284b62; }
#preview-content .digidot-link-explorer > select { width: min(100%, 360px); padding: 9px 12px; border: 1px solid #9eb7c7; border-radius: 6px; background: #fff; color: #213c50; font: inherit; }
#preview-content .digidot-link-explorer > select:focus-visible, #preview-content .digidot-link-node-title button:focus-visible { outline: 2px solid #14738d; outline-offset: 2px; }
#preview-content .digidot-link-explorer-status { margin: 12px 0 18px; color: #526a79; font-size: 13px; }
#preview-content .digidot-link-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr); gap: 22px; align-items: start; }
#preview-content .digidot-link-panel { min-width: 0; padding: 14px; border: 1px solid #e1e9ee; border-radius: 8px; background: #fff; }
#preview-content .digidot-link-panel h3 { margin: 0 0 12px; font-size: 14px; line-height: 1.35; color: #35576a; }
#preview-content .digidot-link-panel > p { margin: 0; font-size: 13px; color: #647985; }
#preview-content .digidot-link-list { display: grid; gap: 8px; max-height: 500px; overflow-y: auto; padding-right: 3px; }
#preview-content .digidot-link-node { min-width: 0; padding: 10px 11px; border: 1px solid #e3ebef; border-radius: 6px; background: #fbfdfe; }
#preview-content .digidot-link-node-title { display: flex; gap: 6px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
#preview-content .digidot-link-node-title strong { font-size: 13px; color: #244d63; }
#preview-content .digidot-link-node-title a, #preview-content .digidot-link-center a { font-size: 12px; white-space: nowrap; }
#preview-content .digidot-link-node small { display: block; margin-top: 3px; color: #6c7780; }
#preview-content .digidot-link-node ul { margin: 6px 0 0; padding-left: 16px; font-size: 11px; color: #526b7a; }
#preview-content .digidot-link-node li + li { margin-top: 3px; }
#preview-content .digidot-link-node code { white-space: normal; overflow-wrap: anywhere; }
#preview-content .digidot-link-node-title button { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; }
#preview-content .digidot-link-node-title button:hover { background: transparent; color: #126784; }
#preview-content .digidot-link-node-title button:hover { text-decoration: underline; }
#preview-content .digidot-link-center { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 45px; padding: 20px 12px; border: 1px solid #7bb1c3; border-left: 4px solid #28758f; border-radius: 8px; background: #edf7fa; text-align: center; color: #1f4257; }
#preview-content .digidot-link-center strong { font-size: 17px; overflow-wrap: anywhere; }
#preview-content .digidot-link-center small { color: #526d7b; }
#preview-content .digidot-link-center::before, #preview-content .digidot-link-center::after { position: absolute; top: 50%; color: #497f96; font-size: 24px; line-height: 1; }
#preview-content .digidot-link-center::before { content: '→'; left: -22px; }
#preview-content .digidot-link-center::after { content: '→'; right: -22px; }
@media (max-width: 800px) { #preview-content .digidot-link-map { grid-template-columns: minmax(0, 1fr); } #preview-content .digidot-link-center { order: -1; margin: 0; } #preview-content .digidot-link-center::before, #preview-content .digidot-link-center::after { display: none; } }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #087e9d; outline-offset: 3px; }
.digidot-skip { position: absolute; left: 12px; top: -100px; z-index: 1000; background: white; padding: 12px; }
.digidot-skip:focus { top: 12px; }
@media (min-width: 801px) {
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}
#ig-viewer .ig-view-footer { height: auto; min-height: 110px; padding: 26px; margin-top: 32px; }
@media (max-width: 800px) {
#ig-viewer .ig-view-content #ig-view-treetable { width: calc(100% - 24px); }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel { grid-template-columns: minmax(0, 1fr); }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel {
padding: 12px 0; border-bottom: 1px solid #e6e6e6;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel.full-width {
padding: 20px 4px 32px; border-left: 0;
}
}
/* Profile-map details: individual linked definitions, readable at any panel width. */
#preview-content .digidot-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 12px; margin: 18px 0 24px; }
#preview-content a.digidot-profile-card { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid #b7cbd8; border-top: 4px solid #517b92; border-radius: 8px; background: #f7fafc; text-decoration: none; color: #213c50; min-width: 0; }
#preview-content a.digidot-profile-card:hover { background: #eaf3f8; border-color: #37738f; }
#preview-content .digidot-profile-card strong { font-size: 16px; }
#preview-content .digidot-profile-card span { font-size: 14px; line-height: 1.5; color: #496374; }
/* A single clinical statement produces matching coded meaning and structured anatomy. */
#preview-content .digidot-coding-figure { margin: 22px 0; padding: 18px; border: 1px solid #cbdde6; border-radius: 8px; background: #f8fbfd; }
#preview-content .digidot-coding-figure figcaption { font-size: 17px; font-weight: 700; color: #254357; margin-bottom: 12px; }
#preview-content .digidot-coding-input, #preview-content .digidot-coding-pair > div { padding: 13px 15px; border: 1px solid #bbd0da; border-radius: 7px; background: #fff; }
#preview-content .digidot-coding-input { border-left: 4px solid #247d82; }
#preview-content .digidot-coding-input strong, #preview-content .digidot-coding-pair strong, #preview-content .digidot-coding-input span, #preview-content .digidot-coding-pair span { display: block; }
#preview-content .digidot-coding-input span, #preview-content .digidot-coding-pair span { margin-top: 5px; line-height: 1.45; }
#preview-content .digidot-coding-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
#preview-content .digidot-coding-pair code { overflow-wrap: anywhere; }
#preview-content .digidot-coding-pair > div { min-width: 0; }
#preview-content .digidot-coding-pair .digidot-coded-expression { margin: 12px 0 0; padding: 16px; border: 1px solid #dbe2e7; border-radius: 6px; background: #f7f9fa; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.75; tab-size: 2; }
#preview-content .digidot-coded-expression code { font-size: inherit; line-height: inherit; }
#preview-content .digidot-coding-pair .digidot-coded-expression span { display: inline; margin: 0; line-height: inherit; }
#preview-content .digidot-coding-pair .digidot-coded-expression .digidot-expression-anatomy { display: block; margin-top: 10px; white-space: pre-wrap; }
#preview-content .digidot-coded-expression .digidot-expression-id { color: #496374; }
#preview-content .digidot-coded-expression .digidot-expression-term { color: #254357; font-weight: 600; }
#preview-content .digidot-coding-figure .digidot-anatomy-tooth { --anatomy-fill: #fff2ce; --anatomy-ink: #63460f; --anatomy-border: #d9b15a; }
#preview-content .digidot-coding-figure .digidot-anatomy-surface, #preview-content .digidot-coding-figure .digidot-anatomy-distal { --anatomy-fill: #e7f2fc; --anatomy-ink: #23567b; --anatomy-border: #91bada; }
#preview-content .digidot-coded-expression .digidot-anatomy-link { background: var(--anatomy-fill); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#preview-content .digidot-coded-expression .digidot-anatomy-link .digidot-expression-id, #preview-content .digidot-coded-expression .digidot-anatomy-link .digidot-expression-term { color: var(--anatomy-ink); }
#preview-content .digidot-anatomy-fields { margin: 12px 0 0; }
#preview-content .digidot-anatomy-fields > div + div { border-top: 1px solid #e0e9ee; margin-top: 12px; padding-top: 12px; }
#preview-content .digidot-anatomy-fields > div[class] { background: var(--anatomy-fill); border: 0; border-left: 3px solid var(--anatomy-border); border-radius: 4px; padding: 10px 12px; }
#preview-content .digidot-anatomy-fields > div[class] dt { color: var(--anatomy-ink); }
#preview-content .digidot-anatomy-fields dt { margin: 0 0 4px; font-weight: 700; color: #254357; }
#preview-content .digidot-anatomy-fields dd { margin: 0; line-height: 1.45; }
#preview-content .digidot-anatomy-fields small { display: block; margin-top: 5px; color: #526d7d; font-size: 12px; line-height: 1.5; }
#preview-content .digidot-anatomy-key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; }
#preview-content .digidot-anatomy-key > span { padding: 4px 9px; border: 1px solid var(--anatomy-border); border-radius: 5px; background: var(--anatomy-fill); color: var(--anatomy-ink); }
#preview-content .digidot-coding-figure p { margin: 12px 0 0; font-size: 14px; color: #456174; }
@media (max-width: 650px) { #preview-content .digidot-coding-pair { grid-template-columns: 1fr; } }
/* The landscape uses the available width; its navigation remains at the top. */
/* Clinical story first; technical detail is optional and uses the same example data. */
#preview-content .case-feature { border: 1px solid #bed5da; border-left: 5px solid #247d82; border-radius: 10px; background: #f1f8f8; padding: 24px; margin: 20px 0; }
#preview-content .case-feature h2 { margin-top: 8px; }
#preview-content .case-eyebrow { font-size: 13px; letter-spacing: .03em; color: #496673; margin: 0 0 10px; }
#preview-content .case-feature > p:last-child a { display: inline-block; color: white; background: #216e78; padding: 10px 18px; border-radius: 6px; font-weight: bold; text-decoration: none; }
#preview-content .case-mini-story { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
#preview-content .case-mini-story li { padding: 12px; background: white; border: 1px solid #d1e1e4; border-radius: 6px; }
#preview-content .case-mini-story span { display: block; font-size: 14px; color: #4d6976; }
#preview-content .digidot-case *, #preview-content .case-feature * { box-sizing: border-box; }
#preview-content .case-patient { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; border-bottom: 1px solid #d4e3e7; padding: 16px 20px; background: #edf5f7; border-radius: 8px 8px 0 0; }
#preview-content .case-patient strong { font-size: 20px; }
#preview-content .case-patient span { font-size: 14px; }
#preview-content .case-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
#preview-content .case-steps a { padding: 12px; display: flex; align-items: flex-start; gap: 9px; text-decoration: none; border: 1px solid #bdd0d9; border-radius: 7px; font-size: 14px; color: #25495b; line-height: 1.4; }
#preview-content .case-steps a span { border-radius: 50%; background: #e7f0f4; min-width: 25px; height: 25px; line-height: 25px; text-align: center; }
#preview-content .case-steps a[aria-current="step"] { background: #e4f2f1; border: 2px solid #247d82; padding: 11px; font-weight: bold; }
#preview-content .case-steps a[aria-current="step"] span { background: #247d82; color: white; }
#preview-content .case-stage { padding: 22px; border: 1px solid #cbdce3; border-radius: 8px; margin: 16px 0; background: #fcfefe; }
#preview-content .case-stage h2 { margin: 6px 0 12px; font-size: 22px; }
#preview-content .case-resource-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 12px; margin: 18px 0; }
#preview-content a.case-resource-link { padding: 15px; border: 1px solid #aec7d2; border-radius: 7px; background: white; text-decoration: none; color: #23485d; }
#preview-content a.case-resource-link:hover { border-color: #247d82; background: #eff8f8; }
#preview-content .case-resource-type { display: block; color: #526d7c; font-size: 12px; margin-bottom: 5px; }
#preview-content .case-resource-link strong { display: block; }
#preview-content .case-record { margin: 16px 0; padding: 14px 16px; border: 1px solid #d6e2e8; border-radius: 7px; }
#preview-content .case-inspector { border-top: 2px solid #d0e0e5; margin-top: 32px; padding-top: 4px; scroll-margin-top: 15px; }
#preview-content .case-record-picker { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
#preview-content .case-record-picker label { font-weight: 600; }
#preview-content .case-record-picker select { min-width: 0; max-width: 100%; flex: 1; font: inherit; padding: 10px; border: 1px solid #9cb8c7; border-radius: 6px; background: white; color: #23445b; }
#preview-content .case-view-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#preview-content .case-view-options button[aria-pressed="true"] { background: #216e78; border-color: #216e78; color: white; }
#preview-content .case-record-panel { padding: 20px; border: 1px solid #c3d8e2; border-radius: 8px; background: #fcfefe; }
#preview-content .case-record-panel h3 { margin: 0; font-size: 22px; }
#preview-content .case-record-id { color: #4c6576; font-family: monospace; font-size: 13px; margin: 5px 0; }
#preview-content .case-state-label { display: inline-block; padding: 4px 8px; border-radius: 4px; color: #456578; background: #edf3f6; font-size: 12px; margin: 4px 0 10px; }
#preview-content .case-state-label[hidden] { display: none; }
#preview-content .case-fields { width: 100%; }
#preview-content .case-fields th { width: 30%; text-align: left; font-size: 14px; overflow-wrap: anywhere; }
#preview-content .case-json { background: #112f43; color: #eaf5f9; padding: 18px; border-radius: 6px; font-size: 13px; max-height: 640px; white-space: pre; }
#preview-content .case-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Keep the case controls usable on narrow screens. */
@media (max-width: 650px) {
#preview-content .case-steps, #preview-content .case-mini-story { grid-template-columns: repeat(2,minmax(0,1fr)); }
#preview-content .case-stage, #preview-content .case-record-panel { padding: 14px; }
#preview-content .case-record-picker { display: block; }
#preview-content .case-record-picker select { display: block; width: 100%; margin-top: 8px; }
}
/* Guide pages and collapsible profile groups, with a persistent visibility control. */
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel {
grid-template-columns: 272px minmax(0, 1fr); column-gap: 28px; row-gap: 12px; align-items: start;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel.digidot-menu-hidden { grid-template-columns: minmax(0, 1fr); }
#guide-panel .digidot-layout-toolbar {
grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; padding: 10px 0;
background: #fff; border-bottom: 1px solid #e3e9ee;
}
#guide-panel .digidot-menu-toggle {
display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 13px;
font: 600 14px/1.4 Arial, Helvetica, sans-serif; color: #244c64;
background: #f1f5f8; border: 1px solid #bfcfda; border-radius: 6px; cursor: pointer;
}
#guide-panel .digidot-menu-toggle:hover { background: #e3edf3; }
#guide-panel .digidot-menu-toggle > span:first-child { font-size: 17px; line-height: 1; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel {
display: block; box-sizing: border-box; float: none; width: auto !important; min-width: 0;
position: sticky; top: 76px; height: auto; max-height: calc(100vh - 92px);
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
padding: 14px 12px; background: #f6f9fb; border: 1px solid #d8e2e9; border-radius: 9px;
}
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel[hidden],
#guide-panel .digidot-nav-children[hidden] { display: none !important; }
#guide-panel .tree-panel .digidot-nav-heading { margin: 0 0 12px 10px; color: #526877; font-size: 12px; font-weight: 600; }
#guide-panel .tree-panel .digidot-nav-list,
#guide-panel .tree-panel .digidot-nav-children { list-style: none; margin: 0; padding: 0; }
#guide-panel .tree-panel li { margin: 2px 0; padding: 0; }
#guide-panel .tree-panel .digidot-nav-row { display: flex; align-items: center; gap: 4px; }
#guide-panel .tree-panel a {
display: block; box-sizing: border-box; min-width: 0; width: 100%; padding: 9px 10px;
border: 1px solid transparent; border-radius: 5px; color: #254b62;
font: 14px/1.4 Arial, Helvetica, sans-serif; white-space: normal; overflow-wrap: break-word;
text-decoration: none; cursor: pointer; background: transparent; text-align: left;
}
/* Parent pages, child pages and folders each have one distinct visual role. */
#guide-panel .tree-panel .digidot-nav-row > a {
flex: 1; color: #254b62; font-weight: 500; text-decoration: none;
}
#guide-panel .tree-panel .digidot-nav-list > li > .digidot-nav-row > a { color: #213e52; font-weight: 700; }
#guide-panel .tree-panel .digidot-nav-children > li > .digidot-nav-row > a { padding: 7px 10px; font-size: 13px; }
#guide-panel .tree-panel .digidot-nav-external::after { content: '↗'; margin-left: 5px; color: #668295; font-size: 11px; }
#guide-panel .tree-panel .digidot-nav-row > a:hover { text-decoration: underline; color: #0b526b; }
/* The whole left area opens the page and toggles children; only the arrow toggles alone. */
#guide-panel .tree-panel .digidot-nav-parent { align-items: stretch; gap: 0; }
#guide-panel .tree-panel .digidot-nav-parent > a { flex: 1 1 auto; width: auto; padding-right: 10px; }
#guide-panel .tree-panel .digidot-nav-expand {
display: flex; align-items: center; justify-content: center; flex: 0 0 36px;
min-width: 36px; min-height: 40px; padding: 0;
border: 1px solid transparent; border-radius: 5px;
color: #395d73; background: transparent; cursor: pointer;
}
#guide-panel .tree-panel .digidot-nav-expand > span {
width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
#guide-panel .tree-panel .digidot-nav-expand[aria-expanded="true"] > span { transform: rotate(45deg); }
#guide-panel .tree-panel .digidot-nav-children { margin: 3px 0 10px 10px; border-left: 1px solid #dbe5eb; padding-left: 8px; }
#guide-panel .tree-panel .digidot-nav-children .digidot-nav-children { margin-left: 9px; border-left: 0; padding-left: 4px; }
#guide-panel .tree-panel .digidot-nav-section { margin: 14px 0 4px; padding: 0 10px; font-size: 12px; line-height: 1.5; font-weight: 600; color: #617787; }
#guide-panel .tree-panel a:hover, #guide-panel .tree-panel .digidot-nav-expand:hover { background: #e7f0f5; }
#guide-panel .tree-panel a[aria-current="page"] { background: #e5f1f6; border-color: #d0e2eb; color: #124b67; font-weight: 700; box-shadow: inset 3px 0 0 #246784; text-decoration: none; }
#guide-panel .tree-panel a[aria-current="location"] { background: #e3edf3; color: #164b66; font-weight: 700; }
#guide-panel .tree-panel a:focus-visible, #guide-panel button:focus-visible { outline: 3px solid #087e9d; outline-offset: -2px; }
/* Keep the native page links usable before or without enhancement. */
#guide-panel .tree-panel .tree-content, #guide-panel .tree-panel .tree-content > div { height: auto !important; max-height: none !important; overflow: visible !important; }
#guide-panel .tree-panel table, #guide-panel .tree-panel tbody, #guide-panel .tree-panel tr, #guide-panel .tree-panel td { display: block; width: 100%; padding: 0; border: 0; }
#guide-panel .tree-panel .baseIcon, #guide-panel .tree-panel .base, #guide-panel .tree-panel .ui-resizable-handle { display: none !important; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .preview-panel.full-width { border-left: 0; padding: 8px 0 40px; }
@media (max-width: 1099px) {
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
#ig-viewer .ig-view-content #ig-view-treetable .container-fluid #guide-panel .tree-panel { position: static; max-height: none; }
}
/* Profile folders disclose pages; the search opens the complete guide directory. */
#guide-panel .tree-panel .digidot-nav-folder {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid transparent;
border-radius: 5px; background: transparent; color: #526a7a; cursor: pointer;
font: 700 12px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .01em; text-align: left;
}
#guide-panel .tree-panel .digidot-nav-folder:hover { background: #e2eaf0; }
#guide-panel .tree-panel .digidot-nav-folder > .digidot-nav-chevron {
display: block; flex: 0 0 7px; width: 7px; height: 7px; margin-right: 4px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
#guide-panel .tree-panel .digidot-nav-folder[aria-expanded="true"] > .digidot-nav-chevron { transform: rotate(45deg); }
/* Search remains available below the menu without competing with page navigation. */
#guide-panel .digidot-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#guide-panel .tree-panel .digidot-nav-search { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #cbd8e1; }
#guide-panel .tree-panel .digidot-nav-search-row {
display: flex; align-items: center; gap: 0; background: #fff;
border: 1px solid #b6c9d5; border-radius: 5px;
}
#guide-panel .tree-panel .digidot-nav-search input[type="search"] {
flex: 1; width: 100%; min-width: 0; padding: 10px 8px; box-sizing: border-box;
font: 13px/1.4 Arial, Helvetica, sans-serif; background: transparent; color: #24364a;
border: 0; border-radius: 5px;
}
#guide-panel .tree-panel .digidot-nav-search input::placeholder { color: #5c707c; opacity: 1; }
#guide-panel .tree-panel .digidot-nav-search button {
display: flex; align-items: center; justify-content: center; flex: 0 0 30px;
width: 30px; min-height: 38px; padding: 0; border: 0; border-radius: 4px;
background: transparent; color: #496879; cursor: pointer; font: 20px/1 Arial, Helvetica, sans-serif;
}
#guide-panel .tree-panel .digidot-nav-search button:hover { background: #e2eaf0; color: #17465e; }
#guide-panel .tree-panel .digidot-nav-search input:focus-visible { outline: 2px solid #087e9d; outline-offset: -2px; }
#guide-panel .digidot-search-clear[hidden] { display: none !important; }
#guide-panel input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#preview-content .digidot-search-field { position: relative; }
#preview-content .digidot-search-field input { padding-right: 46px; }
#preview-content .digidot-search-field .digidot-search-clear {
position: absolute; top: 4px; right: 4px; bottom: 4px; width: 36px; padding: 0;
border: 0; background: transparent; color: #496879; font-size: 22px;
}
#preview-content .digidot-search-field .digidot-search-clear:hover { background: #e2eaf0; }
#preview-content .digidot-breadcrumb { margin: 0 0 20px; font-size: 14px; color: #526877; line-height: 1.6; }
#preview-content .digidot-breadcrumb p { margin: 0; }
#preview-content .digidot-breadcrumb span[aria-hidden] { margin: 0 8px; color: #78909c; }
#preview-content .digidot-breadcrumb [aria-current="page"] { color: #243f51; }
#preview-content .digidot-anchor-alias { display: block; height: 0; }
#preview-content .case-resource-action { display: block; font-size: 13px; margin-top: 10px; color: #126784; text-decoration: underline; text-underline-offset: 3px; }
#preview-content .case-stage-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
#preview-content .case-stage-progress { font-size: 13px; color: #526877; text-align: center; }
#preview-content .case-stage-controls button:disabled { opacity: .45; cursor: default; }
#preview-content .case-browse { margin: 0 0 8px; }
#preview-content .case-return { margin-top: 18px; }
#preview-content .case-definition-link { display: block; margin: 10px 0; font-size: 14px; }
#preview-content .case-inspector, #preview-content .case-stage { scroll-margin-top: 90px; }
/* One clear entry to the profile definition from each usage page. */
.digidot-profile-source { margin: 0 0 20px; }
.digidot-profile-source a {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
border: 1px solid #b7cedb; border-radius: 4px; background: #eef5f8;
color: #175774; font-weight: 600; text-decoration: none;
}
.digidot-profile-source a:hover { background: #e2edf3; text-decoration: underline; }
.digidot-profile-source a:focus-visible { outline: 3px solid #087e9d; outline-offset: 3px; }
/* Keep the active scenario stage and its selected data record together. */
#preview-content .case-patient {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: start; gap: 12px 16px;
border: 1px solid #d5e3e9; border-radius: 8px;
background: #f3f8fa; padding: 12px 18px;
}
#preview-content .case-patient strong { grid-column: 1 / -1; color: #173c50; }
#preview-content .case-patient .case-context-link {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
min-width: 0; padding: 5px 7px; margin: -5px -7px;
border-radius: 5px; color: #175774;
font-size: 14px; text-decoration: none;
}
#preview-content .case-patient .case-context-link span { font-size: inherit; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
#preview-content .case-patient .case-context-link small { order: -1; color: #526979; font-size: 11px; }
#preview-content .case-patient .case-context-link:hover,
#preview-content .case-patient .case-context-link[aria-current="true"] { background: #e1f0f2; }
#preview-content .case-patient .case-context-link:focus-visible { outline: 3px solid #087e9d; outline-offset: 3px; }
@media (max-width: 600px) {
#preview-content .case-patient { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#preview-content .case-steps { margin: 14px 0; }
#preview-content .case-steps a { background: #fff; min-height: 56px; align-items: center; }
#preview-content .case-steps a[aria-current="step"] {
background: #e8f4f4; border-color: #247d82;
}
#preview-content .case-workspace {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
align-items: start; gap: 16px; margin: 0 0 18px;
}
#preview-content .case-stage-column, #preview-content .case-inspector { min-width: 0; }
#preview-content .case-stage {
position: relative; margin: 0; padding: 18px; background: #fff;
border-color: #cbdce3;
}
#preview-content .case-stage > .case-eyebrow { padding-right: 38px; }
#preview-content .case-note summary {
position: absolute; top: 14px; right: 14px;
display: grid; place-items: center; width: 32px; height: 32px;
border: 1px solid #a9c7d3; border-radius: 50%;
background: #f3f9fb; color: #175774; font-size: 18px; font-weight: 700;
line-height: 1; list-style: none; cursor: pointer;
}
#preview-content .case-note summary::-webkit-details-marker { display: none; }
#preview-content .case-note summary:hover,
#preview-content .case-note[open] summary { background: #dff0f3; border-color: #44899b; }
#preview-content .case-note summary:focus-visible { outline: 3px solid #087e9d; outline-offset: 3px; }
#preview-content .case-note-content {
margin-top: 12px; padding: 10px 13px;
border-left: 3px solid #8ab7bb; border-radius: 0 5px 5px 0;
background: #f5fafb; font-size: 14px; line-height: 1.5;
}
#preview-content .case-note-content p { margin: 5px 0 0; }
#preview-content .case-stage h2 { font-size: 20px; }
#preview-content .case-stage > p { line-height: 1.5; }
#preview-content .case-resource-list { grid-template-columns: 1fr; gap: 8px; margin: 14px 0; }
#preview-content a.case-resource-link { padding: 11px 13px; }
#preview-content a.case-resource-link[aria-current="true"] {
border-color: #247d82; background: #eff8f8;
box-shadow: inset 3px 0 #247d82;
}
#preview-content .case-resource-action { margin-top: 5px; text-decoration: none; font-weight: 600; }
#preview-content a.case-resource-link[aria-current="true"] .case-resource-action { color: #175e68; }
#preview-content .case-stage-controls { margin: 10px 0 0; }
#preview-content .case-inspector {
margin: 0; padding: 18px; border: 1px solid #cbdce3;
border-left: 3px solid #247d82;
border-radius: 8px; background: #f7fafc;
}
#preview-content .case-inspector h2 { margin: 0 0 6px; font-size: 20px; }
#preview-content .case-explorer-intro { margin: 0; color: #526877; font-size: 14px; }
#preview-content .case-all-records { margin: 14px 0 0; border: 1px solid #cbdce3; border-radius: 6px; background: #fff; }
#preview-content .case-all-records summary { padding: 9px 12px; color: #275468; font-size: 14px; font-weight: 600; cursor: pointer; }
#preview-content .case-all-records .case-record-picker { display: block; margin: 0; padding: 0 12px 12px; }
#preview-content .case-record-picker label { display: block; margin-bottom: 5px; }
#preview-content .case-record-picker select { display: block; width: 100%; max-width: none; }
#preview-content .case-view-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 16px; }
#preview-content .case-view-options button { min-width: 0; padding: 8px; }
#preview-content .case-record-panel { padding: 16px; background: #fff; }
#preview-content .case-record-panel h3 { font-size: 19px; overflow-wrap: anywhere; }
#preview-content .case-record-id { overflow-wrap: anywhere; }
#preview-content .case-fields th { width: 35%; }
#preview-content .case-fields td { overflow-wrap: anywhere; }
#preview-content .case-journal-narrative { margin: 14px 0; padding: 12px 16px; border-left: 3px solid #418895; background: #fff; }
#preview-content .case-journal-narrative h4 { margin: 0 0 10px; }
#preview-content .case-journal-narrative p { margin: 0 0 10px; }
#preview-content .case-journal-narrative p:last-child { margin-bottom: 0; }
#preview-content .case-related-notes { margin: 16px 0; }
#preview-content .case-related-notes h4 { margin: 0 0 8px; }
#preview-content .case-clinic-assignments { margin: 14px 0; border-top: 1px solid #d5e3e9; padding-top: 10px; }
#preview-content .case-clinic-assignments summary { color: #275468; font-size: 14px; cursor: pointer; }
#preview-content .case-clinic-assignments p { margin: 10px 0; color: #526877; font-size: 14px; }
#preview-content .case-json { max-height: 520px; overflow: auto; }
#preview-content .case-reference-grid { display: grid; gap: 14px; }
#preview-content .case-reference-group h4 { margin: 14px 0 8px; font-size: 15px; }
#preview-content .case-reference-item {
display: block; width: 100%; margin: 7px 0; padding: 10px 12px;
text-align: left; border: 1px solid #c5d8e2; border-radius: 6px;
background: #f8fbfd; color: #23485d; cursor: pointer;
}
#preview-content .case-reference-item:hover { border-color: #247d82; background: #eff8f8; }
#preview-content .case-reference-item strong, #preview-content .case-reference-item span,
#preview-content .case-reference-item small { display: block; overflow-wrap: anywhere; }
#preview-content .case-reference-item span { color: #557080; font-size: 12px; }
#preview-content .case-reference-item small { margin-top: 5px; color: #536b79; }
#preview-content .case-reference-empty { margin: 0; color: #526877; font-size: 14px; }
/* Supplier readiness */
.digidot-readiness-experimental { --readiness-fill: #fcebea; --readiness-ink: #943c38; --readiness-line: #cf7974; }
.digidot-readiness-development { --readiness-fill: #fff3de; --readiness-ink: #785014; --readiness-line: #d8b06a; }
.digidot-readiness-review { --readiness-fill: #e8f2fa; --readiness-ink: #245574; --readiness-line: #85b2cd; }
.digidot-readiness-supplier-review { --readiness-fill: #e8f2fa; --readiness-ink: #245574; --readiness-line: #85b2cd; }
.digidot-readiness-pilot { --readiness-fill: #e6f4f2; --readiness-ink: #24665d; --readiness-line: #83b9b0; }
.digidot-readiness-baseline { --readiness-fill: #e8f3e6; --readiness-ink: #386431; --readiness-line: #94ba8b; }
#preview-content .digidot-readiness-badge { display: inline-block; padding: 4px 9px; border: 1px solid var(--readiness-line); border-radius: 5px; background: var(--readiness-fill); color: var(--readiness-ink); font-size: 12px; line-height: 1.45; font-weight: 700; }
#preview-content .digidot-readiness-summary { margin: 20px 0; padding: 16px 18px; border: 1px solid #bbd0dc; border-left: 4px solid #58849b; border-radius: 7px; background: #f4f8fb; }
#preview-content .digidot-readiness-summary p { margin: 7px 0 0; }
#preview-content .digidot-readiness-notice { margin: 16px 0 22px; padding: 12px 15px; border: 1px solid var(--readiness-line); border-left: 4px solid var(--readiness-line); border-radius: 6px; background: var(--readiness-fill); }
#preview-content .digidot-readiness-notice > strong { color: var(--readiness-ink); font-size: 14px; }
#preview-content .digidot-readiness-notice p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; }
#preview-content .digidot-readiness-note { margin: 8px 0 18px; color: #526877; font-size: 13px; line-height: 1.5; font-weight: 400; }
#preview-content .digidot-readiness-note p { margin: 0; }
/* End supplier readiness */