/* Responsive presentation layer. All sizes are CSS pixels, independent of device pixel ratio. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;line-height:1.6}
body.modal-open{overflow:hidden}
#app,main,#view,section,article,.panel,.product,.ticket,.row,.formgrid,.stats,.grid,.products,.auth,.auth-form,.auth-art{min-width:0}
h1,h2,h3,p,li,label,td,th,.workspace,.profile,.eyebrow,.badge,.note,.help,.credential,.member-option{overflow-wrap:anywhere}
img,video{max-width:100%;height:auto}
input,select,textarea{min-width:0;max-width:100%;font-size:16px;min-height:48px;line-height:1.5}
input[type=checkbox]{min-height:24px;width:24px;height:24px;flex-shrink:0;accent-color:var(--green)}
input[type=file]{padding:10px;font-size:14px;overflow:hidden}
input[type=file]::file-selector-button{font:inherit;min-height:32px;margin-inline-end:8px}
.btn,.btn.small,.btn.flat,.chip,.tabs button,nav button{min-width:44px;min-height:44px;line-height:1.5;touch-action:manipulation}
.btn,.btn.small,.btn.flat,.chip{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;max-width:100%;white-space:normal}
.btn{font-size:14px}.btn.small,.btn.flat{font-size:12px}
a.btn.file-label,label.btn{cursor:pointer}
header{flex-wrap:wrap;gap:16px}
header>div:first-child{flex:1 1 200px;min-width:0}
.top-actions{flex-wrap:wrap;max-width:100%;gap:10px}
.profile{min-width:0}.profile>div{min-width:0}
.row{flex-wrap:wrap;align-items:center}
.row>div{min-width:0;max-width:100%}
.actions{gap:8px;max-width:100%;min-width:0}
.search{flex:1 1 180px;min-width:0;max-width:320px;min-height:44px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.products{grid-template-columns:repeat(3,minmax(0,1fr))}
.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.filterbar{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.grid>*,.products>*,.stats>*,.formgrid>*{min-width:0}
.panel{overflow:visible}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:8px}
.table-wrap table{min-width:630px;table-layout:auto}
.table-wrap:focus-visible{outline:3px solid #b0ca66;outline-offset:3px}
td,th{vertical-align:top}.badge{display:inline-block;max-width:100%;white-space:normal;line-height:1.6}
.hero{gap:20px}.hero>div:first-child{min-width:0;flex:1}.hero .art{flex-shrink:0;font-size:52px;padding:0 12px}
.stat small{display:block;line-height:1.8}.stat strong{line-height:1.2}
aside{width:232px;padding:24px 18px;overflow-y:auto;overscroll-behavior-y:contain}
aside .brand,aside .workspace,aside .sidefoot{flex-shrink:0}
.workspace{margin:24px 0 18px}.workspace small{margin:8px 0 0}
.sidefoot{padding-top:24px}.brand span{letter-spacing:4px}
main{margin-right:232px;padding:28px 32px 16px}
nav button{padding:12px;margin:4px 0}
.auth{min-height:100vh;min-height:100dvh;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-art{padding:48px}.auth-art h1{font-size:42px}
.auth-form{width:100%;max-width:500px;padding:36px}
.auth-form .tabs{gap:4px}.auth-form .tabs button{font-size:14px;min-width:0}
.help,.note{line-height:1.9}.help{font-size:12px}
.checkline{grid-template-columns:24px minmax(0,1fr) 72px;gap:10px;min-height:52px}
.checkline>label{padding-block:8px}.checkline input[type=number]{width:72px;font-size:16px;min-height:44px}
.inline-check{min-height:44px}.member-option{min-height:56px}.member-option>span:first-of-type{min-width:0}
.member-list{max-height:320px;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch}
.audience-preview{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.dialoghead{position:sticky;inset-block-start:-24px;background:#fff;padding-block:8px;z-index:2;align-items:flex-start}
.dialoghead h2{min-width:0;flex:1;line-height:1.7}.dialoghead>.btn{flex:0 0 44px;min-width:44px;padding:8px}
dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:560px;max-height:calc(100vh - 32px);max-height:calc(var(--visible-height,100vh) - 32px);padding:24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.qr{display:block;width:300px;max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;flex-shrink:0}
.qr-dialog{min-width:0}.qr-dialog .credential{font-size:16px;letter-spacing:.3px;white-space:normal;word-break:break-word}
.qr-dialog .actions{justify-content:center}.qr-dialog .actions>.btn{flex:1 1 120px}
.ticket{padding:28px;min-width:0}.ticket ul{padding-inline-start:20px;padding-inline-end:0}
.center{width:100%;min-width:0;max-width:540px}
#toast{z-index:10000;max-width:calc(100% - 32px);inset-inline-start:16px;inset-inline-end:auto;left:auto;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));overflow-wrap:anywhere}
footer{gap:12px;flex-wrap:wrap;line-height:1.8}
/* The guest portal is a compact, centered experience on every screen. */
body[data-role=guest] aside{position:static;width:auto;padding:20px 24px;overflow:visible;background:#163e34}
body[data-role=guest] aside .brand{display:block;font-size:32px}
body[data-role=guest] aside .brand span{font-size:9px}
body[data-role=guest] aside .workspace,body[data-role=guest] aside .sidefoot,body[data-role=guest] aside nav,body[data-role=guest] aside .mobile-org{display:none}
body[data-role=guest] main{margin:0 auto;padding:24px;max-width:920px}
body[data-role=guest] .demo{display:none}
body[data-role=guest] header{padding-bottom:16px;border-bottom:1px solid var(--line)}
body[data-role=guest] .ticket>.btn{min-height:50px;font-size:15px}
@media(max-width:1100px){
  aside{position:static;inset:auto;width:auto;padding:18px 24px;overflow:visible}
  aside .brand{display:block;font-size:30px}
  aside .workspace,aside .sidefoot{display:none}
  .mobile-org{display:block;text-align:center;color:#bdd0bf;font-size:12px;margin-top:10px}
  nav{display:flex;max-width:100%;overflow-x:auto;gap:8px;margin-top:16px;padding-bottom:5px;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  nav button{width:auto;flex:0 0 auto;white-space:nowrap;padding:10px 14px;font-size:13px;margin:0}
  nav button span{margin-left:8px}
  main{margin:0;padding:24px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-art{padding:24px;gap:12px}
  .auth-art h1{font-size:28px;margin:12px 0}.auth-art p,.auth-art .orb,.auth-art>small{display:none}
  .auth-form{padding:30px 24px;max-width:520px}
}
@media(max-width:800px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .art{display:none}
  .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-actions .btn{font-size:12px;padding:9px 12px}
}
@media(max-width:600px){
  aside{padding:16px; padding-inline-start:max(16px,env(safe-area-inset-right,0px));padding-inline-end:max(16px,env(safe-area-inset-left,0px))}
  main,body[data-role=guest] main{padding:20px 16px;padding-inline-start:max(16px,env(safe-area-inset-right,0px));padding-inline-end:max(16px,env(safe-area-inset-left,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  header{gap:10px;margin-bottom:20px;align-items:flex-start}
  header>div:first-child{flex:1 1 190px}
  .top-actions{margin-inline-start:auto;justify-content:flex-start}
  .profile{display:none}
  h1{font-size:24px;line-height:1.6}.eyebrow{font-size:11px}
  .demo{font-size:11px;line-height:1.9;padding:10px 12px}
  .panel,.product{padding:18px}
  .ticket{padding:22px 18px;border-radius:16px}
  .products,.formgrid,.filterbar{grid-template-columns:minmax(0,1fr)}
  .formgrid{gap:0}
  .stats{gap:12px}.stat{padding:17px}.stat strong{font-size:30px;margin:14px 0 10px}
  .stat span{font-size:12px}.stat small{font-size:11px}
  .hero{padding:22px 18px}.hero h2{font-size:25px!important;line-height:1.7}
  .hero p{font-size:14px}.hero .btn{width:100%}
  .row>.actions{width:100%;justify-content:flex-start}
  .row>.actions>.btn{flex:1 1 130px}
  .search{width:100%;max-width:none;flex-basis:100%}
  .btn,.btn.small,.chip{font-size:13px}
  .chip{min-height:44px;padding:10px 14px}
  .category-section>.row{gap:8px}.category-section>.row h2{font-size:18px}
  .group-card .actions>.btn{flex:1 1 130px}
  .filterbar .btn{margin:8px 0 0}.filterbar input,.filterbar select{margin-bottom:12px}
  .auth-form{padding:26px 20px}.auth-form h2{font-size:25px}
  .auth-art{padding:20px}.auth-art .brand{font-size:30px}.auth-art h1{font-size:24px;margin:8px 0}
  .auth-form .tabs button{padding:10px;font-size:13px}
  dialog{width:calc(100% - 16px);padding:18px;max-height:calc(100vh - 16px);max-height:calc(var(--visible-height,100vh) - 16px);border-radius:16px}
  .dialoghead{inset-block-start:-18px;gap:10px}.dialoghead h2{font-size:19px}
  .qr{width:300px;max-width:100%}.qr-dialog h2{font-size:20px;line-height:1.8}
  .qr-dialog .credential{font-size:15px;padding:13px}
  .qr-dialog .note{font-size:13px}
  .scanbox{padding:18px 12px}.scanbox .actions>.btn{flex:1 1 140px}
  .result{padding:18px 14px}.result h2{font-size:21px}
  .checkline{grid-template-columns:24px minmax(0,1fr) 68px;gap:8px}
  .checkline input[type=number]{width:68px}.checkline label{font-size:13px}
  .member-option{gap:8px;padding:12px 10px}.member-option .badge{font-size:10px}
  #toast{max-width:calc(100% - 24px);inset-inline-start:12px;padding:13px 16px;font-size:13px}
}
@media(max-height:520px) and (orientation:landscape){
  .auth-art{padding:14px 24px}.auth-art h1{display:none}
  body[data-role=guest] aside{padding:12px}.qr{width:240px}
  dialog{max-height:calc(var(--visible-height,100vh) - 16px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{body.modal-open{overflow:visible}body[data-role=guest] aside{display:none}dialog[open]{max-height:none;overflow:visible;position:absolute;inset:0;width:100%;max-width:none}dialog[open] .dialoghead{position:static}main{margin:0;padding:0}.qr{width:280px}}

/* Keep the complete QR visible before the longer guest/product details. */
.qr-modal .qr-dialog{display:flex;flex-direction:column;align-items:stretch}
.qr-modal .qr-dialog>.badge{order:-3;align-self:center}
.qr-modal .qr-dialog>.qr{order:-2;align-self:center}
@media(max-height:520px) and (orientation:landscape){
  dialog.qr-modal{padding:12px}
  .qr-modal .dialoghead{inset-block-start:-12px;padding-block:0;margin-bottom:6px}
  .qr-modal .qr-dialog>.qr{width:240px;width:min(240px,calc(var(--visible-height,100vh) - 136px));margin:4px auto}
}