diff --git a/app/static/app-shell.css b/app/static/app-shell.css
index 7265c84..3135685 100644
--- a/app/static/app-shell.css
+++ b/app/static/app-shell.css
@@ -108,3 +108,843 @@ body { background: var(--shell-bg); }
   .global-topbar-username { display: none !important; }
   .main { padding: calc(var(--shell-topbar-height) + 1rem) 0.75rem 0.75rem 0.75rem !important; }
 }
+
+
+
+
+/* ===== mobile shell scaling tune ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 46px;
+    --shell-rail-closed: 34px;
+  }
+
+  .sidebar {
+    padding: 0.5rem 0.2rem 0.75rem 0.2rem !important;
+  }
+
+  .sidebar-toggle {
+    width: 20px !important;
+    height: 15px !important;
+    flex: 0 0 20px !important;
+  }
+
+  .sidebar-top {
+    min-height: 30px !important;
+    margin-bottom: 0.65rem !important;
+    padding: 0 0.35rem !important;
+  }
+
+  .nav-list {
+    gap: 0.2rem !important;
+  }
+
+  .nav-link {
+    padding: 0.55rem 0.3rem !important;
+    border-radius: 9px !important;
+  }
+
+  .nav-link-short {
+    font-size: 0.72rem !important;
+    min-width: 0.8rem !important;
+  }
+
+  .main {
+    padding: calc(var(--shell-topbar-height) + 0.55rem) 0.55rem 0.7rem 0.55rem !important;
+  }
+
+  .global-topbar {
+    min-height: var(--shell-topbar-height) !important;
+    padding: 0.3rem 0.55rem 0.3rem 0.45rem !important;
+  }
+
+  .global-topbar-right {
+    gap: 0.3rem !important;
+    max-width: calc(100vw - 3rem) !important;
+  }
+
+  .global-topbar-user {
+    line-height: 1 !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.7rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.58rem !important;
+  }
+
+  .global-topbar-logout {
+    padding: 0.28rem 0.55rem !important;
+    border-radius: 8px !important;
+    font-size: 0.82rem !important;
+  }
+
+  .global-topbar .badge {
+    padding: 0.18rem 0.42rem !important;
+    font-size: 0.62rem !important;
+  }
+}
+/* ===== end mobile shell scaling tune ===== */
+
+
+/* ===== mobile topbar normalize ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 42px;
+    --shell-rail-closed: 34px;
+  }
+
+  .global-topbar {
+    min-height: var(--shell-topbar-height) !important;
+    padding: 0.22rem 0.45rem 0.22rem 0.38rem !important;
+  }
+
+  .global-topbar-right {
+    gap: 0.22rem !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+    overflow: visible !important;
+  }
+
+  .global-topbar-user {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-end !important;
+    line-height: 1 !important;
+    min-width: 0 !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.68rem !important;
+    line-height: 1 !important;
+    font-weight: 700 !important;
+  }
+
+  .global-topbar-username {
+    display: block !important;
+    font-size: 0.54rem !important;
+    line-height: 1 !important;
+    opacity: 0.95 !important;
+    margin-top: 0.08rem !important;
+  }
+
+  .global-topbar .badge {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0.58rem !important;
+    padding: 0.14rem 0.34rem !important;
+    border-radius: 999px !important;
+    white-space: nowrap !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.72rem !important;
+    padding: 0.22rem 0.46rem !important;
+    min-height: 0 !important;
+    border-radius: 10px !important;
+    white-space: nowrap !important;
+  }
+}
+/* ===== end mobile topbar normalize ===== */
+
+
+/* ===== mobile topbar pass 2 ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 38px;
+    --shell-rail-closed: 34px;
+  }
+
+  .global-topbar {
+    min-height: var(--shell-topbar-height) !important;
+    padding: 0.14rem 0.35rem 0.14rem 0.3rem !important;
+  }
+
+  .global-topbar-right {
+    gap: 0.18rem !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .global-topbar-user {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-end !important;
+    justify-content: center !important;
+    line-height: 1 !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.63rem !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+  }
+
+  .global-topbar-username {
+    display: block !important;
+    font-size: 0.49rem !important;
+    line-height: 1 !important;
+    margin-top: 0.05rem !important;
+    opacity: 0.95 !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.54rem !important;
+    line-height: 1 !important;
+    padding: 0.12rem 0.28rem !important;
+    min-height: 0 !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.66rem !important;
+    line-height: 1 !important;
+    padding: 0.18rem 0.38rem !important;
+    min-height: 1.7rem !important;
+    border-radius: 999px !important;
+  }
+}
+/* ===== end mobile topbar pass 2 ===== */
+
+
+/* ===== mobile content offset fix ===== */
+@media (max-width: 900px) {
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.95rem) !important;
+  }
+
+  .main-content {
+    padding-top: 0.15rem !important;
+  }
+
+  .global-topbar {
+    z-index: 1001 !important;
+  }
+}
+/* ===== end mobile content offset fix ===== */
+
+
+
+
+/* ===== dedicated mobile nav button ===== */
+.mobile-nav-toggle {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .sidebar-toggle {
+    display: none !important;
+  }
+
+  .mobile-nav-toggle {
+    display: flex !important;
+    position: fixed !important;
+    top: 0.55rem !important;
+    left: 0.55rem !important;
+    z-index: 1300 !important;
+    width: 28px !important;
+    height: 22px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    align-items: stretch !important;
+    min-height: 0 !important;
+  }
+
+  .mobile-nav-toggle span {
+    display: block !important;
+    width: 100% !important;
+    height: 3px !important;
+    border-radius: 999px !important;
+    background: #cbd5e1 !important;
+  }
+
+  .sidebar {
+    padding-top: 2.6rem !important;
+  }
+}
+/* ===== end dedicated mobile nav button ===== */
+
+
+/* ===== mobile nav refine ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 38px;
+    --shell-rail-closed: 32px;
+  }
+
+  .mobile-nav-toggle {
+    top: 0.8rem !important;
+    left: 0.42rem !important;
+    width: 22px !important;
+    height: 16px !important;
+    z-index: 1300 !important;
+  }
+
+  .mobile-nav-toggle span {
+    height: 2px !important;
+    background: #dbe4f0 !important;
+  }
+
+  .sidebar {
+    width: var(--shell-rail-closed) !important;
+    padding-top: 3.2rem !important;
+    padding-left: 0.12rem !important;
+    padding-right: 0.12rem !important;
+  }
+
+  .app-shell.nav-open .sidebar {
+    width: 170px !important;
+  }
+
+  .nav-list {
+    gap: 0.16rem !important;
+  }
+
+  .nav-link {
+    padding: 0.46rem 0.18rem !important;
+    border-radius: 10px !important;
+  }
+
+  .nav-link-short {
+    font-size: 0.66rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.85rem) !important;
+    padding-left: 0.45rem !important;
+    padding-right: 0.45rem !important;
+    padding-bottom: 0.6rem !important;
+  }
+
+  .global-topbar {
+    padding-left: 2.45rem !important;
+    padding-right: 0.32rem !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.61rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.47rem !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.5rem !important;
+    padding: 0.1rem 0.26rem !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.63rem !important;
+    padding: 0.16rem 0.34rem !important;
+    min-height: 1.55rem !important;
+  }
+}
+/* ===== end mobile nav refine ===== */
+
+
+/* ===== mobile refine 3 ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 36px;
+    --shell-rail-closed: 28px;
+  }
+
+  .mobile-nav-toggle {
+    top: 0.72rem !important;
+    left: 0.34rem !important;
+    width: 20px !important;
+    height: 15px !important;
+  }
+
+  .sidebar {
+    width: var(--shell-rail-closed) !important;
+    padding-top: 3.05rem !important;
+    padding-left: 0.08rem !important;
+    padding-right: 0.08rem !important;
+  }
+
+  .app-shell.nav-open .sidebar {
+    width: 158px !important;
+  }
+
+  .nav-link {
+    padding: 0.4rem 0.12rem !important;
+    border-radius: 9px !important;
+  }
+
+  .nav-link-short {
+    font-size: 0.62rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.8rem) !important;
+    padding-left: 0.8rem !important;
+    padding-right: 0.42rem !important;
+    padding-bottom: 0.55rem !important;
+  }
+
+  .global-topbar {
+    padding-left: 2.15rem !important;
+    padding-right: 0.28rem !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.58rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.44rem !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.47rem !important;
+    padding: 0.08rem 0.22rem !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.58rem !important;
+    padding: 0.14rem 0.3rem !important;
+    min-height: 1.42rem !important;
+  }
+}
+/* ===== end mobile refine 3 ===== */
+
+
+
+
+/* ===== mobile overlap/layout fix ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 44px;
+    --shell-rail-closed: 26px;
+  }
+
+  .mobile-nav-toggle {
+    top: 0.82rem !important;
+    left: 0.34rem !important;
+    width: 20px !important;
+    height: 15px !important;
+  }
+
+  .sidebar {
+    width: var(--shell-rail-closed) !important;
+    padding-top: 3.2rem !important;
+    padding-left: 0.06rem !important;
+    padding-right: 0.06rem !important;
+  }
+
+  .app-shell.nav-open .sidebar {
+    width: 154px !important;
+  }
+
+  .nav-link {
+    padding: 0.34rem 0.08rem !important;
+    border-radius: 8px !important;
+  }
+
+  .nav-link-short {
+    font-size: 0.58rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 1.15rem) !important;
+    padding-left: 0.95rem !important;
+    padding-right: 0.42rem !important;
+    padding-bottom: 0.55rem !important;
+  }
+
+  .main-content {
+    padding-top: 0.28rem !important;
+  }
+
+  .global-topbar {
+    min-height: var(--shell-topbar-height) !important;
+    padding-top: 0.16rem !important;
+    padding-bottom: 0.16rem !important;
+    padding-left: 2.25rem !important;
+    padding-right: 0.28rem !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.58rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.44rem !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.47rem !important;
+    padding: 0.08rem 0.22rem !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.58rem !important;
+    padding: 0.14rem 0.3rem !important;
+    min-height: 1.42rem !important;
+  }
+}
+/* ===== end mobile overlap/layout fix ===== */
+
+
+/* ===== mobile side gap tighten ===== */
+@media (max-width: 900px) {
+  .main {
+    padding-left: 0.38rem !important;
+    padding-right: 0.18rem !important;
+  }
+
+  .main-content {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .detail-sticky-header,
+  .workspace-grid,
+  .detail-view-mode-bar,
+  .card {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+/* ===== end mobile side gap tighten ===== */
+
+
+/* ===== mobile topbar trim ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 38px;
+  }
+
+  .global-topbar {
+    min-height: var(--shell-topbar-height) !important;
+    padding-top: 0.08rem !important;
+    padding-bottom: 0.08rem !important;
+    padding-left: 2.1rem !important;
+    padding-right: 0.22rem !important;
+  }
+
+  .mobile-nav-toggle {
+    top: 0.62rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.85rem) !important;
+  }
+
+  .global-topbar-right {
+    gap: 0.14rem !important;
+  }
+}
+/* ===== end mobile topbar trim ===== */
+
+
+/* ===== mobile topbar blue height fix ===== */
+@media (max-width: 900px) {
+  :root {
+    --shell-topbar-height: 30px;
+  }
+
+  .global-topbar {
+    height: var(--shell-topbar-height) !important;
+    min-height: var(--shell-topbar-height) !important;
+    max-height: var(--shell-topbar-height) !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-left: 2.1rem !important;
+    padding-right: 0.22rem !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .global-topbar-right {
+    height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.14rem !important;
+  }
+
+  .global-topbar-user {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    line-height: 1 !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.56rem !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.42rem !important;
+    line-height: 1 !important;
+    margin-top: 0.02rem !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.45rem !important;
+    padding: 0.06rem 0.2rem !important;
+    line-height: 1 !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.56rem !important;
+    padding: 0.12rem 0.28rem !important;
+    min-height: 1.3rem !important;
+    line-height: 1 !important;
+  }
+
+  .mobile-nav-toggle {
+    top: 0.48rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 1.0rem) !important;
+  }
+
+  .sidebar {
+    padding-top: 2.7rem !important;
+  }
+}
+/* ===== end mobile topbar blue height fix ===== */
+
+
+/* ===== mobile logout tune ===== */
+@media (max-width: 900px) {
+  .global-topbar-logout {
+    font-size: 0.52rem !important;
+    line-height: 1 !important;
+    padding: 0.08rem 0.24rem !important;
+    min-height: 1.1rem !important;
+    border-radius: 999px !important;
+    border: 1px solid rgba(255,255,255,0.12) !important;
+    box-shadow: none !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.43rem !important;
+    padding: 0.05rem 0.18rem !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.54rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.4rem !important;
+  }
+
+  .global-topbar-right {
+    gap: 0.1rem !important;
+  }
+}
+/* ===== end mobile logout tune ===== */
+
+
+/* ===== mobile header gap + logout square ===== */
+@media (max-width: 900px) {
+  .global-topbar-logout {
+    border-radius: 10px !important;
+    padding: 0.1rem 0.24rem !important;
+    min-height: 1.08rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.55rem) !important;
+  }
+
+  .main-content {
+    padding-top: 0.02rem !important;
+  }
+}
+/* ===== end mobile header gap + logout square ===== */
+
+
+/* ===== mobile rail cover fix ===== */
+@media (max-width: 900px) {
+  .sidebar {
+    background: #04163a !important;
+    box-shadow: 2px 0 0 #04163a !important;
+    z-index: 1205 !important;
+  }
+
+  .mobile-nav-toggle {
+    z-index: 1305 !important;
+  }
+
+  .global-topbar {
+    z-index: 1200 !important;
+  }
+
+  .main {
+    position: relative !important;
+    z-index: 1 !important;
+  }
+}
+/* ===== end mobile rail cover fix ===== */
+
+
+/* ===== mobile left offset fix ===== */
+@media (max-width: 900px) {
+  .main {
+    padding-left: 1.15rem !important;
+  }
+
+  .main-content {
+    margin-left: 0.1rem !important;
+  }
+}
+/* ===== end mobile left offset fix ===== */
+
+
+
+
+/* ===== mobile sidebar brand cleanup ===== */
+@media (max-width: 900px) {
+  .brand,
+  .sidebar-section-title {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .sidebar {
+    overflow-x: hidden !important;
+  }
+
+  .app-shell.nav-open .sidebar {
+    width: 154px !important;
+  }
+
+  .app-shell:not(.nav-open) .nav-link-text,
+  .app-shell:not(.nav-open) .brand,
+  .app-shell:not(.nav-open) .sidebar-section-title {
+    display: none !important;
+  }
+}
+/* ===== end mobile sidebar brand cleanup ===== */
+
+
+/* ===== mobile side letters raise ===== */
+@media (max-width: 900px) {
+  .sidebar {
+    padding-top: 2.35rem !important;
+  }
+
+  .nav-list {
+    margin-top: -0.18rem !important;
+  }
+
+  .nav-link {
+    padding-top: 0.28rem !important;
+    padding-bottom: 0.28rem !important;
+  }
+}
+/* ===== end mobile side letters raise ===== */
+
+
+/* ===== mobile side letters nudge up ===== */
+@media (max-width: 900px) {
+  .sidebar {
+    padding-top: 2.05rem !important;
+  }
+
+  .nav-list {
+    margin-top: -0.08rem !important;
+  }
+}
+/* ===== end mobile side letters nudge up ===== */
+
+
+/* ===== mobile hamburger-to-letters gap tighten ===== */
+@media (max-width: 900px) {
+  .sidebar {
+    padding-top: 1.52rem !important;
+  }
+
+  .nav-list {
+    margin-top: -0.28rem !important;
+    gap: 0.08rem !important;
+  }
+}
+/* ===== end mobile hamburger-to-letters gap tighten ===== */
+
+
+/* ===== mobile shell typography normalize ===== */
+@media (max-width: 900px) {
+  .nav-link-short {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 600 !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 600 !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.56rem !important;
+    line-height: 1 !important;
+  }
+
+  .global-topbar .badge {
+    font-size: 0.58rem !important;
+    line-height: 1 !important;
+  }
+
+  .global-topbar-logout {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+  }
+}
+/* ===== end mobile shell typography normalize ===== */
+
+
+
+
+/* ===== mobile spacing pass ===== */
+@media (max-width: 900px) {
+  .sidebar {
+    padding-top: 1.18rem !important;
+  }
+
+  .nav-list {
+    margin-top: -0.42rem !important;
+    gap: 0.02rem !important;
+  }
+
+  .nav-link {
+    padding-top: 0.18rem !important;
+    padding-bottom: 0.18rem !important;
+  }
+
+  .main {
+    padding-top: calc(var(--shell-topbar-height) + 0.18rem) !important;
+    padding-left: 0.62rem !important;
+    padding-right: 0.10rem !important;
+    padding-bottom: 0.50rem !important;
+  }
+
+  .main-content {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+    margin-left: 0 !important;
+  }
+}
+/* ===== end mobile spacing pass ===== */
diff --git a/app/static/app.css b/app/static/app.css
index 47da974..635fcec 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -2155,3 +2155,1566 @@ table {
   }
 }
 /* ===== end detail page mobile split restore ===== */
+
+
+
+
+
+
+/* ===== detail mobile controlled zoom / pan ===== */
+@media (max-width: 900px) {
+  /* keep general UI close to previous size */
+  .main-content {
+    font-size: 1rem !important;
+  }
+
+  /* document detail should behave more like a desktop canvas on mobile */
+  .detail-sticky-header,
+  .workspace-grid {
+    min-width: 1100px !important;
+  }
+
+  /* do not collapse the detail workspace into a single column */
+  .workspace-grid {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr) !important;
+    gap: 1rem !important;
+  }
+
+  /* allow horizontal panning inside the page instead of browser zoom gymnastics */
+  .main,
+  .main-content {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* keep top controls readable but not oversized */
+  .detail-sticky-header .topbar {
+    flex-wrap: nowrap !important;
+  }
+
+  .detail-sticky-header .topbar .badges {
+    width: auto !important;
+    max-width: 50% !important;
+    margin-left: auto !important;
+    justify-content: flex-end !important;
+  }
+
+  .detail-doc-actions-row {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: flex-end !important;
+    gap: 0.6rem !important;
+    flex-wrap: wrap !important;
+  }
+
+  .detail-doc-type-form,
+  .detail-review-flags-form,
+  .detail-trash-form {
+    width: auto !important;
+  }
+
+  .detail-doc-type-form button,
+  .detail-review-flags-form button,
+  .detail-trash-form button {
+    width: auto !important;
+  }
+
+  .queue-nav-row .button-link {
+    flex: 0 0 auto !important;
+  }
+
+  /* OCR/editor should stay comfortable to edit */
+  .editor-wrap textarea,
+  .line-numbers {
+    font-size: 0.96rem !important;
+    line-height: 1.52 !important;
+  }
+}
+/* ===== end detail mobile controlled zoom / pan ===== */
+
+
+/* ===== mobile detail view modes ===== */
+.detail-view-mode-bar {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .detail-view-mode-bar {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0 0 0.85rem 0;
+    position: sticky;
+    top: 3.8rem;
+    z-index: 35;
+    background: rgba(243,245,249,0.96);
+    padding: 0.35rem 0;
+  }
+
+  .detail-view-mode-button {
+    appearance: none;
+    border: 1px solid var(--border);
+    background: var(--panel);
+    color: var(--text);
+    border-radius: 999px;
+    padding: 0.5rem 0.85rem;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .detail-view-mode-button.active {
+    background: var(--accent);
+    color: #fff;
+    border-color: var(--accent);
+  }
+
+  body.detail-mode-preview .workspace-grid,
+  body.detail-mode-review .workspace-grid {
+    min-width: 0 !important;
+    grid-template-columns: 1fr !important;
+  }
+
+  body.detail-mode-preview .workspace-grid > section:last-child {
+    display: none !important;
+  }
+
+  body.detail-mode-review .workspace-grid > section:first-child {
+    display: none !important;
+  }
+
+  body.detail-mode-preview .detail-sticky-header,
+  body.detail-mode-review .detail-sticky-header {
+    min-width: 0 !important;
+  }
+
+  body.detail-mode-preview .preview-frame,
+  body.detail-mode-review .preview-frame,
+  body.detail-mode-preview .preview-image,
+  body.detail-mode-review .preview-image {
+    height: 72vh !important;
+  }
+}
+/* ===== end mobile detail view modes ===== */
+
+
+/* ===== mobile main button tighten ===== */
+@media (max-width: 900px) {
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button {
+    font-size: 0.82rem !important;
+    padding: 0.42rem 0.72rem !important;
+    border-radius: 9px !important;
+  }
+
+  .main-content .detail-view-mode-button {
+    font-size: 0.84rem !important;
+    padding: 0.42rem 0.85rem !important;
+    border-radius: 999px !important;
+  }
+
+  .main-content .queue-nav-row .button-link,
+  .main-content .detail-trash-form button,
+  .main-content .detail-review-flags-form button,
+  .main-content .detail-doc-type-form button,
+  .main-content #toggle-path-edit,
+  .main-content .btn,
+  .main-content .button-row button {
+    font-size: 0.8rem !important;
+    padding: 0.4rem 0.68rem !important;
+  }
+
+  .main-content input,
+  .main-content select,
+  .main-content textarea {
+    font-size: 16px !important;
+  }
+}
+/* ===== end mobile main button tighten ===== */
+
+
+/* ===== mobile detail compact polish ===== */
+@media (max-width: 900px) {
+  .main-content {
+    font-size: 1rem !important;
+  }
+
+  .page-title {
+    font-size: 1.1rem !important;
+    line-height: 1.08 !important;
+    margin-bottom: 0.15rem !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.78rem !important;
+    line-height: 1.2 !important;
+    margin-top: 0 !important;
+  }
+
+  .detail-sticky-header {
+    padding-bottom: 0.35rem !important;
+    margin-bottom: 0.55rem !important;
+  }
+
+  .detail-sticky-header .topbar {
+    gap: 0.45rem !important;
+    margin-bottom: 0.4rem !important;
+  }
+
+  .detail-sticky-header .topbar .badges {
+    gap: 0.3rem !important;
+  }
+
+  .detail-sticky-header .topbar .badge {
+    font-size: 0.68rem !important;
+    padding: 0.18rem 0.45rem !important;
+  }
+
+  .card {
+    padding: 0.7rem !important;
+    margin-bottom: 0.7rem !important;
+    border-radius: 16px !important;
+  }
+
+  .card-title {
+    font-size: 0.95rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .detail-doc-actions-row {
+    gap: 0.45rem !important;
+  }
+
+  .detail-doc-type-form,
+  .detail-review-flags-form,
+  .detail-trash-form {
+    gap: 0.45rem !important;
+  }
+
+  .detail-check-label {
+    gap: 0.22rem !important;
+    font-size: 0.8rem !important;
+  }
+
+  .main-content label {
+    font-size: 0.8rem !important;
+    margin-bottom: 0.15rem !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    padding: 0.52rem 0.68rem !important;
+    border-radius: 12px !important;
+    font-size: 16px !important;
+  }
+
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button {
+    font-size: 0.76rem !important;
+    padding: 0.38rem 0.62rem !important;
+    border-radius: 10px !important;
+  }
+
+  .detail-view-mode-bar {
+    gap: 0.35rem !important;
+    margin: 0 0 0.55rem 0 !important;
+    top: 3.3rem !important;
+  }
+
+  .detail-view-mode-button {
+    min-width: 0 !important;
+    border-radius: 999px !important;
+    padding: 0.42rem 0.75rem !important;
+    font-size: 0.78rem !important;
+  }
+
+  .right-pane-tabs {
+    gap: 0.35rem !important;
+    margin-bottom: 0.55rem !important;
+    padding-bottom: 0.45rem !important;
+  }
+
+  .right-pane-tabs .tab-button {
+    border-radius: 999px !important;
+    padding: 0.38rem 0.7rem !important;
+    font-size: 0.74rem !important;
+  }
+
+  .queue-nav-row {
+    gap: 0.4rem !important;
+    margin-top: 0.45rem !important;
+  }
+
+  .queue-nav-row .button-link {
+    padding: 0.38rem 0.6rem !important;
+  }
+
+  .preview-card {
+    margin-top: 0.1rem !important;
+  }
+
+  .preview-frame,
+  .preview-image {
+    height: 58vh !important;
+    min-height: 420px !important;
+  }
+
+  .editor-wrap textarea,
+  .line-numbers {
+    font-size: 0.88rem !important;
+    line-height: 1.42 !important;
+  }
+
+  .button-row {
+    gap: 0.45rem !important;
+  }
+
+  p {
+    margin: 0.45rem 0 !important;
+  }
+}
+/* ===== end mobile detail compact polish ===== */
+
+
+/* ===== mobile detail refine 2 ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header {
+    margin-bottom: 0.4rem !important;
+    padding-bottom: 0.2rem !important;
+  }
+
+  .detail-sticky-header .topbar {
+    align-items: flex-start !important;
+    gap: 0.3rem !important;
+  }
+
+  .detail-sticky-header .topbar > div:first-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .page-title {
+    font-size: 1rem !important;
+    line-height: 1.05 !important;
+    margin: 0 !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.74rem !important;
+    line-height: 1.15 !important;
+    margin: 0.08rem 0 0 0 !important;
+  }
+
+  .detail-sticky-header .topbar .badges {
+    gap: 0.22rem !important;
+    flex-wrap: wrap !important;
+    justify-content: flex-end !important;
+    max-width: 48% !important;
+  }
+
+  .detail-sticky-header .topbar .badge {
+    font-size: 0.64rem !important;
+    padding: 0.16rem 0.4rem !important;
+  }
+
+  .detail-sticky-header > .card > div {
+    gap: 0.5rem !important;
+  }
+
+  .detail-doc-actions-row {
+    display: grid !important;
+    grid-template-columns: 1fr auto !important;
+    column-gap: 0.45rem !important;
+    row-gap: 0.45rem !important;
+    align-items: end !important;
+  }
+
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: 1fr auto !important;
+    gap: 0.45rem !important;
+    align-items: end !important;
+    width: 100% !important;
+  }
+
+  .detail-doc-type-form > div:first-child {
+    min-width: 0 !important;
+  }
+
+  .detail-review-flags-form {
+    grid-column: 1 / -1 !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.4rem !important;
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  .detail-trash-form {
+    grid-column: 1 / -1 !important;
+    width: auto !important;
+  }
+
+  .detail-trash-form button {
+    width: auto !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    padding: 0.46rem 0.62rem !important;
+  }
+
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button {
+    font-size: 0.73rem !important;
+    padding: 0.34rem 0.58rem !important;
+  }
+
+  .detail-view-mode-bar {
+    margin: 0 0 0.42rem 0 !important;
+  }
+
+  .detail-view-mode-button {
+    font-size: 0.74rem !important;
+    padding: 0.36rem 0.64rem !important;
+  }
+
+  .right-pane-tabs {
+    gap: 0.28rem !important;
+    margin-bottom: 0.45rem !important;
+    padding-bottom: 0.38rem !important;
+  }
+
+  .right-pane-tabs .tab-button {
+    font-size: 0.71rem !important;
+    padding: 0.34rem 0.58rem !important;
+  }
+
+  .queue-nav-row {
+    gap: 0.34rem !important;
+  }
+
+  .queue-nav-row .button-link {
+    padding: 0.34rem 0.56rem !important;
+  }
+}
+/* ===== end mobile detail refine 2 ===== */
+
+
+/* ===== mobile title spacing tweak ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .topbar > div:first-child {
+    padding-right: 0.5rem !important;
+  }
+
+  .page-title {
+    margin-bottom: 0.22rem !important;
+  }
+
+  .page-subtitle {
+    margin-top: 0.08rem !important;
+    margin-bottom: 0.18rem !important;
+  }
+}
+/* ===== end mobile title spacing tweak ===== */
+
+
+/* ===== mobile document header gap fix ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .topbar {
+    margin-bottom: 0.7rem !important;
+  }
+
+  .detail-sticky-header .topbar > div:first-child {
+    padding-bottom: 0.35rem !important;
+  }
+
+  .page-title {
+    margin: 0 0 0.28rem 0 !important;
+  }
+
+  .page-subtitle {
+    margin: 0 !important;
+    line-height: 1.2 !important;
+  }
+}
+/* ===== end mobile document header gap fix ===== */
+
+
+/* ===== mobile subtitle to card gap ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .topbar {
+    margin-bottom: 0.15rem !important;
+  }
+
+  .detail-sticky-header > .card {
+    margin-top: 0.85rem !important;
+  }
+
+  .page-title {
+    margin: 0 0 0.16rem 0 !important;
+  }
+
+  .page-subtitle {
+    margin: 0 !important;
+    line-height: 1.18 !important;
+  }
+}
+/* ===== end mobile subtitle to card gap ===== */
+
+
+/* ===== inspired mobile polish ===== */
+@media (max-width: 900px) {
+  /* Jira-like: compact context header */
+  .detail-sticky-header {
+    background: rgba(243,245,249,0.98) !important;
+    padding-bottom: 0.18rem !important;
+    margin-bottom: 0.38rem !important;
+  }
+
+  .detail-sticky-header .topbar {
+    align-items: flex-start !important;
+    gap: 0.35rem !important;
+    margin-bottom: 0.28rem !important;
+  }
+
+  .detail-sticky-header .topbar > div:first-child {
+    min-width: 0 !important;
+    flex: 1 1 auto !important;
+    padding-right: 0.45rem !important;
+  }
+
+  .page-title {
+    font-size: 1.02rem !important;
+    line-height: 1.08 !important;
+    margin: 0 0 0.14rem 0 !important;
+    font-weight: 700 !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.74rem !important;
+    line-height: 1.18 !important;
+    color: var(--text-muted) !important;
+    margin: 0 !important;
+  }
+
+  .detail-sticky-header .topbar .badges {
+    max-width: 46% !important;
+    gap: 0.22rem !important;
+    justify-content: flex-end !important;
+    align-items: flex-start !important;
+  }
+
+  .detail-sticky-header .topbar .badge {
+    font-size: 0.63rem !important;
+    padding: 0.15rem 0.38rem !important;
+    border-radius: 999px !important;
+  }
+
+  /* Asana-like: tighter top action card */
+  .detail-sticky-header > .card {
+    margin-top: 0.55rem !important;
+    padding: 0.62rem !important;
+  }
+
+  .detail-sticky-header > .card > div {
+    gap: 0.42rem !important;
+  }
+
+  .detail-doc-actions-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: flex-end !important;
+    gap: 0.38rem !important;
+  }
+
+  .detail-doc-type-form,
+  .detail-review-flags-form,
+  .detail-trash-form {
+    gap: 0.35rem !important;
+  }
+
+  .detail-check-label {
+    gap: 0.2rem !important;
+    font-size: 0.77rem !important;
+  }
+
+  /* Airtable-like: cleaner mode switch pills */
+  .detail-view-mode-bar {
+    gap: 0.32rem !important;
+    margin: 0 0 0.5rem 0 !important;
+    top: 3.05rem !important;
+    padding: 0.2rem 0 !important;
+  }
+
+  .detail-view-mode-button {
+    font-size: 0.72rem !important;
+    padding: 0.34rem 0.62rem !important;
+    border-radius: 999px !important;
+    border-width: 1px !important;
+  }
+
+  /* Cleaner section tabs */
+  .right-pane-tabs {
+    gap: 0.26rem !important;
+    margin-bottom: 0.42rem !important;
+    padding-bottom: 0.34rem !important;
+  }
+
+  .right-pane-tabs .tab-button {
+    font-size: 0.7rem !important;
+    padding: 0.32rem 0.56rem !important;
+    border-radius: 999px !important;
+  }
+
+  /* Smaller mobile controls */
+  .main-content button,
+  .main-content .button-link {
+    font-size: 0.74rem !important;
+    padding: 0.34rem 0.56rem !important;
+    border-radius: 10px !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    padding: 0.44rem 0.58rem !important;
+    border-radius: 11px !important;
+    font-size: 16px !important;
+  }
+
+  .queue-nav-row {
+    gap: 0.3rem !important;
+    margin-top: 0.35rem !important;
+  }
+
+  .queue-nav-row .button-link {
+    padding: 0.32rem 0.52rem !important;
+  }
+}
+/* ===== end inspired mobile polish ===== */
+
+
+/* ===== mobile micro polish ===== */
+@media (max-width: 900px) {
+  .page-subtitle {
+    max-width: 92% !important;
+    word-break: break-word !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.88rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .detail-sticky-header > .card {
+    margin-bottom: 0.45rem !important;
+  }
+
+  .detail-view-mode-bar {
+    margin-top: 0.15rem !important;
+  }
+}
+/* ===== end mobile micro polish ===== */
+
+
+/* ===== mobile button normalize ===== */
+@media (max-width: 900px) {
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button,
+  .main-content #toggle-path-edit,
+  .main-content .btn,
+  .main-content .global-topbar-logout {
+    font-size: 0.72rem !important;
+    line-height: 1.1 !important;
+    padding: 0.34rem 0.62rem !important;
+    border-radius: 999px !important;
+    min-height: 2.2rem !important;
+  }
+
+  .main-content .tab-button.active,
+  .main-content .detail-view-mode-button.active {
+    border-radius: 999px !important;
+  }
+
+  .detail-doc-type-form button,
+  .detail-review-flags-form button,
+  .detail-trash-form button,
+  .queue-nav-row .button-link,
+  .button-row button {
+    font-size: 0.72rem !important;
+    padding: 0.34rem 0.62rem !important;
+    min-height: 2.2rem !important;
+    border-radius: 999px !important;
+  }
+
+  .right-pane-tabs .tab-button,
+  .detail-view-mode-button {
+    min-height: 2.1rem !important;
+    padding: 0.34rem 0.62rem !important;
+    font-size: 0.72rem !important;
+  }
+
+  .detail-sticky-header .topbar .badge {
+    font-size: 0.61rem !important;
+    padding: 0.16rem 0.38rem !important;
+    border-radius: 999px !important;
+  }
+
+  .main-content label {
+    font-size: 0.78rem !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.82rem !important;
+  }
+}
+/* ===== end mobile button normalize ===== */
+
+
+/* ===== mobile button pass 2 ===== */
+@media (max-width: 900px) {
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button,
+  .main-content #toggle-path-edit,
+  .main-content .btn {
+    font-size: 0.68rem !important;
+    line-height: 1 !important;
+    padding: 0.18rem 0.42rem !important;
+    min-height: 1.95rem !important;
+    border-radius: 999px !important;
+  }
+
+  .right-pane-tabs .tab-button,
+  .detail-view-mode-button,
+  .button-row button,
+  .queue-nav-row .button-link,
+  .detail-doc-type-form button,
+  .detail-review-flags-form button,
+  .detail-trash-form button {
+    font-size: 0.68rem !important;
+    line-height: 1 !important;
+    padding: 0.18rem 0.42rem !important;
+    min-height: 1.95rem !important;
+    border-radius: 999px !important;
+  }
+
+  .detail-sticky-header .topbar .badge {
+    font-size: 0.58rem !important;
+    line-height: 1 !important;
+    padding: 0.12rem 0.3rem !important;
+  }
+
+  .detail-view-mode-bar {
+    gap: 0.26rem !important;
+  }
+
+  .right-pane-tabs {
+    gap: 0.24rem !important;
+  }
+
+  .main-content label {
+    font-size: 0.76rem !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.78rem !important;
+  }
+}
+/* ===== end mobile button pass 2 ===== */
+
+
+/* ===== mobile top card button match ===== */
+@media (max-width: 900px) {
+  .detail-doc-type-form button,
+  .detail-review-flags-form button,
+  .detail-trash-form button,
+  #toggle-path-edit,
+  .queue-nav-row .button-link,
+  .button-row button,
+  .right-pane-tabs .tab-button,
+  .detail-view-mode-button {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    min-height: 2.15rem !important;
+    padding: 0.24rem 0.62rem !important;
+    border-radius: 999px !important;
+  }
+
+  .detail-doc-type-form button,
+  .detail-review-flags-form button,
+  .detail-trash-form button,
+  #toggle-path-edit {
+    min-width: 0 !important;
+  }
+
+  .detail-doc-actions-row {
+    gap: 0.32rem !important;
+  }
+
+  .queue-nav-row {
+    gap: 0.28rem !important;
+  }
+
+  .detail-sticky-header > .card {
+    margin-top: 0.35rem !important;
+  }
+}
+/* ===== end mobile top card button match ===== */
+
+
+/* ===== mobile scale refine ===== */
+@media (max-width: 900px) {
+  .page-title {
+    font-size: 0.96rem !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.7rem !important;
+  }
+
+  .detail-sticky-header > .card,
+  .card {
+    padding: 0.56rem !important;
+    border-radius: 15px !important;
+  }
+
+  .main-content label {
+    font-size: 0.72rem !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    font-size: 15px !important;
+    padding: 0.38rem 0.52rem !important;
+    border-radius: 10px !important;
+  }
+
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button,
+  .main-content #toggle-path-edit,
+  .main-content .btn {
+    font-size: 0.64rem !important;
+    padding: 0.14rem 0.38rem !important;
+    min-height: 1.8rem !important;
+    border-radius: 999px !important;
+  }
+
+  .right-pane-tabs,
+  .detail-view-mode-bar,
+  .queue-nav-row {
+    gap: 0.2rem !important;
+  }
+
+  .detail-view-mode-button,
+  .right-pane-tabs .tab-button {
+    font-size: 0.64rem !important;
+    min-height: 1.8rem !important;
+    padding: 0.14rem 0.4rem !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.74rem !important;
+  }
+}
+/* ===== end mobile scale refine ===== */
+
+
+/* ===== mobile control density 3 ===== */
+@media (max-width: 900px) {
+  .page-title {
+    font-size: 0.92rem !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.66rem !important;
+  }
+
+  .detail-sticky-header > .card,
+  .card {
+    padding: 0.5rem !important;
+    border-radius: 14px !important;
+  }
+
+  .main-content label {
+    font-size: 0.69rem !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    font-size: 14px !important;
+    padding: 0.34rem 0.48rem !important;
+    border-radius: 10px !important;
+  }
+
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button,
+  .main-content #toggle-path-edit,
+  .main-content .btn {
+    font-size: 0.6rem !important;
+    padding: 0.12rem 0.34rem !important;
+    min-height: 1.68rem !important;
+    border-radius: 999px !important;
+  }
+
+  .detail-view-mode-button,
+  .right-pane-tabs .tab-button {
+    font-size: 0.6rem !important;
+    min-height: 1.68rem !important;
+    padding: 0.12rem 0.36rem !important;
+  }
+
+  .queue-nav-row,
+  .detail-view-mode-bar,
+  .right-pane-tabs {
+    gap: 0.16rem !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.7rem !important;
+  }
+}
+/* ===== end mobile control density 3 ===== */
+
+
+
+
+/* ===== mobile card density tweak 4 ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .topbar {
+    margin-bottom: 0.45rem !important;
+  }
+
+  .page-title {
+    font-size: 0.9rem !important;
+    line-height: 1.08 !important;
+    margin: 0 0 0.12rem 0 !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.64rem !important;
+    line-height: 1.18 !important;
+    margin: 0 !important;
+  }
+
+  .detail-sticky-header > .card,
+  .card {
+    padding: 0.46rem !important;
+    border-radius: 14px !important;
+  }
+
+  .main-content label {
+    font-size: 0.67rem !important;
+  }
+
+  .main-content input[type="text"],
+  .main-content input[type="date"],
+  .main-content select,
+  .main-content textarea {
+    font-size: 14px !important;
+    padding: 0.32rem 0.46rem !important;
+    border-radius: 10px !important;
+  }
+
+  .main-content button,
+  .main-content .button-link,
+  .main-content .tab-button,
+  .main-content .detail-view-mode-button,
+  .main-content #toggle-path-edit,
+  .main-content .btn {
+    font-size: 0.58rem !important;
+    padding: 0.11rem 0.32rem !important;
+    min-height: 1.62rem !important;
+    border-radius: 999px !important;
+  }
+
+  .detail-view-mode-button,
+  .right-pane-tabs .tab-button {
+    font-size: 0.58rem !important;
+    min-height: 1.62rem !important;
+    padding: 0.11rem 0.34rem !important;
+  }
+
+  .queue-nav-row,
+  .detail-view-mode-bar,
+  .right-pane-tabs {
+    gap: 0.14rem !important;
+  }
+
+  #proposed_storage_path_input {
+    font-size: 0.68rem !important;
+  }
+}
+/* ===== end mobile card density tweak 4 ===== */
+
+
+/* ===== mobile top card layout fix ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header > .card form[action$="/save-pdf"] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 0.38rem !important;
+  }
+
+  .detail-sticky-header > .card form[action$="/save-pdf"] > div:first-child {
+    width: 100% !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+  }
+
+  #path-override-hint {
+    white-space: normal !important;
+    line-height: 1.2 !important;
+  }
+
+  .detail-sticky-header > .card form[action$="/save-pdf"] > button {
+    align-self: flex-start !important;
+    margin-right: 0.28rem !important;
+  }
+
+  .detail-sticky-header > .card .queue-nav-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.22rem !important;
+    margin-top: 0.28rem !important;
+  }
+
+  .detail-sticky-header > .card .queue-nav-row .button-link {
+    flex: 0 0 auto !important;
+  }
+}
+/* ===== end mobile top card layout fix ===== */
+
+
+
+
+/* ===== mobile path buttons row fix ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header > .card form[action$="/save-pdf"] {
+    display: grid !important;
+    grid-template-columns: 1fr auto auto !important;
+    column-gap: 0.22rem !important;
+    row-gap: 0.32rem !important;
+    align-items: end !important;
+  }
+
+  .detail-sticky-header > .card form[action$="/save-pdf"] > div:first-child {
+    grid-column: 1 / -1 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  .detail-sticky-header > .card form[action$="/save-pdf"] > button {
+    align-self: center !important;
+    margin: 0 !important;
+  }
+
+  #toggle-path-edit {
+    justify-self: start !important;
+  }
+
+  .detail-sticky-header > .card form[action$="/save-pdf"] > button[type="submit"] {
+    justify-self: start !important;
+  }
+
+  .detail-sticky-header > .card .queue-nav-row {
+    margin-top: 0.32rem !important;
+  }
+}
+/* ===== end mobile path buttons row fix ===== */
+
+
+/* ===== mobile detail header tighten ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .topbar {
+    margin-bottom: 0.18rem !important;
+  }
+
+  .detail-sticky-header > .card {
+    margin-top: 0.12rem !important;
+  }
+
+  .page-title {
+    margin-bottom: 0.06rem !important;
+  }
+}
+/* ===== end mobile detail header tighten ===== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== canonical mobile top card compact ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header > .card {
+    padding: 0.28rem !important;
+  }
+
+  .detail-sticky-header .topbar {
+    margin-bottom: 0.12rem !important;
+  }
+
+  .detail-sticky-header form,
+  .detail-sticky-header .form-field {
+    margin-bottom: 0 !important;
+  }
+
+  .detail-doc-actions-row {
+    gap: 0.32rem !important;
+    align-items: center !important;
+    flex-wrap: wrap !important;
+  }
+
+  .detail-doc-type-form,
+  .detail-review-flags-form,
+  .detail-trash-form {
+    gap: 0.22rem !important;
+    align-items: center !important;
+  }
+
+  .detail-sticky-header form[action$="/save-document-type"] button,
+  .detail-sticky-header form[action$="/save-review-flags"] button,
+  .detail-sticky-header form[action$="/move-to-trash"] button {
+    font-size: 0.70rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.46rem !important;
+    min-height: 1.46rem !important;
+    padding: 0 0.30rem !important;
+    border-radius: 999px !important;
+    width: auto !important;
+  }
+
+  .detail-sticky-header input[type="text"],
+  .detail-sticky-header select {
+    font-size: 0.84rem !important;
+    min-height: 1.72rem !important;
+    padding: 0.18rem 0.42rem !important;
+  }
+
+  .detail-sticky-header label {
+    font-size: 0.68rem !important;
+    margin-bottom: 0.06rem !important;
+  }
+
+  .detail-sticky-header form[action$="/save-pdf"] {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: end !important;
+    gap: 0.18rem !important;
+  }
+
+  .detail-sticky-header form[action$="/save-pdf"] > div:first-child {
+    flex: 1 1 100% !important;
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+
+  .detail-sticky-header form[action$="/save-pdf"] > button {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.50rem !important;
+    min-height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    width: auto !important;
+  }
+
+  .detail-sticky-header .queue-nav-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.12rem !important;
+    margin-top: 0.14rem !important;
+  }
+
+  .detail-sticky-header .queue-nav-row .button-link {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    min-height: 1.50rem !important;
+    height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    width: auto !important;
+    flex: 0 0 auto !important;
+    white-space: nowrap !important;
+  }
+
+  #path-override-hint {
+    margin-top: 0.10rem !important;
+    font-size: 0.66rem !important;
+    line-height: 1.14 !important;
+  }
+}
+/* ===== end canonical mobile top card compact ===== */
+
+
+/* ===== queue simplify polish ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .queue-nav-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.12rem !important;
+    margin-top: 0.14rem !important;
+  }
+
+  .detail-sticky-header .queue-nav-row .button-link {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    min-height: 1.50rem !important;
+    height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    width: auto !important;
+    flex: 0 0 auto !important;
+    white-space: nowrap !important;
+  }
+}
+/* ===== end queue simplify polish ===== */
+
+
+/* ===== path row inline cleanup ===== */
+@media (max-width: 900px) {
+  #path-override-hint {
+    display: none !important;
+  }
+
+  .detail-save-pdf-form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.12rem !important;
+    align-items: end !important;
+  }
+
+  .detail-path-row {
+    display: flex !important;
+    align-items: end !important;
+    gap: 0.12rem !important;
+    width: 100% !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .detail-path-row > div:first-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .detail-save-pdf-form > button[type="submit"] {
+    width: auto !important;
+    margin-left: auto !important;
+  }
+
+  #toggle-path-edit {
+    width: auto !important;
+    flex: 0 0 auto !important;
+    align-self: end !important;
+  }
+}
+/* ===== end path row inline cleanup ===== */
+
+
+
+
+/* ===== save document into nav row ===== */
+@media (max-width: 900px) {
+  .detail-save-pdf-form {
+    display: block !important;
+  }
+
+  .detail-path-row {
+    display: flex !important;
+    align-items: end !important;
+    gap: 0.12rem !important;
+    width: 100% !important;
+    flex-wrap: nowrap !important;
+    margin-bottom: 0.12rem !important;
+  }
+
+  .detail-path-row > div:first-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .detail-save-pdf-form > button[type="submit"] {
+    display: none !important;
+  }
+
+  .detail-sticky-header .queue-nav-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.12rem !important;
+    margin-top: 0.12rem !important;
+    align-items: center !important;
+  }
+
+  .detail-sticky-header .queue-nav-row::before {
+    content: "Save Document";
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    min-height: 1.50rem !important;
+    height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    white-space: nowrap !important;
+    border: 1px solid #d7dce5 !important;
+    background: #ffffff !important;
+    color: #1f2937 !important;
+    box-sizing: border-box !important;
+    order: -1 !important;
+  }
+}
+/* ===== end save document into nav row ===== */
+
+
+/* ===== queue button vertical align fix ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header .queue-nav-row .button-link {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    vertical-align: middle !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+/* ===== end queue button vertical align fix ===== */
+
+
+/* ===== trash button into nav row ===== */
+@media (max-width: 900px) {
+  .detail-trash-inline {
+    display: inline-flex !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    order: -0.5 !important;
+  }
+
+  .detail-trash-inline button {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    min-height: 1.50rem !important;
+    height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    white-space: nowrap !important;
+  }
+}
+/* ===== end trash button into nav row ===== */
+
+
+/* ===== flags inline with document type ===== */
+@media (max-width: 900px) {
+  .detail-doc-type-form {
+    display: flex !important;
+    align-items: end !important;
+    gap: 0.16rem !important;
+    flex-wrap: wrap !important;
+    width: 100% !important;
+  }
+
+  .detail-doc-type-form > div:first-child {
+    flex: 1 1 100% !important;
+    min-width: 0 !important;
+  }
+
+  .detail-check-inline {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.20rem !important;
+    white-space: nowrap !important;
+    margin: 0 !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+  }
+
+  .detail-check-inline input[type="checkbox"] {
+    width: 0.92rem !important;
+    height: 0.92rem !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.50rem !important;
+    min-height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+  }
+
+  .detail-review-flags-form {
+    margin: 0 !important;
+  }
+
+  .detail-review-flags-form button {
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.50rem !important;
+    min-height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+  }
+}
+/* ===== end flags inline with document type ===== */
+
+
+/* ===== unified top card controls ===== */
+@media (max-width: 900px) {
+  .detail-sticky-header > .card {
+    padding: 0.28rem !important;
+  }
+
+  .detail-doc-actions-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    margin-bottom: 0.10rem !important;
+  }
+
+  .unified-top-form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    flex: 1 1 auto !important;
+    margin: 0 !important;
+  }
+
+  .detail-type-input-wrap {
+    flex: 1 1 100% !important;
+    min-width: 0 !important;
+  }
+
+  .detail-type-input-wrap input {
+    width: 100% !important;
+  }
+
+  .detail-check-inline {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.18rem !important;
+    white-space: nowrap !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+  }
+
+  .detail-check-inline input[type="checkbox"] {
+    width: 0.90rem !important;
+    height: 0.90rem !important;
+    margin: 0 !important;
+  }
+
+  .unified-flags-form {
+    display: inline-flex !important;
+    align-items: end !important;
+    margin: 0 !important;
+  }
+
+  .top-pill-button,
+  .detail-sticky-header .queue-nav-row .button-link,
+  .detail-trash-inline button,
+  .detail-sticky-header .queue-nav-row::before {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.50rem !important;
+    min-height: 1.50rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    white-space: nowrap !important;
+    box-sizing: border-box !important;
+  }
+
+  .detail-save-pdf-form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.10rem !important;
+    margin-bottom: 0.10rem !important;
+  }
+
+  .detail-path-row {
+    display: flex !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    width: 100% !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .detail-path-row > div:first-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .detail-save-pdf-form > button[type="submit"] {
+    display: none !important;
+  }
+
+  .detail-sticky-header .queue-nav-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.10rem !important;
+    margin-top: 0.10rem !important;
+    align-items: center !important;
+  }
+
+  #path-override-hint {
+    display: none !important;
+  }
+}
+/* ===== end unified top card controls ===== */
diff --git a/app/templates/base.html b/app/templates/base.html
index 7f4555d..c516de3 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,11 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Document Processor{% endblock %}</title>
-    <link rel="stylesheet" href="/static/app.css?v=26">
-    <link rel="stylesheet" href="/static/app-shell.css?v=26">
+    <link rel="stylesheet" href="/static/app.css?v=87">
+    <link rel="stylesheet" href="/static/app-shell.css?v=66">
 </head>
 <body>
