/* Approved Details window UI. Shared tokens, pills, result typography, and
   interaction colors come from styles.css; this file contains Details-specific
   layout plus cross-panel consistency overrides shared with the left rail. */

#detailsPane{position:absolute;z-index:14;right:18px;bottom:61px;width:min(var(--detail-w,455px),calc(50% - 9px));max-width:50%;max-height:min(620px,calc(100vh - 222px));display:none;flex-direction:column;overflow:hidden;resize:none!important;animation:detailsIn .18s var(--ease)}
#detailsPane.visible{display:flex;resize:none!important;min-width:320px;min-height:0}
@keyframes detailsIn{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:none}}
.detailsHead{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:48px;padding:9px 12px 9px 15px;border-bottom:1px solid var(--line);background:var(--surface)}
.detailsHeadText{min-width:0;flex:1;display:flex;align-items:center}
.detailsHead h2{margin:0;font-size:14px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.detailsActions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.iconGlyph{display:block;line-height:1;transform:translateY(0)}
.closeGlyph{transform:translateY(-1.5px)}
#detailsBadges,#detailsSubtitle{display:none!important}
.detailsBody{flex:1 1 auto;min-height:0;padding:10px 14px 14px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;user-select:text}
.detailsFooter{flex:0 0 auto;min-height:46px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);background:var(--surface)}
.footerGroup{display:flex;align-items:center;gap:5px}.footerCopyGroup{margin-left:auto}
.copyAsLabel{margin-right:2px;color:var(--meta);font-size:var(--type-meta);font-weight:600;text-align:right;white-space:nowrap}
.footerBtn{height:28px;padding:0 8px;background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--fg2);font-size:var(--type-meta);font-weight:600;cursor:pointer;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.footerBtn:hover:not(:disabled){background:var(--control-hover);border-color:var(--line-strong);color:var(--fg)}
.footerBtn:disabled{opacity:.34;cursor:default}
.detailsResizeHandle{position:absolute;z-index:20;touch-action:none}
.detailsResizeHandle.left{left:0;top:12px;bottom:12px;width:12px;cursor:ew-resize}
.detailsResizeHandle.left::after{content:"";position:absolute;top:42%;left:5px;width:2px;height:42px;border-radius:2px;background:transparent;transition:background var(--fast)}
.detailsResizeHandle.top{left:12px;right:12px;top:0;height:12px;cursor:ns-resize}
.detailsResizeHandle.top::after{content:"";position:absolute;left:42%;top:5px;width:42px;height:2px;border-radius:2px;background:transparent;transition:background var(--fast)}
.detailsResizeHandle.left:hover::after,body.resizingDetailsX .detailsResizeHandle.left::after,.detailsResizeHandle.top:hover::after,body.resizingDetailsY .detailsResizeHandle.top::after{background:var(--resize-guide)}
body.resizingDetailsX{cursor:ew-resize;user-select:none}body.resizingDetailsY{cursor:ns-resize;user-select:none}

.detailSection{padding-top:10px;margin-top:2px;border-top:1px solid var(--line)}
.detailSection:first-child{padding-top:0;border-top:0}.detailSection+.detailSection{margin-top:10px}
.sectionTitle{margin:0 0 7px;color:var(--fg);font-size:var(--type-meta);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.055em}
.detailSummaryStrip{display:flex;flex-wrap:wrap;gap:5px;align-items:stretch}
.summaryAction{min-height:28px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;background:var(--control-bg);border:1px solid var(--line);border-radius:7px;color:var(--fg2);font-size:var(--type-meta);cursor:pointer;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.summaryAction b{color:var(--fg);font-size:var(--type-primary);font-variant-numeric:tabular-nums}
.summaryAction:hover{background:var(--control-hover);border-color:var(--line-strong);color:var(--fg)}
.summaryAction.active{background:var(--selected-soft);border-color:color-mix(in srgb,var(--selected) 62%,var(--line));color:var(--fg)}
.summaryAction.static{cursor:default}.summaryAction.static:hover{background:var(--control-bg);border-color:var(--line);color:var(--fg2)}
.factList{margin:0;display:flex;flex-direction:column;gap:0}
.factRow{display:grid;grid-template-columns:minmax(108px,34%) minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid color-mix(in srgb,var(--fg) 6.5%,transparent)}
.factRow:first-child{padding-top:0;border-top:0}
.factRow dt{margin:0;color:var(--meta);font-size:var(--type-meta);font-weight:600;line-height:1.35}
.factRow dd{margin:0;min-width:0;color:var(--fg2);font-size:var(--type-secondary);line-height:1.35;overflow-wrap:anywhere}
.factRow dd strong{color:var(--fg);font-weight:600}
.descriptionText{margin:0;color:var(--fg2);font-size:var(--type-secondary);line-height:1.45}
.eventDetailDescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:12;overflow:hidden;white-space:pre-wrap}
.emptyState{padding:9px 0;color:var(--muted);font-size:var(--type-secondary);line-height:1.4}

