/* Web-app shell. Mobile keeps the panel's own compact design; from 900px
   up, the same panel becomes one centered, roomier, larger-type block on
   the technical ground. Web-only; the extension keeps its fixed width. */

/* All web viewports: fluid width instead of the extension's fixed 520px. */
body.sidepanel.webapp {
  width: auto;
  min-height: 100vh;
  box-sizing: border-box;
}

/* — site chrome ------------------------------------------------------------
   scripts/pack-web.js injects the site's nav and footer (scripts/siteChrome.js)
   around the panel so /app/ is a page of the site rather than a dead end.
   Everything here is web-only; the extension side panel is untouched. */

/* The panel's own legal bar is fixed to the viewport bottom, which would sit on
   top of the site footer. On the web it becomes a normal in-flow utility bar. */
body.sidepanel.webapp { padding-bottom: 0; }
body.sidepanel.webapp .legal-footer {
  position: static;
  justify-content: flex-end;
  border-top: 0;
  background: transparent;
}
/* Privacy/Terms/Legal notice are real pages here and already sit in the site
   footer below; in the extension those buttons stay, since it has nowhere to
   link to. Only the theme and language controls remain useful on the web. */
body.sidepanel.webapp .legal-footer button[data-legal-doc] { display: none; }

body.sidepanel.webapp .app-site-footer { padding-inline: 12px; }

