/* PANN Biz — เฉพาะสิ่งที่ระบบดีไซน์ (pann-design.css) ไม่มี: โครงเปลือกแอป · หน้าต่างฟอร์ม · การจัดวางของหน้า
   กติกา: ใช้ var(--pann-*) เท่านั้น ห้ามมีสี / ฟอนต์ / รัศมี เป็นเลขตรง ๆ · ชิ้นส่วน (ปุ่ม การ์ด ฟอร์ม ป้าย) ใช้ของ pann-design.css */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---------- เปลือกแอป ---------- */
body.has-shell { padding-bottom: calc(var(--pann-s8) + var(--pann-s6) + env(safe-area-inset-bottom, 0px)); }
body.has-bar #app-tabbar { display: none; }

.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3);
  min-height: calc(var(--pann-s8) + var(--pann-s4));
  padding: var(--pann-s2) var(--pann-gutter);
  background: var(--pann-surface); border-bottom: 1px solid var(--pann-line);
}
.header-mobile { display: flex; align-items: center; gap: var(--pann-s3); min-width: 0; }
.header-desktop { display: none; align-items: baseline; gap: var(--pann-s4); min-width: 0; }
.header-tools { display: flex; align-items: center; gap: var(--pann-s2); flex: none; }
.header-action { display: none; }
.header-business {
  display: grid; text-align: left; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
}
.header-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.logo { display: flex; align-items: center; gap: var(--pann-s2); text-decoration: none; color: var(--pann-fg); margin-bottom: var(--pann-s2); }
.logo-mark {
  flex: none; width: var(--pann-s7); height: var(--pann-s7); border-radius: var(--pann-r-pill);
  display: grid; place-items: center; background: var(--pann-brand); color: var(--pann-on-brand); font-weight: 700;
}
.logo-word { font-weight: 700; font-size: var(--pann-t-h2); }

.icon-btn {
  position: relative; display: grid; place-items: center; width: var(--pann-btn-h); height: var(--pann-btn-h);
  border: 0; border-radius: var(--pann-r-pill); background: none; color: var(--pann-fg); cursor: pointer; text-decoration: none; padding: 0;
}
.bell-count {
  position: absolute; top: var(--pann-s1); right: var(--pann-s1); min-width: var(--pann-s5); height: var(--pann-s5); padding: 0 var(--pann-s1);
  display: grid; place-items: center; border-radius: var(--pann-r-pill);
  background: var(--pann-accent); color: var(--pann-on-accent); font-size: var(--pann-t-tab); font-weight: 600;
}
.avatar {
  flex: none; width: var(--pann-s7); height: var(--pann-s7); border-radius: var(--pann-r-pill); display: grid; place-items: center;
  background: var(--pann-brand-tint); color: var(--pann-brand-dark); font-weight: 600;
}

#app-sidebar { display: none; }
.pann-sidebar .pann-input { margin-bottom: var(--pann-s3); }
.sidebar-user {
  margin-top: auto; display: flex; align-items: center; gap: var(--pann-s3); padding: var(--pann-s3) var(--pann-s2);
  border: 0; border-top: 1px solid var(--pann-line); background: none; cursor: pointer; text-align: left;
}
.pann-tabbar { z-index: 20; }
.pann-tabbar a { min-height: calc(var(--pann-s8) + var(--pann-s2)); align-content: center; }
.pann-fab { z-index: 20; text-decoration: none; }
#app-toast { z-index: 60; }

@media (min-width: 900px) {
  body.has-shell { padding-left: 240px; padding-bottom: 0; }
  #app-sidebar { display: flex; position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto; }
  #app-tabbar, #app-fab { display: none; }
  .header-mobile { display: none; }
  .header-desktop { display: flex; }
  .header-action { display: inline-flex; text-decoration: none; }
}

