/* Overview: the number strip's repeat tile, the ruled rows of cards, the
   Needs attention card, the trend chart, partners, bury and the Customize
   editor. Components (cards, tiles, chips) come from system.css. */
@layer pages{

/* ---- the repeat tile in the strip: verdict, rated split, month line ---- */
.ov-ic{flex:none;width:var(--s4);height:var(--s4);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi-goal .ov-verdict{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1);font-weight:700}
.ov-verdict.good{color:var(--good)}
.ov-verdict.bad{color:var(--bad)}
.kpi-goal .kpi-split b{margin-left:var(--s1)}
.ov-over{margin-left:var(--s2);color:var(--bad);font-weight:700}
.ov-split{display:flex;gap:2px;height:.375rem;margin-top:var(--s1)}
.ov-split i{display:block;background:var(--line-strong);border-radius:var(--r1) 0 0 var(--r1)}
.ov-split i:only-child{border-radius:var(--r1)}
.ov-split i.over{background:var(--bad);border-radius:0 var(--r1) var(--r1) 0}
.ov-came{font-size:var(--t6);color:var(--ink-2)}
.kpibar.slim .ov-split{display:none}

/* ---- the rows of cards (look C): a row fills with cards until the next one
   would not fit, then every card in it widens to fill the row, so no row ends
   in an empty slot. Cards in a row share its height. ---- */
.ovgrid{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s4)}
.ovgrid .ovcard{display:flex;flex-direction:column;min-width:0;flex:1 1 28%}
.ovgrid .ovcard.half{flex-basis:46%}
.ovgrid .ovcard.full{flex-basis:100%}
.ovgrid .ovcard > .card{flex:1 1 auto;margin-bottom:0}
.ovgrid .ovcard:has(> .card[hidden]){display:none}
.ovgrid .ovcard.editing{display:flex}
@media (max-width:1100px){ .ovgrid .ovcard.compact,.ovgrid .ovcard.half{flex-basis:45%} }
@media (max-width:760px){ .ovgrid .ovcard.compact,.ovgrid .ovcard.half{flex-basis:100%} }
/* a card whose list is short keeps its action on the bottom edge */
.ovgrid .card{display:flex;flex-direction:column}
.ovgrid .card > .ov-foot-act,.ovgrid .card .ovc-more{margin-top:auto}
.ov-foot-act{margin:var(--s3) 0 0;padding-top:var(--s3)}

/* The editor: each card grows a handle bar; a bar of actions rides the bottom. */
.ov-editbar{position:sticky;bottom:var(--s4);z-index:70;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4);
  padding:var(--s3);background:var(--surface);border:1px solid var(--accent);border-radius:var(--r2);box-shadow:var(--sh2)}
.ov-editbar select{min-width:14rem}
.ovcard.editing{outline:2px dashed var(--accent);outline-offset:var(--s1)}
.ov-handle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2);font-size:var(--t7);
  background:var(--accent-soft);border:1px solid var(--line-strong);border-bottom:0;border-radius:var(--r2) var(--r2) 0 0}
.ov-handle b{margin-right:auto;color:var(--accent)}
.ovcard.compact .ov-handle b{flex-basis:100%}
.ov-handle button,.ov-handle select{height:auto;padding:var(--s1) var(--s2);font-size:var(--t7);cursor:pointer;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r1)}
.ov-handle button:hover{border-color:var(--accent);color:var(--accent)}
.ov-handle .del{min-width:var(--s5);min-height:var(--s5)}
.ov-handle .del:hover{border-color:var(--bad);color:var(--bad)}
.ov-size{display:inline-flex}
.ov-size button{border-radius:0;margin-left:-1px}
.ov-size button:first-child{margin-left:0;border-radius:var(--r1) 0 0 var(--r1)}
.ov-size button:last-child{border-radius:0 var(--r1) var(--r1) 0}
.ov-size button[aria-pressed="true"]{position:relative;color:var(--accent);background:var(--accent-soft);border-color:var(--accent);font-weight:700}
@media (pointer:coarse){ .ov-handle .del{min-width:44px;min-height:44px} }

/* ---- Needs attention: which goal is off, and who is behind it ---- */
.ov-attn-head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border-radius:var(--r2);background:var(--bad-soft)}
.ov-attn-head .ov-ic{width:var(--s5);height:var(--s5);color:var(--bad)}
.ov-attn-head.good{background:var(--good-soft)}
.ov-attn-head.good .ov-ic{color:var(--good)}
.ov-attn-head strong{display:block;font-size:var(--t5);color:var(--ink)}
.ov-attn-head p{margin:0;font-size:var(--t6);color:var(--ink-2)}
.gb-list{display:flex;flex-direction:column;margin-top:var(--s2)}
.gb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(4rem,7rem) 3.5rem;align-items:center;gap:var(--s3);
  width:100%;min-height:2.75rem;margin:0;padding:var(--s2) 2px;text-align:left;font:inherit;color:inherit;
  background:none;border:0;border-bottom:1px solid var(--line)}
