/* Layout for the insight view; colors, type and controls use the Ciwei system. */
.insights-heading #insightsPeriod { font-size:var(--text-xs); color:var(--secondary-text-color); margin-top:var(--space-2); }
.insights-meta,.insights-coverage { font-size:var(--text-xs); line-height:var(--line-body); color:var(--secondary-text-color); }
.insights-numbers { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); padding-top:var(--space-3); margin-top:0; }
.insights-number { display:flex; align-items:baseline; gap:var(--space-2); }
.insights-number strong { font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:var(--line-body); font-variant-numeric:tabular-nums; color:var(--foreground); }
.insights-number span { font-size:var(--text-sm); color:var(--secondary-text-color); }
.insights-coverage { margin:var(--space-3) 0 var(--space-4); }
.insights-section { scroll-margin-top:0; margin:0 0 var(--space-6); }
.insights-section h2 { font-size:var(--text-xl); font-weight:var(--weight-semibold); line-height:var(--line-heading); margin:var(--space-2) 0; }
.insights-section-description { font-size:var(--text-sm); color:var(--secondary-text-color); margin:0 0 var(--space-4); }
.insights-legend { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-size:var(--text-xs); color:var(--secondary-text-color); margin-bottom:var(--space-3); }
.insights-scale { display:inline-block; width:80px; height:8px; border-radius:var(--radius-sm); }
.insights-scale-pair { display:inline-flex; align-items:center; gap:var(--space-2); }
.insights-small-key { display:inline-flex; align-items:center; gap:var(--space-2); }
.insights-small-key:before { content:''; width:16px; height:12px; border:1px dashed var(--secondary-text-color); border-radius:var(--radius-sm); }
.insights-scroll { position:relative; isolation:isolate; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:var(--space-2); scrollbar-width:thin; }
.insights-heatmap-scroll { --insights-label-width:184px; scroll-padding-inline:calc(var(--insights-label-width) + 8px) 8px; }
.insights-table { width:100%; min-width:1120px; border-collapse:separate; border-spacing:4px; table-layout:fixed; text-align:left; }
.insights-table th { font-weight:var(--weight-medium); word-break:normal; overflow-wrap:normal; }
.insights-table thead tr:first-child th { height:32px; color:var(--secondary-text-color); font-size:var(--text-xs); border-bottom:1px solid var(--border-color); }
.insights-table thead tr:first-child th:first-child { border:0; }
.insights-table thead tr:nth-child(2) th { height:64px; font-size:var(--text-sm); vertical-align:bottom; padding:0 var(--space-1) var(--space-3); line-height:1.4; color:var(--text-color); }
.insights-table .insights-row-label { width:var(--insights-label-width); position:sticky; left:0; z-index:1; background:var(--background-color); box-shadow:4px 0 var(--background-color),5px 0 var(--border-color); padding:var(--space-2) var(--space-3) var(--space-2) 0; font-size:var(--text-sm); line-height:1.4; }
.insights-table thead .insights-corner { z-index:2; vertical-align:bottom; padding-bottom:var(--space-3); color:var(--text-color); }
.insights-row-label span { display:block; color:var(--secondary-text-color); font-size:var(--text-xs); font-weight:var(--weight-regular); margin-top:var(--space-1); font-variant-numeric:tabular-nums; }
.insights-table td { padding:0; }
.insights-cell { width:100%; height:48px; min-width:44px; border:1px solid transparent; border-radius:var(--radius-sm); font:var(--weight-medium) var(--text-sm) var(--font-family); font-variant-numeric:tabular-nums; cursor:pointer; transition:box-shadow var(--motion-fast); }
.insights-cell.small { border:1px dashed currentColor; }
.insights-cell:active { box-shadow:inset 0 0 0 2px currentColor; }
.insights-cell:disabled { cursor:default; background:var(--background-color-2); color:var(--secondary-text-color); }
.insights-page :is(a,button,select,summary,[tabindex]):focus-visible { outline:2px solid var(--focus-color); outline-offset:3px; }
.insights-hint { font-size:var(--text-xs); color:var(--secondary-text-color); margin:var(--space-2) 0; }
.insights-method { border-block:1px solid var(--border-color); padding:var(--space-4) 0; font-size:var(--text-sm); line-height:var(--line-body); scroll-margin-top:0; }
.insights-method summary { display:list-item; min-height:var(--control-height); align-content:center; font-size:var(--text-base); cursor:pointer; }
.insights-method p { max-width:900px; }
.insights-method h3 { font-size:var(--text-base); font-weight:var(--weight-semibold); margin:var(--space-5) 0 var(--space-2); }
.insights-method a,.insights-footer a { color:var(--text-color); text-decoration:underline; text-underline-offset:3px; }
.insights-footer { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); font-size:var(--text-xs); color:var(--secondary-text-color); padding-top:var(--space-4); }
.insights-footer p { margin:0; }
.insights-footer a { display:inline-flex; min-height:44px; align-items:center; }
.insights-stale { color:var(--error-text); }
#insightsDetail { width:min(760px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--background-color); color:var(--foreground); overflow:hidden; box-shadow:var(--shadow-dialog); }
#insightsDetail[open] { display:flex; flex-direction:column; }
#insightsDetail::backdrop { background:var(--overlay-bg-color); }
.insights-dialog-head { display:flex; flex:none; justify-content:space-between; align-items:start; gap:var(--space-4); padding:var(--dialog-gutter); border-bottom:1px solid var(--border-color); }
.insights-dialog-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--dialog-gutter) var(--dialog-gutter); }
.insights-dialog-head h2 { font-size:var(--text-2xl); font-weight:var(--weight-semibold); line-height:var(--line-heading); margin:0; }
.insights-dialog-head form { flex:none; }
.insights-filter { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); margin-top:var(--space-6); }
.insights-page .insights-filter select { width:auto; }
#insightsDetailCount { font-size:var(--text-xs); color:var(--secondary-text-color); }
#insightsPostingList { list-style:none; padding:0; margin:0 0 var(--space-4); }
#insightsPostingList li { display:grid; grid-template-columns:40px 1fr; gap:var(--space-3); border-top:1px solid var(--border-color); padding:var(--space-4) 0; }
.insights-post-score { display:grid; place-content:center; background:var(--keyword-button-on-bg-color); color:var(--keyword-button-on-text-color); border-radius:var(--radius-sm); width:36px; height:36px; font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
.insights-post-title { font-size:var(--text-lg); font-weight:var(--weight-semibold); line-height:var(--line-body); }
.insights-post-meta { font-size:var(--text-xs); color:var(--secondary-text-color); margin:var(--space-1) 0; }
.insights-post-link { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-sm); text-decoration:underline; text-underline-offset:3px; color:var(--text-color); }
@media(hover:hover) and (pointer:fine) { .insights-cell:not(:disabled):hover { box-shadow:inset 0 0 0 1px currentColor; } }
@media(max-width:820px) {
 .insights-numbers { gap:var(--space-2) var(--space-4); }
 .insights-heatmap-scroll { --insights-label-width:148px; }
 .insights-section { margin-bottom:var(--space-8); }
 .insights-footer { display:block; }
 #insightsDetail { max-height:calc(100dvh - 24px); }
 .insights-dialog-head { padding:var(--space-4); }
 .insights-dialog-body { padding:0 var(--space-4) var(--space-4); }
 .insights-dialog-head h2 { font-size:var(--text-xl); }
 .insights-page .insights-filter select { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .insights-cell { transition:none; } }

/* The selected scope covers rankings and groups; the monthly comparison follows. */
.insights-scope { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-6); padding:var(--space-4) 0; border-block:1px solid var(--border-subtle); margin-top:var(--space-4); }
.insights-range { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); border:0; padding:0; margin:0; min-width:0; }
.insights-range legend { float:left; padding:0; font-size:var(--text-sm); color:var(--secondary-text-color); }
.insights-range-options { display:flex; gap:var(--space-1); }
.insights-range label { cursor:pointer; position:relative; }
.insights-range label span { display:flex; align-items:center; justify-content:center; min-height:var(--control-height); padding:var(--space-2) var(--space-4); border:1px solid transparent; border-radius:var(--radius-md); color:var(--secondary-text-color); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.insights-range input:checked + span { background:var(--keyword-button-on-bg-color); color:var(--keyword-button-on-text-color); border-color:var(--selected-border); }
.insights-range input:focus-visible + span { outline:2px solid var(--focus-color); outline-offset:2px; }
.insights-range input:active + span { background:var(--surface-pressed); }
.insights-range input:checked:active + span { background:var(--selected-pressed); }
.insights-scope > p { margin:0; }
.insights-overview,.insights-breakdown { margin-top:var(--space-8); }
.insights-section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.insights-section-heading a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-sm); color:var(--secondary-text-color); text-decoration:underline; text-underline-offset:3px; }
.insights-section-heading h2,.insights-breakdown > h2 { font-size:var(--text-xl); font-weight:var(--weight-semibold); line-height:var(--line-heading); margin:0 0 var(--space-2); }
.insights-overall { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto); grid-auto-flow:column; column-gap:var(--space-10); row-gap:var(--space-1); }
.insights-score-guide { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-3); margin-bottom:var(--space-2); }
.insights-score-guide p { margin:0; }
.insights-score-guide a { display:inline-flex; align-items:center; min-height:44px; color:var(--secondary-text-color); font-size:var(--text-xs); text-decoration:underline; text-underline-offset:3px; }
.insights-overall-skill { display:grid; grid-template-columns:minmax(120px,180px) minmax(40px,1fr) 3ch; align-items:center; gap:var(--space-3); min-height:44px; padding:var(--space-2) 0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-color); font:var(--weight-regular) var(--text-sm) var(--font-family); text-align:left; cursor:pointer; }
.insights-overall-track { height:8px; background:var(--background-color-2); border-radius:var(--radius-sm); overflow:hidden; }
.insights-overall-track > span { display:block; height:100%; background:var(--chart-bar-resolved,var(--secondary-text-color)); border-radius:inherit; }
.insights-overall-value { text-align:right; font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
.insights-overall-skill:active { background:var(--surface-pressed); }
.insights-overall-skill:disabled { cursor:default; color:var(--secondary-text-color); }
.insights-group-tabs { display:flex; gap:var(--space-6); min-height:48px; border-bottom:1px solid var(--border-color); margin-bottom:var(--space-4); }
.insights-group-tabs .view-tab { min-height:44px; font-size:var(--text-sm); }
.insights-group-tabs [aria-selected=true] { color:var(--keyword-button-on-text-color); border-bottom-color:var(--keyword-button-on-text-color); }
@media(hover:hover) and (pointer:fine) {
 .insights-range input:not(:checked) + span:hover,.insights-overall-skill:not(:disabled):hover { background:var(--surface-hover); }
 .insights-range input:checked + span:hover { background:var(--selected-hover); }
}
@media(max-width:600px) {
 .insights-scope { display:block; }
 .insights-scope > p { margin-top:var(--space-3); }
 .insights-range { display:block; }
 .insights-range legend { float:none; margin-bottom:var(--space-2); }
 .insights-range-options { width:100%; }
 .insights-range label { flex:1; }
 .insights-range label span { padding-inline:var(--space-2); }
 .insights-overall { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; }
 .insights-overall-skill { grid-template-columns:minmax(120px,45%) minmax(40px,1fr) 3ch; }
 .insights-group-tabs { gap:var(--space-5); }
}
.insights-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.insights-range label span { box-sizing:border-box; }
.insights-group-tabs .view-tab { box-sizing:border-box; padding:var(--space-3) 0; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer; }
.insights-group-tabs .view-tab[aria-selected=true] { border-bottom-color:var(--keyword-button-on-text-color); }

.insights-trend { margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border-subtle); scroll-margin-top:0; }
.insights-trend + .insights-method { margin-top:var(--space-8); }
.insights-trend .insights-section-heading { flex-wrap:wrap; margin-bottom:var(--space-2); }
.insights-trend-periods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) var(--space-10); margin-bottom:var(--space-4); }
.insights-trend-period { display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--text-xs); color:var(--secondary-text-color); }
.insights-trend-period strong { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-color); }
.insights-trend-status { font-size:var(--text-sm); padding:var(--space-3) 0; color:var(--secondary-text-color); }
.insights-trend-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.insights-trend-table th { text-align:left; font-weight:var(--weight-medium); }
.insights-trend-table th:first-child { width:32%; }
.insights-trend-table th:nth-child(2),.insights-trend-table th:nth-child(3) { width:12%; }
.insights-trend-table th:last-child { width:44%; }
.insights-trend-table thead th { font-size:var(--text-xs); color:var(--secondary-text-color); padding:var(--space-2) 0; }
.insights-trend-table :is(th,td) { border-bottom:1px solid var(--border-subtle); padding:var(--space-1) 0; }
.insights-trend-table th:not(:first-child) { text-align:right; }
.insights-trend-table tbody th { padding-right:var(--space-3); }
.insights-trend-score { display:block; width:100%; min-height:44px; padding:var(--space-2) 0; border:0; border-radius:var(--radius-sm); text-align:right; background:transparent; color:var(--text-color); text-decoration:underline; text-decoration-color:var(--border-color-2); text-underline-offset:4px; }
.insights-trend-score:disabled { text-decoration:none; color:var(--secondary-text-color); }
.insights-trend-score:active { background:var(--surface-pressed); }
.insights-trend-change { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-4); padding-left:var(--space-6); min-height:44px; color:var(--secondary-text-color); }
.insights-trend-change.up { color:var(--keyword-button-on-text-color); }
.insights-trend-delta { flex:0 0 9em; text-align:right; font-weight:var(--weight-medium); }
.insights-trend-spark { display:block; flex:1; max-width:220px; height:20px; position:relative; }
.insights-trend-spark:before { content:''; position:absolute; height:100%; left:50%; border-left:1px solid var(--border-color-2); }
.insights-trend-spark > span { position:absolute; top:7px; height:6px; left:50%; border-radius:var(--radius-sm); background:currentColor; }
.insights-trend-change.down .insights-trend-spark > span { left:auto; right:50%; }
.insights-trend-change.unavailable .insights-trend-spark { visibility:hidden; }
@media(hover:hover) and (pointer:fine) { .insights-trend-score:not(:disabled):hover { background:var(--surface-hover); text-decoration-color:currentColor; } }
@media(max-width:600px) {
 .insights-trend-periods { column-gap:var(--space-4); }
 .insights-trend-table th:first-child { width:34%; }
 .insights-trend-table th:nth-child(2),.insights-trend-table th:nth-child(3) { width:17%; }
 .insights-trend-table th:last-child { width:32%; }
 .insights-trend-table tbody th { padding-right:var(--space-2); }
 .insights-trend-change { padding-left:var(--space-2); }
 .insights-trend-delta { flex:1; }
 .insights-trend-spark { display:none; }
}

