/* The orientation controller identifies phones independently of CSS viewport
   changes caused by the keyboard. Right is also the safe fallback when an
   orientation API cannot identify the physical bottom edge of the phone. */
:root[data-phone-landscape="true"]{
  --phone-rail-width:72px;
  --phone-safe-left:max(8px,env(safe-area-inset-left));
  --phone-safe-right:max(8px,env(safe-area-inset-right));
  --phone-content-left:var(--phone-safe-left);
  --phone-content-right:calc(var(--phone-rail-width) + var(--phone-safe-right));
  --phone-rail-left:auto;--phone-rail-right:0;
  --phone-rail-size:calc(var(--phone-rail-width) + env(safe-area-inset-right));
  --phone-rail-pad-left:4px;--phone-rail-pad-right:calc(4px + env(safe-area-inset-right));
  --phone-rail-border-left:1px;--phone-rail-border-right:0;
  --phone-visual-column:1;--phone-data-column:2;
  /* Fallback photos use the same approximate scale as the adaptive canvas. */
  --phone-view-size:clamp(60px,calc(100dvh - 252px),310px);
}
:root[data-phone-landscape="true"][data-phone-bottom="left"]{
  --phone-content-left:calc(var(--phone-rail-width) + var(--phone-safe-left));
  --phone-content-right:var(--phone-safe-right);
  --phone-rail-left:0;--phone-rail-right:auto;
  --phone-rail-size:calc(var(--phone-rail-width) + env(safe-area-inset-left));
  --phone-rail-pad-left:calc(4px + env(safe-area-inset-left));--phone-rail-pad-right:4px;
  --phone-rail-border-left:0;--phone-rail-border-right:1px;
  --phone-visual-column:2;--phone-data-column:1;
}

/* The main page keeps its normal document scrolling; only navigation is fixed. */
:root[data-phone-landscape="true"] .app-shell{display:block;padding:0 var(--phone-content-right) 0 var(--phone-content-left);min-height:100dvh}
:root[data-phone-landscape="true"] :is(.sidebar,.desktop-toolbar-slot){display:none}
:root[data-phone-landscape="true"] .app-shell>main{min-width:0;width:100%}
:root[data-phone-landscape="true"] .topbar{height:48px;padding:6px 10px}
:root[data-phone-landscape="true"] .topbar-context{display:none}
:root[data-phone-landscape="true"] .mobile-brand{display:flex;align-items:center;gap:8px;font-size:1.1rem}
:root[data-phone-landscape="true"] .mobile-brand .brand-mark{width:30px;height:34px;font-size:1.5rem}
:root[data-phone-landscape="true"] .workspace{max-width:none;padding:12px 8px 22px}
:root[data-phone-landscape="true"] .page-heading{margin-bottom:14px;gap:10px}
:root[data-phone-landscape="true"] .page-heading h1{font-size:1.65rem}
:root[data-phone-landscape="true"] .page-heading p{font-size:.8125rem;margin-top:6px}
:root[data-phone-landscape="true"] #mobile-sort-slot{display:flex;position:sticky;top:0;min-height:52px;padding:4px 8px;gap:8px}
:root[data-phone-landscape="true"] #mobile-sort-slot .sort-controls{min-width:0;max-width:230px}
:root[data-phone-landscape="true"] .toast{bottom:12px;max-width:calc(100vw - var(--phone-content-left) - var(--phone-content-right) - 24px)}