@media (min-width: 900px) {
  html { font-size: 15px; }

  body.sidepanel.webapp {
    width: min(920px, 100% - 64px);
    margin: 0 auto;
    background: var(--color-neutral-100);
    border-inline: 1px solid var(--color-divider);
  }

  /* The nav and footer sit inside the centered block, so they line up with the
     panel's 40px gutters instead of the site's full-bleed masthead. */
  body.sidepanel.webapp .nav,
  body.sidepanel.webapp .legal-footer,
  body.sidepanel.webapp .app-site-footer { padding-inline: 40px; }
  body.sidepanel.webapp .nav { border-bottom: 1px solid var(--color-divider); }

  /* Roomier chrome: the panel's 12px gutters widen to a reading margin. */
  body.sidepanel.webapp header,
  body.sidepanel.webapp .status,
  body.sidepanel.webapp .account-panel,
  body.sidepanel.webapp .provider-panel,
  body.sidepanel.webapp .community-toolbar,
  body.sidepanel.webapp .community-selector,
  body.sidepanel.webapp .summary,
  body.sidepanel.webapp .members,
  body.sidepanel.webapp .market-snapshot,
  body.sidepanel.webapp .community-players-snapshot {
    padding-inline: 40px;
  }
  body.sidepanel.webapp header { padding-block: 16px; }
  body.sidepanel.webapp .account-panel,
  body.sidepanel.webapp .provider-panel,
  body.sidepanel.webapp .community-toolbar { padding-block: 12px; }
  body.sidepanel.webapp .community-selector,
  body.sidepanel.webapp .summary,
  body.sidepanel.webapp .members,
  body.sidepanel.webapp .market-snapshot,
  body.sidepanel.webapp .community-players-snapshot { padding-block: 20px; }

  body.sidepanel.webapp h1 { font-size: 20px; }
  body.sidepanel.webapp button { font-size: 13px; }
  body.sidepanel.webapp .detail-tabs { padding: 14px 40px 0; gap: 10px; }
  body.sidepanel.webapp .detail-tab { padding: 12px 14px; font-size: 14px; }

  /* Summary: three metrics fill the row instead of leaving a fourth gap. */
  body.sidepanel.webapp .summary { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  body.sidepanel.webapp .metric { padding: 20px 26px; }
  body.sidepanel.webapp .metric strong { font-size: 28px; }
  body.sidepanel.webapp .metric span { font-size: 0.9rem; }

  /* Member and community cards: one wide card per row. */
  body.sidepanel.webapp .members,
  body.sidepanel.webapp .community-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  body.sidepanel.webapp .community-button { padding: 16px 22px; font-size: 1rem; }

  body.sidepanel.webapp .member { padding: 24px 32px; font-size: 1rem; }
  body.sidepanel.webapp .member-header { margin-bottom: 14px; }
  body.sidepanel.webapp .member h2 { font-size: 1.65rem; }
  body.sidepanel.webapp .member-header .available { padding: 8px 14px; font-size: 1.75rem; }
  body.sidepanel.webapp .wealth-tag { max-width: none; font-size: 0.85rem; }

  /* Stat pairs sit together instead of stretching across the card. */
  body.sidepanel.webapp .bid-summary,
  body.sidepanel.webapp .bid-history-summary {
    grid-template-columns: repeat(2, max-content);
    gap: 12px 72px;
  }
  body.sidepanel.webapp .bid-summary { margin-bottom: 14px; padding-bottom: 14px; }
  body.sidepanel.webapp .bid-summary em,
  body.sidepanel.webapp .bid-history-summary em { font-size: 0.85rem; }
  body.sidepanel.webapp .bid-summary strong,
  body.sidepanel.webapp .bid-history-summary strong { font-size: 1.05rem; }

  /* Collapsible sections: readable titles, calmer separation. */
  body.sidepanel.webapp .budget-detail,
  body.sidepanel.webapp .bid-detail,
  body.sidepanel.webapp .sell-detail { margin-top: 16px; padding-top: 12px; }
  body.sidepanel.webapp .budget-detail summary,
  body.sidepanel.webapp .bid-detail summary,
  body.sidepanel.webapp .sell-detail summary { padding-block: 4px; font-size: 1.1rem; }

  /* Budget grid: four readable columns. */
  body.sidepanel.webapp .member-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    font-size: 1rem;
  }
  body.sidepanel.webapp .muted { font-size: 0.85rem; }

  /* Bid and sell histories: list scale up from the panel's 11px. */
  body.sidepanel.webapp .bid-list,
  body.sidepanel.webapp .sell-list { gap: 8px; margin-top: 12px; font-size: 0.95rem; }
  body.sidepanel.webapp .bid-head,
  body.sidepanel.webapp .bid-row {
    grid-template-columns: 90px 90px minmax(130px, auto) minmax(150px, 1fr) 24px;
    gap: 12px;
  }
  body.sidepanel.webapp .bid-head { font-size: 0.75rem; }
  body.sidepanel.webapp .bid-date,
  body.sidepanel.webapp .sell-date { font-size: 0.85rem; }

  /* Filter toolbars: inputs at body scale, clustered instead of spread. */
  body.sidepanel.webapp .bid-toolbar {
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: start;
    gap: 12px 24px;
    margin-top: 12px;
  }
  body.sidepanel.webapp .bid-toolbar label,
  body.sidepanel.webapp .market-toolbar label { font-size: 0.8rem; gap: 4px; }
  body.sidepanel.webapp .bid-toolbar input,
  body.sidepanel.webapp .bid-toolbar select,
  body.sidepanel.webapp .market-toolbar select { padding: 8px 10px; font-size: 0.95rem; }
  body.sidepanel.webapp .market-toolbar { grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; }

  /* Market and community-players tables. */
  body.sidepanel.webapp .market-summary { padding: 14px 18px; }
  body.sidepanel.webapp .market-summary strong { font-size: 1.55rem; }
  body.sidepanel.webapp .market-summary span { font-size: 0.85rem; }
  body.sidepanel.webapp .market-table { padding: 16px 20px; gap: 8px; font-size: 0.95rem; }
  body.sidepanel.webapp .market-head,
  body.sidepanel.webapp .market-row {
    grid-template-columns: minmax(150px, 1.6fr) 40px repeat(5, minmax(72px, 1fr));
    gap: 10px;
  }
  body.sidepanel.webapp .community-players-table .market-head,
  body.sidepanel.webapp .community-players-table .market-row {
    grid-template-columns: minmax(150px, 1.6fr) repeat(7, minmax(64px, 1fr));
  }
  body.sidepanel.webapp .market-head { font-size: 0.75rem; }

  /* The fixed footer follows the block's width instead of the viewport. */
  body.sidepanel.webapp .legal-footer {
    width: min(920px, 100% - 64px);
    margin-inline: auto;
    border-inline: 1px solid var(--color-divider);
  }
}