/* ---------- การจัดวางทั่วไป ---------- */
.stack { display: grid; gap: var(--pann-s4); align-content: start; }
.stack-sm { display: grid; gap: var(--pann-s3); align-content: start; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pann-s3); align-items: start; }
.block { display: flex; width: 100%; text-decoration: none; }
.narrow { max-width: 720px; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.pann-btn { text-decoration: none; white-space: nowrap; }
select.pann-input { appearance: auto; }
textarea.pann-input { height: auto; min-height: calc(var(--pann-field-h) * 2); padding-block: var(--pann-s3); resize: vertical; }
.field-note { font-size: var(--pann-t-small); color: var(--pann-fg-muted); min-height: var(--pann-s5); }
.field-note.bad { color: var(--pann-danger); }
.field-note.good { color: var(--pann-success); }
.check { display: flex; align-items: center; gap: var(--pann-s2); min-height: var(--pann-btn-h); cursor: pointer; }
.check input { width: var(--pann-s5); height: var(--pann-s5); accent-color: var(--pann-brand); }
.thai-date { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: var(--pann-s2); }
details.more > summary { cursor: pointer; color: var(--pann-brand); font-weight: 600; min-height: var(--pann-btn-h); display: flex; align-items: center; }
details.more[open] > summary { margin-bottom: var(--pann-s3); }

/* แถวในรายการ (มือถือ = การ์ดลิสต์) */
.list-row { display: flex; align-items: center; gap: var(--pann-s3); }
.list-main { flex: 1; min-width: 0; display: grid; text-align: left; padding: 0; border: 0; background: none; cursor: pointer; }
.list-title { font-weight: 500; overflow-wrap: anywhere; }
.list-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pann-s1); flex: none; }
.pann-list > :last-child { border-bottom: 0; }
.pann-todo-row { text-decoration: none; color: var(--pann-fg); }
.pann-todo-row__go { white-space: nowrap; }

/* ปุ่มบันทึกของฟอร์มยาว: ติดล่างจอ (ครึ่งล่างของมือถือ) */
.sticky-save {
  position: sticky; bottom: calc(var(--pann-s8) + var(--pann-s6) + env(safe-area-inset-bottom, 0px)); z-index: 5;
  padding: var(--pann-s3); background: var(--pann-surface); border: 1px solid var(--pann-line); border-radius: var(--pann-r-card);
  box-shadow: var(--pann-shadow-float);
}
@media (min-width: 900px) { .sticky-save { bottom: var(--pann-s4); } }

/* ---------- ข้อผิดพลาด ---------- */
#app-alerts:not(:empty), .sheet-alerts:not(:empty) { margin-bottom: var(--pann-s4); }
.sheet-alerts:not(:empty) { margin: var(--pann-s3) var(--pann-gutter) 0; }
.alert-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pann-s2); }
.alert-close { height: var(--pann-s6); padding: 0 var(--pann-s2); color: var(--pann-fg); }

/* ---------- หน้าต่างฟอร์ม (เต็มจอบนมือถือ) ---------- */
dialog.sheet {
  width: 100%; max-width: 640px; height: 100%; max-height: 100%; margin: 0 auto; padding: 0; border: 0;
  background: var(--pann-surface); color: var(--pann-fg);
}
dialog.sheet::backdrop { background: color-mix(in srgb, var(--pann-fg) 45%, transparent); }
.sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3);
  padding: var(--pann-s3) var(--pann-gutter); background: var(--pann-surface); border-bottom: 1px solid var(--pann-line);
}
.sheet-body { display: grid; gap: var(--pann-s4); padding: var(--pann-s4) var(--pann-gutter) var(--pann-s7); }
.sheet-body form { display: grid; gap: var(--pann-s4); }
.pick {
  display: flex; align-items: center; width: 100%; min-height: var(--pann-btn-h); padding: var(--pann-s3) var(--pann-s4);
  border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface);
  color: var(--pann-fg); text-decoration: none; text-align: left; font-weight: 500; cursor: pointer;
}
.pick.is-selected { border-color: var(--pann-brand); background: var(--pann-brand-tint); }
.user-card { display: flex; align-items: center; gap: var(--pann-s3); }
@media (min-width: 900px) {
  dialog.sheet { height: auto; max-height: 92vh; margin: 4vh auto; border-radius: var(--pann-r-card); }
}

/* ---------- หน้าเข้าใช้ ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--pann-gutter); }
.login .pann-card { width: 100%; max-width: 420px; display: grid; gap: var(--pann-s4); justify-items: center; text-align: center; padding: var(--pann-s7) var(--pann-s5); }
.login .pann-btn { width: 100%; }

/* ---------- รูป (โลโก้ ลายเซ็น ตราประทับ) ---------- */
.files { display: grid; gap: var(--pann-s5); align-items: start; }
.file { display: grid; gap: var(--pann-s2); min-width: 0; }
.file-preview {
  height: calc(var(--pann-s8) * 2.5); display: grid; place-items: center; padding: var(--pann-s2); overflow: hidden;
  border: 1px dashed var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-bg);
}
.file-preview img { max-width: 100%; max-height: calc(var(--pann-s8) * 2.5 - var(--pann-s4)); object-fit: contain; }
.file-actions { display: flex; gap: var(--pann-s2); }
.file-actions .pann-btn { flex: 1 1 auto; min-width: 0; }
.sign-pad {
  display: block; width: 100%; height: calc(var(--pann-s8) * 4.5); touch-action: none;
  border: 1px dashed var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface);
}
@media (min-width: 700px) { .files { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pann-s4); } }

