/* Consistent screen hierarchy, using the user's existing appearance tokens. */
body[data-appearance].reference-ui .ref-brand{gap:9px;margin-bottom:25px}
.ref-brand-mark{display:block;width:64px;height:64px;filter:drop-shadow(0 6px 12px #0003)}
.ref-mobile-brand{display:none}
body[data-appearance].reference-ui .ref-panel,body[data-appearance].reference-ui .card{border-color:color-mix(in srgb,var(--a-border) 80%,transparent)}
body[data-appearance].reference-ui .hub-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible;padding:0 0 22px;margin:0 0 24px}
body[data-appearance].reference-ui .hub-tabs button{display:flex;align-items:center;gap:10px;min-height:60px;padding:12px 14px;white-space:normal;text-align:start;min-width:0}
.hub-tabs svg{width:22px;height:22px;flex-shrink:0}
.hub-tab-label{flex:1;min-width:0;overflow-wrap:anywhere}
body[data-appearance] .hub-tab-count{color:inherit;display:grid;place-items:center;min-width:24px;min-height:24px;padding:1px 6px;border-radius:8px;border:1px solid currentColor;font-size:12px;opacity:.9}
body[data-appearance].reference-ui .hub-tabs button.active{background:var(--a-accent);color:var(--a-button-ink);box-shadow:none}
body[data-appearance].reference-ui .hub-intro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 0 22px;margin:0}
.hub-intro h2{margin:2px 0 6px}.hub-intro p{margin:0;max-width:55ch}
body[data-appearance] .hub-eyebrow{font-size:12px;color:var(--a-meta-color);letter-spacing:.02em}
.hub-section-icon,.hub-record-icon{display:grid;place-items:center;border:1px solid var(--a-border);border-radius:14px;background:var(--a-control-bg);color:var(--a-control-ink);flex-shrink:0}
.hub-section-icon{width:58px;height:58px}.hub-section-icon svg{width:29px;height:29px}
.hub-record-icon{width:38px;height:38px;border-radius:11px}.hub-record-icon svg{width:20px;height:20px}
body[data-appearance].reference-ui .hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:stretch;gap:var(--a-gap)}
body[data-appearance].reference-ui .hub-card{display:flex;flex-direction:column;align-self:stretch;min-height:230px;gap:8px;padding:20px}
.hub-card .cardhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hub-card .cardhead h3{flex:1;min-width:90px;margin:0;overflow-wrap:anywhere}.hub-card .cardhead .tag{font-size:12px}
.hub-card .hub-notes{margin:4px 0;line-height:1.8}.hub-card>small{display:block}
.hub-card>button[data-files-type]{margin-top:auto;width:100%}.hub-card-actions{display:flex;gap:8px;margin:0}.hub-card-actions button{flex:1}
body[data-appearance].reference-ui .ref-home .ref-primary{display:grid;gap:var(--a-gap)}
body[data-appearance].reference-ui .ref-panel-heading h2{white-space:normal;line-height:1.5}
body[data-appearance].reference-ui .ref-metric{transition:transform .18s ease,border-color .18s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.reference-ui .ref-metric:hover{transform:translateY(-3px);border-color:var(--a-accent)}}
@media(min-width:701px) and (max-width:1150px){body[data-appearance].reference-ui .hub-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .ref-mobile-brand{display:block;width:42px;height:42px;border-radius:11px;flex-shrink:0}
 body[data-appearance].reference-ui .ref-page-title{align-items:center;padding:12px;gap:10px;flex-shrink:1}
 body[data-appearance].reference-ui .ref-page-title h1{font-size:clamp(20px,6vw,var(--a-h1-size));line-height:1.5}
 body[data-appearance].reference-ui .hub-tabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:12px;margin-bottom:12px;scroll-snap-type:x proximity}
 body[data-appearance].reference-ui .hub-tabs button{flex:0 0 auto;min-height:48px;padding:10px 12px;white-space:nowrap;font-size:13px}
 body[data-appearance].reference-ui .hub-intro{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0 18px}
 .hub-section-icon{width:44px;height:44px;border-radius:12px}.hub-section-icon svg{width:24px;height:24px}
 .hub-intro p{font-size:14px!important;line-height:1.7!important}.hub-intro .primary{grid-column:1/-1;width:100%}
 body[data-appearance].reference-ui .hub-grid{grid-template-columns:1fr}
 body[data-appearance].reference-ui .hub-card{padding:17px;min-height:210px}
 .life-filter-row label{min-width:min(130px,100%)}
}
@media(prefers-reduced-motion:reduce){body[data-appearance].reference-ui .ref-metric{transition:none}}

.ref-welcome .ref-panel-heading{align-items:center}.ref-welcome small{display:block;margin-bottom:5px}
.ref-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
body[data-appearance] .ref-quick-actions a,body[data-appearance] .ref-quick-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px;border:1px solid var(--a-border);border-radius:var(--a-buttonRadius);background:var(--a-secondary-bg);color:var(--a-secondary-ink);text-decoration:none;font:var(--a-button-weight) var(--a-button-size)/1.6 var(--a-button-font);min-width:0}
.ref-quick-actions span{overflow-wrap:anywhere}
@media(max-width:700px){.ref-quick-actions{grid-template-columns:1fr}.ref-welcome .ref-panel-heading{flex-wrap:wrap}.ref-welcome .ref-panel-heading>.primary{width:100%}}