+<button id="mobile-nav-toggle" class="mobile-nav-toggle" type="button" aria-label="Toggle navigation">
+  <span></span><span></span><span></span>
+</button>
     <div class="app-shell">
         {% include "partials/sidebar.html" %}
         {% include "partials/header.html" %}
@@ -18,47 +22,53 @@
         </main>
     </div>
 
-    <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        const menuToggle = document.getElementById("menu-toggle");
-        const appShell = document.querySelector(".app-shell");
+    
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  const menuToggle = document.getElementById("menu-toggle");
+  const mobileNavToggle = document.getElementById("mobile-nav-toggle");
+  const appShell = document.querySelector(".app-shell");
+  if (appShell) {
+    const toggleNav = () => appShell.classList.toggle("nav-open");
 
-        if (menuToggle && appShell) {
-            const toggleNav = () => appShell.classList.toggle("nav-open");
-            menuToggle.addEventListener("click", toggleNav);
-            menuToggle.addEventListener("keydown", (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    toggleNav();
-                }
-            });
+    if (menuToggle) {
+      menuToggle.addEventListener("click", toggleNav);
+      menuToggle.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleNav();
         }
+      });
+    }
 
-        const tabButtons = document.querySelectorAll("[data-tab]");
-        const tabPanels = document.querySelectorAll("[data-panel]");
+    if (mobileNavToggle) {
+      mobileNavToggle.addEventListener("click", toggleNav);
+    }
+  }
 
