/* GPnav Hub overrides, loaded after dashlite.min.css (stock DashLite purple #854fff, DM Sans, slate #364a63). */

.hub-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hub-logo { height: 30px; width: auto; }
.hub-logo-sm { height: 24px; }
.hub-logo-lg { height: 42px; }
.hub-brand-sub { font-size: 1rem; font-weight: 500; color: #8094ae; letter-spacing: .02em; padding-top: 4px; }

.hub-flash { white-space: normal; }
.hub-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f4bd0e; background: #fef8e5; color: #8a6400;
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.hub-pill:hover { background: #fdefc0; }
.hub-linkbtn { color: #526484; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; text-decoration: none; padding: .575rem 0 !important; }
.hub-linkbtn .icon { font-size: 18px; }
.hub-linkbtn:hover { color: #854fff; }

/* DashLite's .gap-* height spacers collapse flex rows; keep the utility meaning on flex containers. */
.d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3 { height: auto; }

.card + .card, .card + form, form + .card { margin-top: 1.5rem; }
.nk-block + .nk-block { padding-top: 1.75rem; }
.table td, .table th { vertical-align: middle; }
.table td.text-end, .table th.text-end { white-space: nowrap; }
.table-inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin: 0; }
.table-inline-form .form-control, .table-inline-form .form-select { min-width: 130px; }
form.inline { display: inline; }
code.key { font-size: 13px; white-space: nowrap; color: #364a63; background: #f5f6fa; padding: 2px 6px; border-radius: 4px; }
.text-muted-sm { color: #8094ae; font-size: 12px; }
[hidden] { display: none !important; }

.rules td { vertical-align: top; }
.rules .form-control, .rules .form-select { min-width: 180px; }

.pagemap tr.changed td:first-child { border-left: 3px solid #854fff; }
.pagemap code { font-size: 12px; word-break: break-all; }

.hub-pre { background: #f5f6fa; border: 1px solid #e5e9f2; border-radius: 4px; padding: 12px; font-size: 12px; max-height: 320px; overflow: auto; margin: 0; }

/* Public site */
.hub-site { display: flex; flex-direction: column; min-height: 100vh; }
.hub-site-head { border-bottom: 1px solid #e5e9f2; background: #fff; }
.hub-site-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.hub-site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hub-site-nav a:not(.btn) { color: #526484; font-weight: 500; }
.hub-site-nav a:not(.btn):hover { color: #854fff; }
.hub-site-main { flex: 1; }
.hub-site-foot { border-top: 1px solid #e5e9f2; background: #f5f6fa; color: #8094ae; font-size: 13px; }
.hub-site-foot .hub-site-nav { gap: 16px; }
.hub-hero { background: linear-gradient(135deg, #f4effe 0%, #fff 60%); padding: 72px 0 56px; }
.hub-hero h1 { font-size: 2.6rem; line-height: 1.15; color: #364a63; max-width: 720px; }
.hub-hero .lead { max-width: 640px; color: #526484; font-size: 1.15rem; }
.hub-features { padding: 48px 0 64px; }
.hub-feature .icon { font-size: 28px; color: #854fff; background: #f4effe; border-radius: 10px; padding: 10px; display: inline-block; margin-bottom: 12px; }
.hub-feature h5 { margin-bottom: 6px; }
.hub-prose { max-width: 860px; padding-top: 40px; padding-bottom: 64px; }
.hub-prose h1 { font-size: 2rem; margin-bottom: 4px; }
.hub-prose h2 { font-size: 1.3rem; margin-top: 2rem; }
.hub-prose h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.hub-prose p, .hub-prose li { color: #526484; font-size: 15px; line-height: 1.65; }
.hub-prose table { font-size: 14px; }
.hub-steps { counter-reset: step; list-style: none; padding-left: 0; }
.hub-steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 14px; }
.hub-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #854fff; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }

@media (max-width: 575px) {
  .hub-hero { padding: 40px 0 32px; }
  .hub-hero h1 { font-size: 1.9rem; }
  .hub-logo { height: 26px; }
}
.pagemap code, .table code { color: #526484; }