/* One rail belongs to the active page. Rails behind nested dialogs are hidden. */
:root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs,.friend-nav){
  position:fixed;inset:0 var(--phone-rail-right) 0 var(--phone-rail-left);
  width:var(--phone-rail-size);height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;
  margin:0;padding:calc(5px + env(safe-area-inset-top)) var(--phone-rail-pad-right) calc(5px + env(safe-area-inset-bottom)) var(--phone-rail-pad-left);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  border:0;border-left:var(--phone-rail-border-left) solid var(--ui-glass-border);border-right:var(--phone-rail-border-right) solid var(--ui-glass-border);
  border-radius:0;background:var(--ui-glass-fallback);box-shadow:var(--ui-shadow-1),inset 0 1px 0 var(--ui-glass-highlight);z-index:12;
}
:root[data-phone-landscape="true"] #mobile-nav .nav-button,
:root[data-phone-landscape="true"] #social-tabs button,
:root[data-phone-landscape="true"] .friend-nav button{
  display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-width:0;min-height:48px;padding:5px 2px;gap:3px;
  text-align:center;font-size:.6875rem;line-height:1.15;overflow-wrap:anywhere;color:var(--muted);
}
:root[data-phone-landscape="true"] #mobile-nav .nav-button.active,
:root[data-phone-landscape="true"] :is(#social-tabs,.friend-nav) button[aria-pressed="true"]{background:var(--ui-owned-bg);color:var(--ui-owned-text)}
:root[data-phone-landscape="true"] :is(#mobile-nav,.friend-nav) .nav-symbol,
:root[data-phone-landscape="true"] #social-tabs svg{width:20px;height:20px;flex:none}
:root[data-phone-landscape="true"] #mobile-nav .nav-count{display:none}
:root[data-phone-landscape="true"] .social-desktop-label{display:none}
:root[data-phone-landscape="true"] .social-mobile-label{display:inline}
:root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs) .notification-badge{position:absolute;top:1px;right:1px;font-size:.625rem;min-width:17px;height:17px}
:root[data-phone-landscape="true"]:has(#social-dialog[open],#friend-page[open],#coin-dialog[open],#friend-coin-dialog[open],#message-coin-picker[open]) #mobile-nav,
:root[data-phone-landscape="true"]:has(#social-dialog[open],#friend-coin-dialog[open],#coin-dialog[open],#message-coin-picker[open]) .friend-nav,
:root[data-phone-landscape="true"]:has(#coin-dialog[open],#friend-coin-dialog[open],#message-coin-picker[open]) #social-tabs{visibility:hidden;pointer-events:none}
:root[data-phone-landscape="true"] #collection-menu{position:fixed;right:var(--phone-content-right);left:auto;top:auto;bottom:12px;max-height:calc(100dvh - 24px);max-width:calc(100vw - var(--phone-content-left) - var(--phone-content-right));overflow:auto;z-index:20}
:root[data-phone-landscape="true"][data-phone-bottom="left"] #collection-menu{left:var(--phone-content-left);right:auto}
:root[data-phone-landscape="true"] #tools-dialog{left:var(--phone-content-left);right:var(--phone-content-right);top:calc(58px + env(safe-area-inset-top));bottom:auto;width:auto;max-width:none;max-height:calc(100dvh - 70px - env(safe-area-inset-top));padding:14px;--panel-gutter:14px}
:root[data-phone-landscape="true"] #tools-dialog .basic-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
:root[data-phone-landscape="true"] #tools-dialog .basic-filters>label:last-child{grid-column:auto}

/* Four compact cards fit the wide screen without changing the coin artwork. */
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid),
:root[data-phone-landscape="true"] #message-coin-picker:not([data-keyboard-open="true"]) .mcp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .coin-card,
:root[data-phone-landscape="true"] #message-coin-picker:not([data-keyboard-open="true"]) .coin-card{padding:8px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .coin-art,
:root[data-phone-landscape="true"] #message-coin-picker:not([data-keyboard-open="true"]) .coin-art{height:126px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .coin-volume-fallback,
:root[data-phone-landscape="true"] #message-coin-picker:not([data-keyboard-open="true"]) .coin-volume-fallback{width:min(94px,90%);height:auto;aspect-ratio:1}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .coin-info,
:root[data-phone-landscape="true"] #message-coin-picker .coin-info{padding:10px 1px 1px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .title-button,
:root[data-phone-landscape="true"] #message-coin-picker .title-button{font-size:.875rem}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) :is(.country-line,.coin-meta,.coin-mintage),
:root[data-phone-landscape="true"] #message-coin-picker :is(.country-line,.coin-meta,.coin-mintage){font-size:.6875rem;line-height:1.4}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .card-action,
:root[data-phone-landscape="true"] #message-coin-picker .card-action{min-height:44px;font-size:.6875rem;padding:7px 4px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .year-tag,
:root[data-phone-landscape="true"] #message-coin-picker .year-tag{font-size:.625rem;top:5px;left:5px}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .owned-indicator>strong,
:root[data-phone-landscape="true"] #message-coin-picker .owned-indicator>strong{font-size:1rem}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .owned-indicator.quantity-medium>strong,
:root[data-phone-landscape="true"] #message-coin-picker .owned-indicator.quantity-medium>strong{font-size:.75rem}
:root[data-phone-landscape="true"] :is(#coin-grid,#friend-grid) .owned-indicator.quantity-long>strong,
:root[data-phone-landscape="true"] #message-coin-picker .owned-indicator.quantity-long>strong{font-size:.625rem}

/* Friend and Social pages reserve the rail, not an obsolete bottom bar. */
:root[data-phone-landscape="true"] :is(#social-dialog,#friend-page){
  position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;
  padding:0 var(--phone-content-right) 0 var(--phone-content-left);border:0;border-radius:0;overflow:hidden;
}
:root[data-phone-landscape="true"] :is(#social-dialog,#friend-page)[open]{display:flex;flex-direction:column;animation:none}
:root[data-phone-landscape="true"] :is(.social-header,.friend-page-header){flex:none;height:calc(54px + env(safe-area-inset-top));padding:calc(5px + env(safe-area-inset-top)) 4px 5px;gap:8px}
:root[data-phone-landscape="true"] :is(.social-heading h2,.friend-page-header h2){font-size:1.2rem;margin:0}
:root[data-phone-landscape="true"] .friend-page-header span{font-size:.75rem}
:root[data-phone-landscape="true"] .friend-page-header #friend-exit{display:inline-flex}
:root[data-phone-landscape="true"] :is(.social-drawer-layout,.friend-page-layout){display:flex;flex-direction:column;flex:1;min-height:0;height:auto;grid-template-columns:none}
:root[data-phone-landscape="true"] .social-content{height:auto;flex:1;min-height:0;padding:10px 4px 16px;overflow:auto}
:root[data-phone-landscape="true"] #friend-mobile-sort{position:static;flex:none;height:auto;min-height:0;padding:4px 0;gap:8px}
:root[data-phone-landscape="true"] #friend-desktop-sort{display:none}
:root[data-phone-landscape="true"] #friend-main{height:auto;flex:1;min-height:0;padding-bottom:12px}
:root[data-phone-landscape="true"] .friend-tools{padding:8px 4px;gap:8px}
:root[data-phone-landscape="true"] .friend-content{padding:6px 4px 18px}
:root[data-phone-landscape="true"] #friend-progress{padding:8px 4px}
:root[data-phone-landscape="true"] :is(#friend-results,#friend-stats){font-size:.75rem}

/* Latest Trade announcements: two cards, with the conversation action intact. */
:root[data-phone-landscape="true"] #market-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:root[data-phone-landscape="true"] #market-list>.market-card{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:start;gap:9px;margin:0;padding:10px}
:root[data-phone-landscape="true"] #market-list .market-visual{width:90px;height:102px}
:root[data-phone-landscape="true"] #market-list .market-visual .coin-motion{width:88px;height:88px}
:root[data-phone-landscape="true"] #market-list .coin-volume-fallback{width:76px;height:76px}
:root[data-phone-landscape="true"] #market-list .market-title{font-size:.9375rem;line-height:1.3;margin:6px 0}
:root[data-phone-landscape="true"] #market-list :is(.market-copy p,.market-person strong,.market-person small,.market-type){font-size:.6875rem;line-height:1.4}
:root[data-phone-landscape="true"] #market-list .market-type{padding:3px 6px}
:root[data-phone-landscape="true"] #market-list .market-person{gap:4px}
:root[data-phone-landscape="true"] #market-list .market-card-actions{grid-column:1/-1}
:root[data-phone-landscape="true"] #market-list .market-card-actions .button{width:100%;min-height:44px;font-size:.75rem;padding:8px}
:root[data-phone-landscape="true"] #market-list>p{grid-column:1/-1}
:root[data-phone-landscape="true"] .market-tools{gap:8px;margin-bottom:12px}
:root[data-phone-landscape="true"] .market-tools label{min-width:130px;font-size:.75rem;gap:4px}

/* Coin dialogs split the viewport. The model and its essential controls fit
   beside the independently scrolling descriptive form. */
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog){--panel-gutter:0px;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:0;overflow:hidden}
:root[data-phone-landscape="true"] #friend-coin-dialog{--phone-view-size:clamp(100px,calc(100dvh - 184px),360px)}
:root[data-phone-landscape="true"] #friend-coin-dialog[open],
:root[data-phone-landscape="true"] #coin-form{display:flex;flex-direction:column;height:100%;min-height:0}
:root[data-phone-landscape="true"] :is(#coin-form,#friend-coin-dialog)>.dialog-top{position:static;flex:none;height:calc(52px + env(safe-area-inset-top));margin:0;padding:calc(4px + env(safe-area-inset-top)) var(--phone-safe-right) 4px var(--phone-safe-left);background:var(--ui-floating-surface);border-bottom:1px solid var(--ui-glass-border)}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .coin-detail-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);align-items:stretch;flex:1;min-height:0;gap:14px;padding:8px var(--phone-safe-right) calc(8px + env(safe-area-inset-bottom)) var(--phone-safe-left);overflow:hidden}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .coin-detail-visual{position:static;top:auto;grid-column:var(--phone-visual-column);grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .coin-detail-data{grid-column:var(--phone-data-column);grid-row:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px 4px 18px;scrollbar-gutter:stable}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .coin-detail-data h2{font-size:1.45rem;line-height:1.25;margin:5px 0 12px}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .detail-description{max-height:none;overflow:visible;font-size:.8125rem;line-height:1.55}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .detail-media-modes{flex:none;margin:0 0 6px;padding:2px}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .detail-media-modes button{min-height:44px;padding:6px 12px;font-size:.75rem}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(146px,.45fr);grid-template-rows:minmax(60px,1fr) 44px;gap:6px;flex:1;min-height:0;margin:0 0 6px;overflow:hidden}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-stage{grid-column:1/-1;grid-row:1;min-width:0;min-height:0}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-canvas{height:100%;min-height:60px;width:100%}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-canvas canvas{display:block;width:100%;height:100%;touch-action:none}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-canvas .coin-volume-fallback{width:min(86%,var(--phone-view-size));height:auto;aspect-ratio:1}
:root[data-phone-landscape="true"] :is(#detail-image,#friend-coin-photo){display:grid;place-items:center;flex:1;min-height:0;height:var(--phone-view-size);margin:0 0 6px;border-radius:12px;overflow:hidden}
:root[data-phone-landscape="true"] :is(#detail-image,#friend-coin-photo)>img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
:root[data-phone-landscape="true"] :is(#detail-image,#friend-coin-photo) .cropped-coin{width:min(86%,var(--phone-view-size));height:auto;max-height:100%;aspect-ratio:1}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-controls{grid-column:1;grid-row:2;min-width:0;gap:4px;flex-wrap:nowrap;margin:0}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-controls button{flex:0 0 44px;min-height:44px;min-width:44px;padding:6px 3px;font-size:.6875rem}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-controls button:nth-child(-n+2){flex:1 1 0;min-width:0}
/* Pinching still zooms the canvas; front/back, reset and reverse-map choice
   stay directly accessible. Passive guidance remains in the portrait view. */
:root[data-phone-landscape="true"] :is(#model-zoom-out,#model-zoom-in,#friend-coin-model-zoom-out,#friend-coin-model-zoom-in),
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) :is(.model-instructions,.model-caption){display:none}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-reverse-label{grid-column:2;grid-row:2;display:flex;align-items:center;gap:0;min-width:0;font-size:0;margin:0}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) .model-reverse-label select{flex:1;width:100%;min-width:0;font-size:16px;min-height:44px;height:44px;margin:0;padding:6px}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) :is(.mintage-panel,.period-section,.friend-coin-exchange){padding:12px;margin:14px 0}
:root[data-phone-landscape="true"] :is(#coin-dialog,#friend-coin-dialog) :is(.mintage-panel p,.period-section p,.friend-coin-exchange p,.friend-coin-peer){font-size:.75rem;line-height:1.5}

/* These are the real quantity and submit controls, not a second save flow. */
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions{flex:none;display:grid;grid-template-columns:minmax(134px,1fr) minmax(0,1fr);align-items:stretch;gap:6px;margin-top:auto;padding:6px 0 0;border-top:1px solid var(--ui-content-border);background:var(--ui-floating-surface)}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .quantity-row{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:0;margin:0;border:0}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .quantity-row>label{font-size:.6875rem;line-height:1.2}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .quantity-row small{display:none}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .stepper{justify-content:center;width:100%;min-width:0}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .stepper button{width:44px;min-width:44px;min-height:44px;padding:0}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .stepper input{width:44px;min-width:0;min-height:44px;font-size:16px;padding:0}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions #save-detail{grid-column:2;grid-row:1;min-width:0;min-height:44px;height:100%;padding:7px;font-size:.75rem;line-height:1.3}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions #detail-error{grid-column:1/-1;grid-row:2;font-size:.6875rem!important;line-height:1.35;margin:0;max-height:3.2em;overflow:auto}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .detail-add-status{grid-column:1/-1;font-size:.6875rem;line-height:1.35;margin:0}
:root[data-phone-landscape="true"] #coin-dialog .coin-detail-actions .detail-add-status:empty{display:none}

/* The sharing catalogue is a focused overlay and therefore needs no rail. */
:root[data-phone-landscape="true"] #message-coin-picker{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:0}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-heading{padding:4px var(--phone-safe-right) 4px var(--phone-safe-left);min-height:52px;gap:10px}
:root[data-phone-landscape="true"] #message-coin-picker h2{font-size:1.25rem}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-heading p{font-size:.6875rem;margin-top:2px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-controls{padding:7px var(--phone-safe-right) 7px var(--phone-safe-left)}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-scopes{width:max-content;margin:0 0 6px;padding:2px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-scopes button{min-height:44px;padding:6px 12px;font-size:.75rem}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-filters{grid-template-columns:minmax(150px,1fr) minmax(120px,.6fr) minmax(100px,.45fr) minmax(140px,.6fr);gap:7px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-search{grid-column:auto}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-sort-row{margin-top:6px;gap:10px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-scroll{padding:10px var(--phone-safe-right) calc(12px + env(safe-area-inset-bottom)) var(--phone-safe-left)}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);align-items:stretch;min-height:0;gap:16px;padding:10px var(--phone-safe-right) calc(10px + env(safe-area-inset-bottom)) var(--phone-safe-left);overflow:hidden}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-selected-visual{grid-column:var(--phone-visual-column);grid-row:1;min-height:0;height:100%;max-height:100%;max-width:none;margin:0}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-selected-visual .coin-volume-fallback{width:min(80%,230px);height:auto;aspect-ratio:1}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-selected-copy{grid-column:var(--phone-data-column);grid-row:1;min-height:0;overflow:auto;margin:0;max-width:none;padding-right:4px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-selected-copy h3{font-size:1.25rem;margin:6px 0 10px}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-description{font-size:.8125rem;line-height:1.5;max-height:none;overflow:visible}
:root[data-phone-landscape="true"] #message-coin-picker .mcp-year-field{margin:12px 0 8px}

/* Preserve the existing chat scroll/composer split, even on wide phones. */
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] .social-content{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0 4px}
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] :is(#social-overview,#social-trades-panel,#direct-messages,.dm-thread){display:flex;flex-direction:column;flex:1;min-height:0;height:100%;max-width:none;width:100%}
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] :is(#social-trades-panel>h3,#legacy-exchanges){display:none}
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] .dm-thread-heading{position:static;flex:none;margin:0;padding:5px 0}
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] .dm-scroll{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:6px 0}
:root[data-phone-landscape="true"] #social-dialog[data-dm-thread="true"] .dm-compose{position:static;bottom:auto;flex:none;margin:0;padding:5px 0}
:root[data-phone-landscape="true"] #direct-messages .dm-attachment-panel{max-height:42dvh}

/* Never force a landscape rail or a full-height dialog over the keyboard. */
:root[data-phone-landscape="true"][data-mobile-keyboard="true"]{--phone-content-left:var(--phone-safe-left);--phone-content-right:var(--phone-safe-right)}
:root[data-phone-landscape="true"][data-mobile-keyboard="true"] :is(#mobile-nav,#social-tabs,.friend-nav){display:none!important}
:root[data-phone-landscape="true"] :is(#social-dialog,#message-coin-picker,#coin-dialog)[data-keyboard-open="true"]{top:var(--keyboard-top,0px);bottom:auto;height:var(--keyboard-height,100dvh);max-height:var(--keyboard-height,100dvh)}
/* While writing a note or quantity, reserve the entire left/right pane for
   the actual collection controls instead of squeezing the model above them. */
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] #coin-form>.dialog-top{min-height:44px;height:44px;padding:0 var(--phone-safe-right) 0 var(--phone-safe-left);margin:0}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] .coin-detail-layout{padding-top:4px;padding-bottom:4px;gap:10px}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] .coin-detail-visual{justify-content:center;overflow:auto;overscroll-behavior:contain}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] .coin-detail-visual>:not(.coin-detail-actions){display:none}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] .coin-detail-actions{margin:0;padding:0;border:0}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] .coin-detail-data{padding-top:0;padding-bottom:8px;scroll-padding-block:4px}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] :is(input,textarea,select){font-size:16px}
:root[data-phone-landscape="true"] #coin-dialog[data-keyboard-open="true"] #detail-note{height:64px;min-height:64px;resize:none}
:root[data-phone-landscape="true"] #tools-dialog[data-keyboard-open="true"]{top:calc(var(--keyboard-top,0px) + 8px);max-height:calc(var(--keyboard-height,100dvh) - 16px)}
:root[data-phone-landscape="true"] #tools-dialog[data-keyboard-open="true"] .basic-filters{display:none}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] .mcp-filters{grid-template-columns:minmax(0,1fr)}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] :is(.mcp-heading p,.mcp-scopes,.mcp-filters label:not(.mcp-search),.mcp-sort-row){display:none}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] .mcp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] .coin-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;padding:8px}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] .coin-art{height:80px}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] .coin-volume-fallback{width:64px;height:64px}
:root[data-phone-landscape="true"] #message-coin-picker[data-keyboard-open="true"] :is(.coin-meta,.coin-mintage,.card-action,.coin-art .year-tag){display:none}

@media(max-height:340px){
  :root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs,.friend-nav){justify-content:flex-start;gap:2px}
  :root[data-phone-landscape="true"] #social-tabs button{min-height:44px}
  :root[data-phone-landscape="true"] #message-coin-picker .mcp-heading p{display:none}
}
@media(max-width:640px){
  :root[data-phone-landscape="true"] :is(#model-reset,#friend-coin-model-reset){display:none}
}
/* The rail alone uses glass; viewport-sized dialogs remain opaque. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs,.friend-nav){background:var(--ui-glass-fill);-webkit-backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation));backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation))}
}
@media(prefers-reduced-transparency:reduce){
  :root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs,.friend-nav){background:var(--ui-glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root[data-phone-landscape="true"] :is(#mobile-nav,#social-tabs,.friend-nav){background:var(--ui-glass-fallback);border-color:currentColor;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-phone-landscape="true"] #mobile-nav .nav-button.active,
  :root[data-phone-landscape="true"] :is(#social-tabs,.friend-nav) button[aria-pressed="true"]{outline:1px solid currentColor;outline-offset:-1px}
}