-        if (tabButtons.length && tabPanels.length) {
-            const activateTab = (target) => {
-                tabButtons.forEach((btn) => {
-                    btn.classList.toggle("active", btn.getAttribute("data-tab") === target);
-                });
-                tabPanels.forEach((panel) => {
-                    panel.classList.toggle("active", panel.getAttribute("data-panel") === target);
-                });
-            };
+  const modeButtons = document.querySelectorAll("[data-detail-mode]");
+  if (modeButtons.length) {
+    const body = document.body;
+    const key = "documentDetailMobileMode";
+    const saved = localStorage.getItem(key) || "split";
 
-            tabButtons.forEach((btn) => {
-                btn.addEventListener("click", () => {
-                    const target = btn.getAttribute("data-tab");
-                    activateTab(target);
+    const applyMode = (mode) => {
+      body.classList.remove("detail-mode-split", "detail-mode-preview", "detail-mode-review");
+      body.classList.add("detail-mode-" + mode);
+      modeButtons.forEach((btn) => {
+        btn.classList.toggle("active", btn.dataset.detailMode === mode);
+      });
+      localStorage.setItem(key, mode);
+    };
 
-                    const url = new URL(window.location.href);
-                    url.searchParams.set("tab", target);
-                    window.history.replaceState({}, "", url.toString());
-                });
-            });
-        }
+    applyMode(saved);
+
+    modeButtons.forEach((btn) => {
+      btn.addEventListener("click", () => applyMode(btn.dataset.detailMode));
     });
-    </script>
+  }
+});
+</script>
+
 </body>
 </html>