.gb-row:last-child{border-bottom:0}
.gb-row.act{cursor:pointer}
.gb-row.act:hover{background:var(--surface-2)}
.gb-row.act:hover .tname{color:var(--accent)}
.gb-row:not(:has(.gb-track)){grid-template-columns:minmax(0,1fr) auto}
.gb-who{display:flex;flex-direction:column;min-width:0}
.gb-who .tname,.gb-who .tsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-track{position:relative;height:var(--s2);background:var(--surface-2);border-radius:var(--r1)}
.gb-track i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r1)}
.gb-track b{position:absolute;top:calc(-1 * var(--s1));width:2px;height:var(--s4);margin-left:-1px;background:var(--ink);border-radius:1px}
.gb-row .fig{text-align:right;font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums slashed-zero}
.gb-row .fig.word{font-family:var(--f-ui);font-size:var(--t6);font-weight:700}
.gb-row .fig.word.good{color:var(--good)}
.gb-key{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 0;font-size:var(--t7);color:var(--ink-3)}
.gb-key i{display:inline-block;width:2px;height:var(--s3);background:var(--ink)}

/* ---- compact widgets: a figure, what it is, the top few rows ---- */
.ovc-big{margin:var(--s2) 0 2px;font-size:var(--t1);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums slashed-zero}
.ovc-big small{font-size:var(--t3);font-weight:500;color:var(--ink-3)}
.ovc-sub{margin:2px 0 var(--s2);font-size:var(--t6);color:var(--ink-2);line-height:1.4}
.ovc-list{display:flex;flex-direction:column;margin-top:var(--s1)}
.ovc-row{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:2.75rem;margin:0;padding:var(--s1) 2px;text-align:left;
  font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line)}
.ovc-row.act{cursor:pointer}
.ovc-row.act:hover{background:var(--surface-2)}
.ovc-row.act:hover .tname{color:var(--accent)}
.ovc-n{flex:1;min-width:0;display:flex;flex-direction:column}
.ovc-n .tname,.ovc-n .tsub{overflow-wrap:anywhere}
.ovc-f{flex:none;font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums slashed-zero}
.ovc-sw{flex:none;width:var(--s3);height:var(--s3);border-radius:var(--r1)}
.ovc-more{display:block;margin-top:var(--s2);padding:var(--s1) 0;text-align:left;background:none;border:0;font:inherit;font-size:var(--t6);font-weight:600;color:var(--accent);cursor:pointer}
.ovc-more:hover{text-decoration:underline;text-underline-offset:3px}
div.ovc-more{color:var(--ink-3);font-weight:400;cursor:default}
div.ovc-more:hover{text-decoration:none}
.ovc-stack{display:flex;gap:2px;height:var(--s3);margin:var(--s1) 0 var(--s2);border-radius:var(--r1);overflow:hidden}
.ovc-spark{display:block;width:100%;height:5rem;margin-top:var(--s3);overflow:visible;color:var(--accent)}
.ovc-spark .sp-line{fill:none;stroke:currentColor;stroke-width:2}
.ovc-spark .sp-area{fill:currentColor;opacity:.1;stroke:none}
.ovc-spark .sp-dot{fill:currentColor;stroke:var(--surface);stroke-width:2}
.ovc-spark .sp-dot.part{fill:var(--surface);stroke:currentColor}
.ovc-axis{display:flex;justify-content:space-between;margin-top:var(--s1);font-size:var(--t7);color:var(--ink-3)}

/* ---- the trend chart: fills its card, drawn to scale on a plan-sheet grid ---- */
.ov-trend{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.ov-chart{position:relative;flex:1 1 auto;min-height:16rem;border-radius:var(--r1);
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px);
  background-size:1.25rem 1.25rem}