/* home stats on phones: long amounts step down a size instead of running out of the card */
.pann-stat { min-width: 0; }
.pann-stat .pann-num { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .pann-stat .pann-num.is-long { font-size: var(--pann-t-h1); }
  .pann-stat .pann-num.is-xlong { font-size: var(--pann-t-h2); }
}

/* phones: the row's buttons drop under the name so long names keep the full width */
@media (max-width: 599px) {
  .list-row { flex-wrap: wrap; row-gap: 0; }
  .list-main { flex-basis: 100%; }
  .list-actions { margin-left: auto; }
}

/* ---------- document pages ---------- */
.only-desktop { display: none; }
@media (min-width: 900px) { .only-phone { display: none; } .only-desktop { display: block; } }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pann-table th.num { text-align: right; }
.pann-table a { font-weight: 500; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips-scroll .pann-chip { flex: none; }
.pill-row { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pann-s1); }
.doc-row { display: flex; align-items: flex-start; gap: var(--pann-s3); text-decoration: none; color: var(--pann-fg); }
.doc-row-side { display: grid; justify-items: end; gap: var(--pann-s1); flex: none; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pann-s3); }
textarea.pann-input { height: auto; min-height: calc(var(--pann-field-h) * 2); padding-block: var(--pann-s3); resize: vertical; }
.auto-value { display: flex; align-items: center; gap: var(--pann-s2); min-height: var(--pann-field-h); color: var(--pann-fg-muted); }
.auto-value .pann-btn { height: auto; padding: var(--pann-s1) var(--pann-s2); }
.suggest { display: grid; }
.suggest > button {
  display: grid; text-align: left; padding: var(--pann-s3) var(--pann-s4); border: 0; border-bottom: 1px solid var(--pann-line);
  background: none; font: inherit; color: var(--pann-fg); cursor: pointer;
}
.suggest > button.is-add { color: var(--pann-brand); font-weight: 600; }
.line-box { display: grid; gap: var(--pann-s3); padding: var(--pann-s4); border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); }
.totals { display: grid; gap: var(--pann-s1); }
.totals-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pann-s3); }
.totals-main b { font-size: var(--pann-t-h1); font-variant-numeric: tabular-nums; }
.key-values { display: grid; grid-template-columns: auto 1fr; gap: var(--pann-s1) var(--pann-s4); margin: 0; }
.key-values dt { color: var(--pann-fg-muted); }
.key-values dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* public link = the seller's page: the PANN brand colour becomes plain ink (buttons, focus ring, links) */
body.public { --pann-brand: var(--pann-fg); --pann-brand-dark: var(--pann-fg); --pann-brand-tint: var(--pann-neutral-tint); }
.year-select { width: auto; flex: none; }
@media (min-width: 1100px) { .design-switch { display: none; } }
@media (max-width: 1099px) {
  body:not(.show-preview) #preview-pane { display: none; }
  body.show-preview #form-pane { display: none; }
}
input[type="color"] { width: var(--pann-btn-h); height: var(--pann-btn-h); padding: 0; border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); }
.split { display: grid; gap: var(--pann-s4); align-items: start; }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); } }
.swatches { display: flex; flex-wrap: wrap; gap: var(--pann-s2); }
.swatch { width: var(--pann-btn-h); height: var(--pann-btn-h); border-radius: 50%; border: 1px solid var(--pann-line); cursor: pointer; padding: 0; }
.swatch.is-selected { outline: 2px solid var(--pann-fg); outline-offset: 2px; }
.public-head { display: flex; align-items: center; gap: var(--pann-s3); }
.public-head img { max-height: var(--pann-btn-h); max-width: 120px; object-fit: contain; }
.public-foot { text-align: center; }
.doc-row-side { max-width: 55%; }
.pay-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--pann-s2); align-items: center; }
.slip { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); }
.is-voided { text-decoration: line-through; color: var(--pann-fg-muted); }