diff --git a/app/templates/base.html.rebuild_bak b/app/templates/base.html.rebuild_bak
new file mode 100644
index 0000000..cac2c67
--- /dev/null
+++ b/app/templates/base.html.rebuild_bak
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Document Processor{% endblock %}</title>
+    <link rel="stylesheet" href="/static/app.css?v=15">
+</head>
+<body>
+    <div class="app-shell">
+        {% include "partials/sidebar.html" %}
+        {% include "partials/header.html" %}
+
+        <main class="main">
+            <div class="main-content">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+
+    <script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const menuToggle = document.getElementById("menu-toggle");
+        const appShell = document.querySelector(".app-shell");
+        if (!menuToggle || !appShell) return;
+
+        const toggleNav = () => appShell.classList.toggle("nav-open");
+
+        menuToggle.addEventListener("click", toggleNav);
+        menuToggle.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleNav();
+            }
+        });
+    });
+    </script>
+</body>
+</html>
diff --git a/app/templates/documents/detail.html b/app/templates/documents/detail.html
index c9457c0..2973363 100644
--- a/app/templates/documents/detail.html
+++ b/app/templates/documents/detail.html
@@ -46,9 +46,10 @@
                 </div>
             </div>            <div class="card" style="margin-bottom: 0;">
                 <div style="display:flex; flex-direction:column; gap:0.75rem;">