.ov-tsvg{position:absolute;inset:0;display:block;overflow:visible}
.ov-tsvg .c-grid{stroke:var(--line)}
.ov-tsvg .c-base{stroke:var(--line-strong)}
.ov-tsvg .c-goal{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:5 4}
.ov-tsvg .c-tick{fill:var(--ink-3);font-family:var(--f-num)}
.ov-tsvg .c-x{fill:var(--ink-2);font-size:var(--t6)}
.ov-tsvg .c-x2{fill:var(--ink-3)}
.ov-tsvg .c-goal-t,.ov-tsvg .c-band-t{fill:var(--ink-2);font-weight:600}
.ov-tsvg .c-band{fill:var(--accent-soft)}
.ov-tsvg .c-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ov-tsvg .c-line.part{stroke-dasharray:4 4}
.ov-tsvg .c-pt{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.ov-tsvg .c-pt.over{fill:var(--bad)}
.ov-tsvg .c-pt.part{fill:var(--surface);stroke:var(--accent)}
.ov-tsvg .c-lab{fill:var(--ink);font-family:var(--f-num);font-size:var(--t6);font-weight:600}
.ov-tsvg .c-hit{fill:transparent;cursor:crosshair}
.ov-tsvg .c-hit:hover{fill:color-mix(in srgb,var(--ink) 4%,transparent)}
.ov-key{justify-content:flex-start}
.ov-key .kd{display:inline-block;width:.625rem;height:.625rem;margin-right:var(--s2);border-radius:var(--r1);vertical-align:-1px}
.ov-key .kd.over{background:var(--bad)}
.ov-key .kd.part{border:2px solid var(--accent);background:var(--surface)}
.ov-key .kd.goal{width:var(--s4);height:0;border-radius:0;border-top:2px dashed var(--ink-2);vertical-align:middle}
.ov-tbl{margin-top:var(--s2);font-size:var(--t6);color:var(--ink-2)}
.ov-tbl summary{width:max-content;cursor:pointer}
.ov-tbl .tablewrap{margin-top:var(--s2);max-height:16rem}

/* ---- partners at a glance ---- */
.ov-pt td,.ov-pt th{white-space:nowrap}
.ov-pt th .spark-i{vertical-align:-1px;margin-right:2px}
.ov-pt td .spark-chip{margin-left:0}
.ov-ptbar{width:34%;min-width:8rem}
.pbar{position:relative;display:block;height:.625rem;background:var(--surface-2);border-radius:var(--r1)}
.pbar .o,.pbar .a{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r1)}
.pbar .o{background:var(--line-strong)}
.pbar .a{background:var(--ink-2)}
.pbar b{position:absolute;top:calc(-1 * var(--s1));width:2px;height:calc(.625rem + var(--s2));margin-left:-1px;background:var(--ink);border-radius:1px}
.ov-ptkey{justify-content:flex-start}
.ov-sw{display:inline-block;width:var(--s3);height:var(--s2);margin-right:var(--s2);border-radius:var(--r1)}
.ov-sw.a{background:var(--ink-2)} .ov-sw.o{background:var(--line-strong)}
.ov-sw.g{width:2px;height:var(--s3);background:var(--ink);border-radius:0}

/* ---- bury vendor ---- */
.ov-bury-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);font-size:var(--t6);color:var(--ink-2)}
.ov-bury-n .ovc-big{font-size:var(--t2);margin:0}
.ov-stack{display:flex;gap:2px;height:.875rem;margin:var(--s3) 0}
.ov-stack i{display:block;height:100%}
.ov-stack i:first-child{border-radius:var(--r2) 0 0 var(--r2)}
.ov-stack i:last-child{border-radius:0 var(--r2) var(--r2) 0}
.ov-stack i:only-child{border-radius:var(--r2)}
.ov-stack .s-v{background:var(--bad)}
.ov-stack .s-n{background:var(--ink-3)}
.ov-stack .s-c{background:repeating-linear-gradient(45deg,var(--line-strong) 0 2px,var(--surface-2) 2px 5px)}
.ov-cause{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t6);color:var(--ink-2)}
.ov-cause + .ov-cause{margin-top:0;padding-top:var(--s1);border-top:0}
.ov-cause b{color:var(--ink);font-weight:600}

/* "Month at a glance": its tiles keep to one row. */
.ov-tiles{display:flex;gap:var(--s3);overflow-x:auto;padding-bottom:2px}
.ov-tiles .tile{flex:1 1 0;min-width:10rem}
.ov-tiles .tile .lab{min-height:2.6em}

/* What customers said: two columns of quotes. */
.ov-kudos{columns:3 18rem;column-gap:var(--s4)}
.ov-kudos .kudos{break-inside:avoid}
.ov-kudos .ov-empty-full{column-span:all;display:flex;align-items:center;justify-content:center;min-height:6rem;width:100%}
.ov-more{margin:var(--s3) 0 0}
.chart text.yr{fill:var(--ink-3)}

/* Addresses that keep coming back. */
.addr-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.addr-row:first-child{border-top:0}
.addr-row .vis{flex:none;display:grid;place-items:center;width:calc(var(--s6) - var(--s1));height:calc(var(--s6) - var(--s1));font-family:var(--f-num);font-weight:700;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--line-strong);border-radius:var(--r2)}
}