/* Console phone layer (<=640px), from the Claude Design handoff
   design_handoff_phone (v2-phone.css). Rules are copied unchanged, wrapped
   in the breakpoint; the QR scanner and prototype-only rules are left out
   (the handoff dropped scanning). The phone shell (#vp-app) is built by
   phone.js and replaces the desktop shell (#app-shell) at this width. */

#vp-app { display: none; }

@media (max-width: 640px) {
#app-shell { display: none !important; }
#vp-app:not([hidden]) { display: flex; }
/* Desktop toasts sit full width above the tab bar on phones. */
.vx-toasts { left: 12px; right: 12px; bottom: 84px; }
.vx-toasts > * { width: 100% !important; max-width: none !important; }

/* Touch targets: 44px minimum for every control on phone */
.vp-app .vds-btn--default,.vp-app .vds-btn--compact{height:44px}
.vp-app .vds-iconbtn{min-width:44px;min-height:44px}
.vp-app .vds-inputbox{min-height:44px}
.vp-app .vds-menu__item{min-height:48px}
.vp-app .vds-segmented__item{height:40px;flex:1}
.vp-app .vds-segmented{display:flex;width:100%}
.vp-app .vds-tab{height:44px;flex:1}
.vp-app .vds-tabs{width:100%}
.vp-app .vx-dropdown__trigger{height:44px}
.vp-app .vds-choice{min-height:44px}
.vp-app input,.vp-app textarea{font-size:16px}

/* Shell */
.vp-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--vds-surface-page);color:var(--vds-text-primary);font-family:var(--vds-font-sans);overflow:hidden}
.vp-top{display:flex;align-items:center;gap:var(--vds-space-100);height:56px;padding:0 var(--vds-space-50) 0 var(--vds-space-150);background:var(--vds-surface-card);border-bottom:1px solid var(--vds-border-subtle);flex-shrink:0}
.vp-org{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:44px;padding:0 var(--vds-space-100);border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-md);background:var(--vds-surface-card);color:var(--vds-text-primary);font:var(--vds-weight-medium) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);text-align:left}
.vp-org span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.vp-org{cursor:pointer}
button.vp-org:active{background:var(--color-fill-container-neutral-0-pressed)}
.vp-banner{display:flex;align-items:center;gap:var(--vds-space-100);padding:var(--vds-space-50) var(--vds-space-50) var(--vds-space-50) var(--vds-space-150);background:var(--color-fill-surface-brand-subtle);border-bottom:1px solid var(--color-border-brand-subtle);color:var(--vds-text-brand);font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);flex-shrink:0}
.vp-banner span{flex:1;min-width:0}
.vp-banner b{font-weight:var(--vds-weight-semibold)}
.vp-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.vp-page{padding:var(--vds-space-200) var(--vds-space-200) var(--vds-space-300);display:flex;flex-direction:column;gap:var(--vds-space-200);min-width:0}
.vp-h1{margin:0;font:var(--vds-weight-semibold) var(--vds-size-xl)/var(--vds-line-xl) var(--vds-font-sans)}
.vp-sub{margin:var(--vds-space-25) 0 0;font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-secondary);text-wrap:pretty}
.vp-h2{margin:0;font:var(--vds-weight-semibold) var(--vds-size-lg)/var(--vds-line-lg) var(--vds-font-sans)}
.vp-meta{font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--vds-surface-card);border-top:1px solid var(--vds-border-subtle);padding-bottom:env(safe-area-inset-bottom);flex-shrink:0}
.vp-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border:0;background:transparent;color:var(--vds-text-secondary);font:var(--vds-weight-medium) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);cursor:pointer}
.vp-tab--on{color:var(--vds-text-brand)}
.vp-tab--on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;border-radius:0 0 2px 2px;background:var(--color-fill-container-brand-2-default)}
.vp-tab:disabled{color:var(--vds-text-disabled);cursor:not-allowed}
.vp-tab__badge{position:absolute;top:4px;left:calc(50% + 6px)}
.vp-bar{display:flex;align-items:center;gap:var(--vds-space-100);padding:var(--vds-space-150) var(--vds-space-200);background:var(--vds-surface-card);border-top:1px solid var(--vds-border-subtle);flex-shrink:0}
.vp-bar--stack{flex-direction:column;align-items:stretch}
.vp-bar__info{flex:1;min-width:0;font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-bar__info b{display:block;font:var(--vds-weight-semibold) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-primary)}
.vp-bar > .vds-btn--block{flex:1}
.vp-toasts{position:fixed;left:var(--vds-space-150);right:var(--vds-space-150);bottom:84px;z-index:300;display:flex;flex-direction:column;gap:var(--vds-space-100)}
.vp-toasts > *{width:100% !important;max-width:none !important}