.insights-table thead tr:first-child th { border-bottom:0; cursor:default; }
.insights-group-tabs { overflow-x:auto; gap:var(--space-5); }
.insights-group-tabs .view-tab { flex-shrink:0; }
.insights-conditions-table { width:100%; min-width:580px; border-collapse:collapse; font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.insights-conditions-table :is(th,td) { padding:var(--space-3) var(--space-2); border-bottom:1px solid var(--border-subtle); text-align:right; }
.insights-conditions-table th:first-child { text-align:left; }
.insights-conditions-table thead th { color:var(--secondary-text-color); font-weight:var(--weight-medium); }
.insights-conditions-table tbody th { font-weight:var(--weight-medium); }

.insights-conditions h3 { font-size:var(--text-base); font-weight:var(--weight-semibold); margin:var(--space-5) 0 var(--space-2); }
.insights-conditions-table { min-width:900px; }
.insights-conditions-table td small { display:block; color:var(--secondary-text-color); font-size:var(--text-xs); margin-top:var(--space-1); }
.insights-condition-filter { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); }
.insights-condition-filter select { width:auto; min-height:44px; font-size:16px; }

.insights-conditions .insights-section-heading { flex-wrap:wrap; }
.insights-condition-filter select { border:1px solid var(--input-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:var(--background-color); color:var(--text-color); }
.insights-conditions { scroll-margin-top:0; }