/* Cloud pages only. Desktop workbench rules remain in the existing stylesheets. */
@media (max-width: 680px) {
  html.review-root { scrollbar-gutter: auto; }
  body.cloud-ledger { background-attachment: scroll; }
  .cloud-ledger #appShell { padding: 0 12px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .cloud-ledger.review-enabled .topbar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; height: auto; padding: 12px 0; }
  .cloud-ledger .topbar-left { flex: 0 1 auto; flex-wrap: wrap; }
  .cloud-ledger .topbar-left .brand span { display: inline; }
  .cloud-ledger.review-enabled .topbar-right { position: relative; display: flex; flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .cloud-ledger .topbar { z-index: 30; }
  .cloud-ledger .data-transfer { position: static; }
  .cloud-ledger.public-view .topbar-right { display: none; }
  /* Flatten the navigation wrapper so stocks sit beside the login in row one. */
  .cloud-ledger.review-enabled .topbar-center { display: contents; }
  .cloud-ledger .tabs { order: 3; width: 100%; min-width: 0; flex: 1 1 100%; display: flex; flex-wrap: wrap; }
  .cloud-ledger .topbar-whitelist { position: static; order: 0; flex: 0 0 auto; align-self: center; }
  .cloud-ledger.review-enabled .nav-tab { flex: 1 1 auto; padding: 10px 8px; min-height: 44px; }
  .cloud-ledger .topbar button,
  .cloud-ledger .topbar summary,
  .cloud-ledger .admin-login-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cloud-ledger #whopStatus { order: 5; flex-basis: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .cloud-ledger .whitelist-popover { left: 0; right: auto; top: 62px; width: min(300px, calc(100vw - 32px)); }
  .cloud-ledger .data-transfer-popover { left: 0; right: auto; width: min(280px, calc(100vw - 32px)); }
  .cloud-ledger .topbar-right:has(.data-transfer[open]) { flex-basis: 100%; }
  .cloud-ledger .data-transfer-popover,
  .cloud-ledger .whitelist-popover { max-height: 60dvh; overflow-y: auto; z-index: 30; }
  .cloud-ledger.review-enabled input,
  .cloud-ledger.review-enabled select,
  .cloud-ledger.review-enabled textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  .cloud-ledger :is(input, select, button):not([type="checkbox"]) { min-height: 44px; }
  .cloud-ledger :is(.summary, .history-card, .review-chart-panel, .review-list-panel, .review-editor) { padding: 18px 14px; }
  .cloud-ledger .summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cloud-ledger .summary-metric strong { font-size: clamp(21px, 6vw, 28px); overflow-wrap: anywhere; }
  /* Keep the chart reachable even when the ledger has years of history. */
  .cloud-ledger.review-enabled #ledger.page.active { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .cloud-ledger.review-enabled #ledger .overview-combined { display: contents; }
  .cloud-ledger #ledger .summary { order: 0; border-radius: 15px; }
  .cloud-ledger #ledger .review-chart-panel { order: 1; margin-top: 0; }
  .cloud-ledger #ledger .history-card { order: 2; border-radius: 15px; }
  .cloud-ledger.review-enabled #ledger .trade-list { max-height: min(400px, 55dvh); overflow-y: auto; }
  .cloud-ledger .trade-row { grid-template-columns: 54px minmax(0, 1fr); gap: 8px 10px; }
  .cloud-ledger .trade-row .allocation { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; }
  .cloud-ledger .trade-row .undo-trade { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .cloud-ledger .trade-meta { overflow-wrap: anywhere; line-height: 1.6; }
  .cloud-ledger .review-chart-ranges { flex-wrap: wrap; }
  .cloud-ledger .review-chart-ranges button { flex: 1; }
  .cloud-ledger .review-chart-panel { min-height: 380px; }
  .cloud-ledger .review-chart-plot { min-height: 220px; }

  /* Each holding keeps all three metrics and its existing expand interaction. */
  .cloud-ledger .positions-panel { overflow: visible; padding: 10px; }
  .cloud-ledger .positions-head { display: none; }
  .cloud-ledger .position-group { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
  .cloud-ledger .position-row { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; padding: 16px 10px; border-top: 0; }
  .cloud-ledger .position-row > div:first-child { grid-column: 1 / -1; text-align: left !important; }
  .cloud-ledger .position-row > span { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
  .cloud-ledger .position-row > span::before { color: var(--muted); font: 400 11px "Noto Sans SC", sans-serif; }
  .cloud-ledger .position-value::before { content: "占用仓位"; }
  .cloud-ledger .position-lots::before { content: "常规仓位"; }
  .cloud-ledger .position-cost::before { content: "均摊价"; }
  .cloud-ledger .position-cost.average-cost { justify-self: stretch; width: auto; }
  .cloud-ledger .position-group .position-sub::after { content: " · 点击展开明细"; }
  .cloud-ledger .position-group [aria-expanded="true"] .position-sub::after { content: " · 点击收起明细"; }
  .cloud-ledger .position-operations { min-width: 0; --operation-left-inset: 12px; --operation-right-inset: 12px; padding: 0 12px 4px; }
  .cloud-ledger :is(.lot-buy, .lot-sale, .lot-rebuy, .lot-rebuy-sale) { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .cloud-ledger .lot-meta { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; }
  .cloud-ledger :is(.lot-status, .sale-lots) { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
  .cloud-ledger :is(.lot-time, .average-price) { white-space: normal; overflow-wrap: anywhere; }
  .cloud-ledger .lot-sales { margin-left: 0; padding-left: 8px; }
  .cloud-ledger .completed-lot .lot-buy::after { content: none; }
  .cloud-ledger .position-total { border-radius: 10px; }

  .cloud-ledger .review-layout { grid-template-columns: minmax(0, 1fr); }
  .cloud-ledger #review #tradeForm > .field-row { grid-template-columns: minmax(0, 1fr); }
  .cloud-ledger .review-list-footer { flex-wrap: wrap; }
  .cloud-ledger .review-record-line { grid-template-columns: minmax(0, 1fr); }
  .cloud-ledger .review-record-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cloud-ledger .daily-summary-panel { height: auto; overflow: visible; padding: 16px 12px; }
  .cloud-ledger .daily-summary-list { overflow: visible; }
  .cloud-ledger .daily-summary-entry { padding: 14px 12px; min-width: 0; }
  .cloud-ledger .daily-summary-entry > .summary-entry-actions { position: static; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 12px; }
  .cloud-ledger .summary-markdown > h1:first-child { padding-right: 0; font-size: 24px; }
  .cloud-ledger .daily-summary-toolbar .summary-drop { min-width: 0; flex-basis: 100%; }
  .cloud-ledger .daily-summary-controls { width: 100%; flex-wrap: wrap; }
  .cloud-ledger .daily-summary-controls label { max-width: 100%; }
  .cloud-ledger .daily-summary-form { padding: 12px; }
  .cloud-ledger .daily-summary-form-actions { flex-wrap: wrap; }
  .cloud-ledger dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow: auto; }
}

@media (max-width: 380px) {
  .cloud-ledger .brand { font-size: 14px; gap: 6px; }
  .cloud-ledger .history-filters { grid-template-columns: minmax(0, 1fr); }
  .cloud-ledger .daily-summary-controls label { flex-wrap: wrap; white-space: normal; }
  .cloud-ledger .daily-summary-controls input { width: 100%; }
}