/* Current hospital Editorial theme. */
:root{
  --jp-ink:#123553;
  --jp-blue:#4f9fc7;
  --jp-sky:#9edbed;
  --jp-deep:#173f66;
  --jp-orange:#ff9b46;
  --jp-lemon:#f8e37d;
  --jp-mint:#a7dccb;
  --jp-pink:#f5b9b5;
  --jp-paper:#fbfaf5;
  --jp-white:#fffefa;
  --jp-line:#cfe0e8;
}

body{
  background:
    radial-gradient(circle at 1px 1px, rgba(23,63,102,.055) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--jp-paper);
  color:var(--jp-ink);
}

.sidebar{
  width:238px;
  background:rgba(255,254,250,.96);
  color:var(--jp-deep);
  border-right:2px solid var(--jp-deep);
  box-shadow:none;
  padding:26px 16px;
}
.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--font-page-title-mobile);
  letter-spacing:.02em;
  color:var(--jp-deep);
  padding:3px 10px 28px;
}
.brand-mark{width:36px;height:36px;flex:0 0 36px}
.brand-copy{min-width:0}
.brand .brand-title{display:block;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:0;white-space:nowrap}
.brand .brand-subtitle{display:block;margin-top:3px;font-size:9px;font-weight:600;line-height:1.4;letter-spacing:.10em;color:#6d8292;white-space:nowrap}
.brand small{color:#6d8292;opacity:1}
.nav-label{
  color:#7990a0;
  opacity:1;
  font-weight:800;
  letter-spacing:.16em;
}
.nav button{
  color:var(--jp-deep);
  font-weight:700;
  border-radius:18px;
  padding:12px 14px;
  transition:.18s ease;
  border:1px solid transparent;
}
.nav button::before{
  content:"●";
  color:var(--jp-sky);
  font-size:var(--font-caption);
  margin-right:9px;
  vertical-align:2px;
}
.nav button:hover{
  background:#eef8fb;
  border-color:#d3e9f0;
}
.nav button.active{
  background:var(--jp-deep);
  color:#fff;
  border-color:var(--jp-deep);
  transform:translateX(4px);
}
.nav button.active::before{color:var(--jp-orange)}

.main{
  margin-left:238px;
  width:calc(100% - 238px);
  padding:34px 38px 46px;
  overflow:hidden;
}
.header{
  position:relative;
  margin-bottom:22px;
  padding:10px 4px 4px;
}
.header::before{
  content:"DIGITAL PERFORMANCE  /  DATA WITH A LITTLE RHYTHM";
  display:block;
  color:var(--jp-blue);
  font-size:var(--font-caption);
  font-weight:900;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.header::after{
  content:"✦";
  position:absolute;
  left:min(55vw,650px);
  top:0;
  font-size:var(--font-kpi-number);
  color:var(--jp-orange);
  transform:rotate(12deg);
}
h1{
  font-size:var(--font-page-title);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--jp-deep);
  margin-bottom:10px;
}
.sub{
  font-size:var(--font-table);
  color:#627c90;
  font-weight:650;
}
.controls select{
  border:2px solid var(--jp-deep);
  background:var(--jp-white);
  box-shadow:3px 3px 0 var(--jp-sky);
  font-weight:700;
}
.statuses{
  margin:10px 0 24px;
  gap:8px;
}
.status{
  border:1.5px solid var(--jp-line);
  background:var(--jp-white);
  font-weight:700;
  border-radius:999px;
  padding:6px 10px;
}
.status:nth-child(2n){background:#f1faf5}
.status:nth-child(3n){background:#fff8e2}
.status.prototype{
  background:var(--jp-orange);
  color:#fff;
  border-color:var(--jp-orange);
}

.card{
  position:relative;
  background:var(--jp-white);
  border:1.5px solid var(--jp-deep);
  border-radius:26px 18px 24px 18px;
  box-shadow:5px 6px 0 rgba(79,159,199,.20);
  padding:20px;
}
.card::after{
  content:"";
  position:absolute;
  right:15px;
  top:14px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--jp-orange);
  opacity:.8;
}
.card:nth-child(2n){border-radius:18px 28px 18px 24px}
.card:nth-child(3n){box-shadow:5px 6px 0 rgba(167,220,203,.38)}
.card:nth-child(4n){box-shadow:5px 6px 0 rgba(248,227,125,.42)}

#overview .grid4{
  grid-template-columns:1.15fr .92fr .92fr 1.05fr;
  gap:16px;
}
#overview .grid4 .card:nth-child(1){background:#eef9fc}
#overview .grid4 .card:nth-child(2){background:#fffdf3}
#overview .grid4 .card:nth-child(3){background:#f3fbf7}
#overview .grid4 .card:nth-child(4){
  background:var(--jp-deep);
  color:#fff;
  transform:translateY(5px) rotate(.25deg);
  box-shadow:6px 7px 0 var(--jp-orange);
}
#overview .grid4 .card:nth-child(4) .label,
#overview .grid4 .card:nth-child(4) .meta{color:#dbe9f1}
#overview .grid4 .card:nth-child(4) .num{color:#fff}
.metric .label{
  font-weight:800;
  letter-spacing:.02em;
}
.metric .num{
  font-size:var(--font-kpi-number);
  letter-spacing:-.035em;
}
.metric .num::after{
  content:"";
  display:block;
  width:30px;
  height:5px;
  margin-top:8px;
  background:var(--jp-lemon);
  border-radius:999px;
  transform:rotate(-2deg);
}
#overview .grid4 .card:nth-child(4) .num::after{background:var(--jp-orange)}

.section-title{
  color:var(--jp-deep);
  font-size:var(--font-card-title);
  font-weight:900;
  letter-spacing:-.015em;
  padding-bottom:10px;
  border-bottom:0;
}
.section-title > span{
  position:relative;
  z-index:1;
}
.section-title > span::before{
  content:"";
  position:absolute;
  left:-3px;
  bottom:-2px;
  width:58%;
  height:8px;
  background:var(--jp-lemon);
  border-radius:999px;
  z-index:-1;
  opacity:.9;
  transform:rotate(-1.5deg);
}
.section-title small{
  font-size:var(--font-caption);
  background:#edf7fa;
  padding:5px 8px;
  border-radius:999px;
  color:#56748a;
}

.grid2,.equal2{gap:18px}
.spacer{height:18px}

table{font-size:var(--font-meta)}
.tablewrap{
  border:1.5px solid var(--jp-deep);
  border-radius:20px 14px 20px 14px;
  background:#fff;
}
th{
  background:#f0f7fa;
  color:var(--jp-deep);
  font-weight:850;
  border-bottom:1.5px solid var(--jp-deep);
}
td{
  border-bottom:1px dashed #d9e5ea;
}
tbody tr:hover td{background:#fff9e7}
.total-row td{
  background:#eef8fb;
  border-top:2px solid var(--jp-deep);
}

select,.outline-btn{
  border:1.5px solid var(--jp-deep);
  background:#fffefa;
  font-weight:700;
}
.primary{
  background:var(--jp-orange);
  border:2px solid var(--jp-deep);
  box-shadow:3px 3px 0 var(--jp-deep);
  font-weight:850;
}
.primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--jp-deep)}
.secondary{
  border:1.5px solid var(--jp-deep);
  color:var(--jp-deep);
  box-shadow:2px 2px 0 var(--jp-sky);
  font-weight:750;
}