/* grid children may shrink below their content (a wide document preview must scroll inside its frame, not widen the page) */
.stack > *, .stack-sm > *, .split > * { min-width: 0; }
.doc-frame { overflow-x: auto; }

/* document viewer: one full-width main button, then one row of small buttons (the rest is in the "more" menu) */
.small-actions { display: flex; flex-wrap: nowrap; gap: var(--pann-s2); }
.small-actions > * { flex: 1 1 0; min-width: 0; }
.btn-small { height: calc(var(--pann-s7) + var(--pann-s2)); padding: 0 var(--pann-s3); font-size: var(--pann-t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick.is-danger { color: var(--pann-danger); }

/* bottom bar (document editor): live total + the main button, fixed above the tab bar · the page leaves the same height free */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--pann-s8) + var(--pann-s2) + env(safe-area-inset-bottom, 0px)); z-index: 15;
  background: var(--pann-surface); border-top: 1px solid var(--pann-line); box-shadow: var(--pann-shadow-float);
  padding: var(--pann-s3) var(--pann-gutter);
}
.bottom-bar__in { display: grid; gap: var(--pann-s2); max-width: 720px; margin: 0 auto; }
body.has-bottom-bar main { padding-bottom: calc(var(--pann-biz-bar-h, 160px) + var(--pann-s4)); }
@media (min-width: 900px) {
  .bottom-bar { left: 240px; bottom: 0; }
  .bottom-bar__in { grid-template-columns: 1fr auto; align-items: center; gap: var(--pann-s4); }
  .bottom-bar__in .pann-btn { width: auto; }
}

/* ---------- translation editor: a table on desktop (key · Thai · English · Chinese), one card per word on phones ---------- */
.stack-xs { display: grid; gap: var(--pann-s1); }
.tr-progress { display: grid; gap: var(--pann-s3); }
@media (min-width: 900px) { .tr-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pann-s5); } }
.tr-head { display: none; }
.tr-row { display: grid; gap: var(--pann-s3); padding: var(--pann-s4) 0; border-bottom: 1px solid var(--pann-line); }
.tr-key code { font-family: inherit; font-size: var(--pann-t-small); color: var(--pann-fg-muted); overflow-wrap: anywhere; }
.tr-cell { display: grid; gap: var(--pann-s1); align-content: start; min-width: 0; }
.tr-text { overflow-wrap: anywhere; white-space: pre-wrap; }
textarea.tr-input { min-height: var(--pann-field-h); padding-block: var(--pann-s3); resize: none; overflow: hidden; line-height: 1.5; }
.tr-mark { height: var(--pann-s7); padding: 0 var(--pann-s3); font-size: var(--pann-t-small); }
.tr-mark.is-selected { border-color: var(--pann-success); background: var(--pann-success-tint); color: var(--pann-success); }
.tr-mark[disabled] { opacity: .45; cursor: default; }
@media (min-width: 900px) {
  .tr-head, .tr-row { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: var(--pann-s4); }
  .tr-head { font-size: var(--pann-t-small); font-weight: 500; color: var(--pann-fg-muted); padding: var(--pann-s2) 0; border-bottom: 1px solid var(--pann-line); }
  .tr-lang { display: none; }
}
/* language reviewer without a business: no floating button, the tab bar keeps its two items */
body.is-reviewer #app-fab { display: none; }

/* sign-in page: each way in is a block (button + one line under it) · name and @username in the top right corner on desktop */
.login-way { display: grid; gap: var(--pann-s2); width: 100%; justify-items: center; }
.login details.more > summary { justify-content: center; }
.header-user { display: none; }
@media (min-width: 900px) {
  .header-user { display: grid; justify-items: end; line-height: 1.25; font-weight: 500; max-width: 220px; }
  .header-user > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.login #app-alerts { width: 100%; text-align: left; }

/* text box with a list of matches under it (address: sub-district / district / province) */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: var(--pann-s1) 0 0; padding: var(--pann-s1); list-style: none;
  background: var(--pann-surface); border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); box-shadow: var(--pann-shadow-float);
  max-height: calc(var(--pann-s8) * 5); overflow-y: auto; min-width: min(280px, 80vw);
}
.combo-list li { padding: var(--pann-s3); border-radius: var(--pann-r-ctl); cursor: pointer; overflow-wrap: anywhere; }
.combo-list li.is-active, .combo-list li:hover { background: var(--pann-brand-tint); }

