/* Phone ticket presentation. Keep the existing 767px phone breakpoint and
   view-mode adapter; tablet, desktop and other routes retain their layouts. */
.hf12-mobile-logo{display:none}
@media screen and (max-width:767px){
 .device:has(#ticket:not([hidden])){
  border:2px solid var(--gold);border-radius:22px;
  background:linear-gradient(110deg,#111718,#05090a 60%,#101617);
 }
 .device:has(#ticket:not([hidden]))>.brand{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;gap:0 4px;height:auto!important;min-height:0;
  padding:42px 0 0!important;margin:0 0 10px;position:relative;
 }
 .device:has(#ticket:not([hidden])) .brand>a{grid-column:1;grid-row:1;width:100%;height:64px}
 .device:has(#ticket:not([hidden])) .brand .hf12:not(.hf12-mobile-logo){display:none}
 .device:has(#ticket:not([hidden])) .brand .hf12-mobile-logo{display:block;width:100%;height:64px;object-fit:contain;mix-blend-mode:normal}
 .device:has(#ticket:not([hidden])) .brand-context{grid-column:2;grid-row:1;gap:5px;min-width:0}
 .device:has(#ticket:not([hidden])) .brand-context>b{font-size:1rem;line-height:1.15;white-space:normal;overflow-wrap:anywhere;overflow:visible}
 .device:has(#ticket:not([hidden])) .brand-context button{font-size:.875rem;line-height:1.25;min-height:44px;overflow-wrap:anywhere;display:block}
 .device:has(#ticket:not([hidden])) .header-role{display:none}
 .device:has(#ticket:not([hidden])) .brand>.header-actions{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;width:auto;gap:2px;margin:0}
 .device:has(#ticket:not([hidden])) .brand>.header-actions>*{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px!important}
 .device:has(#ticket:not([hidden])) .brand>.top-menu-toggle{
  grid-area:auto;
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:52px;min-width:52px;height:44px;min-height:44px;margin:0;padding:10px;
  border:1px solid #192323;border-top:0;border-radius:0;background:#080e0f;color:var(--gold);z-index:9;
 }
 .device:has(#ticket:not([hidden])) .top-menu-toggle .top-menu-label{display:none}
 .device:has(#ticket:not([hidden])) .top-menu-toggle>.menu-chevron{width:17px;height:17px;border-width:3px;transform:rotate(225deg);margin:8px 0 0}
 .device:has(#ticket:not([hidden])) .top-menu-toggle[aria-expanded="true"]>.menu-chevron{transform:rotate(45deg);margin:-8px 0 0}
 .device:has(#ticket:not([hidden]))>.brand[data-top-menu-visible="false"]{padding:30px 0 0!important;margin:0;gap:0}
 .device:has(#ticket:not([hidden]))>.brand[data-top-menu-visible="false"]>:not(.top-menu-toggle){display:none}
 .device:has(#ticket:not([hidden]))>.top-navigation{margin:0 2px 10px}
 .device:has(#ticket:not([hidden])) .top-menu-row{gap:6px}
 .device:has(#ticket:not([hidden])) .top-menu-trigger{min-height:50px;font-size:1rem;border-radius:10px;overflow-wrap:anywhere}
 .device:has(#ticket:not([hidden])) #screen-content{padding-top:2px}
 .device:has(#ticket:not([hidden])) #ticket .modes{gap:8px;margin-bottom:10px}
 .device:has(#ticket:not([hidden])) #ticket .mode{min-height:92px!important;border-radius:11px;gap:5px}
 .device:has(#ticket:not([hidden])) #ticket .mode b{font-size:1rem;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
 .device:has(#ticket:not([hidden])) #ticket .mode-direction{font-size:1rem;line-height:1.25}
 .device:has(#ticket:not([hidden])) #ticket .record{border-radius:11px;padding:14px 12px;margin-bottom:10px;gap:6px;background:linear-gradient(110deg,#101719,#080d10)}
 .device:has(#ticket:not([hidden])) #ticket .record b{font-size:1.5rem;line-height:1.15;overflow-wrap:anywhere}
 .device:has(#ticket:not([hidden])) #ticket .search-field{font-size:1rem;line-height:1.3;min-height:44px;align-items:center;padding:10px 12px;gap:8px;margin-top:6px}
 .device:has(#ticket:not([hidden])) #ticket .search-field>span{font-size:1.5rem;line-height:1;flex-shrink:0}
 .device:has(#ticket:not([hidden])) #ticket .photo{border-radius:11px;aspect-ratio:2.92;margin:10px 0}
 /* This existing sample is an image of a demo screen. Cover its baked-in
    caption with one opaque SAMPLE caption, never with a real-evidence label. */
 .device:has(#ticket:not([hidden])) #ticket .photo figcaption{font-size:.875rem;line-height:1.2;min-height:24px;padding:4px 8px;background:#101318;min-width:64%}
 .device:has(#ticket:not([hidden])) #ticket .weight-entry{min-height:104px!important;border-radius:11px;gap:10px;padding:12px}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy{grid-template-columns:minmax(0,1fr) auto;gap:6px 8px}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy>b{font-size:.875rem}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy>small{font-size:.875rem;grid-row:auto}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy>strong{font-size:clamp(1.5rem,7vw,2rem);line-height:1.1}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy>em{font-size:.875rem;grid-column:1/-1}
 .device:has(#ticket:not([hidden])) #ticket .weight-step{width:34px;height:34px;font-size:1.25rem}
 .device:has(#ticket:not([hidden])) #ticket .weight-edit{font-size:1.5rem}
}
@media screen and (max-width:359px){
 .device:has(#ticket:not([hidden]))>.brand{grid-template-columns:32px minmax(0,1fr) auto}
 .device:has(#ticket:not([hidden])) #ticket .weight-copy{grid-template-columns:minmax(0,1fr)}
}
/* In landscape or with a short available viewport, fixed docks otherwise
   leave only a sliver for the ticket. Keep every control in one scroll flow. */
@media screen and (max-width:767px) and (max-height:620px){
 .device:has(#ticket:not([hidden])){display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
 .device:has(#ticket:not([hidden])) #screen-content{overflow:visible;min-height:0}
 .device:has(#ticket:not([hidden]))>.brand{height:auto!important}
}