/* HPT shared styles - used by both card view and table view */
:root {
  --hpt-gold: #8b6914;
  --hpt-gold-light: #f5edd8;
  --hpt-border: #dde5dd;
  --hpt-bg: #f7faf7;
  --hpt-muted: #6c757d;
}

/* Page sub-header */
.hpt-subheader { background: var(--bs-success); color: white; padding: 0.75rem 0 0.65rem; margin-bottom: 0; }
.hpt-subheader h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.hpt-subheader .subtitle { font-size: 0.85rem; opacity: 0.85; margin: 0; }

/* Section headings */
.sec-title { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hpt-muted); margin-bottom: 0.45rem; padding-bottom: 0.28rem; border-bottom: 1px solid var(--hpt-border); }

/* Source links */
.srcl a { font-size: 0.72rem; color: var(--bs-success); text-decoration: underline; text-decoration-style: dotted; }
.srcl a:hover { text-decoration-style: solid; }
.srcl .nolink { font-size: 0.72rem; font-style: italic; color: var(--hpt-muted); }

/* Popover - shared structure; position:absolute (card) vs position:fixed (table) set per-view */
.hpopover { z-index: 3000; background: white; border: 1px solid var(--hpt-border); border-radius: 7px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 0.65rem; font-size: 0.79rem; }
.pop-title { font-weight: 700; font-size: 0.7rem; color: var(--bs-success); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.07em; }
.pop-close { float: right; background: none; border: none; font-size: 1rem; line-height: 1; color: var(--hpt-muted); cursor: pointer; padding: 0; margin-left: 0.35rem; }
.pop-row { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.25rem 0; border-bottom: 1px solid #f0f0f0; }
.pop-row:last-of-type { border-bottom: none; }
.pop-meta { color: var(--hpt-muted); font-size: 0.73rem; line-height: 1.35; }
.pop-src { display: block; font-size: 0.69rem; }
.pop-src a { color: var(--bs-success); text-decoration: underline dotted; }
.pop-src a:hover { text-decoration-style: solid; }
.pop-src .nolink { font-style: italic; color: var(--hpt-muted); }
.tap-hint { font-size: 0.63rem; color: var(--hpt-muted); margin-top: 0.35rem; font-style: italic; }

/* GUS bar */
.gw { display: flex; align-items: center; gap: 4px; }
.gbg { width: 40px; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.gfill { height: 100%; border-radius: 3px; }

/* No-data placeholder */
.nodata { color: #bbb; font-style: italic; font-size: 0.78rem; }

/* Loading spinner area */
#loadingSpinner { text-align: center; padding: 3rem; color: var(--hpt-muted); }