/* small two/three-way switch (e.g. logo shape) */
.seg { display: flex; padding: var(--pann-s1); gap: var(--pann-s1); background: var(--pann-bg); border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); }
.seg__btn {
  flex: 1 1 0; min-width: 0; min-height: var(--pann-s7); padding: 0 var(--pann-s2); border: 0; border-radius: var(--pann-r-ctl); background: none;
  font: inherit; font-size: var(--pann-t-small); color: var(--pann-fg-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg__btn.is-selected { background: var(--pann-surface); color: var(--pann-brand-dark); font-weight: 600; box-shadow: var(--pann-shadow); }

/* home: what is still missing in the business settings */
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; }
.setup-item { display: flex; align-items: center; gap: var(--pann-s3); min-height: var(--pann-btn-h); color: inherit; text-decoration: none; border-top: 1px solid var(--pann-line); }
.setup-item__mark { width: var(--pann-s5); text-align: center; color: var(--pann-brand); font-weight: 600; }
.setup-item.is-done { color: var(--pann-fg-muted); }
.setup-item.is-done .setup-item__mark { color: var(--pann-success); }

/* arriving from a checklist link: the part asked for lights up briefly */
.flash { animation: flash 1.2s ease-in-out 2; border-radius: var(--pann-r-ctl); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 var(--pann-s1) var(--pann-brand); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 var(--pann-s1) var(--pann-brand); } }

/* sample PromptPay QR under the number */
.qr-sample { display: flex; gap: var(--pann-s4); align-items: center; }
.qr-sample img { width: calc(var(--pann-s8) * 2.5); height: calc(var(--pann-s8) * 2.5); flex: none; border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); }

/* bank from the central register: logo + name (settings page) */
.bank-logo { width: var(--pann-s7); height: var(--pann-s7); flex: none; border-radius: var(--pann-r-ctl); object-fit: contain; }
.bank-pick { display: flex; align-items: center; gap: var(--pann-s2); }
.bank-pick__logo:empty { display: none; }
.bank-pick__logo { display: flex; }
.combo-list li.bank-option { display: flex; align-items: center; gap: var(--pann-s3); }
.list-row > .bank-logo { margin-right: var(--pann-s3); }

/* next document number of each type, as the pattern being built would give it */
.number-preview { display: grid; gap: var(--pann-s1); padding: var(--pann-s3); background: var(--pann-brand-soft); border: 1px solid var(--pann-brand-line); border-radius: var(--pann-r-ctl); }
.number-preview__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pann-s3); flex-wrap: wrap; }
.number-preview__row strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* member of a business: who on the first line, role + actions on their own line (a pending invitation has several actions) */
.member-row { flex-wrap: wrap; row-gap: var(--pann-s2); padding: var(--pann-s3) 0; }
.member-row > .grow { flex: 1 1 100%; min-width: 0; }
.member-row .list-actions { flex: 1 1 100%; justify-content: flex-start; align-items: center; margin-left: 0; }
.member-row .list-actions select { width: auto; max-width: 100%; flex: 0 1 auto; }

/* links to the company's privacy policy / terms (sign-in page · bottom of the "more" sheet) */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--pann-s4); font-size: var(--pann-t-small); }
.legal-links a { display: inline-flex; align-items: center; min-height: var(--pann-btn-h); color: var(--pann-fg-muted); text-decoration: underline; }

/* the platform's app switcher: opened from the logo at the top left. Its anchor is pinned to that corner, its own button is
   kept for screen readers and keyboards only (the logo is what people press), and the menu drops left-aligned under the logo */
.launcher-host { position: fixed; top: calc(var(--pann-btn-h) + var(--pann-s4)); left: var(--pann-gutter); z-index: 60; }
.launcher-host .pann-launcher { display: block; }
.launcher-host .pann-launcher__btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.launcher-host .pann-launcher__menu { left: 0; right: auto; top: 0; }
.logo-tap { display: inline-flex; flex: none; text-decoration: none; border-radius: var(--pann-r-pill); }
.logo[aria-haspopup], .logo-tap[aria-haspopup] { cursor: pointer; }

/* the platform's "create a business" form, embedded (its height follows what the form reports) */
.entity-frame { width: 100%; min-height: calc(var(--pann-s8) * 9); border: 0; border-radius: var(--pann-r-ctl); background: var(--pann-surface); }