/* Area reporting follows the surrounding WHS metric and disclosure hierarchy. */
.whs-area { font-family: var(--font-primary, 'Source Sans 3', sans-serif); }
.whs-area-headline {
    color: var(--whs-ui-accent-text, #ceff1a);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.whs-area-headline > span { font-size: .875rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.whs-area-group { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--whs-ui-border, #354040); }
.whs-area-list { margin: 0; }
.whs-area-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: baseline; padding: .4rem 0; font-size: .85rem; line-height: 1.4; }
.whs-area-row dt { margin: 0; font-weight: 400; color: var(--whs-ui-muted, #9daaaa); overflow-wrap: anywhere; }
.whs-area-row dd { min-width: 0; margin: 0; text-align: right; color: var(--whs-ui-text, #edf3f3); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.whs-area-row dd > span { font-weight: 400; font-size: .75rem; white-space: nowrap; }
.whs-area-row dd > small { display: block; margin-top: .1rem; color: var(--whs-ui-muted, #9daaaa); font-size: .72rem; font-weight: 400; }
.whs-area-total { border-top: 1px solid var(--whs-ui-border, #354040); margin-top: .35rem; padding-top: .65rem; }
.whs-area-total dt { color: var(--whs-ui-text, #edf3f3); font-weight: 600; }
.whs-area-details { margin-top: .65rem; }
.whs-area-details > summary { padding: .45rem 0; color: var(--whs-ui-muted, #9daaaa); font-size: .8rem; cursor: pointer; }
.whs-area-details > summary:hover { color: var(--whs-ui-text, #edf3f3); }
.whs-area-details > summary:focus-visible { outline: 2px solid var(--whs-ui-accent-text, #ceff1a); outline-offset: 3px; border-radius: 3px; }
.whs-area-zone-type { color: var(--whs-ui-text, #edf3f3); font-size: .78rem; font-weight: 600; margin-top: .65rem; }
.whs-area-details .whs-area-row { font-size: .78rem; padding: .25rem 0; }
.sr-metric-unavailable { font-size: 1rem; font-weight: 500; color: var(--whs-ui-muted, #a3afb4); }
.sr-comparison .sr-metric-value { overflow-wrap: anywhere; }
.sr-comparison .sr-metric-value small { white-space: nowrap; }
@container rs-sidebar (max-width: 250px) {
    .whs-area-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .whs-area-row dd { text-align: left; }
    .whs-area-row dd > small { display: inline; margin-left: .5rem; }
}

/* Use colors remain consistent across cards and results. Light-theme hues are
   dark enough for category text; each swatch and wedge uses that exact color. */
.whs-area, .sr-area-chart {
    --area-warehouse: var(--whs-ui-accent-text, #ceff1a);
    --area-office: #82b6e8;
    --area-manufacturing: #b59de7;
    --area-shipping: #73c7b2;
    --area-receiving: #deb673;
    --area-shipping-receiving: #78bfcd;
    --area-other: #a9b3be;
    --area-no-storage: #d592a2;
    --area-overlap: #e69b72;
    --area-custom-0: #dd95c6;
    --area-custom-1: #93a9dc;
    --area-custom-2: #9fc18c;
    --area-custom-3: #c2a18b;
    --area-custom-4: #83c8dd;
    --area-custom-5: #b0a4c8;
}
html[data-theme="light"] :is(.whs-area, .sr-area-chart) {
    --area-office: #346597;
    --area-manufacturing: #7855a1;
    --area-shipping: #287660;
    --area-receiving: #896119;
    --area-shipping-receiving: #297382;
    --area-other: #5d6b7a;
    --area-no-storage: #a04461;
    --area-overlap: #a85325;
    --area-custom-0: #9b427f;
    --area-custom-1: #4e6296;
    --area-custom-2: #526e3f;
    --area-custom-3: #815c40;
    --area-custom-4: #246d85;
    --area-custom-5: #6f5d8c;
}
.whs-area-color--warehouse { --area-slice-color: var(--area-warehouse); }
.whs-area-color--office { --area-slice-color: var(--area-office); }
.whs-area-color--manufacturing { --area-slice-color: var(--area-manufacturing); }
.whs-area-color--shipping { --area-slice-color: var(--area-shipping); }
.whs-area-color--receiving { --area-slice-color: var(--area-receiving); }
.whs-area-color--shipping-receiving { --area-slice-color: var(--area-shipping-receiving); }
.whs-area-color--other { --area-slice-color: var(--area-other); }
.whs-area-color--no-storage { --area-slice-color: var(--area-no-storage); }
.whs-area-color--overlap { --area-slice-color: var(--area-overlap); }
.whs-area-color--custom-0 { --area-slice-color: var(--area-custom-0); }
.whs-area-color--custom-1 { --area-slice-color: var(--area-custom-1); }
.whs-area-color--custom-2 { --area-slice-color: var(--area-custom-2); }
.whs-area-color--custom-3 { --area-slice-color: var(--area-custom-3); }
.whs-area-color--custom-4 { --area-slice-color: var(--area-custom-4); }
.whs-area-color--custom-5 { --area-slice-color: var(--area-custom-5); }
.whs-area-visual { display: grid; gap: .75rem; min-width: 0; }
.whs-area-pie { display: block; width: 224px; max-width: 100%; height: auto; margin: .25rem auto; overflow: visible; }
.whs-area-slice { fill: var(--area-slice-color); stroke: var(--whs-ui-surface, #111314); stroke-width: 1.2; stroke-linejoin: round; }
.whs-area-pie-labels { pointer-events: none; }
.whs-area-percent { fill: #131719; font: 700 12.5px var(--font-primary, 'Source Sans 3', sans-serif); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .whs-area-percent { fill: #fff; }
.whs-area-percent.whs-area-percent--outside,
html[data-theme="light"] .whs-area-percent.whs-area-percent--outside { fill: var(--whs-ui-text, #edf3f3); font-weight: 600; }
.whs-area-leader { fill: none; stroke: var(--area-slice-color); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.whs-area-key { display: flex; align-items: baseline; gap: .45rem; color: var(--area-slice-color); }
.whs-area-key > :last-child { min-width: 0; overflow-wrap: anywhere; }
.whs-area-swatch { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px; flex: 0 0 .5rem; background: var(--area-slice-color); }
.sr-area-chart { padding-top: 16px; margin-bottom: 20px; border-top: 1px solid var(--whs-ui-border, #66717e44); }
.sr-area-chart-title { margin-bottom: 12px; color: var(--whs-ui-muted, #a3afb4); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sr-area-chart .whs-area-visual { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sr-area-chart .whs-area-pie { width: 244px; margin: 0 auto; }
.sr-area-chart .whs-area-list { display: grid; gap: 2px; }
.sr-area-chart .whs-area-row { gap: .65rem; padding: .6rem .65rem; border: 1px solid transparent; border-radius: var(--radius-control, 6px); font-size: .9375rem; }
.sr-area-chart .whs-area-row dd > span { font-size: .75rem; }
.sr-area-chart .whs-area-row dd > small { margin-top: .15rem; font-size: .75rem; }
.sr-area-chart .whs-area-key { gap: .45rem; }
.sr-area-chart .whs-area-row--warehouse {
    background: var(--whs-ui-accent-soft, #ceff1a0d);
    border-color: var(--whs-ui-accent-border, #ceff1a40);
}
.sr-area-chart .whs-area-row--warehouse dt { font-weight: 600; }
.sr-area-chart .whs-area-total {
    margin-top: .4rem;
    background: var(--whs-ui-surface-muted, #ffffff08);
    border-color: var(--whs-ui-border, #354040);
}
.sr-area-chart .whs-area-total dd { font-weight: 700; }
@container rs-sidebar (min-width: 440px) {
    .whs-area-visual { grid-template-columns: 208px minmax(0, 1fr); align-items: center; column-gap: 1rem; }
    .whs-area-pie { width: 208px; }
}