.detailsBody .resultPill{min-height:var(--pill-h);display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 6px;background:var(--control-bg);border:1px solid var(--line);border-radius:var(--pill-radius);color:var(--fg2);font-size:var(--type-meta);font-weight:500;line-height:1.1;white-space:nowrap;vertical-align:middle}
.detailsBody button.resultPill{cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.detailsBody button.resultPill:hover{background:var(--control-hover);border-color:var(--line-strong);color:var(--fg)}
.detailsBody .resultPill.location{font-weight:600;border-color:color-mix(in srgb,var(--selected) 42%,var(--line));background:var(--selected-soft)}
.detailsBody .resultPill.location:hover{background:color-mix(in srgb,var(--selected) 20%,var(--control-bg));border-color:color-mix(in srgb,var(--selected) 60%,var(--line))}
.detailsBody .resultPill.theme{border-color:color-mix(in srgb,var(--pill-color,#8b8377) 45%,var(--line));background:color-mix(in srgb,var(--pill-color,#8b8377) 10%,var(--control-bg))}
.detailsBody .resultPill.theme:hover{background:color-mix(in srgb,var(--pill-color,#8b8377) 17%,var(--control-bg));border-color:color-mix(in srgb,var(--pill-color,#8b8377) 68%,var(--line))}
.resultPill.operator{border-color:color-mix(in srgb,var(--pill-color) 45%,var(--line));background:color-mix(in srgb,var(--pill-color) 10%,var(--control-bg))}
.resultPill.operator:hover{background:color-mix(in srgb,var(--pill-color) 17%,var(--control-bg));border-color:color-mix(in srgb,var(--pill-color) 68%,var(--line))}
.pillSwatch{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--pill-color,var(--fg2))}
.resultPill.filterOff{opacity:.42}
.sourceInline{color:var(--accent);text-decoration:none;text-underline-offset:2px}.sourceInline:hover{text-decoration:underline}

.eventTimeline{position:relative;padding:0}
.detailsEventDisclosure{position:relative;z-index:1;margin:0;border:0}
.detailsEventDisclosure::before{content:"";position:absolute;z-index:1;left:10px;top:0;bottom:0;width:1px;background:var(--line-strong);pointer-events:none}
.detailsEventDisclosure:first-child::before{top:15px}.detailsEventDisclosure:last-child::before{bottom:calc(100% - 15px)}.detailsEventDisclosure:only-child::before{display:none}
.detailsEventDisclosure>summary{display:block;list-style:none}.detailsEventDisclosure>summary::-webkit-details-marker{display:none}
.detailsBody .eventTimelineItem{position:relative;z-index:2;width:100%;min-height:48px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:8px;padding:9px 8px 9px 0;background:transparent;text-align:left;border:0;border-radius:4px;list-style:none;transition:background var(--fast)}
.detailsBody .eventTimelineItem::before{display:none!important}
.detailsEventDisclosure.expandable>summary>.eventTimelineItem{cursor:pointer}.detailsEventDisclosure:not(.expandable)>.eventTimelineItem{cursor:default}.detailsBody .eventTimelineItem.linked,.detailsEventDisclosure.linked .eventTimelineItem{cursor:pointer}
.detailsBody .eventTimelineItem:hover{background:var(--control-hover)}
.detailsBody .eventTimelineDot{position:relative;z-index:4;width:8px;height:8px;margin-left:6px;margin-top:2.6px;border-radius:50%;background:var(--event-color,var(--event));box-shadow:0 0 0 2px var(--surface)!important;transition:box-shadow var(--fast)}
.detailsBody .eventTimelineItem:hover .eventTimelineDot{box-shadow:0 0 0 2px var(--control-hover)!important}
.detailsBody .eventTimelineContent{position:relative;z-index:3;min-width:0;margin:0;padding:0;align-self:start}
.detailsBody .eventTimelineTitle{display:block;min-width:0;margin:0;padding:0;color:var(--fg);font-size:var(--type-primary);font-weight:600;line-height:var(--list-leading);white-space:normal;overflow-wrap:anywhere}
.detailsBody .eventTimelineTitle>span{font:inherit;color:inherit}
.detailsBody .eventTimelineDescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:12;overflow:hidden;margin-top:3px;color:var(--muted);font-size:var(--type-secondary);line-height:var(--list-leading)}
.eventSourceCitation{color:inherit;font-size:inherit;white-space:normal}.eventSourceCitation a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px;border:0}.eventSourceCitation a:hover{color:var(--fg)}
.detailsBody .eventTimelinePills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.timelineAction{position:relative;z-index:5;display:flex;align-items:flex-start;justify-content:flex-end;min-width:18px}
.focusToggle,.linkedArrow{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;margin-top:-3px;background:transparent;color:var(--meta);font-size:13px;font-weight:600;line-height:1;pointer-events:none}
.focusToggle::before{content:"+"}.detailsEventDisclosure[open] .focusToggle::before{content:"−"}.linkedArrow{font-size:12px;transform:translate(1px,-1px)}
.eventTimelineExpanded{margin:0 8px 7px 26px;padding:0 0 1px 10px;background:transparent;border:0;color:var(--fg2);font-size:var(--type-secondary);line-height:1.3}
.focusSection+.focusSection{margin-top:6px}.focusSectionTitle{margin:0 0 1px;color:var(--meta);font-size:var(--type-meta);font-weight:600}
.linkedRelationList{display:flex;flex-direction:column;gap:0}
.linkedRelationRow{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:6px;align-items:center;padding:4px 5px;background:transparent;color:var(--fg2);text-align:left;border:0;border-radius:4px;cursor:pointer;transition:background var(--fast),color var(--fast)}
.linkedRelationRow+.linkedRelationRow{border-top:1px solid color-mix(in srgb,var(--fg) 5%,transparent)}.linkedRelationRow:hover{background:var(--control-hover);color:var(--fg)}
.linkedRelationText{min-width:0;color:var(--fg2);font-size:var(--type-secondary);font-weight:500;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.linkedRelationRow:hover .linkedRelationText{color:var(--fg)}

.legislationChart{display:grid;gap:0}
.legislationChartRow{width:100%;display:grid;grid-template-columns:minmax(118px,38%) minmax(0,1fr) 22px;align-items:center;gap:7px;min-height:19px;padding:2px 5px;background:transparent;border:0;border-radius:4px;text-align:left;cursor:pointer;transition:background var(--fast),opacity var(--fast)}
.legislationChartRow:hover{background:var(--control-hover)}.legislationChartRow.off{opacity:.42}
.legislationChartLabel{min-width:0;overflow:hidden;color:var(--fg2);font-size:var(--type-meta);line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.legislationChartTrack{height:6px;overflow:hidden;background:color-mix(in srgb,var(--theme-color) 8%,var(--control-hover-muted));border-radius:1px}
.legislationChartBar{display:block;height:100%;width:var(--bar-width);min-width:0;background:var(--theme-color);transition:width var(--fast)}
.legislationChartCount{color:var(--meta);font-size:var(--type-meta);font-variant-numeric:tabular-nums;text-align:right}
.billList{display:flex;flex-direction:column;gap:0}
.billDisclosure{margin:0;border-top:1px solid color-mix(in srgb,var(--fg) 6.5%,transparent)}.billDisclosure:first-child{border-top:0}.billDisclosure>summary{list-style:none}.billDisclosure>summary::-webkit-details-marker{display:none}
.billResult{min-height:0;padding:10px 8px;background:transparent;cursor:pointer;transition:background var(--fast)}.billResult:hover{background:var(--control-hover)}
.billTopRow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.billIdentity{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;color:var(--fg);font-size:var(--type-primary);font-weight:700;line-height:1.15}
.billStatusPill{min-height:var(--pill-h);display:inline-flex;align-items:center;gap:4px;padding:3px 6px;background:var(--control-bg);border:1px solid var(--line);border-radius:var(--pill-radius);color:var(--fg2);font-size:var(--type-meta);font-weight:600;line-height:1}
.statusIcon{position:relative;width:10px;height:10px;display:inline-block;align-self:center;flex:0 0 10px;font-size:0;line-height:0;vertical-align:middle;transform:none}
.statusIcon.active::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#3d72a8;transform:translate(-50%,-50%)}
.statusIcon.pass::before{content:"✓";position:absolute;left:50%;top:50%;color:#3f8a50;font-size:10px;font-weight:700;line-height:10px;transform:translate(-50%,-52%)}
.statusIcon.fail::before{content:"×";position:absolute;left:50%;top:50%;color:#898b88;font-size:12px;font-weight:700;line-height:10px;transform:translate(-50%,-54%)}
.statusIcon.veto{width:10px;height:10px;border:1.3px solid #b74b43;border-radius:50%;color:transparent;font-size:0}.statusIcon.veto::after{content:"";position:absolute;left:1px;right:1px;top:3.7px;height:1.3px;background:#b74b43;transform:rotate(-45deg);transform-origin:center}.summaryAction .statusIcon{margin-right:1px}
.billTitle{display:block;margin-top:5px;color:var(--fg);font-size:var(--type-secondary);font-weight:600;line-height:1.3}.billDescription{margin:5px 0 0;color:var(--fg2);font-size:var(--type-secondary);line-height:1.42}.billLastAction{margin-top:4px;color:var(--fg2);font-size:var(--type-secondary);line-height:1.42}.billLastAction strong{color:var(--fg2);font-weight:600}.billCategories{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.billFocusToggle{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;background:transparent;color:var(--meta);font-size:13px;font-weight:600;line-height:1}.billFocusToggle::before{content:"+"}.billDisclosure[open] .billFocusToggle::before{content:"−"}
.billExpanded{margin:0 8px 7px 12px;padding:0 0 1px 10px;background:transparent;border:0}

.siteListRows{display:flex;flex-direction:column;gap:0}.siteListRow{position:relative;padding:9px 8px;background:transparent;border-radius:4px}.siteListRow+.siteListRow{border-top:1px solid color-mix(in srgb,var(--fg) 6.5%,transparent)}.siteListRow:hover{background:var(--control-hover)}
.siteMainLink{width:100%;display:grid;grid-template-columns:14px minmax(0,1fr) 18px;align-items:start;gap:7px;padding:0;background:transparent;text-align:left;cursor:pointer}.siteMainLink .linkedArrow{margin-top:-1px}
.sitePrimary{min-width:0}.siteName{display:block;color:var(--fg);font-size:var(--type-primary);font-weight:600;line-height:var(--list-leading)}.siteMetaLine{display:block;margin-top:2px;color:var(--muted);font-size:var(--type-secondary);line-height:var(--list-leading)}
.sitePillRow{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 0 21px}
.siteListRow .resultMarker{position:relative;width:12px;height:12px;margin-top:1px;display:grid;place-items:center}.siteListRow .resultMarker.triangle::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid var(--accent)}
.showMoreButton{width:100%;margin-top:6px;padding:7px 8px;background:transparent;border:1px dashed var(--line-strong);border-radius:6px;color:var(--fg2);font-size:var(--type-meta);cursor:pointer}.showMoreButton:hover{background:var(--control-hover);color:var(--fg)}
.detailFocusPulse{animation:detailFocusPulse 1.3s var(--ease)}@keyframes detailFocusPulse{0%{background:var(--selected-soft)}100%{background:transparent}}

.detailsBody button,.detailsBody summary,.detailsFooter button,.detailsActions button,[data-details-site],[data-details-event],[data-details-bill],[data-details-operator],[data-details-geo-kind]{cursor:pointer}

/* Cross-panel component normalization. Non-status pills use their semantic color
   directly and never add an extra dot/swatch. Status pills preserve icons. */
.filterSwatch,.pillSwatch{display:none!important}
.filterPill:not([data-filter-kind="bill-status"]),.resultPill.theme,.resultPill.operator{border-color:color-mix(in srgb,var(--chip-color,var(--pill-color,#8b8377)) 72%,var(--line));background:color-mix(in srgb,var(--chip-color,var(--pill-color,#8b8377)) 13%,var(--control-bg));color:color-mix(in srgb,var(--chip-color,var(--pill-color,#8b8377)) 58%,var(--fg));}
.filterPill:not([data-filter-kind="bill-status"]):hover,.resultPill.theme:hover,.resultPill.operator:hover{border-color:var(--chip-color,var(--pill-color,#8b8377));background:color-mix(in srgb,var(--chip-color,var(--pill-color,#8b8377)) 20%,var(--control-bg));color:var(--fg)}
.filterChoice:not(.active):not([data-filter-kind="bill-status"]){opacity:.42}.filterChoice:not(.active):not([data-filter-kind="bill-status"]):hover{opacity:.72}.filterChoice.active:not([data-filter-kind="bill-status"]){opacity:1}
.filterPill[data-filter-kind="bill-status"],.billStatusPill{--status-color:var(--chip-color,#8b8377);border-color:var(--status-color);background:color-mix(in srgb,var(--status-color) 12%,var(--control-bg));color:var(--fg)}
.filterPill[data-filter-kind="bill-status"]:hover,.billStatusPill:hover{background:color-mix(in srgb,var(--status-color) 19%,var(--control-bg));border-color:var(--status-color)}
.filterPill[data-filter-kind="bill-status"]:not(.active){opacity:.42}.filterPill[data-filter-kind="bill-status"]:not(.active):hover{opacity:.72}
.billStatusPill:has(.statusIcon.active){--status-color:#d8b337}.billStatusPill:has(.statusIcon.pass){--status-color:#38a45c}.billStatusPill:has(.statusIcon.fail){--status-color:#d84b4b}.billStatusPill:has(.statusIcon.veto){--status-color:#c75b9b}
.filterPill[data-filter-kind="bill-status"]>span:last-child{text-transform:capitalize}
.resultPill.location{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Left-rail event timelines now share the Details timeline axis and layering. */
.resultList .eventTimelineItem::before{z-index:1}
.resultList .eventTimelineContent{z-index:2}
.resultList .eventTimelineDot{z-index:3;margin-top:2.6px;box-shadow:0 0 0 2px var(--surface)}
.resultList .eventTimelineItem:hover .eventTimelineDot{box-shadow:0 0 0 2px var(--control-hover)}
.resultList .eventTimelineTitle>span{color:var(--fg);font-weight:600}

/* The left and Details resize guides use the same dimensions and hover state. */
.leftPaneResizeHandle::after,.detailsResizeHandle.left::after{width:2px;height:42px;border-radius:2px;background:transparent;transition:background var(--fast)}
.leftPaneResizeHandle:hover::after,body.resizingLeftPane .leftPaneResizeHandle::after,.detailsResizeHandle.left:hover::after,body.resizingDetailsX .detailsResizeHandle.left::after{background:var(--resize-guide)}

/* Compact result and utility refinements. */
.resultItem.billResult .resultName{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.mapUtilityRow{grid-template-columns:repeat(3,1fr)!important}
.mapUtilityBtn{padding:0!important}.utilityIcon{display:grid;place-items:center;width:100%;height:100%;font-size:14px;line-height:1}.themeHalfIcon{font-size:15px}

@media (max-width:720px), (pointer:coarse) and (max-width:1024px){
 #detailsPane{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto!important;max-width:none!important;height:30vh;max-height:50vh;border-radius:var(--radius);transition:height var(--base) var(--ease)}
 #detailsPane.mobileExpanded{height:50vh}
 #detailsPane.visible{min-width:0;min-height:0;resize:none}
 .detailsHead{padding-top:16px;cursor:pointer}.detailsHead::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:3px;transform:translateX(-50%);border-radius:99px;background:var(--line-strong)}
 .detailsResizeHandle{display:none}.factRow{grid-template-columns:minmax(94px,34%) minmax(0,1fr)}
 .detailsFooter{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
}