+                    
                     <div class="detail-doc-actions-row">
-                        <form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form">
-                            <div style="position:relative;">
+                        <form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form unified-top-form">
+                            <div class="detail-type-input-wrap" style="position:relative;">
                                 <label for="document_type_input">Document type</label>
                                 <input
                                     id="document_type_input"
@@ -61,59 +62,57 @@
                                 >
                                 <div id="document-type-suggestions" style="display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid #d7dce5; border-radius:12px; margin-top:0.35rem; max-height:220px; overflow-y:auto; box-shadow:0 10px 24px rgba(15,23,42,0.10);"></div>
                             </div>
-                            <button type="submit" style="height:38px;">Update</button>
-                        </form>
 
-                        <form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form">
-                            <label class="detail-check-label">
+                            <label class="detail-check-label detail-check-inline">
                                 <input type="checkbox" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
                                 <span>Approved</span>
                             </label>
-                            <label class="detail-check-label">
+
+                            <label class="detail-check-label detail-check-inline">
                                 <input type="checkbox" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
                                 <span>Excluded</span>
                             </label>
-                            <button type="submit" style="height:38px;">Save flags</button>
+
+                            <button type="submit" class="top-pill-button">Update</button>
                         </form>
 
-                        <form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form">
-                            <button class="danger" type="submit" style="height:38px;">Move to trash</button>
+                        <form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form unified-flags-form">
+                            <button type="submit" class="top-pill-button">Save flags</button>
                         </form>
                     </div>
 
