/* The workspace uses the desktop UI and its styles at larger widths. */
.product-topbar-actions a { text-decoration: none; }
.product-topbar .web-mobile-brand,
.product-topbar .web-mobile-search { display: none; }
.vault-document-toolbar > span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) and (orientation: portrait) {
  .product-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
  }

  .product-main { order: 0; flex: 1; }
  .product-sidebar {
    order: 1;
    display: block;
    flex: none;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--product-line);
  }
  .product-sidebar > :not(nav) { display: none; }
  .product-sidebar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .product-sidebar nav button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 4px 1px;
    font-size: 10px;
    white-space: nowrap;
  }
  .product-sidebar nav button > span { display: block; }
  .product-sidebar nav button > small { display: none; }

  .product-topbar { padding: 0 12px; }
  .product-topbar .web-mobile-brand { display: block; }
  .product-topbar .web-mobile-search { display: inline-flex; }
  .product-topbar-actions { gap: 0; }
  .product-topbar-actions .product-icon-button { width: 42px; height: 44px; }
  .product-topbar-actions > span { display: none; }
  .product-breadcrumb { font-size: 0; gap: 5px; white-space: nowrap; }
  .product-breadcrumb strong { font-size: 13px; }
  .product-breadcrumb svg { display: none; }
  .product-skip-link { left: 12px; }

  .product-page { padding: 24px 16px 36px; }
  .product-page-heading { gap: 14px; }
  .product-page-heading h1 { overflow-wrap: anywhere; }
  .product-reading-path { margin-bottom: 22px; }
  .product-reading-path button { padding-block: 13px; }
  .product-page .product-button { min-height: 42px; }
  .product-continue { min-width: 0; }
  .continue-book h2 { overflow-wrap: anywhere; }

  .product-reader-toolbar { flex-wrap: wrap; padding: 4px 8px; }
  .product-reader-toolbar > div:first-child > span { max-width: 105px; }
  .product-reader-toolbar > div:nth-child(2) > button:nth-child(-n+2) { display: inline-flex; }
  .product-reader-toolbar .product-icon-button { min-width: 31px; height: 42px; }
  .product-reader-toolbar .product-button { min-height: 42px; }
  .product-reader-body.with-ai { display: flex; overflow: hidden; }
  .product-reader-body.with-ai .product-reader-text { display: none; }
  .product-reader-body.with-ai .product-reader-ai { flex: 1 1 0; min-height: 0; }
  .product-reader-body.with-chapters { display: flex; }
  .product-reader-body.with-chapters .product-reader-text { flex: 1; }
  .product-reader-body.with-chapters .product-chapters {
    position: absolute;
    inset: 54px auto 0 0;
    width: min(235px, 78vw);
    z-index: 15;
    box-shadow: 12px 0 24px #27352b15;
  }
  .product-reader-paper { padding-inline: 20px; }
  .product-reader-ai .workflow-nav { padding-inline: 9px; flex-wrap: wrap; }
  .product-reader-ai .center-scroll { min-height: 0; }
  .product-app :is(input:not([type="checkbox"]), textarea, select) { font-size: 16px; }

  .product-roundtable-page .roundtable-workspace { padding: 20px 14px 30px; }
  .roundtable-scene-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .roundtable-scene-tabs button { min-height: 40px; text-align: left; }
  .seminar-methods button { min-height: 60px; }
  .seminar-phase button { min-height: 40px; }
  .product-roundtable-page .roundtable-composer textarea { font-size: 16px; }
  .product-roundtable-page > .product-inspector-drawer { top: 52px; bottom: calc(59px + env(safe-area-inset-bottom)); }

  .vault-navigation { position: relative; }
  .vault-navigation .vault-new-note {
    position: static;
    border: 1px solid var(--product-line);
    background: var(--product-paper);
    min-height: 40px;
    font-size: 12px;
  }
  .vault-navigation { max-height: none; }
  .vault-document-toolbar > span { max-width: 100%; }
  .vault-document-toolbar > div { flex-wrap: wrap; }
  .vault-document-toolbar .product-button { min-height: 42px; font-size: 12px !important; }
  .vault-paper { padding-inline: 18px; }
  .preferences-body .settings-row { min-width: 0; }
  .preferences-body .settings-row > * { min-width: 0; }
  .settings-row input, .settings-row select, .password-field { max-width: 100%; }
}