.vp-sticky-top{position:sticky;top:0;z-index:5}
.vp-sticky-bottom{position:sticky;bottom:0;z-index:5}
.vp-actbar{display:flex;flex-direction:column;gap:var(--vds-space-100);padding:var(--vds-space-150) var(--vds-space-200);background:var(--vds-surface-card);border-top:1px solid var(--vds-border-subtle)}
.vp-tabs-inline{margin:0 calc(-1 * var(--vds-space-200));padding:0 var(--vds-space-200);background:var(--vds-surface-card);border-bottom:1px solid var(--vds-border-subtle)}
.vp-tabs-inline .vds-tabs{border-bottom:0}

/* Menus & sheets */
.vp-menu{position:fixed;top:52px;right:var(--vds-space-100);z-index:120;width:260px;max-width:calc(100vw - 16px)}
.vp-menu__theme{padding:var(--vds-space-100) var(--vds-space-200)}
.vp-scrim{position:fixed;inset:0;z-index:200;background:var(--color-fill-overlay-dark, rgba(22,28,39,.5));display:flex;align-items:flex-end}
.vp-sheet{width:100%;max-height:90%;display:flex;flex-direction:column;background:var(--vds-surface-card);border-radius:var(--vds-radius-lg) var(--vds-radius-lg) 0 0;box-shadow:var(--vds-shadow-overlay)}
.vp-sheet__grab{width:36px;height:4px;margin:var(--vds-space-100) auto 0;border-radius:var(--vds-radius-full);background:var(--vds-border-default);flex-shrink:0}
.vp-sheet__head{display:flex;align-items:center;gap:var(--vds-space-100);padding:var(--vds-space-50) var(--vds-space-50) var(--vds-space-50) var(--vds-space-200);flex-shrink:0}
.vp-sheet__head h2{flex:1;margin:0;font:var(--vds-weight-semibold) var(--vds-size-lg)/var(--vds-line-lg) var(--vds-font-sans)}
.vp-sheet__body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--vds-space-200) var(--vds-space-200);display:flex;flex-direction:column;gap:var(--vds-space-150);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}
.vp-sheet__foot{display:flex;flex-direction:column;gap:var(--vds-space-100);padding:var(--vds-space-150) var(--vds-space-200) calc(var(--vds-space-150) + env(safe-area-inset-bottom));border-top:1px solid var(--vds-border-subtle)}
.vp-sheet__foot--row{flex-direction:row}
.vp-sheet__foot--row > *{flex:1}
.vp-full{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:var(--vds-surface-page)}
.vp-full__head{display:flex;align-items:center;gap:var(--vds-space-50);height:56px;padding:0 var(--vds-space-50);background:var(--vds-surface-card);border-bottom:1px solid var(--vds-border-subtle);flex-shrink:0}
.vp-full__title{flex:1;min-width:0}
.vp-full__title b{display:block;font:var(--vds-weight-semibold) var(--vds-size-lg)/var(--vds-line-lg) var(--vds-font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-full__title small{display:block;font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-full__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.vp-search{position:relative;display:flex}
.vp-search > span{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;color:var(--vds-text-tertiary);pointer-events:none}
.vp-search input{width:100%;height:44px;padding:0 var(--vds-space-150) 0 40px;border:1px solid var(--vds-border-default);border-radius:var(--vds-radius-md);background:var(--vds-surface-card);color:var(--vds-text-primary);font:var(--vds-weight-regular) 16px/24px var(--vds-font-sans)}
.vp-search input:focus{outline:0;border-color:var(--vds-focus-ring);box-shadow:0 0 0 1px var(--vds-focus-ring)}
.vp-row-search{display:flex;gap:var(--vds-space-100);align-items:center}
.vp-row-search > .vp-search{flex:1;min-width:0}

/* Lists & cards */
.vp-list{display:flex;flex-direction:column;gap:var(--vds-space-100)}
.vp-card{background:var(--vds-surface-card);border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-lg);min-width:0}
.vp-card--pad{padding:var(--vds-space-150) var(--vds-space-200)}
button.vp-card{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.vp-card:active{background:var(--color-fill-container-neutral-0-pressed)}
.vp-card--selected{background:var(--color-fill-surface-brand-subtle);border-color:var(--color-border-brand-subtle)}
.vp-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--vds-space-50) var(--vds-space-150);align-items:center;padding:var(--vds-space-150) var(--vds-space-200);min-height:56px}
.vp-item__title{font:var(--vds-weight-semibold) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);min-width:0;overflow-wrap:anywhere}
.vp-item__title.vx-mono{font-weight:var(--vds-weight-medium)}
.vp-item__note{grid-column:1 / -1;font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-secondary);overflow-wrap:anywhere}
.vp-item__note--danger{color:var(--vds-text-danger)}
.vp-item__foot{grid-column:1 / -1;display:flex;align-items:center;gap:var(--vds-space-150);flex-wrap:wrap;font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-item__foot .vx-strip{width:120px}
.vp-item__side{display:flex;align-items:center;gap:var(--vds-space-50)}
.vp-qitem{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:var(--vds-space-50);padding:var(--vds-space-100) var(--vds-space-50) var(--vds-space-100) var(--vds-space-200);min-height:60px}
.vp-qitem--warn{border-color:var(--color-border-yellow-subtle)}
.vp-qitem__meta{display:flex;align-items:center;gap:var(--vds-space-100);flex-wrap:wrap;margin-top:2px;font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-100);min-height:44px}
.vp-chips{display:flex;gap:var(--vds-space-100);overflow-x:auto;margin:0 calc(-1 * var(--vds-space-200));padding:var(--vds-space-50) var(--vds-space-200);scrollbar-width:none;flex-shrink:0}
.vp-chips::-webkit-scrollbar{display:none}
.vp-chips > *{flex-shrink:0;position:relative}
.vp-chips > *::before{content:"";position:absolute;inset:-6px 0}
.vp-chipwrap{display:flex;gap:var(--vds-space-100);flex-wrap:wrap}
.vp-chipwrap > *{position:relative}
.vp-chipwrap > *::before{content:"";position:absolute;inset:-6px 0}
.vp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--vds-border-subtle)}
.vp-stat{padding:var(--vds-space-100) var(--vds-space-150);display:flex;flex-direction:column;gap:2px;min-width:0}
.vp-stat + .vp-stat{border-left:1px solid var(--vds-border-subtle)}
.vp-stat__k{display:flex;align-items:center;gap:4px;font:var(--vds-weight-medium) var(--vds-size-xs, 10px)/var(--vds-line-xs, 14px) var(--vds-font-sans);color:var(--vds-text-secondary);white-space:nowrap}
.vp-stat__v{font:var(--vds-weight-semibold) var(--vds-size-xl)/var(--vds-line-xl) var(--vds-font-sans);font-variant-numeric:tabular-nums}
.vp-progress{padding:var(--vds-space-150) var(--vds-space-200);display:flex;flex-direction:column;gap:var(--vds-space-100)}
.vp-progress__row{display:flex;justify-content:space-between;gap:var(--vds-space-100);font:var(--vds-weight-semibold) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);font-variant-numeric:tabular-nums}
.vp-progress__row span{font-weight:var(--vds-weight-regular);color:var(--vds-text-secondary);font-size:var(--vds-size-sm)}
.vp-empty{display:flex;flex-direction:column;align-items:center;gap:var(--vds-space-100);padding:var(--vds-space-500) var(--vds-space-200);text-align:center;color:var(--vds-text-secondary);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}
.vp-empty strong{color:var(--vds-text-primary);font-weight:var(--vds-weight-semibold)}
.vp-skel{padding:var(--vds-space-150) var(--vds-space-200);display:flex;flex-direction:column;gap:var(--vds-space-100)}