-                    <form method="post" action="/documents/{{ document.document_id }}/save-pdf" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
-                        <div style="flex:1; min-width:260px;">
-                            <label for="proposed_storage_path_input">Proposed path</label>
-                            <input
-                                id="proposed_storage_path_input"
-                                type="text"
-                                name="output_path"
-                                value="{{ proposed_storage_path }}"
-                                data-default-path="{{ proposed_storage_path }}"
-                                readonly
-                                style="width:100%;"
-                            >
-                            <div id="path-override-hint" style="margin-top:0.35rem; font-size:0.85rem; color:#6b7280;">
-                                Uses the system path unless manually edited.
+                    <form method="post" action="/documents/{{ document.document_id }}/save-pdf" class="detail-save-pdf-form" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
+                        <div class="detail-path-row" style="display:flex; align-items:flex-end; gap:0.6rem; width:100%; flex-wrap:nowrap;">
+                            <div style="flex:1; min-width:260px;">
+                                <label for="proposed_storage_path_input">Proposed path</label>
+                                <input
+                                    id="proposed_storage_path_input"
+                                    type="text"
+                                    name="output_path"
+                                    value="{{ proposed_storage_path }}"
+                                    data-default-path="{{ proposed_storage_path }}"
+                                    readonly
+                                    style="width:100%;"
+                                >
                             </div>
