/* Colored header cards matching the Reading History reference. */
.reference-metrics,.reference-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:24px 0; }
.reference-metrics .metric-card,.reference-summary .ui-status-card { --card-tone:#397bd3;position:relative;border:1px solid var(--clr-border);border-radius:12px;background:var(--clr-surface);box-shadow:none;min-width:0;overflow:hidden; }
.reference-metrics .metric-card:nth-child(2),.reference-summary .ui-status-card:nth-child(2){--card-tone:#7453df}.reference-metrics .metric-card:nth-child(3),.reference-summary .ui-status-card:nth-child(3){--card-tone:#c85a24}.reference-metrics .metric-card:nth-child(4),.reference-summary .ui-status-card:nth-child(4){--card-tone:#c4384b}.reference-metrics .metric-card:nth-child(5){--card-tone:#c4384b}
.reference-metrics .metric-card{display:flex;gap:20px;align-items:center;padding:84px 20px 24px;min-height:168px}.reference-metrics .metric-info{min-width:0}.reference-metrics .metric-label,.reference-summary .ui-summary-label{position:absolute;inset:0 0 auto 0;background:var(--card-tone);color:#fff;font-size:14px;font-weight:650;letter-spacing:0;text-transform:none;padding:18px 20px;min-height:60px;display:flex;align-items:center;margin:0}.reference-metrics .metric-icon{width:52px;height:52px;flex:0 0 52px;background:transparent!important;color:var(--card-tone)!important;border:4px solid var(--card-tone);border-radius:50%;display:grid;place-items:center}.reference-metrics .metric-icon svg{width:26px;height:26px}.reference-metrics .metric-val{font-size:clamp(20px,2vw,28px);font-weight:650;line-height:1.2;overflow-wrap:anywhere}.reference-metrics .metric-sub{display:block;margin-top:8px;font-size:12px;line-height:1.5;color:var(--clr-text-muted)}
.reference-summary .ui-status-card{padding:84px 20px 24px 92px;min-height:180px;gap:8px}.reference-summary .ui-status-card::before{content:'≋';position:absolute;left:20px;top:84px;width:52px;height:52px;border:4px solid var(--card-tone);color:var(--card-tone);border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:650}.reference-summary [data-status-kind=camera]::before{content:'◉'}.reference-summary [data-status-kind=connection]::before{content:'⌁'}.reference-summary [data-status-kind=siren]::before{content:'♧'}.reference-summary .ui-status-card>strong{font-size:clamp(18px,1.7vw,26px);font-weight:650;line-height:1.3}.reference-summary .ui-status-card>span:not(.ui-summary-label),.reference-summary .ui-status-card>a{font-size:12px;line-height:1.5}.reference-summary .ui-auto-status strong{font-size:inherit}
.reference-metrics:has(.metric-card:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}.reference-metrics:has(.metric-card:nth-child(5)) .metric-card{gap:12px;padding-left:16px;padding-right:16px}
.user-action-dropdown{position:relative;display:inline-block}.user-action-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:10px 16px;border:1px solid var(--clr-border);border-radius:999px;cursor:pointer;font-size:12px;background:var(--clr-surface-2);list-style:none}.user-action-dropdown>summary::-webkit-details-marker{display:none}.user-action-menu{position:fixed;z-index:100;width:190px;padding:8px;border:1px solid var(--clr-border);border-radius:12px;background:var(--clr-surface);box-shadow:0 12px 30px #0004}.user-action-dropdown:not([open])>.user-action-menu{display:none}.user-action-menu form{margin:0}.record-workspace .user-action-menu .btn{display:block;text-align:left;width:100%;margin:0;padding:10px 12px;min-height:44px;border-radius:8px;font-size:12px;white-space:normal}.record-workspace .user-action-menu .record-detail-button{background:transparent;color:var(--clr-text);border-color:transparent;text-transform:none}.user-action-menu .btn:hover{background:var(--clr-primary-dim)}.user-action-menu .badge{margin:8px}
@media(max-width:1250px){.reference-metrics,.reference-summary,.reference-metrics:has(.metric-card:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.reference-metrics,.reference-summary,.reference-metrics:has(.metric-card:nth-child(5)){grid-template-columns:1fr;gap:16px}.reference-summary .ui-status-card{padding:80px 20px 20px 92px}.reference-metrics .metric-card{padding-top:80px}.reference-metrics .metric-label,.reference-summary .ui-summary-label{font-size:13px}}