/* Wizard */
.vp-wiz{display:flex;flex-direction:column;gap:var(--vds-space-100);padding:var(--vds-space-150) var(--vds-space-200);background:var(--vds-surface-card);border-bottom:1px solid var(--vds-border-subtle);flex-shrink:0}
.vp-wiz__label{display:flex;justify-content:space-between;font:var(--vds-weight-medium) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-wiz__label b{color:var(--vds-text-primary);font-weight:var(--vds-weight-semibold)}
.vp-wiz__segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.vp-wiz__seg{height:4px;border:0;padding:0;border-radius:2px;background:var(--vds-surface-recessed);position:relative;cursor:pointer}
.vp-wiz__seg::before{content:"";position:absolute;inset:-20px 0}
.vp-wiz__seg--done{background:var(--color-fill-container-brand-2-default)}
.vp-wiz__seg--on{background:var(--color-fill-container-brand-2-default)}
.vp-picker{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-100);width:100%;min-height:44px;padding:0 var(--vds-space-100) 0 var(--vds-space-150);border:1px solid var(--vds-border-default);border-radius:var(--vds-radius-md);background:var(--vds-surface-card);color:var(--vds-text-primary);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);text-align:left;cursor:pointer}
.vp-picker span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-picker--empty span{color:var(--vds-text-tertiary)}
.vp-picker--error{border-color:var(--color-border-red-bold)}
.vp-scanbtn{display:flex;align-items:center;gap:var(--vds-space-150);width:100%;min-height:72px;padding:var(--vds-space-150) var(--vds-space-200);border:0;border-radius:var(--vds-radius-lg);background:var(--color-fill-container-brand-2-default);color:var(--color-on-fill-inverse-default);text-align:left;cursor:pointer;font-family:var(--vds-font-sans)}
.vp-scanbtn:active{background:var(--color-fill-container-brand-2-pressed, var(--color-fill-container-brand-2-default))}
.vp-scanbtn b{display:block;font:var(--vds-weight-semibold) var(--vds-size-lg)/var(--vds-line-lg) var(--vds-font-sans)}
.vp-scanbtn small{display:block;font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);opacity:.9}
.vp-option{display:flex;flex-direction:column;gap:2px;padding:var(--vds-space-100) var(--vds-space-150);border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-md);background:var(--vds-surface-card)}
.vp-option .vx-option__desc{padding-left:28px}
.vp-review{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vds-space-50)}
.vp-review dt{margin:0;font:var(--vds-weight-medium) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vp-review dd{margin:0 0 var(--vds-space-100);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);overflow-wrap:anywhere}
.vp-kv{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:var(--vds-space-100) var(--vds-space-150);margin:0;font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}
.vp-kv dt{color:var(--vds-text-secondary);margin:0}
.vp-kv dd{margin:0;overflow-wrap:anywhere;min-width:0}
.vp-kv .vx-mono{font-size:13px}


