/* Getwebup customer panel: base type, focus and layout utilities (hPanel-style redesign).
   Loaded by every customer layout, so nothing here may assume the sidebar or topbar exists. */

body{font-family:var(--hp-font);font-size:14px;line-height:1.5;background:var(--hp-bg);color:var(--hp-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:0}
:focus-visible{outline:2px solid var(--hp-accent);outline-offset:2px}
::selection{background:var(--hp-accent-ring)}

/* Names (domains, emails, usernames, codes) never break mid-word */
.svc h3,.r-info b,.site-info h3,.snav-title b,.banner .b-main h2,code,.fname b,.fname a,.fname .link-btn,.d-name,.up-list li span,.fm-brand small,.fm-name span{word-break:normal;overflow-wrap:anywhere}

/* ---------- Text helpers ---------- */
.hp-name,.hp-truncate{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Page layout ---------- */
/* main column + 340px side column; a short summary card may opt in to stay in view (.hp-sticky), a whole side column never does */
.hp-split,.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.hp-split>*,.grid>*{min-width:0}
.col-main,.col-side{display:flex;flex-direction:column;gap:24px;min-width:0}
@media (min-width:1280px){.hp-sticky{position:sticky;top:calc(var(--hp-top-h) + 24px)}}
@media (max-width:1279px){.hp-split,.grid{grid-template-columns:minmax(0,1fr)}}

.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cols-2+.card,.cols-2+section,.cols-2+.cols-2,.card+.cols-2,section+.cols-2{margin-top:24px}
@media (max-width:1023px){.cols-2{grid-template-columns:minmax(0,1fr)}.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.stack,.hp-stack{display:flex;flex-direction:column;gap:24px}

@media (max-width:767px){
  .hp-split,.grid,.cols-2,.cols-3{gap:16px}
  .col-main,.col-side,.stack,.hp-stack{gap:16px}
  .cols-3{grid-template-columns:minmax(0,1fr)}
  .cols-2+.card,.cols-2+section,.cols-2+.cols-2,.card+.cols-2,section+.cols-2{margin-top:16px}
}