/* HGP safe readability override.
   Visual-only. Does not touch server/data/API logic.
*/

:root{
  --hgp-readable-body: clamp(15px, 0.25vw + 13px, 18px);
  --hgp-readable-small: clamp(13px, 0.15vw + 12px, 16px);
  --hgp-readable-label: clamp(12px, 0.12vw + 11px, 15px);
  --hgp-readable-button: clamp(12px, 0.15vw + 11px, 15px);
  --hgp-readable-title: clamp(34px, 1.45vw + 20px, 56px);
  --hgp-readable-h2: clamp(20px, 0.55vw + 16px, 28px);
  --hgp-readable-kpi: clamp(22px, 0.75vw + 16px, 34px);

  --hgp-panel-clean: rgba(3, 14, 28, 0.74);
  --hgp-panel-clean-soft: rgba(3, 14, 28, 0.58);
  --hgp-cyan-clean: rgba(65, 230, 255, 0.58);
}

/* Keep layout stable. Increase readability without expanding rails too much. */
html,
body{
  font-size: var(--hgp-readable-body) !important;
  line-height: 1.46 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Main readable text */
p,
li,
td,
.description,
.product-subtitle,
.hero-subtitle,
.page-subtitle,
.muted,
.small,
.caption,
.log,
.hgp-log,
.stat-row,
.category-mini,
.alert-mini{
  font-size: var(--hgp-readable-small) !important;
  line-height: 1.48 !important;
}

/* Titles */
h1,
.product-title,
.hero h1,
.page-title,
.hero-title{
  font-size: var(--hgp-readable-title) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}

h2,
.section-title,
.panel-title{
  font-size: var(--hgp-readable-h2) !important;
  line-height: 1.16 !important;
}

h3{
  font-size: clamp(17px, 0.35vw + 14px, 21px) !important;
  line-height: 1.22 !important;
}

/* Labels, headers, small HUD text */
label,
th,
.metric-label,
.key,
.stat-key,
.hgp-stat-key,
.section,
.hgp-section,
.kicker,
.eyebrow,
.label{
  font-size: var(--hgp-readable-label) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.055em !important;
}

/* Buttons and nav */
button,
.btn,
.nav a,
#nav a,
.hgp-side-nav a,
.side-btn,
.hgp-side-button,
.link-row a,
input[type="button"],
input[type="submit"]{
  font-size: var(--hgp-readable-button) !important;
  line-height: 1.22 !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  white-space: normal !important;
}

/* Inputs */
input,
select,
textarea{
  font-size: var(--hgp-readable-small) !important;
  line-height: 1.35 !important;
  min-height: 39px !important;
  padding: 8px 11px !important;
}

select option{
  font-size: 14px !important;
}

/* KPI / metric values */
.metric-value,
.value,
.val,
.hgp-stat-val,
.hgp-mini-card .v,
.mini-card .v,
.kpi-value,
.stat-value{
  font-size: var(--hgp-readable-kpi) !important;
  line-height: 1.1 !important;
}

/* Cleaner panels without breaking grid */
.panel,
.card,
.metric,
.product-visual,
.product-data,
.hero,
section.panel,
.info-table,
textarea,
input,
select{
  background-color: var(--hgp-panel-clean-soft) !important;
  border-color: var(--hgp-cyan-clean) !important;
}

/* Make content cleaner but keep cockpit */
.panel,
.card,
.metric,
.product-visual,
.product-data,
.hero,
section.panel{
  box-shadow:
    0 0 18px rgba(47,232,255,.13),
    inset 0 0 18px rgba(47,232,255,.045) !important;
}

/* Library/admin form readability */
textarea{
  min-height: 120px !important;
}

/* Prevent big accidental empty chat rows */
[data-hgp-chat-junk="true"],
#chat,
.chat,
.chat-box,
.chat-header,
.chat-title,
.chat-banner,
.chat-panel,
.chat-shell,
.chat-placeholder,
.chat-ghost,
.ghost-chat,
.hgp-chat-overlay{
  display: none !important;
}

/* Hide isolated top "Chat" text if JS tagged it */
.hgp-clean-hidden{
  display: none !important;
}

/* Keep rails stable after previous visual experiments */
.left .nav,
.hgp-app-left .hgp-side-nav{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.left .nav a,
.hgp-app-left .hgp-side-nav a,
.left button,
.hgp-app-left button{
  width: 100% !important;
  font-size: 12px !important;
}

/* Bottom rail: readable, not oversized */
.bottom,
.hgp-app-bottom{
  overflow: hidden !important;
}

.mini-card,
.hgp-mini-card{
  min-height: 58px !important;
}

.mini-card .v,
.hgp-mini-card .v{
  font-size: clamp(18px, 0.45vw + 14px, 24px) !important;
}

/* Tables */
table,
.info-table{
  font-size: var(--hgp-readable-small) !important;
}

th,
td{
  font-size: var(--hgp-readable-small) !important;
  padding: 9px 10px !important;
}

/* Images remain controlled */
.image-frame{
  min-height: 310px !important;
}

.image-frame img{
  max-width: 94% !important;
  max-height: 94% !important;
  object-fit: contain !important;
}