+                            <button type="button" id="toggle-path-edit" class="top-pill-button">Edit path</button>
                         </div>
-                        <button type="button" id="toggle-path-edit" style="height:38px;">Edit path</button>
-                        <button type="submit" class="btn btn-primary" style="height:38px;">Save Document</button>
+                        <button type="submit" class="btn btn-primary top-pill-button">Save Document</button>
                     </form>
+
                 </div>
 
                 <div class="queue-nav-row">
-                    {% if prev_doc %}
-                        <a class="button-link" href="/documents/{{ prev_doc.document_id }}">← Previous</a>
-                    {% endif %}
-                    {% if next_doc %}
-                        <a class="button-link" href="/documents/{{ next_doc.document_id }}">Next →</a>
-                    {% endif %}
+                    <form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form detail-trash-inline">
+                        <button class="danger" type="submit">Move to trash</button>
+                    </form>
+                    <a class="button-link" href="/queue/">Back to Queue</a>
                     {% if next_ocr_doc %}
-                        <a class="button-link" href="/documents/{{ next_ocr_doc.document_id }}">Next OCR review</a>
-                    {% endif %}
-                    {% if next_fields_doc %}
-                        <a class="button-link" href="/documents/{{ next_fields_doc.document_id }}">Next field extraction</a>
+                        <a class="button-link" href="/documents/{{ next_ocr_doc.document_id }}">Next in Queue</a>
+                    {% elif next_fields_doc %}
+                        <a class="button-link" href="/documents/{{ next_fields_doc.document_id }}">Next in Queue</a>
+                    {% elif next_doc %}
+                        <a class="button-link" href="/documents/{{ next_doc.document_id }}">Next in Queue</a>
                     {% endif %}
                 </div>
             </div>
@@ -127,6 +126,12 @@
 {% endif %}
 
 
+<div class="detail-view-mode-bar">
+    <button type="button" class="detail-view-mode-button active" data-detail-mode="split">Split</button>
+    <button type="button" class="detail-view-mode-button" data-detail-mode="preview">PDF</button>
+    <button type="button" class="detail-view-mode-button" data-detail-mode="review">Review</button>
+</div>
+
 <div class="workspace-grid">
             <section>
                 <div class="card preview-card">