/* Step sheet + lookup reuse desktop step/timeline styles, narrowed */
.vp-app .vx-steps{grid-template-columns:minmax(0,1fr);padding:0 var(--vds-space-200) var(--vds-space-200)}
.vp-app .vx-step__head{min-height:52px;grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"n name badge" ". ms ms"}
.vp-app .vx-step__n{grid-area:n}.vp-app .vx-step__name{grid-area:name}.vp-app .vx-step__ms{grid-area:ms}
.vp-app .vx-step__head > .vds-badge{grid-area:badge}
.vp-app .vx-step__body{padding-left:0}
.vp-app .vx-step-fail{padding:var(--vds-space-150) var(--vds-space-200) 0}
.vp-app .vx-tl__head{flex-direction:column;gap:2px}
.vp-app .vx-json{font-size:11px}


/* App additions */
/* Tappable cards that contain their own buttons (a <button> can't nest one). */
.vp-card--tap { cursor: pointer; }
.vp-card--tap:active { background: var(--color-fill-container-neutral-0-pressed); }
/* README: chips are 36px on phone (the ::before rules above extend the hit area to 44px). */
.vp-app .vds-chip { height: 36px; padding: 0 var(--vds-space-150); }
/* Wrong-format serial rows in the paste sheet (the design's scanner-row styles, kept for this). */
.vp-scanrow{display:flex;align-items:center;gap:var(--vds-space-100);min-height:44px;padding:0 var(--vds-space-150);border-radius:var(--vds-radius-md);background:var(--vds-surface-card);border:1px solid var(--vds-border-subtle);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}
.vp-scanrow .vx-mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--vds-text-primary)}
.vp-scanrow--bad{color:var(--color-on-fill-yellow-default)}
/* The page fills the scroll area, so sticky bottom bars rest above the tab bar even on short screens. */
.vp-app .vp-main { display: flex; flex-direction: column; }
.vp-app .vp-main > .vp-page { flex: 1 0 auto; }
.vp-app .vp-actbar .vds-segmented { width: 100%; }
.vp-app .vds-choice { align-items: center; }
.vp-app .vp-option .vds-choice { min-height: 44px; }
.vp-app .vp-menu .vds-menu__item { width: 100%; }
.vp-app .vp-card .vx-steps { padding-top: var(--vds-space-100); }
.vp-app .vx-tl { margin: 0; }
.vp-app .vp-select { width: 100%; }
/* design_handoff_customer_role (21 Oct 2026): a customer's failed card, reason + "Why?". */
.vp-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vp-why{grid-column:1 / -1;display:flex;align-items:flex-start;gap:var(--vds-space-100);color:var(--vds-text-danger);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}
.vp-why span{flex:1;min-width:0}
.vp-why .vds-btn{margin:-10px 0}
}

/* Sign in at phone width (the desktop screen already collapses to one column) */
@media (max-width:640px){
  .vx-login__center{align-items:flex-start;padding:var(--vds-space-100) var(--vds-space-200) var(--vds-space-400)}
  .vx-login__bar{padding:var(--vds-space-100) var(--vds-space-150)}
  .vx-login .vds-inputbox{min-height:44px}
  .vx-login .vds-btn--default,.vx-login .vds-btn--compact{height:44px}
  .vx-login .vds-segmented{display:flex;width:100%}
  .vx-login .vds-segmented__item{height:40px;flex:1}
  .vx-login input{font-size:16px}
  .vx-login .vx-card__body{padding:var(--vds-space-200)}
}