/* Metric strip: a row of columns, each with a label, a big number, its change and a small area chart with the
   period's high and low on the right. Websites page (one card per website) and the website dashboard's KPI row. */
.ms-strip{display:grid;grid-template-columns:repeat(var(--ms-cols,5),minmax(168px,1fr));overflow-x:auto;scrollbar-width:thin}
.ms-strip>*{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 18px 12px;border-left:1px solid #ececec;text-align:left}
.ms-strip>*:first-child{border-left:0}
.ms-label,.ms-strip .ov3-kpi-label{color:#000;font-size:13px;font-weight:500;line-height:1.3}
.ms-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-height:34px}
.ms-value strong{color:#000;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.ms-delta{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-delta.up{color:#000}
.ms-delta.down{color:#d92d20}
.ms-note{color:#6b6b6b;font-size:12px;line-height:1.4}
.ms-note .up{color:#000;font-weight:600}
.ms-note .down{color:#d92d20;font-weight:600}
.ms-chart{display:flex;align-items:stretch;gap:6px;height:52px;margin-top:auto;padding-top:8px;color:#000}
.ms-chart svg{flex:1 1 auto;min-width:0;width:100%;height:100%;overflow:visible}
.ms-chart.is-empty{visibility:hidden}
.ms-axis{display:flex;flex-direction:column;justify-content:space-between;flex:0 0 auto;min-width:26px;color:#8a8a8a;font-size:10.5px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.ms-axis b{font-weight:500}
.ms-strip .is-quiet .ms-note{margin-top:auto}

/* Websites page: a compact header and one full-width project card per website. */
.ws-projects .ws-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.ws-projects .ws-head h1{margin:0;color:#000;font-size:28px;font-weight:650;letter-spacing:-.02em}
.ws-projects .ws-head p{margin:4px 0 0;color:#6b6b6b;font-size:14px}
.ws-projects .ws-portfolio{margin-top:18px}
.ws-projects .ws-site-grid.ws-project-list{display:flex;flex-direction:column;gap:14px}
.ws-projects .ws-site-card.ws-project{display:block;padding:0;border:1px solid #e5e5e5;border-radius:12px;background:#fff;box-shadow:none;overflow:hidden}
.ws-projects .ws-site-card.ws-project:hover{border-color:#cfcfcf;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ws-projects .ws-site-card.ws-project.is-selected{border-color:#000}
.ws-projects .ws-project .ws-card-heading{display:flex;align-items:center;gap:12px;margin:0;padding:14px 18px;border-bottom:1px solid #ececec}
.ws-projects .ws-project .ws-site-mark{flex:0 0 auto;width:38px;height:38px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#000;font-size:13px;font-weight:700}
.ws-projects .ws-project .ws-site-identity{flex:1 1 auto;min-width:0}
.ws-projects .ws-project .ws-site-identity h2{margin:0;font-size:17px;font-weight:650}
.ws-projects .ws-project .ws-site-identity h2 button{padding:0;border:0;background:none;color:#000;font:inherit;cursor:pointer;text-align:left}
.ws-projects .ws-project .ws-site-identity h2 button:hover{text-decoration:underline}
.ws-projects .ws-project .ws-site-identity p{margin:2px 0 0;color:#6b6b6b;font-size:13px}
.ws-projects .ws-project .ws-card-actions{display:flex;flex:0 0 auto;gap:8px;margin:0}
.ws-projects .ws-project .ws-status{flex:0 0 auto}
.ws-projects .ws-range{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #e5e5e5;border-radius:999px;background:#fff}
.ws-projects .ws-range span{padding:0 8px;color:#6b6b6b;font-size:12.5px}
.ws-projects .ws-range button{padding:5px 11px;border:0;border-radius:999px;background:none;color:#000;font-size:12.5px;font-weight:600;cursor:pointer}
.ws-projects .ws-range button.is-current{background:#000;color:#fff}
.ws-projects .ws-source-note a{margin-left:4px;color:#000}

/* Websites page: eight columns per website, scrolling sideways on narrow screens like a project overview. */
.ws-projects .ws-project .ms-strip{--ms-cols:8;grid-template-columns:repeat(8,minmax(150px,1fr))}
.ws-projects .ws-project .ms-value{flex-wrap:nowrap;gap:6px}
.ws-projects .ws-project .ms-value strong{font-size:24px}
.ms-value strong small{margin-left:1px;color:#8a8a8a;font-size:15px;font-weight:500}
.ms-gauge{display:block;height:6px;margin-top:auto;margin-bottom:6px;border-radius:999px;background:#ececec;overflow:hidden}
.ms-gauge i{display:block;height:100%;border-radius:inherit;background:#000}
.ws-projects .ws-folders{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.ws-projects .ws-folders button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#000;font-size:13px;font-weight:600;cursor:pointer}
.ws-projects .ws-folders button span{color:#8a8a8a;font-weight:500}
.ws-projects .ws-folders button.is-current{border-color:#000;background:#000;color:#fff}
.ws-projects .ws-folders button.is-current span{color:#cfcfcf}
.ws-projects .ws-folders .ic{width:14px;height:14px}
.ws-projects .ws-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#8a8a8a;cursor:pointer}
.ws-projects .ws-icon-btn:hover{border-color:#000;color:#000}
.ws-projects .ws-icon-btn.is-on{color:#000}
.ws-projects .ws-icon-btn.is-on .ic{fill:currentColor}
.ws-projects .ws-icon-btn .ic{width:16px;height:16px}
.ws-projects .ws-folder-tag{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:1px 8px;border:1px solid #e5e5e5;border-radius:999px;color:#525252;font-size:12px}
.ws-projects .ws-folder-tag .ic{width:12px;height:12px}

/* Website dashboard: the KPI row as one card of columns; the picked metric gets a black underline. */
.pg-overview.ov3 .ov3-kpis.ms-strip{--ms-cols:4;display:grid;gap:0;border:1px solid #e5e5e5;border-radius:12px;background:#fff}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi{position:relative;min-height:0;margin:0;padding:16px 20px 14px;border:0;border-left:1px solid #ececec;border-radius:0;background:none;box-shadow:none;transform:none;font:inherit;color:inherit}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi:first-child{border-left:0;border-radius:12px 0 0 12px}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi:last-child{border-radius:0 12px 12px 0}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi.is-pick:hover{background:#fafafa;transform:none}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi.is-current{box-shadow:inset 0 -3px 0 #000}
.pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi-value{font-family:inherit;font-size:28px}
.pg-overview.ov3 .ov3-kpis.ms-strip .ms-chart{height:56px}

@media(max-width:1100px){
  .pg-overview.ov3 .ov3-kpis.ms-strip{--ms-cols:2}
  .pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi:nth-child(3){border-left:0}
  .pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi:nth-child(n+3){border-top:1px solid #ececec}
  .pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi{border-radius:0}
}
@media(max-width:700px){
  .ws-projects .ws-project .ws-card-heading{flex-wrap:wrap}
  .ws-projects .ws-project .ws-status{order:3}
  .ws-projects .ws-project .ws-card-actions{order:4;width:100%}
  .ws-projects .ws-head{align-items:flex-start;flex-direction:column}
  .ms-strip>*{padding:12px 14px}
  .ms-value strong{font-size:22px}
  .pg-overview.ov3 .ov3-kpis.ms-strip .ov3-kpi-value{font-size:22px}
}