.note{
  border:1.5px solid var(--jp-deep);
  background:#fff7df;
  box-shadow:3px 3px 0 rgba(248,227,125,.75);
}
.tag{
  border:1px solid #e2a45b;
  background:#fff1de;
  color:#a95c14;
  font-weight:800;
}

.tabs{gap:8px}
.tabbtn{
  border:1.5px solid var(--jp-deep);
  color:var(--jp-deep);
  font-weight:750;
}
.tabbtn.active{
  background:var(--jp-orange);
  border-color:var(--jp-deep);
  color:#fff;
  box-shadow:2px 2px 0 var(--jp-deep);
}

.step{
  border:1.5px solid var(--jp-deep);
  border-radius:22px 14px 22px 14px;
  background:#fffefa;
  box-shadow:3px 4px 0 rgba(79,159,199,.22);
}
.step:nth-child(1){background:#eef9fc}
.step:nth-child(3){background:#fff9e8}
.step:nth-child(5){background:#f2faf6}
.step:nth-child(7){background:#fff1e5}
.arrow{
  color:var(--jp-orange);
  font-weight:900;
}
.kicker{color:var(--jp-blue);font-weight:900}

.ai-box,.ai-edit{
  background:
    linear-gradient(135deg,rgba(158,219,237,.18),transparent 34%),
    var(--jp-white);
}
.ai-box textarea,.ai-edit textarea{
  border:1.5px dashed var(--jp-blue);
  background:#fffefa;
  border-radius:18px;
}
.ai-box::before,.ai-edit::before{
  content:"✦";
  position:absolute;
  right:29px;
  top:-14px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--jp-lemon);
  color:var(--jp-deep);
  border:1.5px solid var(--jp-deep);
  border-radius:50%;
  font-size:var(--font-body);
  z-index:2;
}

.positive{color:#e36d59;font-weight:800}
.negative{color:#3e9d7d;font-weight:800}
.good{color:#3e9d7d;font-weight:800}

#traffic .card:first-child::before,
#content .card:first-child::before,
#search .card:first-child::before,
#conversion .card:first-child::before{
  position:absolute;
  left:-11px;
  top:22px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:var(--font-caption);
  font-weight:950;
  letter-spacing:.13em;
  color:var(--jp-deep);
  background:var(--jp-lemon);
  border:1.5px solid var(--jp-deep);
  padding:8px 5px;
  border-radius:8px;
}
#traffic .card:first-child::before{content:"TRAFFIC"}
#content .card:first-child::before{content:"CONTENT"}
#search .card:first-child::before{content:"SEARCH"}
#conversion .card:first-child::before{content:"CONVERSION"}

.devicebar{border:1.5px solid var(--jp-deep);height:26px}
.devicebar .mobile{background:var(--jp-blue)}
.devicebar .desktop{background:var(--jp-mint)}
.devicebar .other{background:var(--jp-lemon)}

.track{background:#eef2f2;border:1px solid #dce6e9}
.fill{background:var(--jp-blue)}

.footer{
  border-top:1px dashed #b9cfd9;
  padding-top:14px;
  font-weight:650;
}

/* slightly editorial section rhythm */
.page > .card + .card,
.page > .equal2 + .card,
.page > .grid3 + .card{margin-top:18px}

@media(max-width:1180px){
  #overview .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .sidebar{width:100%;border-right:0;border-bottom:2px solid var(--jp-deep)}
  .main{margin-left:0;width:100%;padding:22px 16px 36px}
  .header::after{display:none}
  h1{font-size:var(--font-kpi-number)}
  #overview .grid4{grid-template-columns:1fr}
  #overview .grid4 .card:nth-child(4){transform:none}
}

/* Production component adaptations: shared sizing, contrast and responsive layout. */
:root{--jp-paper:#f5fbfd;--jp-white:#fff;--jp-muted:#526d81;--jp-border:1.5px solid var(--jp-deep);--jp-radius:26px 18px 24px 18px;--jp-shadow-sky:5px 6px 0 #dceef5;--jp-shadow-mint:5px 6px 0 #e1f2eb;--jp-shadow-lemon:5px 6px 0 #faf0c8;--jp-gap:20px;--jp-positive:#b93e36;--jp-negative:#24795b;--nav:var(--jp-deep);--ink:var(--jp-ink);--muted:var(--jp-muted);--line:var(--jp-line);--blue:var(--jp-blue);--blue2:var(--jp-sky);--red:var(--jp-positive);--green:var(--jp-negative)}
body{background:var(--jp-paper);font-size:var(--font-card-title);line-height:1.6}
.main{overflow:visible;min-width:0;padding:28px 32px 44px}
.header{align-items:center;flex-wrap:wrap}.header::before,.header::after{content:none}
h1{line-height:1.3;letter-spacing:0;font-size:var(--font-page-title)}.sub{font-size:var(--font-body)}
.brand small{font-size:var(--font-meta);line-height:1.7}.nav-label{font-size:var(--font-meta);letter-spacing:.08em}.nav button{font-size:var(--font-body)}.nav button.active{transform:none;box-shadow:3px 3px 0 var(--jp-orange)}
.grid4,.grid3,.grid2,.equal2{gap:var(--jp-gap);align-items:stretch}.grid4>.card+.card,.grid3>.card+.card,.grid2>.card+.card,.equal2>.card+.card{margin-top:0}
.card{min-width:0;border:var(--jp-border);border-radius:var(--jp-radius);box-shadow:var(--jp-shadow-sky);padding:24px}.card:nth-child(3n){box-shadow:var(--jp-shadow-mint)}.card:nth-child(4n){box-shadow:var(--jp-shadow-lemon)}.card::after{content:none}
.metric{padding:24px 20px}.metric .label{font-size:var(--font-body)}.metric .num{font-size:var(--font-kpi-number);line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:18px 0 12px;overflow-wrap:anywhere}.metric .meta,.metric .micro{font-size:var(--font-table)}
#overview .grid4{grid-template-columns:1.05fr 1.1fr 1fr 1.1fr;gap:20px}#overview .grid4 .card:nth-child(2),#overview .grid4 .card:nth-child(3){background:#fff}#overview .grid4 .card:nth-child(4){transform:none}#overview .grid4 .card:nth-child(4) .micro{color:#dbe9f1}
.positive{color:var(--jp-positive)}.negative,.good{color:var(--jp-negative)}#overview .grid4 .card:nth-child(4) .meta.positive{color:#ffb7b0}#overview .grid4 .card:nth-child(4) .meta.negative{color:#91e0bc}
.section-title{font-size:var(--font-section-title);flex-wrap:wrap;line-height:1.5}.section-title small{font-size:var(--font-meta)}.section-title>span::before{height:5px;background:var(--jp-sky)}
.micro,.footer,.legend-note{font-size:var(--font-table)}.tag,.status,.kicker,.titlecell span{font-size:var(--font-meta)}.pending{color:#62788b}.list li,.barlist .item,.trend-row,.insight,.note{font-size:var(--font-body)}
select,input,button,textarea{max-width:100%}select,.primary,.secondary,.outline-btn,.tabbtn{min-height:40px;font-size:var(--font-body);border-radius:999px}select{padding:8px 14px}.primary,.tabbtn.active{color:var(--jp-deep)}a.secondary{display:inline-flex;text-decoration:none;align-items:center}
.date-fields{padding:14px 0;gap:12px}.date-fields input,.datasource input{border:var(--jp-border);border-radius:999px;background:white;font-size:var(--font-body)}.datasource label{font-size:var(--font-body)}.controls select{border-width:1.5px}
table{font-size:var(--font-body);font-variant-numeric:tabular-nums;line-height:1.6}th,td{padding:13px 12px}th{z-index:1;white-space:nowrap}td{white-space:nowrap}.titlecell{white-space:normal;min-width:260px}.tablewrap{max-width:100%;border:var(--jp-border)}.total-row:hover td{background:#eef8fb}
.ai-box,.ai-edit{position:relative;border-top:4px solid var(--jp-deep);background:linear-gradient(120deg,#eef9fc,white 55%)}.ai-box::before,.ai-edit::before{content:'✦';right:22px;background:var(--jp-orange);pointer-events:none}.ai-box textarea,.ai-edit textarea{font-size:var(--font-card-title);line-height:1.85;padding:18px;min-height:190px}.editor-state{font-size:var(--font-body)}.actions{gap:12px;margin-top:16px}
#traffic .card:first-child::before,#content .card:first-child::before,#search .card:first-child::before,#conversion .card:first-child::before{content:none}
.funnel{gap:12px;padding:12px 4px 16px;align-items:stretch}.step{flex:1;min-width:150px;padding:20px 14px}.step .n{font-size:var(--font-kpi-number);font-variant-numeric:tabular-nums}.arrow{align-self:center;font-size:var(--font-body);min-width:65px}.arrow span{font-size:var(--font-table)}#conversionFunnel>p{font-size:var(--font-section-title);font-weight:800;color:var(--jp-deep);text-align:right;border-top:1px dashed var(--jp-line);padding-top:16px}#registrationFunnelSummary .step:nth-child(2){background:#fff9e8}#registrationFunnelSummary .step:nth-child(3){background:#f2faf6}#registrationFunnelSummary .step:nth-child(4){background:#fff1e5}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--jp-blue);outline-offset:4px}
@media(max-width:1280px){#overview .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2,.equal2{grid-template-columns:minmax(0,1fr)}.header{gap:12px}.controls{justify-content:flex-start}}
@media(max-width:760px){.sidebar{position:relative;width:100%;padding:16px}.brand{padding-bottom:24px}.nav{gap:6px}.nav button{width:auto;padding:8px 12px;font-size:var(--font-body)}.main{margin:0;width:100%;padding:22px 16px 36px}.header{align-items:flex-start}.grid4,.grid3,.grid2,.equal2,#overview .grid4{grid-template-columns:minmax(0,1fr)}.card{padding:20px}.metric .num{font-size:var(--font-kpi-number)}.funnel{flex-direction:column;overflow:visible}.step{width:100%}.arrow{transform:rotate(0);padding:0 8px}.trend-row{grid-template-columns:1.3fr repeat(3,1fr);font-size:var(--font-meta)}.trend-row>div{padding:8px 3px}.datasource{display:flex;flex-wrap:wrap}.datasource input{flex-basis:100%;min-width:0}.barlist .item{grid-template-columns:110px 1fr 55px}.actions>*{flex-grow:1}.controls{width:100%}.controls select{min-width:0;max-width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.metric .meta.negative{color:var(--jp-negative)}.metric .meta.positive{color:var(--jp-positive)}
#overviewFunnelSummary .step:nth-child(2){background:#fff9e8}#overviewFunnelSummary .step:nth-child(3){background:#f2faf6}#overviewFunnelSummary .step:nth-child(4){background:#fff1e5}
.nav button::before{content:'';display:inline-block;width:6px;height:6px;background:var(--jp-sky);border-radius:50%}.nav button.active::before{background:var(--jp-orange)}

/* Shared readability scale; preserve current colors, spacing and component geometry. */
table,.trend-row{font-size:var(--font-table)}
th{font-size:var(--font-table);font-weight:800}
td.titlecell{font-size:var(--font-table-title)}
.titlecell span,td .micro,td .tag,td small{font-size:var(--font-table-meta)}
.section-title{font-size:var(--font-section-title)}
.metric .label{font-size:var(--font-kpi-label)}
.metric .num{font-size:var(--font-kpi-number)}
.metric .meta,.metric .micro{font-size:var(--font-kpi-meta)}
